Mini shooting game made with HTML5 Canvas and javascript
JavaScript PHP CSS
Switch branches/tags
Nothing to show
Latest commit ef354e9 Feb 10, 2014 @theburningmonk Update
Failed to load latest commit information.
css initial commit Mar 1, 2011
cursors initial commit Mar 1, 2011
images Signed-off-by: theburningmonk <> Mar 1, 2011
js Signed-off-by: theburningmonk <> Mar 1, 2011

Canvas Blank

Yan Cui



This is a mini-game I made using HTML5's canavs element and uses local storage to remember a player's hi-score.


You can try the live demo at or I've also put together a two-part tutorial (so far) which covers most of the steps I took to made the game:


  • jQuery (in js/jquery)
  • Modernizr (in js/modernizr)
  • MooTools (in js/mootools)


  • js/game/game.classes.js: This file uses MooTools' Class facility to specify a number of different types of targets that can appear in the game, some needs to be shot in order to clear the current stage, others gives the player a small bonus (in time or bullets) and some makes the player's life a little more difficult by deducting the player's HP when they're hit.

  • js/game/game.globalvars.js: This file defines all the global variables used by the 'classes' and 'engine' scripts

  • js/game/game.engine.js: This file is the engine which drives the game, updating the game state and drawing onto the canvas, etc. etc. Right now, the game and drawing are done in the same loop and I haven't done any optimization on the game itself, but the game works as it is (see demo).


  • sunny: Files inside this folder is used by jQuery UI

  • main.css: This file contains all the CSS settings for the game


  • canvas_blank.html: This file contains all the HTML markup for the game, including the initial loading screen