Before you read more about this article, play with the above game. You can control the snake using WASD or the ← ↑ ↓ → keys. Orange block is for food, it'll increase your score. Yellow block is for poison, if eaten, it'll reduce your score. Press Space to pause the game. Press P to resume and R to restart the game. Oh and avoid hitting the white walls!
Background
Snake is a game of simple concept where the player manuevers the snake in all 4 straight directions (reverse movement is not possible i.e. UP, DOWN, LEFT, RIGHT only) to eat the fruit and as a result, the length of the snake increases, making the game difficult for the player. The player will have to prevent the snake to hit the walls or from eating the poison, which will decrease the snake's length, and also prevent it from hitting itself.
History
I remember playing this game, for the first time, on my father's monochrome Nokia 3310 mobile phone (which can still break walls, I guess!) and every 90's kid I knew played this game a lot.
The game was published by Nokia and it was programmed by a Nokia Design Engineer named Taneli Armanto in 1997 for Nokia 6110. The original concept of this game was derived from an arcade game called Blockade, which was published in 1976 by Gremlin Industries. Ever since, there have been so many variations and clones of this game, in fact, there are over 300+ variations of this game for iOS devices alone.
Game mechanics
The game makes use of Linked Lists, which is a simple and dynamic data structure used to store and control the movement of the snake. Below is the pseudocode for each of the game's behaviour:
Movement of the Snake:
for node in the list (always starts from the end of the list):
if node is not equal to head node:
shift the snake's position to node+1 (by making it closer to the snake)
set head node to new position
endfor
Length of the Snake:
nx: current x coordinate of the snake head
ny: current y coordinate of the snake head
fx: x coordinate of the food
fy: y coordinate of the food
px: x coordinate of the poison
py: y coordinate of the poison
if [nx] matches with [fx] and if [ny] matches with [fy]:
push the new cell to the snake's tail node
shift the new cell from tail node to the head node
increment score + 1
if [nx] matches with [px] and if [ny] matches with [py]:
pop the cell from the tail node
shift cell from tail node to head node
decrement life - 1
Collision of the Snake:
nx: current x coordinate of the snake head
ny: current y coordinate of the snake head
sx: x coordinate of the snake cell
sy: y coordinate of the snake cell
wx: x coordinate of the wall cell
wy: y coordinate of the wall cell
for cell in the wall array:
if [nx] matches with [wx] and if [ny] matches with [wy]:
display "game over" message
for cell in the snake list:
if [nx] matches with [sx] and if [ny] matches with [sy]:
display "game over" message
Oh yeah, please feel free to study the source code of this game in order to understand how this game was implemented on Javascript.
What's next?
In my next post, I'll be talking about, the second game that I built in this challenge, Breakout. I hope you've found this article interactive and interesting and yes, have fun playing this game!
Adios Amigo!