Check out my
new book!
HTML5 Games book
2008 - A Year of Awesome JavaScript 2008 has been just great, not least because of all the great stuff people have been doing with JavaScript, the new canvas element and the web in general. Browser vendors are now competing, trying to outdo each other in terms of JavaScript performance, leaving developers and end-users as winners as we now get to do cool stuff that wasn't really feasible before. Here's a summary of the neat things of the year 2008 as I saw it.

Games

It's been a great year for JavaScript games. It looks like DHTML and canvas-based games are now capable of taking over some of the areas where Flash used to dominate. Many people have been building remakes of classic video games like Super Mario, Pac-Man, Breakout, Space Invaders, Bomberman or T&C Surf Designs.

Others took the old arcade traditions and applied them to their own ideas, giving us cool games like Matt Hackett's Spacius, Mark Wilcox's Invaders from Mars, VertigoProject's RedLine Racing or a twist on the classic Tetris game.

We've even seen some roleplaying games, like the very cool Tombs of Asciiroth or the more graphical CanvasQuest by Andrew Wooldridge and the Prototype based ProtoRPG by Pierre Chassaing. Although they are mostly betas or demos at the moment, they look like they could turn out to be really cool one day.

2008 also saw a few libraries for JavaScript / DHTML game development pop up, most notably GameJS (pictured to the left with its demo game, Jetris) and GameQuery, the latter being an extension to the popular jQuery library.

Last, a special mention to a great (but small) game, DEFENDER of the favicon. Mathieu 'p01' Henri squeezed a version of the old Defender game into the 16x16 space of the favicon. How sweet is that?

Demos


Antisocial Demo The canvas element is now supported in most browsers (that are not made by companies called Microsoft). That means we now have more options for creating dynamic graphics in the browser and people have not been shy to use it to show off their mad skills. Some have made small and simple demos showing the capabilities of the canvas, while others took it a step further, like Matt Westcott and his Antisocial demo, a social network satire in nice demo style complete with a demo making tool.

256 bytes Mars demo Others who have been busy this year include the talented Mathieu 'p01' Henri who, among other things, specializes in making really tiny things, including tiny pieces of code that do cool things, examples: Rubber effect, Tunnex, Mars. All in 256 bytes each, nice!

20 lines canvas demo - Hypno Trip Down the Fractal Rug As if that's not enough, Mathieu Henri is also a regular over at the Ozone Asylum where he teamed up with the canvas element for the 20 lines contests to create visual goodies such as Dynamic Hypnoglow, Twinkle and Hypno Trip Down the Fractal Rug. These contest also gave birth to other great effects like colliding balls, some sort of 3D cube effect and dynamically generated BMP flames.

20 lines Boulder Dash clone The Asylum inmates have even created small 20-line games, ranging from Lunar Lander to a Boulderdash clone and an impressive homage to Wolfenstein 3D

3D


Projective transform with canvas At the moment, the canvas element only supports 2D graphics, although there are efforts to enable a hardware accelerated third dimension from both the Mozilla and Opera teams. That doesn't mean there's no 3D graphics being done, though. Everything from basic 3D cubes, texturing experiments to regular JavaScript/Canvas 3D engines have been done.

Also check out the stuff done by the guys over at the Wii Opera SDK (it's not just for Opera or the Wii) and of course the 3D stuff here at Nihilogic.

Emulation


JavaScript ZX Spectrum Emulator That JavaScript performance is getting better and better must be true since it's now possible to emulate other systems in the 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 cool.

James Urquhart also played a bit and created a proof of concept SCUMM interpreter. It won't let you play Day of the Tentacle or even Maniac Mansion, but supposedly it can at least let you see a bit of OpenQuest.

JavaScript AGI interpreter A personal favorite of mine was António Afonso's JavaScript AGI interpreter. AGI was the system used by Sierra in the golden days of adventure gaming and when António made this little gem with an (almost) working Leisure Suit Larry, it just totally tickled my fancy.

Graphics


Processing.js One of the most impressive feats this year must be John Resig's port of the Processing language to JavaScript, Processing.js, complete with a giga-ton of cool demos. In the same vein, Aza Raskin created Algorithm Ink, a JavaScript/Canvas port of the Context Free program, a method for creating images based on rules and instructions. And there's more! Eitan Suez liked Turtle, the old Pascal graphics programming tool, so much that he decided to make a JavaScript version of it, TurtleJS.

JavaScript Fractal Explorer On a more mathematically nerdy note, a few people have also been tackling fractals using JavaScript. Once again, p01 decided to play and rendered the Mandelbrot set with 137 bytes of DHTML which, with a bit of friendly competition, ended up at a tiny 111 bytes (FF only). Oliver Hunt created a prettier, graphical Mandelbrot set (as did I), and Russ Hall even made a full-fledged fractal explorer application.

Audio


JavaScript drum machine While waiting for proper support for the HTML5 audio element, most people have gotten used to settling for Flash-based audio but that doesn't mean you can't make weird experiments with sound and JavaScript. For example, check out the JS-909 drum machine by Cameron "The Man in Blue" Adams. Admittedly, it does rely on Quicktime, but cool nonetheless.

Or how about dynamically generating and playing WAV files, like this sine waveform generator by sk89q, and while we're at it, have some generated MIDI as well.

Odds and ends


Not just graphics and audio files can be generated, though. How about a small JavaScript library capable of generating ZIP files on the fly?

Homer made with CSS How much can you really do with CSS these days? Isn't it just for styling your text and placing your divs? Apparently not. Román Cortés has at least shown that an image of Homer Simpson can be created if your CSS-fu is strong enough.

Ernest Delgado mixed my Mario Kart demo with OpenStreetMap to create a nice little tech demo resembling the GPS navigation systems found in cars.

Cubescape Finally, Cubescape is a cute, fun toy where you simply build a cubic landscape by dropping colored cubes. Great timewaster from The Man in Blue.

Of course, I've also been doing a bit of tinkering here at Nihilogic myself, so be sure to check the archive to see if there's anything you missed. I just hope 2009 will be as cool as 2008 was (and I don't see why that should not be the case!).

What do you think was great in 2008?

Edit: Chinese translation here
⇓ 22 comments Drakim

Definitely the great JavaScript boost. The web browser developers was already slowly starting to turn their eyes to the JavaScript performance, but with the release of Chrome, it became a bitter battle where every second counts. I love it.

I just hope 2009 is the year where the web browser developers decide to make the DOM ten thousand times faster. Then anything will be possible.

As for Canvas support in IE? I'm not holding my breath. All I'm hearing is a "maybe IE9".

January 2, 2009 at 5:37 PM
matt

Honestly, your JavaScript stuff was the most continually impressive work of the year in my opinion. Congrats!

Added to Hacker News: http://news.ycombinator.com/item?id=418013

January 2, 2009 at 5:53 PM
Bill Mill

Readers of this post might be interested in my canvas Pong game tutorial: http://billmill.org/static/canvastutorial/

Keep up the good work.

January 2, 2009 at 6:29 PM
Tim Trueman

No mention of Objective-J/Cappuccino?

January 2, 2009 at 6:36 PM
voodootikigod

2009 will be better with http://www.jsconf2009.com

January 2, 2009 at 7:29 PM
timb This comment has been removed by the author. January 2, 2009 at 9:56 PM Aza Raskin

Thanks for the great write-up. Creating Algorithm Ink was a fun way to learn Canvas. I've been using your Pixastic library to create a set of image-editing commands as built-in functionality for Ubiquity. The Ubiquity Team would love your help in turning the prototype into something more fully fledged. Give me an email at aza [at] mozilla [period] com if you are interested.

January 2, 2009 at 10:55 PM
Jacob Seidelin

@matt: Oh, don't make me blush..

@Tim Trueman: Objective-J and Cappuccino are certainly cool projects as well.

@Aza: Sounds interesting. I'll read up on Ubiquity and let you know.

January 3, 2009 at 9:51 AM
Mathieu 'p01' Henri

Not bad. Not bad at all.

My favorites are definitely the emulators. I takes a great combination of skills and stamina to take such JavaScript project to a releasable state.


For me, 2009 has to be year I take care of my site and stop letting code rot on my disks. For instance I've been playing with sound generation ( both WAV and MIDI ) for 3 years but never got the occasion to make good use of that.

January 4, 2009 at 7:58 AM
Jerason Banes

I just managed to scrape in my entry for the classic remakes in 2008:

http://www.wiicade.com/gameDetail.aspx?gameID=1317

Coverfire is a remake of the classic computer game Crossfire. It's intended to not only pay homage to the original, but to succeed it in every way. Hopefully the players will agree. :-)

In addition to what's on your list, I was very happy with the progress of Javascript engines in 2008. With Chrome V8, TraceMonkey, and Squirrelfish all pushing the edges of performance, Javascript is becoming a very serious platform for application and game development. Good work everyone!

January 4, 2009 at 10:20 PM
Brent Silby

I am very happy to see the resurgence in dhtml/javascript games. I've been designing games in JS since 2001 (I've done around 30 action arcade games)

see: www.def-logic.com/_dhtml.

I've ported them all to Flash now, but I continue to produce in both formats. Why? Because JS is powerful and I've always wanted it to become accepted as a mainstream game platform.

Cheers all,
Brent Silby

January 5, 2009 at 12:03 AM
Jacob Seidelin

@p01: Agreed. And you should definitely do those things, I'd love to see what you can do with sound generation.

@Jerason Banes: I actually just found your game the other day, unfortunately I'd already made the post by then. Nice work!

@Brent: Your stuff was great in 2001 and it's still great today.

January 5, 2009 at 3:32 AM
Ben Sparks

Nice roundup...

JS as a gaming platform is very exciting right now. Your own work in your lab is also very impressive!

January 5, 2009 at 10:47 PM
klmdb

Just wanna say that this is the only blog I frequently check up on. I think it's amazing what scripts you pull out of your hat. Reading and seeing what you post here gives me alot of now ideas for my own scripts.

Keep it up and hope to see what you'll release to us next.

January 8, 2009 at 11:06 AM
Roman Cortes

It's curious how my Homer CSS ended up in this javascript curiosities list... even not being javascript :P - it's just CSS.

I've also some few things in javascript, you may check pacman css and fur effect in my blog.

I've not yet published any canvas element javascript thing, I really prefer cross-browser stuff... but I might try it someday.

Thanks for the mention :)

January 11, 2009 at 10:20 AM
Jacob Seidelin

@Roman Cortes: It was just too cool to not mention, non-JavaScript or not. Good work :)

January 11, 2009 at 10:31 AM
Tommy Maintz

Hey, thanks for the mention of GameJS!

Just a side note. I only created GameJS and the Jetris game to check if I could create some kind of “port” from XNA to JS. There are much faster and better ways to create a tetris game in javascript probably, but they wouldnt be as elegant in code as mine is (in my opinion obviously :p)

Also it was alot of fun doing so…

January 14, 2009 at 4:27 PM
Anonymous

well, you can include my application
dnotation.zip in DHTML @@@@
a work in progress though, i wonder if
that constitute a game ? hahaha

http://hothze.hyperphp.com

January 17, 2009 at 7:19 AM
Darkimmortal

As usual, I get left out :(

http://z-war.co.cc - 100% Javascript zombie game with full map editor.

February 5, 2009 at 1:43 PM
herana

What a great post! Just one suggestion:If you add some pics, it would be easiler to follow!
By Jordan Retro 4

May 11, 2010 at 5:24 PM
Anders Spændende Nyheder

Wow, impressive. I'm a first here, but I am going to follow you, that's for sure.

July 24, 2010 at 12:41 PM
Games Up

A good read. Do you really think that Java can take over from Flash when it comes to browser games? Most of the Java games I have seen so far have very basic retro looking graphics compared to a lot of the flash games that are coming out now.

August 24, 2010 at 5:13 AM
Post a Comment