Bouncing Cats

Bouncing Cats live demo

This is a technical demo of sorts. Not particularly useful in production but it was fun coding the different components that are wired together that make this work.

A theoretical infinite number (to the extent that your CPU can handle) of objects can be spawned, as each object is independent of one another. They have update and draw methods that are called by the main loop. It tries to stay mostly ignorant of what these objects are and what they do.

//called on every requestAnimationFrame(), up to 60 frames per second at the browser's discretion.
for (var x in this.gameObjects) {
	if (this.gameObjects[x].draw) {
		this.gameObjects[x].draw(dt, this.backBufferContext2D, this.xScroll, this.yScroll);
	}
}

That’s it. That’s the game loop. Pretty simple, huh? Every object has a pretty simple drawing method at the moment, since they’re just square images on a 2D canvas.

this.draw = function(/**Number*/ dt, /**CanvasRenderingContext2D*/ context, /**Number*/ xScroll, /**Number*/ yScroll)
{
	context.drawImage(this.image, this.x - xScroll, this.y - yScroll);
}

Making them move is a little bit more complicated. Currently each object searches for all other colliding objects within the gameObjects stack, though I’d like to optimize this later with space partitioning. I may go into more detail on how that works in another post.