2tap.comRandom projects and stuff by Russ Hall in London

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!

Occasionally I get the urge to perform a bit of (disclaimer: amusing and non-malicious!) cross-site scripting (XSS) against the odd site I find which is just begging to be abused. Here’s a tool to percent-encode all characters in a URL parameter.

URL/Percent-encoding is used to escape reserved characters in a URL when passing parameters around. For example, a GET parameter with an ampersand in it must be escaped since the browser would treat this character as starting the next variable.

The standard URL encoders take an input and replace all reserved characters with their percent-encoded equivalents. I couldn’t find an online tool to enocde all characters so I knocked up a quick bit of JavaScript to do the job.

Why would I want to do this? When playing around with XSS it’s nicer to hide the full payload in the URL rather than giving away hints as to what’s going to happen with all the unreserved characters still human readable.

So here it is: a JavaScript Percent-Encoder.

I’m not entirely sure why this exists, but here’s a 3 minute video of a trip between Hammersmith and Piccadilly Circus in London (playing at 20x speed). It’s roughly 4 miles of urban assault course carnage.

Not a lot of planning went into this one (read: no planning went into this one) so the production qualities may, unfortunately, rule this out for a BAFTA. That, and the plagiarised unlicensed soundtrack.

Here’s a better quality version encoded in DivX (right click/save as to download – roughly 21mb).

Those with epilepsy should probably give this one a miss!