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.
- Readme file
- Run JSSpeccy online (includes 10 classic games!)
- Download JSSpeccy (644Kb)
- JSSpeccy Subversion repository
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
Matt – wow. You are utterly utterly sick! This is brilliant… Utterly mental!
Fantastic work! :)
what rc55 says… !!!
and again as above this is amazing work
Now that’s a little bit sick, in a good way, isn’t it ?
But… but… does it run OpenZXRom?
Superb! Great job!
Iiiinteresting.
Just tested it, and it runs (slowly) in Chrome on Vista – only tried Exolon briefly.
Will “news” it laters.
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.
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.
You’re mad \:D/
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).
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
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 :-)
[...] 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 [...]
Awesome!
I guess I have to admit to being the person mostly likely to do an Apple ][ emulator in Javascript. You’ve inspired me!
[...] ZX Spectrum stamt uit 1982. Geinig dat iemand de moeite neemt de ZX Spectrum te herschrijven in [...]
This might just motivate me to get back to work on my JS 6502 emulation, working towards a BBC Micro emulator :-)
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…
[...] 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 ) [...]
[...] 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, [...]
[...] nun kommt natürlich das Programm zu Witz: da hat doch tatsächlich jemand in Javascript den ZX Spectrum nachgebaut. Dann kann’s ja [...]
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 …
You are brilliantly mad…
Works full speed with Webkit trunk. No sound though :).
Geekly aweeesooommmmeee!!!
Clap Clap Clap Clap Clap Clap….
[...] matt.west.co.tt » Blog Archive » JSSpeccy: A ZX Spectrum emulator in Javascript Bonkers! (tags: javascript spectrum emulator) [...]
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?
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.
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 ;-)
[...] Wescott has created a ZX Spectrum emulator in JavaScript. The Sinclair ZX Spectrum was an old-skool PC from the [...]
[...] Читаем, пробуем. Да, и не забываем поÑмотреть код, вам понравитÑÑ. [...]
* 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.
wow, you are great i have never seen something as brilliant as it before.
That is crazy !
[...] 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) [...]
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 )
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?
[...] Para poder jugar sin instalar nada, pulsa aqui Mas informacion aqui [...]
[...] JSSpeccy – a JavaScript Sinclair ZX Spectrum emulator [...]
[...] 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). [...]
[...] 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 [...]
[...] 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 [...]
[...] Matthew Westcott предÑтавлÑет на Ñуд общеÑтвенноÑти новый ÑмулÑтор Спектрума JSSpeccy. Его оÑобенноÑÑ‚ÑŒ в том, что ÑмулÑтор напиÑан на Javascript. [...]
[...] 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). [...]
[...] 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 [...]
Brilliant !!!! Thank you !!
[...] matt.west.co.tt » Blog Archive » JSSpeccy: A ZX Spectrum emulator in Javascript – Und warum? Weil es geht. [...]
wow you are mad! i can’t wait to finish work to play with this one.
[...] man zuviel Zeit hat…. – Matt Westcott hat in Javascript einen Sinclair ZX Spectrum programmiert, komplett mit Spielen von [...]
YOU da man! Simply put it’s incredible!