If, for some reason, you are not familiar with the game Snake, Wikipedia explains it:
The player controls a long, thin creature, resembling a snake, which roams around on a bordered plane, picking up food (or some other item), trying to avoid hitting its own tail or the "walls" that surround the playing area. Each time the snake eats a piece of food, its tail grows longer, making the game increasingly difficult. The user controls the direction of the snake's head (up, down, left, or right), and the snake's body follows.
Here is the final product on jsFiddle (click Result to play):
This tutorial will cover:
- Drawing on the canvas
- Handling events in jQuery