This is my implementation of a very popular game, which appeared in 1976 and became a standard game for Nokia phones in 1998. You must have already played this. The rules are simple, eat as much food as possible and don’t eat yourself. This game becomes difficult as you go on playing it because the snake gets longer as you eat.
You can play it here.
Now for a bit of technical part, I used HTML5 Canvas to render the game,
window.onkeydown to listen to the arrow keys,
requestAnimationFrame to update the canvas and
localStorage to store player’s high score. Here I am leaving it up to web browsers to decide and maintain the frame rate (FPS) by using
requestAnimationFrame function to update the canvas. After playing the game for a while, you might have noticed that sometimes it is fast and slow sometimes or on different browsers/computers the speed is different, it is because of the
requestAnimationFrame function. Another issue is the size of the canvas is fix (820 x 520).
If you believe this can be made better, you are free to do so. Here is the code on GitHub. The future improvement I can think are –
- Making it multiplayer using socket.io.
- A better UI.
- More steady frame rate.
- Storing score on the server side.
This is my first post on this blog. I wish to create more, better and useful posts. I hope u like it.