Okay... so I was on a train home from London a few weeks back, and I got a little bored (the journey takes an hour). So I decided to make myself a game using the <canvas> that I could play to keep myself occupied.

Now I don't normally do anything with the canvas, so this was a nice little challenge for me to see just what I could do without any doc's at hand[1].

The game is rather simple side scroller controlled with the mouse. You have to avoid obstacles. Not too hard. Click game to start.

While making this game I did cheat a little to make my life easier. It was a little late in the evening, so I kinda sorta, used CSS to rotate the canvas so that (0, 0) was the bottom left corner. It just made the collision detection seem easier to me at the time. I was tired when I wrote this… not sure why I thought it would be easier.

canvas {
  width: 100%;
  height: 100%;
  background: #444;
  transform: rotateZ( 180deg ) rotateY( 180deg ); /* why??? */

Beyond that little oddity the game uses a simple animation frame loop to draw all the objects into, and mouse events to move the player.

  1. On my particular train line there are quite a few dead spots and tunnels, so its not even worth trying to use the internet. ↩︎