The first game we will develop in this HTML5 Game tutorial, is the Snake game. Many of you will remember this game as a pre-loaded game on old Nokia phones. For those who don’t recognize the game, read the following gameplay description:
The player controls a snake, which roams around on a bordered plane, picking up food, 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. The player cannot stop the snake from moving while the game is in progress, and cannot make the snake go in reverse. source: Wikipedia, Snake game.
Snake is a classic game. The first Snake-like game is from late 70s, (Blockade in 1976, Surround in 1977, Worm in 1978,…). Since then, there have been many versions, so it’s almost all invented. For example, a version with hexagon tiles (Hex Snake). Another example is a HTML5 Multiplayer Snake with node.JS that uses Physics (Snakes).
This is a perfect game for a tutorial. It is simple enough to NOT take us months to develop. And it is also easy to modify and introduce new mechanics, new game options or whathever you want to test.
In this first game, i will cover the following topics:
- New HTML5 elements useful in game development.
- Javascript tutorials. IDEs. jsFiddle.
- Game Loop.
- Game Objects.
- Canvas drawing.
- Animations.
- Events. Controls.
- Collisions.
- UI design with jQuery UI.
- Levels.
- Sound.
- Accelerometer. Phonegap.
- HTML5 Game Engines. CraftyJS.
- Snake game using CraftyJS.
- Physics. Box2dWeb.
- Google Analytics stats. Google Adsense.
- Multiplayer. Node.JS
- Persistence. MongoDB.
- Badges. Achievements.
- Facebook.
