Sunday, September 18, 2016

HTML5 and JS Game using Canvas API

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.


Setup 

  1.   Identify constants 
      Constants like Canvas width, height
  2. Setup the Canvas element on the page
  3. Preload assets
    Images, sprites, sounds etc for later use
  4. Install game listeners
    Anything that needs to listen to user interactions

Initialize

  1. Initialize game components
  2. Initialize game state

Paint!

  1. Paint the game state

Update 

  1. Do all the heavy lifting to update states of components as the user interacts.
Repeat Paint and Update until end of Game





Sunday, September 4, 2016