Any likenesses to the following athletes in the last slide are purely conincidental.

Canvas.

<canvas></canvas>

• A single DOM element.
• No DOM tree to interact with!
• No free interactivity like buttons, hovers, links, css styling, etc…

Draw all the things!

Pixel things

var image = document.createElement('image');
image.src = ('runner.png');
ctx.drawImage(image, x, y);
						

You can draw:

• <img> elements
• <canvas> elements
• <video> elements

Sprites

Option 1:

ctx.drawImage(
  image,    // source image (spritesheet)
  source.x, // source x (x location within a spritesheet)
  source.y, // source y (y location within a spritesheet)
  width,    // source width
  height,   // source height
  x,        // destination x
  y,        // destination y
  width,    // destination width (must match source width)
  height    // destination height (must match source width)
);
						

Clip with drawImage and move the source image.

Option 2

Make each sprite a canvas object and draw to it.

var spriteCanvas = document.createElement('canvas');
spriteCanvas.width = 50;
spriteCanvas.height = 50;

spriteCtx = spriteCanvas.getContext('2d');

// Animate x and y position of the source image
spriteCtx.drawImage(image, x, y);
						

Know iOS Resource Limits

The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
—developer.apple.com

Vector Things

ctx.fillStyle = "red";

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(150, 150);
ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
ctx.lineTo(30, 30);
ctx.fill();
						

See the Pen spzwq by greypants (@greypants) on CodePen

ANIMATE ALL THE THINGS!

Without jQuery or CSS 3

The Animation Loop

var loop = {
  clearCanvas();
  updateObjects();
  render();
  requestAnimationFrame(loop);
};

Codepen Example

Time-based Animation

• Not all devices are created equal.
• pixels-per-frame VS. pixels-per-second
• Consistent gameplay across devices

setDelta: function() {
  frames.now = Date.now();
  frames.delta = (frames.now - frames.then) / 1000;
  frames.then = frames.now;
}

var velocity = bullet.speed * frames.delta;
bullet.x = bullet.x - velocity;

Example:

Collide all the things!

isCollision: function(a, b) {
  return  a.x <= (b.x + b.width) &&
    b.x <= (a.x + a.width) &&
    a.y <= (b.y + b.height) &&
    b.y <= (a.y + a.height);
}

• Object with Object
• Mouse or Touch with Objects

PUMA.eightBit.debug = true;

HTML5 Audio

var audio = document.createElement('audio');
audio.src = 'audio/pew.ogg';

audio.play();

Garage band is great for sfx!

Putting it all together.

greypants.github.io/BlastEngine

Lets look at some code!

Code Structure

• Be as organized as possible.
• Create, extend, and re-use classes
• Always be refactoring.
• Get code reviews!