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 hand1.

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.

I'm planning on doing a full breakdown of how to re-create this game, just as soon as I finish off a few other over-due posts. Oh, and I'll be tidying up and simplifying what I wrote a little too.


  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.