After recently encountering The Codeplayer (an excellent JS learning resource), I decided to have a stab at the traditional game of snake.
The purpose of this post isn’t to tell you how to code the game, you can find that out here. I’m merely attempting to explain how I approached, found and handled the task.
By the way, if you didn’t already know, I’m a FE developer who knows the basics of JS but I’m by no means a programmer, I enjoy making little projects like this on my Function website to help improve my code skills.
Making the game
If someone would have asked me to make a game of snake without an internet connect then I probably wouldn’t have been able to do it. Now that I’ve complete the task I must admit that I knew almost all the techniques used in the tutorial. The issue is that I don’t possess that programming mentality that would enable me to put all the pieces together and make the thing.
While a game a snake might sound incredibly difficult to make it’s actually based on pretty simple (JS) logic. Here’s the very basic steps of the game
The Basic Movement
- Create a canvas and store the height and width of it into JS variables
- create an array with x and y coordinates and use a for loop to add the starting size of the snake (this will say where the snake is on the canvas)
- detect the snake direction and adjust the snake x and y coordinates, e.g if going right (default) and the snake is 5 long we change x coordinate to 6
- .pop() the tail of the snake (the last number in array) and add the new coordinates above
- .unshift() move the tail to the head of the snake with the new coordinates, e.g. change position
- set a timeout to paint the snake again, if the coordinates change the snake will move
- set up a function that changes the direction variable on key press, this will change the direction variable each time the snake moves, enabling the direction change
The Food
- Create a random “food” square with math math.random() * the size of our canvas
- inside the paint function we check if the head of the snake (first number in array) matches the food square
- if it does then we skip the pop function we mentioned before we skip the pop and just unshift() these new coordinates which paints a new block to the snake without removing one
Other stuff
- Need to check for collisions, so see if any coordinates are more than the canvas width, height. We also need to see if the new coordinates match any of the existing snake coordinates (e.g hitting itself)
- Need to increase the score each time the food is eaten (coordinates match)
And that’s it!!
Obviously there’s a lot more to it than that from a code perspective but that’s the fundamental workings of the game. Once I had reviewed the video tutorial a few times and understood how the game might work I tried to make as much of the game as possible by myself.
I added some extra features myself such as
- Ensuring the food isn’t placed on any of the coordinates of the snake
- Increasing the game speed each time a piece of food is eaten
- Making a simple scoreboard (using ajax and reading/writing to a text file with PHP)
You can play my game here. Try beat the top score if you like.
You can also view my generously commented code here, and you can try the tutorial yourself here .
If you’re feeling daring why not just try make it yourself from my instructions?
Good luck and happy coding!