Having not written much client side JavaScript for at least a couple of years I thought I’d re-introduce myself to the language, and to the html5 canvas element.
I decided to spend a few hours building a html5 version of the old ZX Spectrum Classic, Lightcycles (1983), which itself was based on Tron. This isn’t exactly a faithful reproduction, it’s more inspired by my memory of the game than it is a conversion of it.
The object of the game is simple enough. You can either play against the computer or against another player. 2 play mode is done old school style and requires both players to share the keyboard - no online network gameplay here!
The aim of the game is to race and trap your opponent. Keep blocking them until they crash into either the edge of the grid or a laser trail.
If you fancy a quick game, click here to play html5 LightCycles. The sourcecode is available on GitHub.
A few things I learnt while writing this simple game:
- Named global objects are a good way to minimising global variable leakage.
- Property names of objects don’t minify/uglify at all, only the object name gets mangled.
- Drawing to the canvas is slower and takes more CPU resources than I had expected.
To get round the CPU load I kept two in memory arrays for the game grid and only drew the differences between the current and last frame to the canvas. I also checked against the grid array for collisions, as checking the canvas directly is even more expensive than drawing to it. There is probably a better way than to draw boxes for each pixel, but I wanted the display to scale to match the screen resolution.
All in all, I had en enjoyable afternoon writing the game. It’s no masterpiece for sure, but it was a useful JavaScript refresher!
