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.

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

  1. Matt – wow. You are utterly utterly sick! This is brilliant… Utterly mental!

    Fantastic work! :)

  2. ref says:

    what rc55 says… !!!

  3. NeuTek says:

    and again as above this is amazing work

  4. Now that’s a little bit sick, in a good way, isn’t it ?

  5. But… but… does it run OpenZXRom?

  6. Panthera says:

    Superb! Great job!

  7. icabod says:

    Iiiinteresting.
    Just tested it, and it runs (slowly) in Chrome on Vista – only tried Exolon briefly.
    Will “news” it laters.

  8. icabod says:

    Oh, and for “modest” hardware, I’m running on a 2.8GHz Quad Core, with a Geforce GTX 260, if that makes any difference.
    Will try running it again later… didn’t really play much.

  9. matt says:

    Mmm. From this report and others, it sounds like (the most widespread version of) Chrome is missing the putImageData interface, so it has to use the nasty slow fallback of drawing filled rectangles. I’ve had one report of it being nice and speedy in Chrome, and apparently the latest nightly of Webkit (the rendering engine behind Chrome and Safari) does a good job, so perhaps there’s a new release on the way which will fix that.

  10. Spenot says:

    You’re mad \:D/

  11. wmarsh says:

    Hi Matt,

    I might go ahead and convert this to ActionScript 3. Essentially the same language, but with very fast execution and drawing ops (as well as working in any Flash plugin-ed browser, which is essentially every browser).

  12. Moose says:

    Great work. It would be fantastic if this could ever work on the iPhone from within safari. I have a screengrab of it almost working

  13. matt says:

    I’ve had reports on the WOS forums that it does work on the iPhone… it just takes something in the region of 15 minutes to get as far as the copyright message :-)

  14. [...] Escribir un comentario El único límite es la imaginación, esto es lo que ha debido pensar Matt Westcott al desarrollar un emulador de ZX Spectrum íntegramente en [...]

  15. James Tauber says:

    I guess I have to admit to being the person mostly likely to do an Apple ][ emulator in Javascript. You’ve inspired me!

  16. [...] ZX Spectrum stamt uit 1982. Geinig dat iemand de moeite neemt de ZX Spectrum te herschrijven in [...]

  17. This might just motivate me to get back to work on my JS 6502 emulation, working towards a BBC Micro emulator :-)

  18. Tane Piper says:

    Wow! A little slow, but a great effort – and I loved seeing Everyone’s a Wally in there – I’ve now got the theme music going round in my head :) da da da da de de…

  19. [...] matt.west.co.tt » Blog Archive » 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." Blimey. (tags: mattwestcott spectrum emulation programming javascript woah ) [...]

  20. [...] un emulador de spectrum (con 10 juegos) desarrollado en Javascript. Fuente original en inglés: matt.west.co.tt/spectrum/jsspeccy/ sin comentarios en: tecnología, internet karma: 9 etiquetas: emulador, spectrum, online, [...]

  21. [...] nun kommt natürlich das Programm zu Witz: da hat doch tatsächlich jemand in Javascript den ZX Spectrum nachgebaut. Dann kann’s ja [...]

  22. MegaRed says:

    Emulador Javacript de Spectrum…

    ¿ Te gustaría volver a poder disfrutar de algunos de los juegos del mítico Spectrum ?.

    De 8 bits, el Sinclair ZX Spectrum estaba basado en el microprocesador Z80 de Zilog, fabricado por la compañía británica Sinclair Research y fue lanzado al …

  23. Pedro Melo says:

    You are brilliantly mad…

    Works full speed with Webkit trunk. No sound though :).

  24. Gabriel C. says:

    Geekly aweeesooommmmeee!!!
    Clap Clap Clap Clap Clap Clap….

  25. [...] matt.west.co.tt » Blog Archive » JSSpeccy: A ZX Spectrum emulator in Javascript Bonkers! (tags: javascript spectrum emulator) [...]

  26. Alvaro says:

    Absolutely incredible! I was a Spectrum user in the 80s.

    Interestingly it runs slower on Chrome as some have pointed out.

    Question: the image is stretched, right? (I mean your image data is 256×192 but it is painted on a 2x rectangle). Firefox 3 does interpolated streching, which also takes some little time. And in Chrome it looks the same (a bit blurred pixels instead of sharp small rectangles) so it does not look like it uses an array of rectangles. Or am I missing something?

  27. matt says:

    Alvaro: Good point about the scaling – the interpolation is probably taking up quite a lot of CPU. (I must admit I kind of like it though… it gives a bit of an “old 1980s TV” effect :-) ) The ‘internal’ canvas dimensions are 256×192 and scaled up using CSS (in other words, when I call drawRect I’m always telling it to draw a 1×1 rectangle even though it takes up 2×2 pixels on the final screen), so you’ll see that effect regardless of the drawing method the browser uses.

    It’d be interesting to see how drawing the canvas natively at 512×384 would affect performance – in the putImageData case, Javascript would have to make four times as many function calls, so I’m not sure whether that would outweigh the saving from not doing the interpolation.

  28. tdm says:

    That’s just unbeliavavle. First ZXS emulator for iPhone :-) Quite slow, but it exists. You are magician. I will remember this while the next Shucon takes a place especially during the ceremony ;-)

  29. [...] Wescott has created a ZX Spectrum emulator in JavaScript. The Sinclair ZX Spectrum was an old-skool PC from the [...]

  30. [...] Читаем, пробуем. Да, и не забываем посмотреть код, вам понравится. [...]

  31. * Your mum shouting that your tea’s ready

    LOL that’s so true :)

    ps. having some issues with keyboard controls, is there a way to get help on keys? after 24 years my ZX memory is a bit rusty.

  32. iron0088 says:

    wow, you are great i have never seen something as brilliant as it before.

  33. Jean says:

    That is crazy !

  34. [...] matt.west.co.tt » Blog Archive » JSSpeccy: A ZX Spectrum emulator in Javascript “Person most likely to write a Spectrum emulator in Javascript” (tags: matt.west.co.tt 2008 mes9 dia31 Speccy emulator JavaScript blog_post code) [...]

  35. James says:

    This is bringing back fond memories of writing that SCUMM interpreter in haXe which happened to run in both Flash and JavaScript a few months ago…..

    ( http://github.com/jamesu/hiscumm/tree/master )

  36. Peter says:

    I got all excited about reliving my first computer days, and then realised it was a ZX81 I’d first used, with space invaders, flight simulator (remember that, blue and beige was all it had?) and the Snowman :)

    Pretty please?

  37. [...] Para poder jugar sin instalar nada, pulsa aqui Mas informacion aqui [...]

  38. [...] JJSpeccy es un emulador de ZX Spectrum realizado en javascript que se puede disfrutar tanto online (con 10 juegos disponibles) como offline (descargándolo de la página oficial). [...]

  39. [...] Euro JavaScript crowd (all five of us) this should be interesting: Matt West just announced the release of his ZX Spectrum emulator completely written in [...]

  40. [...] 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 [...]

  41. [...] Matthew Westcott представляет на суд общественности новый эмулятор Спектрума JSSpeccy. Его особенность в том, что эмулятор написан на Javascript. [...]

  42. [...] JJSpeccy es un emulador de ZX Spectrum realizado en javascript que se puede disfrutar tanto online (con 10 juegos disponibles) como offline (descargándolo de la página oficial). [...]

  43. [...] who created a version Super Mario Bros in Javascript. Matt Wescott has gone one better to create a ZX Spectrum emulator in JavaScript. Now, how about a C64 [...]

  44. vectrex says:

    Brilliant !!!! Thank you !!

  45. [...] matt.west.co.tt » Blog Archive » JSSpeccy: A ZX Spectrum emulator in Javascript – Und warum? Weil es geht. [...]

  46. aa says:

    wow you are mad! i can’t wait to finish work to play with this one.

  47. [...] man zuviel Zeit hat…. – Matt Westcott hat in Javascript einen Sinclair ZX Spectrum programmiert, komplett mit Spielen von [...]

  48. ismaelj says:

    YOU da man! Simply put it’s incredible!

Leave a Reply