Recreating the classic snake game using Vue.js
7 min read
The snake game was developed and published by Gremlin Industries in 1976 and since then, many versions of this game was developed all around the world (Check out my favorite slither.io).
Even though I had played this game multiple times, I had never built this game from scratch. I will show you how I went about building this (using illustrations and code snippets), and how you can build one.
Vue.js is not a prerequisite for reading this article. The link to the code is at the end.
🎮 Click here to play my version of the game.
What are the requirements?
- Snake should be able to move in all four directions.
- If the snake eats an apple, the snake size and the score increases by 1.
- If the snake hits the wall or collides with itself, the game is over.
- Display the score and highest score on the screen.
The initial setup
Our game board is an N x N grid (6 x 6 in the image above), where the snake will take up some cells in the grid and the apple will take 1 cell in the grid.
snakeLocation: The snake's current location will be saved in this list. This list will contain the locations of each part of the snake. Each snake part location is again a list of 2 values, the row number of the cell and the column number of the cell. The last value of
snakeLocation is the head of the snake.
snakeDirection: This will be the current direction in which the snake moves. Initially, this will be set to
RIGHT. The other possible directions are
score will save the score of each game and the
maxScore will save the maximum score of all the games.
appleLocation: This is the list that will save the current location of the apple. This list will contain 2 values, the row number of the cell containing the apple and the column number of the cell containing the apple.
Once the game starts
Once the game starts, we want a timer to run every N seconds and it should move the snake in each run.
setInterval will run the
moveSnake function every
The snake movement
In each run, the head of the snake will move by 1 in the direction set in
snakeDirection. So, if the
snakeDirection is set to
RIGHT, the snake's head will move one step to the right.
Once the snake's head moves, the rest of the snake's body will follow 1 step (illustrated below).
The snake eats the apple
When the snake eats the apple, 2 things happen. The snake's size increases by 1 and the apple randomly change its location.
Now, let's check the implementation of the
The moveSnake function
1) The old head is passed to the
getNewSnakeHead function and its returns the new snake's head. This new head is saved in the
getNewSnakeHead function takes the old head and with respect to the direction mentioned in
snakeDirection, updates the head, and returns the head.
2) Once we have the new head, we check, if the new head touched the grid wall using the
isSnakeHeadOutOfGrid function OR if the head collided with itself using the
If any of the functions return
true, the game is over.
3) If both the functions return
false, that means the new snake head did not hit the wall and it did not bite itself, we move the snake.
First, we set the
newSnakeHead in our
Next, we update the rest of the snake's body by moving it one step forward.
We now check if the apple is eaten by the snake and set it in the
If the apple is eaten, we do three things.
- Update the score by 1.
- Increase the size of the snake.
- Get a new location for the apple randomly using the
getRandomAppleLocation function picked a new random location and then checks if this new location is on the snake using
Until a new apple location that is not on the snake is found, a new location gets picked (using the while loop).
Once the game is over, everything is reset to play again. If the new score is greater than the old maximum score, the
maxScore is set to the new
This was fun to build and I hope this was fun to read as well.
🐍Check the code here and 🎮 play again.
Thanks for reading!