Train Game – A game made on a train, not about a train.

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.