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





1 comment:

  1. If you are new to the site, I advise you to consult professionals who will make you a site or allow you to choose a template for your site in the category go here website templates html5

    ReplyDelete