HTML 5 Games!!

with JavaScript & Canvas!

By Dan Tello / @dantello5 / greypants on GitHub
Formerly from puma.com/evospeed

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

puma.com/runpumarun

sweet pixel art by @owenshifflett

Canvas.

<canvas></canvas>

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

The Canvas Context


var canvas = new document.createElement('canvas');
var ctx = canvas.getContext('2d');
					

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:

So far we can...

  • Draw things
  • Animate things
  • Next we need to...

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!

Questions?

@dantello5

  • Should I use a Library?
  • Getting game mechanics just right.
  • Level Design Challenges
  • Sound Design
  • Build Debugging Tools
  • Optimization and Performance
  • Working with a Designer