Can you imagine playing good old games you used to play when you were a kid in your browser? Yeah sure, there’s plenty of cool games developed in flash, you would say. Well, leave out flash. Leave out Java as well. Leave out any plugin that needs to be installed in your browser. What do we have left? Just plain HTML and Javascript. Now, that’s something different from what we’re used to see.

Martin Kool has made this possible. He has developed an open source engine to play games straight in your browser, using the canvas tag from HTML 5. And besides, he has ported many of the old Sierra adventure games, like Leisure Suit Larry in the Land of the Lounge Lizards, Space Quest I: The Sarien Encounter, Gold Rush, etc.

I would say it has kind of a retro look ...

This engine works on Firefox 2+, IE 6+, Chrome, Safari and Opera. It also seems to work on iPhone and Wii (although it may still need some tweaks). You can play these games with both keyboard and mouse. And if you’re tired of playing you can save your game and continue from that point the next day: an URL is generated containing your position and status.

Making of

Martin tells us in his pages how he managed to develop the whole thing:

In 2003, I created Good Old Adventures. It was a chat environment set in the Sierra worlds without actual gameplay. All images were manually crafted, copy/pasting from WinAGI Game Development Studio. A time consuming process.

Four years later I wrote a few conversion tools in .NET to extract Sierra’s in-game images and objects from the original games, and display them properly on the web. The “only thing” left to do then was to export and understand all in-game logics.

I was able to convert the logics to javascript, but there was one big problem: Sierra’s code used GOTO statements, and those could jump anywhere in the code, even inside a nested “if”-statement. It seemed unsolvable in javascript.

I sat down together with Sjoerd Visscher, one of my collegues at Q42, and we came up with a solution. Using a decompilation approach to get rid of nested “if”-statements and putting the whole shebang inside a huge switch/case statement, we could mimic line numbers and GOTO’s while maintaining performance.

Martin’s achievement is some impressive demonstration of what can be done with the new canvas tag. HTML 5 will totally change the way we see the web.

Related posts:

1. HTML 5: dramatic improvements in the web language