Play turboRacer
A unique HTML5 Canvas/JavaScript game, inspired by classic racing games of the past and built on Jake Gordon's JavaScript Racer engine.
Start screen

RACE OVER! Press "W" to race again.

Your best time:

My best time (seconds):

29.6

0 mph This Lap: 0.0 Last Lap: 0.0 Your Fastest Lap: 0.0
Sorry, your browser does not support the <canvas> element.

Making of turboRacer

The JS Racer engine this game is built upon takes care of rendering and controlling a "Super Scaler" style racing game. In the example on the engine's site, it is used to create an OutRun style arcade game.

To create turboRacer, in addition to using the engine's existing functionality (and obviously removing superfluous code), I added additional functionality & original content to develop the engine demo into a full game.

The Game World

  • > Road layouts in the engine are created by adding functions which create straight and curved sections of road. Within these functions, it is possible to define the length, curve severity, and hill gradient of the section. The track layout in turboRacer was created by adding available functions as required and defining their parameters.

  • > Road furniture is added in the same way to road sections, by adding sprite functions, defining their position and specifying which sprite to use.

  • > The road and grass colours are contained within the engine's variables. These variables were changed to define turboRacer's road and grass colours.

Look and Feel

  • > The car handling is also defined by variables in the engine - for example, acceleration/braking speed and how well the car corners. In turboRacer, the values have been set to fairly realistic values for a modern sports car, giving a completely different feel to the engine's default "pure arcade" gameplay.

  • > Car sound functionality has been added from scratch - different sound effects are played depending on whether the car is accelerating, braking, coasting, cornering or crashing. The engine sounds are completely original.

  • > turboRacer's graphics are completely original, rotoscoped vector-style graphics, based on the art used in classic games such as Another World. It was also possible to change to a first-person view just through changing sprite parameters. The game resolution has been fixed at 640x480 to complement the art style.

More Additions

  • >The default barrier collision behaviour has been altered - by default, the car slides along an object when a collision occurs. In turboRacer, the script has been altered so colliding with an object will stop the car. It is possible to drive away from an object you have collied with, by accelerating and steering in the direction you wish to go.

  • > Completely original lap counter code has been added to turboRacer - this allows the game to end after 3 laps, and make turboRacer a "short and sweet" time trial game.

  • > turboRacer has custom HUD styling - a prominent speedo with important lap information overlaid at the top of the screen.

  • Thanks for reading! If you have any comments, please get in touch.