Workshop › Snake › Step 20 of 28

Crash into the walls

What we are doing

Leaving the board ends the game. Before moving, we check whether the new head would be outside; if so we set gameOver and stop moving.

```js
let gameOver = false

  const hitWall = head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS
  if (hitWall) {
    gameOver = true
    return
  }

  if (!gameOver && time - last >= SPEED) {
```

What it means

• gameOver is a boolean: true or false.
• hitWall is true if the head is left of column 0, past the last column, above row 0 or below the last row (|| means "or").
• On a hit we set gameOver and return before the snake moves, so it stays inside the board.
• The loop only moves while !gameOver (not game over).

Your turn

1. Under let score = 0 write let gameOver = false.
2. In update, under the const head line, write the hitWall check.
3. In loop, add !gameOver && at the start of the if condition.

Skills: Collision detection, Game states

← No U-turns Crash into yourself →

All steps

1. Find the canvas
2. Get the pen
3. Paint the board
4. Think in cells
5. Keep the position in a variable
6. A function that draws
7. A function that moves
8. The game loop
9. Slow it down
10. A direction to move in
11. Steer with the arrow keys
12. A body made of a list
13. Move the whole body
14. Pick a spot for the food
15. Draw the food
16. Eat and grow
17. Never put food on the snake
18. A table of turns
19. No U-turns
20. Crash into the walls
21. Crash into yourself
22. The game over message
23. Show the score
24. One function that starts a game
25. Play again with Space
26. Remember the best score
27. Speed up as you grow
28. Build it yourself: through the walls