Making a simple html5 racing game

I've been wanting to try my hand at doing some game development for a while and I finally managed to make a start.

I decided to make a simple driving game using HTML5. I began doing a bit of a search for tutorials which build a simple top view racing game but didn't stumble upon any for HTML5. I did find a flash tutorial which I have used as a starting point.

In this series:

You can see the latest version on github (https://github.com/davetayls/html5racer).

I grabbed a top view sprite of a car and started to build the code.

html5 top view racer

The basic files

I have kept this really simple, so there is just one HTML file and CSS file and then I am adding links to individual JavaScript files manually.

NB. I'm not going to cover the basics of clearing the canvas and triggering another animation timeout as that would make this article unnecessarily long and there is plenty of information out there. You can also take a look through the code on github as it's pretty simple.

The HTML file looks like this:

<!doctype html>
<html>
  <head>
    <title>Simple Racer</title>
    <link href="racer.css" rel="stylesheet">
    <style type="text/css">
      canvas { border: solid 1px #ccc; }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <div>
      Player: x <span id="px">0</span> y <span id="py"></span>
    </div>
    <script src="jquery.js"></script>
    <script src="helpers.js"></script>
    <script src="car.js"></script>
    <script src="racer.js"></script>
  </body>
</html>

helpers.js

The helpers file includes some useful helper methods for working with canvas. One of the really helpful functions which I have picked up from a Creative Js article is the drawRotatedImage function.

var TO_RADIANS = Math.PI/180;
function drawRotatedImage(image, x, y, angle) {

    // save the current co-ordinate system
    // before we screw with it
    context.save();

    // move to the middle of where
    // we want to draw our image
    context.translate(x, y);

    // rotate around that point, converting our
    // angle from degrees to radians
    context.rotate(angle * TO_RADIANS);

    // draw it up and to the left by half the width
    // and height of the image
    context.drawImage(image, -(image.width/2), -(image.height/2));

    // and restore the co-ords to
    // how they were when we began
    context.restore();
}

This function is used to draw the car image on to the canvas at a particular angle.

Movement

I didn't want my car to accelerate and turn in a linear fasion so I altered the acceleration code to use multiplication instead of simple addition and subtraction.

My Car object held all the properties needed to determine the state of how the car is moving.

Car.prototype = {
	x: 0,              // position
	y: 0,
	code: 'player',    // allow players in future
	acceleration: 1.2,
	rotationStep: 5,   // how fast to turn
	rotation: 115,     // current angle facing
	speed: 0,
	speedDecay: 0.97,
	maxSpeed: 7,
	backSpeed: 1.1
}

I also separated out the instructions for accelerating, decelerating and turning from the keyboard event listeners so that I can hook it up to other devices later.

Where Next

I'm now looking in to how to do collision detection, which is proving to be a bit of a brain freeze.

I'll also add an online playable version at some point.