JSSpeccy: A ZX Spectrum emulator in Javascript

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. So here it is – probably the most stereotypical project I’ll ever come up with.

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. (I got 90% of it done on the train journey back from International Vodka Party alongside recording silly songs about tube stations.) The one fiddly bit was working around the places where the Fuse code used low-level C constructs to its advantage: using unions to chop and change between individual registers and 16-bit register pairs, and relying on limited-size C data types (often in pretty subtle ways) to truncate 8-bit and 16-bit values at the right time, whereas Javascript only has integers. (Actually, the really time-consuming bit was debugging it all… luckily, Fuse has a rather excellent test suite too.)

The rest is just creative abuse of the <canvas> 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.

Belorussian translation of this post provided by movavi

98 Responses to “JSSpeccy: A ZX Spectrum emulator in Javascript”

  1. Phil Hackett says:

    Insane! What a fundamentally bad idea. Good work, sir!

  2. [...] nombre es JJSpeccy y ha sido creado por Matt West. Aquí podéis jugar online, o descargarlo y usarlo como queráis. [...]

  3. Shazz says:

    Simply excellent !

  4. [...] emulador online de Spectrum, que se puede usar desde el navegador (incluye diez juegos) o también descargar desde la página oficial (Vía [...]

  5. [...] browser. Matt Westcott (who also made the Antisocial demo) pulled another rabbit out of the hat, JSSpeccy the ZX Spectrum emulator. That’s just way [...]

  6. [...] browser. Matt Westcott (who also made the Antisocial demo) pulled another rabbit out of the hat, JSSpeccy the ZX Spectrum emulator. That’s just way [...]

  7. [...] Ciao a tutti, all’indirizzo http://matt.west.co.tt/spectrum/jsspeccy/ potete trovare un emulatore dello Spectrum scritto interamente in Javascript. Io lo trovo lento ed [...]

  8. [...] Amiga in javascript http://www.chiptune.com/ ZX spectrum in javascript (JSSpeccy): http://matt.west.co.tt/spectrum/jsspeccy/ __________________ XTemu | GeneralEmu | Webcomics ……-.________ —( )_)_______) -> [...]

  9. [...] Westcott创造的JSSpeccy the ZX Spectrum emulator 。 James Urquhart 创造的SCUMM interpreter [...]

  10. tom says:

    nice one. have you checked out the one I made (AS3) ? http://flexiblefactory.co.uk/spectrum

  11. James C says:

    Probably the most impressive, amazing, awesome code I have seen so far this YEAR. (Together with http://flexiblefactory.co.uk/spectrum of course :))

    Thank you both and congratulations for your efforts to convert your ideas into reality.

    I would be interested to know if anyone’s had any success writing an Acorn BBC or Atari ST emulator in Javascript or similar? (I have seen http://atari.isource.net.nz).

    Thanks and BEST regards,
    James

  12. Aaron says:

    It works great with chrome!
    good job..

  13. [...] few months ago, I stumbled across Matt Westcott’s excellent JSSpeccy. I had seen some pretty imaginative canvas creations, but Javascript emulators? What a perfect idea [...]

  14. [...] JavaScript pagalba. Projekto autoriui Ben Firshman kaip jis pats teigia gime perskaičius Matt Westcott straipsniuką apie JSSpeccy biblioteką. Ben [...]

  15. [...] A ZX Spectrum emulator in Javascript. Nothing like playing Super Mario and Contra in [...]

  16. [...] you can. Check out this story! A few months ago, I stumbled across Matt Westcott’s excellent JSSpeccy. I had seen some pretty imaginative canvas creations, but Javascript emulators? What a perfect idea [...]

  17. Alexander says:

    Cool! I was so impressed of your stuff so I have moved my old i8080 emulator to the JavaScript rails. The hardware is the 8-bit Russian computer based on i8080 named Radio-86RK.

    The project site is http://code.google.com/p/radio86/

    It is on Russian because that computer is 99% Russian ;-), but the direct link to the emulator (http://radio86.googlecode.com/files/radio86.html) actually gives a clue how it works like.

    BTW, I’ve found a bit weird logic in your Z80 implementation. For example, a register increment:

    Your implementation is:

    case 0x0c:
    { (z80.c) = ((z80.c) + 1) & 0xff; z80.f = ( z80.f & 0×01 ) | ( (z80.c)==0×80 ? 0×04 : 0 ) | ( (z80.c)&0x0f ? 0 : 0×10 ) | sz53_table[(z80.c)];};

    So I’ve got rid of weird calculation of the parity flag — “( (z80.c)==0×80 ? 0×04 : 0 )” and just use “sz53p_table” instead of “sz53_table” to calculate the parity flag.

    I guess maybe for Z80 it is correct but for I8080 it should be like this:

    case 0x0c: // inr c
    i8080.tstates += 5;
    i8080.c = (i8080.c + 1) & 0xff;
    i8080.f = (i8080.f & 0×01) | (i8080.c & 0x0f ? 0 : 0×10) | sz53p_table[i8080.c];
    break;

    So I had to change the register increment and decrement routines (INR x and DCR x in I8080 notation).

    Maybe it could be useful for you.

    Anyway, thanks for idea.

  18. Alexander: more my implementation (as part of Fuse) than Matt’s really, and it’s right for the Z80: in this case it’s acting as the oVerflow flag to indicate a change of sign rather than as the parity flag. You’ll be right for the 8080 though :-) Cheers!

  19. [...] I stumbled across Matt Westcott’s JSSpeccy and it sparked my imagination. I have a tendency to get trapped by overly ambitious projects, and a [...]

  20. Greg says:

    Awesome!!! Runs on my HTC Magic Android mobile :-)

  21. Simon Richmond says:

    Since you asked it works well on Google Chrome Browser.

  22. Paul says:

    Hi,

    How do I install this on Android?

    I have motorols droid….

  23. matt says:

    Paul: There’s nothing to install – it just runs directly from the web page at jsspeccy.zxdemo.org. (Unless I’m getting the wrong end of the stick, and ‘installing’ a webpage so that you can view it offline is a standard practice on Android phones – in which case, I have no idea…)

  24. [...] been used for a number of unusual projects in the past few years. We’ve had NES emulators, Spectrum emulators, and even Amiga emulators. But a Flash player?… What’s the point of emulating a [...]

  25. Corrado says:

    Great for iPhone users !!!!!
    So, how can I use it with iPhone ?
    It works, but there is no keyboard…
    There is a workaround to brings up the virtual keyboard ?
    There is another way to use it with touch ?
    Think about that THIS emulator can be actually the ONLY ONE solution to emulate Speccy with a non-jailbroken iPhone…..

  26. matt says:

    Nope, no virtual keyboard support… you need to use the ‘joystick’ icon to set up mappings between Spectrum keys and joystick directions, and then you can touch the appropriate areas of the screen to trigger those keys.

  27. random says:

    doesn’t work on nexus one for some reason :(

  28. Gary Newell says:

    This is pure genius. Didn’t think it was possible. Shows what I know

  29. Alex says:

    I loved the spectrum.

    The concept of typing in text and playing a visual game was mindblowing at the time.

  30. [...] been used for a number of unusual projects in the past few years. We’ve had NES emulators, Spectrum emulators, and even Amiga emulators. But a Flash player?… What’s the point of emulating a [...]

  31. [...] with this cool new emulator for the Nintendo Entertainment System inspired by Matt Westcott’s JSSpeccy which runs on the dual-power of JavaScript and HTML5’s Canvas element. While describing a [...]

  32. mmwmm says:

    Tried Manic miner, it runs way to slow on my browser, firefox. Nice simple setup though, click this, click that and your away.

  33. Wow, this is just amazing :D Great work!

  34. John Barker says:

    Ahhhhh!!!! the good old days… back to 1982 Sinclair research!!

    I have actually still got a mint spectrum ready for when my games room is finished… I also have the divide + from rwapsoftware for which all those favorite games can be run from a compact flash card….

    Manic Miner… I will complete that bugger one day!!!

    Great Program!!

    Thanks

  35. Paul says:

    I just tried this on my Kindle. It works! Pretty slow though!

  36. Richard says:

    Flipping heck mate, was that hard to write? Or have you got some kind of microcode to Javascript convertor?

  37. [...] games are all running within emulators, either written in Java, or amazingly, Javascript. The Javascript efforts are incredible in this ex-programmers estimation: ported from the open source Fuse Z80 emulator [...]

  38. Mr.Starquake says:

    I’m ecstatic..just getting into browser-based games – speccy in js sounds like the best thing since the Sectrum+. Thanks so much.

  39. Samir Ribic says:

    The famous Moore/Wirth law! 19 years ago Željko Juri? and me started to write Warajevo emulator in assembly language with GUI in Pascal. We had to check every microsecond to make the code as fast as possible. Many games were playable on 10MHz 80286 computer, and in 1999 I wrote Tezxas for 10MHz TI89 calculator.

    Soon Warajevo became on 486 25MHz too fast and we introduced delay loop for synchronize.

    But in Pentium age, there was wish to make emulators in C, then in Java, then in Visual Basic, … and usually these languages were slow for writing emulators on contemporary computers but after about 3 years they became acceptably fast.

    Now we have emulator in JavaScript and the history repeats :)

  40. [...] then, computers have become bigger and fast enough that you can run a ZX Spectrum emulation in JavaScript in a browser on an operation system that requires a million times more disk space than the original [...]

  41. Andrew says:

    Great thing!

    I have a question about “z80_interrupt()”:
    … switch(IM) { … case 2: … inttemp &= 0xfff;

    looks bit weird, should it be 0xffff ?

  42. ashley says:

    great emulator, thanks! it’s the best, i don’t need to install anything, it just works

  43. [...] Wescott?JSSpeccy???Ben Firshman???vNES?JavaScriptS??????JSNES???????canvas [...]

  44. Zoltan Kovacs says:

    Matt, congratulations! I really like the searching feature for selecting a game from World of Spectrum! Actually, I didn’t find a way to save the snapshot. Is it already possible? If not, do you plan to add such functionality soon? Thanks!

  45. matt says:

    Hi Zoltan! There’s no support for saving snapshots at the moment, but I’ll keep that in mind as a future addition – you’re not the first person to request that. Not sure exactly when I’ll get back to JSSpeccy development though!

Leave a Reply