Screenshot from Canvas Reaction game

Play Canvas Reaction

Click here to play Canvas Reaction

What is it?

On a rather lengthy car journey, I developed a bit of an addiction for Zwigglers “Chain Rxn” game on a friends iPhone. It’s also available as an online Flash version.

The idea of the game is to seed an initial explosion – creating a chain reaction. The goal is to explode a given number of balls. Each collision generates an additional score. The further away from the original explosion a ball hits, the more points it is worth (exponentially increasing). Obtaining a high score means timing the initial explosion correctly in order to maximise your score – as well as exploding the required minimum number of balls.

This demo is pretty much a clone of the last level of Chain Rxn: explode 54 out of 60 balls whilst obtaining the highest score possible.

Why?

This version is written using pure HTML5 features with JavaScript. It uses the canvas element for the rendering and the audio element for sound. No Flash here! Chain Rxn seemed a prime candidate to demo the features of canvas in modern browsers so, after a bit of late night hacking, here it is.

Because Canvas Reaction uses HTML5 elements it does require a modern browser. I believe it will work in most versions of Firefox 3.0+ as well as recent versions of Safari and Chrome. There may or may not be any sound (when the balls explode) depending on the availability of the audio element and its ability to play ogg files. It also uses the canvas text APIs which are only recently available on most platforms.

Performance seems pretty good in most modern browsers with average hardware. I don’t plan to develop this any further – it’s really just for fun and a chance to play with some HTML5 features. Plus, of course, it’s just a ripoff anyway. Not that Chain Rxn is exactly original of course!