The Hobbit (1982 game) graphics engine in Javascript

One of the first computer games that really fascinated me was the 1982 text adventure based on The Hobbit, for the ZX Spectrum. I was 12 years old when I first played it, and it was immediately clear that this was different from any other game I'd seen. It was a text adventure, but some locations had illustrations in brightly coloured graphics, which although crude by today's standards really helped transport you to another world back in those days of mostly monochrome screens and text-only adventure games. There is much more to be said about what made the game so special - in fact, the graphics may be the least interesting point - but it's a starting point that will do for now.

There were over 20 illustrations in the game, each covering 2/3 of the screen area. The game itself only occupied 40K and a ZX Spectrum used just under 7K for the graphics memory (bitmap + colour information), so it was clear that you couldn't simply store whole images. Instead, they painted the illustrations from scratch each time, using a small set of graphics primitives, and each illustration was stored as a sequence of drawing instructions compactly encoded as bytes. Since it took many seconds to draw an image, you could easily follow what was happening and understand that this was how it worked.

I always wanted to see how their graphics engine worked, and make it possible to draw the illustrations without running the game in an emulator, but I have only ever found partial disassemblies of the game, and nothing at all about the graphics routines or the format they used. A week or so ago I decided to reverse-engineer it myself, for the hell of it. It turned out to be a bit tricky but not so bad after all. And of course, once I had figured it out, I wanted to reimplement it in a more portable language using a more portable graphics backend, i.e., Javascript and html canvas (something I've never had reason to touch before). This weekend I found some quiet time to implement it, and it works. As far as I have been able to tell, comparing to the game running in an emulator, the screens are rendered pixel perfect. If you too have been playing this game as a kid, you might find it interesting to look at the code on GitHub. Or just use the drop-down menu above to look at the images drawn in real-time in your browser, way faster than an old 3.5MHz Z80 could do it back in the day.


Jan Moren said…
Hah, that's a game I still remember fondly as well. There's quite a few good text adventures from that era.

Thinking a bit about it, I guess these old games are relatively easy to reverse engineer, if nothing else because the amount of code is limited and the hardware it drives isn't all that complicated.
James said…
This doesn't work in my browser because Chrome refuses to run the Javascript:

Refused to execute script from '' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
@james Thanks for the heads-up. Took me a while to try to fix this, but eventually I managed to do it by creating a static "github pages" site and referring to the .js file at that url instead.

Popular posts from this blog

Recreated ZX Spectrum (Bluetooth Keyboard)

Erlang Text Elite