/ JavaScript

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.



  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. ↩︎

William Duyck

William Duyck

I want to make the web a better place for the average user, to help them on their journeys to web literacy and participatory culture, and make great tools to support them in their everyday lives.

Read More