Adventures in game dev

with HTML5 Canvas


I work at Pogo Kid

Be a sucker for a challenge

... there's always an adventure in it


the controller

two timing loops
  1. game logic
  2. drawing

Game logic frame

setTimeout ~ 60 frames per second

Use a self calling function

  function logicFrame(){
    // update players position, listen for collisions etc

    // process the game logic at a target of 60fps
    setTimeout(logicFrame, 1000/60);

Draw frame


  function drawFrame(){
    // kick ass circles and squares



the browser can optimise concurrent animations
together into a single reflow and repaint cycle

  • offload animation timing to the browser
  • higher fidelity (sync with monitor)
  • save's battery (doesn't run when tab not focused)
  • use the rAF shim


the commander

takes the current state and applies

  • interactions
  • time based logic

moves a ship / fires a bullet


    function Ship(){...}
    Ship.prototype = {

      // we need to be able to position it
      x:0, y:0, w:28, h:16

      // it needs to do stuff
      shoot: function(){...}
      jumpLeft: function(){...}
      jumpRight: function(){...}

      // we need to see it
      draw: function(){
        this.sprite.draw(0, this.x, this.y);


    function Invader(){...}
    Invader.prototype = {

      // we need to be able to position it
      x:0, y:0, w:28, h:16,

      // how eeeeeeevil is this invader?
      isHit: false, // not at all if it's hit
      points: 10,   // more points for tougher invaders

      // it needs to do stuff
      checkHit: function(x, y){
        if (distance(this.x, this.y, x, y) < 10){
          this.isHit = true; // KAPOOOOOWWWWW

      // we need to see it
      draw: function(){
        this.sprite.draw(0, this.x, this.y);


can be an utter headache


keyboard, mouse, touch, gestures...

keep state

    shootKey = {
      keyCode: 32, // space
      down: false    };

    window.addEventListener('keydown', function(e){
      if (shootKey.keyCode === e.which){
        shootKey.down = true;

and then use it

    function logicFrame(){
      if (shootKey.down){
    // trigger shot!
    // other game logic
      setTimeout(logicFrame, 1000/60);

Controller Sources

By triggering actions within the logic frame tick
based on state allows you to use other
sources for your controllers

They just need to be able to tell the game
what state they are in

Game states

a game is not a game
if you can't win, lose or draw


the still life painter


a few basic tasks

  1. We're using 2d context
  2. clear the previous frame
  3. Go through each of the objects
    on stage and...
  4. draw ()
    fillStyle, font, fillRect, fillText

A bit of code

    <canvas id="canvas" width="500" height="500"></canvas>

    var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d')

    context.clearRect(0, 0, w, h);
    context.fillStyle = '#000';

2d Games ♥ Sprites


    var img = new Image();
    img.src = '';

    var spriteWidth = 350,
      spriteHeight  = 170,
      pixelsLeft    = 170,
      pixelsTop     = 10,

      // Where are we going to draw
      // the sprite on the canvas      canvasPosX    = 20,
      canvasPosY    = 20
      pixelsLeft,   pixelsTop,
      spriteWidth,  spriteHeight,
      canvasPosX,   canvasPosY,
      spriteWidth,  spriteHeight

Reusable Class

    function Sprite(img, width, height, positions){
      this.img = img;
      this.width = width; this.height = height;
      this.positions = positions;

    Sprite.prototype = {
      draw: function(position, x, y){
          var pos = this.positions[position];
            pos[0], pos[1], // xy position of sprite
            this.width, this.height,
            x, y            // xy position to draw on canvas
            this.width, this.height

Reusable Class

        var sprite = new Sprite(img, 32, 16, [
            // specify a few sprite locations
            [10, 523],  // green
            [131, 523], // pink
            [191, 523]  // hit
        sprite.draw(0, 10, 200);
        sprite.draw(1, 50, 200);
        sprite.draw(2, 90, 200);

Let's play already!

Your challenge...

fork the repo and make the invaders fight back