Spent some time to finally finish my HTML5 game. What better than emulate 'Snake', the classic arcade game.
Snake in HTML5 + JS + Canvas
Here is a brief tutorial.
Snake in HTML5 + JS + Canvas
Here is a brief tutorial.
Setup
- Identify constants Constants like Canvas width, height
- Setup the Canvas element on the page
- Preload assets
Images, sprites, sounds etc for later use - Install game listeners
Anything that needs to listen to user interactions
Initialize
- Initialize game components
- Initialize game state
Paint!
- Paint the game state
Update
- Do all the heavy lifting to update states of components as the user interacts.
Repeat Paint and Update until end of Game