Creative HTML5 and JavaScript Asteroid Game

Play in new window

By way of brain dump, and so that I've got a record of the stuff I need to remember somewhere, here's just list of bits that I picked up throughout the day. Obviously there was tons more, but when you're coding, listening, learning and wrapping your head around trig (something that I'm quite useless at) - less notes are taken

Canvas

• When using colours: HSL's where it's at! Here's some help: http://mothereffinghsl.com
• Remember subpixels drawing, by default you draw between pixels, Mark Pilgrim explains: http://diveintohtml5.org/canvas.html#pixel-madness
• When using beginPath, unless you do moveTo the first use of lineTo will actually move, and not draw a line, i.e. if you do a lineTo without a start, it only moves (in fact because there's no starting point).
• Rotating a canvas rotates around the origin, which by default is top, left. To move the origin of the canvas, use translate.
• save/restore state the drawing style and affects coordinate system - this useful for rotating the canvas drawing, and then resetting the rotation.

For an animation the (pseudo) code looks like this:

var mouseX = 0, mouseY = 0, mouseDown = false, keys = {};
setup(); // initalisation
setInterval(loop, 1000 / 60); // 60 fps

function loop() {
  // 1. handle key or mouse states
  // 2. update position of animated objects: particles, etc
  object.update();
  // 3. draw each object
  object.draw();
}

// capture events, but don't do anything with them
document.addEventListener('mousemove', function (e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
}, false);

Vectors

• Pythagoras can be used to determine whether a point (like a click) is inside an circle drawn on a canvas. However, it requires Math.sqrt which is costly, so instead of using Pythagoras to workout hit testing (for length of vector) - compare the distanced squared:

Instead of:

var distance = Math.sqrt((this.diff.x * this.diff.x) + (this.diff.y*this.diff.y));
return (distance<this.radius);

Use:

var distanceSq = (this.diff.x * this.diff.x) + (this.diff.y*this.diff.y);
return (distanceSq < this.radius * this.radius)

3D

Collision detection in 3D:

var distanceSq3D = (this.diff.x * this.diff.x) + (this.diff.y*this.diff.y) + (this.diff.z * this.diff.z)
return (distanceSq3D < this.radius * this.radius)

• To calculate the new x and y in a 3D space, you need to multiply them by a scale which is worked out from: f/(f+z) = newscale (note that f the field of view - like the zoom on a camera)
• To scale the 3D system properly, the origin must be in the centre of the canvas, this is key to getting the perspective correct: ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2)
• To rotate the y (the yaw), you rotate the y and z axis, which is exactly the same as the distribution code (below in the optimisation tricks), using sin and cos

To get the z-order correct (painters algorithm), you need to sort by the z axis, where points is an array of objects with xyz:

points = points.sort(function (a, b) {
  return a.z >= b.z ? -1 : 1;
});

• If the z is less than -fov (f, i.e. if f=250, and z=-250) it means the z position is behind you - so it should be removed

Optimisation tricks

• When removing an item (or deleted) - like bullets or asteroids, recycle the item: disable it when it's finished with, and add it to an array. Then when you want a new object, try to get it from the pool of spares first, otherwise create a new item.
• Instead of having the keyboard interactivity interrupt the code and update values, track the key presses and check these in the render cycle process.
• (Math.random() * 0xff) <<16 generates a random blue colour (0xff == 0x0000ff == blue), then shift 16 bits and we've now got a random red colour. We could equally get a random green using <<8.
• When placing objects at a random position, if you use x = Math.random() * width (and similarly with y axis) the distribution creates a square shape, which looks odd. This is easy to fix, you create a circular distribution.

To get a circular distribution, rotate around a circle using:

x = Math.sin(angle) * speed; // sin for X
y = Math.cos(angle) * speed; // cos for Y