Friday, October 31st, 2008

JSSpeccy: A ZX Spectrum Emulator in JavaScript

Category: Canvas, Fun

<p>[via Simon Willison]

A little bit of Friday JavaScript-craziness for you.

Matt Wescott has created a ZX Spectrum emulator in JavaScript. The Sinclair ZX Spectrum was an old-skool PC from the 80s.

Details:

I especially like how Matt describes himself:

I’m really typecasting myself here. If there were an international “Person most likely to write a Spectrum emulator in Javascript” award, I’d have taken it for the last five years running.

If you crack this thing open, you’ll see Matt is using the Canvas tag to do some interesting things:

The rest is just creative abuse of the element, as usual… it’ll take advantage of the putImageData interface to do the pixel pushing if available (on my machine Firefox has it, Safari doesn’t) and fall back on drawing 1×1 pixel rectangles otherwise. This time I’ve thrown in Google’s ExplorerCanvas as a nod to those poor unfortunates still stuck with Internet Explorer. Incidentally, I’d be curious to know how it rates on Google Chrome (I don’t have an XP/Vista box to test on) – if the hype is true (and it implements the putImageData interface like all good up-to-date browsers should) then I’d expect it to comfortably reach 100% Spectrum speed on modest hardware.

Related Content:

Posted by Brad Neuberg at 7:00 am
9 Comments

++++-
4.5 rating from 24 votes

9 Comments »

Comments feed TrackBack URI

Wow, that’s amazing!

I’m still holding out for the C64. I miss playing Paradroid.

Comment by Diodeus — October 31, 2008

When a browser runs Joust on MAME at full speed, GAME OVER!

Comment by Nosredna — October 31, 2008

I’m playing with the canvas at the moment writing a Mandelbrot fractal explorer. I’ve implemented the same code path as Matt (using putImageData if available, falling back to 1×1 rectangles if not). Unfortunately, from a quick bit of testing, it seems Chrome’s version of webkit doesn’t support the putImageData functionality.

It’s a shame as I imagine it would really fly but the 1×1 rectangle bliting kills any performance gains from the faster JS processing. Currently Firefox 3.1 (with JIT enabled) gives the best performance on my app.

Comment by russh — October 31, 2008

Wow, that was my first ever computer. I got the 64k model which was the zenith of computing at the time. My first program was a cost calculator for the father’s workshop. A day’s worth of calculating by hand could be done on it in a half an hour, until it wouldn’t load off the cassette tape (this was pre hard drive) any more. It took me six long nights to do the program first time around and two short nights the second time, Happy days.
Paul.

Comment by paulhan — October 31, 2008

It just hangs on my XP Firefox 3.0.3, taking up all the CPU, which is killing me since i REALLY want to play Manic Miner again!

Comment by sos — November 1, 2008

russh, one possible hack is to construct data urls with the new image. Concatenating strings might turn out to be faster than the overhead of fillRect.

Comment by cromwellian — November 2, 2008

@russh: Hey there, can we work together to put together a bug report for what you’ve found? Email me at bradneuberg AT AT AT AT google.com.

Comment by Brad Neuberg — November 2, 2008

@cromwellian: Interesting idea! I’ll have a play and post back any results.

Comment by russh — November 5, 2008

That takes me back

Comment by Remedies — November 19, 2008

Leave a comment

You must be logged in to post a comment.