Let’s make Snake with JavaScript

Bumpy ride

As you might have noticed if you gave our current creation a good playthrough – when the snake is of solid length, we can easily make it pass right through itself:

We want the game to end when the snake runs into itself. At this point the controls should freeze, the snake should flash a few times to indicate game over and then the game should start from the start. With this simple plan in mind, let’s proceed to lay out the necessary code.

Let’s first add a new color constant that will give us the color the snake will flash with to our list of “game constants” on top of the file:

Now let’s add a new variable named flashing to our list of “game variables”:

Let’s also make sure to initialize the variable within our resetGame function:

As the game ends, we will use this variable to make the snake flash for a few moments.

We will add another function to our code and name it endGame. This function will get called whenever an end game condition is met. Add it immediately above the resetGame function:

Note that we cleared the game timer in this step. This effectively means that the logic update and the drawing update both stop, so we need a manual call to drawGame while the snake is flashing. In the function we alternate between flashing on and off (true and false) every 400 milliseconds and after this has happened 5 times, we restart the game.

We will also need to alter the drawGame function for it to take this new variable into effect:

Now all that’s left to do is to add an end condition. We will do so by once again revisiting the updateGame function and adding some code to it:

Before we make any changes to the list of snake cells, we check if our next move will make us collide with ourselves. If so, we start the end game sequence and return from the function to prevent it from executing any further. At this point, the game freezes and the flashing sequence begins. You might be wondering what happens with keyboard input at this stage of the game. If you guessed that it is still operating even after we stop the main game timer, you would be correct. However, since the game is not taking input into account by updating game logic while the end game sequence is running, combined with the fact that we reset our direction queue on game reset – the user perceives this as if the keyboard commands are simply unresponsive. Since we reset our variables properly, the commands don’t carry on into the next game instance. If we were working on a more polished title, I would recommend a proper keyboard lock-out for the sake of code cleanliness, but for teaching purposes our current approach will do just fine.

Final product

Our game now plays and feels just like a real game!

We’ve gone through some general hurdles of making a simple game from scratch, we fixed some bugs, we did some testing and some back tracking. In the end we managed to produce a polished and fun Snake clone. If you are new to developing games, this exercise should give you a general insight into the problems you will be facing should you choose to go on and develop more games.

I recommend you don’t stop with what we have coded so far, but go on and code in more stuff and have fun with it! Here are some ideas on how to extend and change the game:

  • Replace the color values in CSS and the color constants in code with your own and tune the look of the game to your liking.
  • Scoring system. Add a score box that keeps track of current score.
  • Highscore system. Extend above functionality to include a list of top 5 scores.
  • Multiple food types. Add different types of food that vary in color and score given. Add poison that kills the player or a powerup that extends the snake by multiple cells.
  • Change the playfield size and cell sizes.
  • Add walls or even multiple levels each with its own layouts.
  • Play around with graphics. Draw each cell as 4 squares, or as a circle. Maybe draw a graphical sprite and replace food with cherry icons.

Think of your own upgrades and code them in. The possibilities are virtually endless!

Download source code

Test in your browser

I hope you enjoyed this tutorial and that you learned a thing or two on the way. If you have questions or criticisms feel free to post them in the comment section.