Latest
As time progresses, canvas applications are becoming more and more impressive. Ben Firshman has written a rather impressive JavaScript NES emulator.
Rather than rewriting the game in JavaScript, JSNES emulates and reads the encoded ROMs displaying the screen within a canvas element.
Ben comments:
I got underway shamelessly porting vNES into Javascript. Although not the most efficient, it didn’t have any of the pointer memory mapping magic associated with emulators written in lower level languages. As such, it was more or less a direct port, bar a few tweaks to compensate for the lack of static typing, and obviously a rewrite of all the I/O.
A selection of the titles demoed.
As everything is happening in JavaScript, JSNES eats a lot of resource so it’s best to try in Chrome.
Please ensure you follow the relevant laws regarding ROMs for your country before trying this demo.
Play JSNES
We all remember that episode of The Simpsons where Homer eats that really hot chili pepper and trips out. Well, Kevin Roast has decided that we all need some trippy peppers in our lives, and has created a canvas demo to supply such a thing!
Trippy Peppers uses a multiple sine-wave effect on an image of hot chili peppers combined with multiple canvas back buffers to generate the final image. Let your eyes drift slightly out of focus for maximum wibblyness.
Trippy...
You’ll need to use Safari 4 or Chrome for this demo, as Kevin jokes:
Firefox finds it too hot too handle!
But seriously, Kevin would appreciate any hints on why Firefox gets upset copying data between the multiple canvas image buffers. He seems to be having issues with putImageData().
View the Trippy Peppers demo
Yvo Schaap has created this incredibly addictive game where a single well placed click will decide whether you pass or fail. There are 12 levels each with a required number of balls that need to be detonated, all from your original explosion.
Explode my lovelies!
Play Chain Reaction
If you ever wanted a goldfish as a child – perhaps from one of those fairground stalls – but was never allowed, now’s your chance. Satoshi Nakajima has created a Gold Fish Simulator which simulates the famous flocking behavior of fish.
Lots of fishies
The application uses a canvas pre-rendering technique, which generates images of fish in array of off-screen canvas elements. It then uses a CSS transform to specify the location and direction of each fish.
The app runs on Safari (4.0 and later), Firefox (3.5 and later) and Google Chrome (4.0 and later).
View the Gold Fish Simulator
Matt West has ported a ZX Spectrum emulator to JavaScript using canvas to output the display. The emulator comes with 10 games to try, including Manic Miner and Jet Set Willy.
Matt comments:
Writing this wasn’t actually such a big deal – the Z80 core was ported from the one in Fuse, with the Perl-and-C-preprocessor-munging trickery still intact, and Javascript is syntactically close enough to C that that wasn’t a mammoth task… The rest is just creative abuse of the <canvas> element… it’ll take advantage of the putImageData interface to do the pixel pushing if available and fall back on drawing 1×1 pixel rectangles otherwise.
The classic Manic Miner
Controls are:
- Up: Q
- Down: A
- Left: O
- Right: P
- Button: Space
- Enter: Enter
Please ensure you follow the relevant laws regarding ROMs for your country before trying this demo.
Play JSSpeccy
As canvas comes closer and closer to replicating the features of Flash; canvas-based cartoons are beginning to appear. Starting with this one, featuring two characters called Tomte and Goat; who explain how you can make your own cartoons in canvas!
A taste of things to come?
The animation is nice and smooth with a couple of nice effects. Flash, get your coat, your number is (almost) up!
View the HTML5 Canvas Animation cartoon
