Coverfire does a great job at recreating the charming arcade gameplay from the old Crossfire game from the early 80's. You navigate through a playing field of blocks, picking up bonus objects and trying to stay alive. Enemies are waiting on the edges of the screen and enter the labyrinth as time passes. You are able to shoot (independently of your movement) in all four directions. Once all enemies are cleared, you move on to the next level.

The graphics are nice and fit the game well (and resemble those of the original game). This is a canvas-based game. Everything is rendered onto one single canvas at a reasonably small resolution, but the canvas is then upscaled with CSS. As this is a WiiCade game, it has also been made with the goal making it playable on the Nintendo Wii.

Projects like these always impress me, since they are a sign of a truly dedicated and talented developer. It takes quite a bit of both technical insight and dedication to pull of even a simple emulator - and having to make it run nicely in a browser doesn't improve your odds.

The output is a canvas element so it only runs on canvas-enabled browsers, and even then support is limited. At the time of this writing, Firefox 3.1 or Safari 4 beta should be your best bet.

Audio output is done with the help of .ogg files and the new HTML5 audio element, it didn't work too well for me, though - it only slowed down the emulation drastically but still no sound. YMMV.

Read Bruce's blog post for more details, including links to implementations on other platforms.

This is a pretty straightforward Tetris game with just the standard, basic Tetris gameplay. However, what sets it apart from most other JavaScript Tetris games is the ability to play against your friends. Up to 4 people can play at the same time in a "last man standing" type of game. When lines are cleared in your own playing field, the speed of the falling blocks increase for your opponents.

A nice game if you're looking for some quick head-to-head Tetris action, although I must admit I'm not a big fan of the trippy background (holy acid trip, Batman). The source code is nice and readable (with comments) should you be interested.

Being a huge fan of graphical adventure games, the Sierra Online games have a special place in my heart. For all their flaws annoying design decisions (why hello, instant unforgiving death screen), they brought me into fantastic worlds where the only thing standing between me and success was figuring out endless verb-noun combinations concocted in the minds of Roberta Williams, Al Lowe, et al. And I loved it.

It seems António Afonso shares some of that love since he decided to make his own AGI interpreter, bringing at least one Sierra game to the browser, Leisure Suit Larry in the Land of Lounge Lizards. In the LSL series of games, the basic goal is to get the anti-hero Larry Laffer laid. Unfortunately he's followed by neverending bad luck and continuously gets himself into trouble many times resulting in pain, deaths and of course lots of laughs.

In António's version, the game graphics have been exported to PNG files, the game logic has been converted to JavaScript code and an XML format is used to bind everything together, served via Ajax. It's a few features short of being complete and stability can be a problem, but it's an impressive feat nonetheless and just seeing Larry in my browser makes me all giddy despite any problems.

The original Wolfenstein 3D used a technique called raycasting to create the pseudo-3D environment. This technique can also be used with JavaScript and canvas (see Canvex and Canvascape). However, when I set out to make this demo, the goal was to test some "real" 3D code I'd been working on and so this game does use raycasting. This creates a couple of nasty artifacts in the rendering, but all in all it should be playable.

The enemies are only partially implemented and don't do anything besides standing still and getting shot. There is also only the one level and no other weapons. The music is embedded MIDI, the sound effects are MP3s played via SoundManager2.

Check the blog posts for more details if you're interested.

BeSlimed borrows its puzzle gameplay from the very popular Bejeweled games by PopCap, so if you like Bejeweled, you'll probably like this one as well. You clear groups of identical "blobs" (gems in the original game) by swapping one blob with an adjacent to form horizontal or vertical lines of 3 or more identical blobs. The group is cleared and the blobs above fall down (and new ones enter the field from the top) sometimes creating chain reactions. The more blobs you clear, the more points.

As you progress, the variety of blob types will increase, making it harder and harder to find valid groups. A timer makes sure you can't relax for long. The game, which was built with MooTools, is well done and looks very professional.

This was one of my first experiments using JavaScript for more than "regular" web development and it had been lying around for way too long until I put it online last year (at which it point it just went crazy on Digg and other sites, for whatever reason.)

The game aims to recreate the Super Mario gameplay and parts of the first level of the classic NES game using only JavaScript. This means that all the sprites are created at runtime with tiny divs or, if possible, drawn on sprite-sized canvas elements. The sprite data is included in the code as encoded strings. The (admittedly horrible) MIDI tune is stored as base64 encoded data and embedded as a data: URI. The embedded sprites were also discussed in detail by John Resig.

Check the original blog post for links to a smaller version as well as music enabled versions.

And if you're looking for a not-so-tech-demoish game of Mario, be sure to also check out the more complete Super Mario clone by Guillermo Bruchmann.

More a showcase than an actual game, this Super Mario Kart clone lets you race forever and ever on a limited selection of Mario Kart courses against a few of the original Super Mario Kart characters (Mario, Luigi and Princess Peach).

The canvas element was used heavily in this game to rotate, stretch and position slices of the map to simulate perspective. The technique is similar to the "Mode 7" graphics mode that was used on the SNES to create this and other effects. A bit of embedded MIDI music is thrown in for good measure. A few more technical details are available in this blog post.

I'm a big fan of Geometry Wars (even though I'm rather bad at it) and I love the fast-paced retro arcade action it delivers. This is an attempt at bringing some of that greatness to the browsers via JavaScript and DHTML. The basic gameplay is the same, albeit in a somewhat simpler form. The different enemy types do have unique behaviours like in the real game which is nice, but it seems your weaponry doesn't upgrade.

The page says it's a prototype, so I'm hoping Geoff will put some more work into it as it's already looking pretty good as it is. The animated sprites are made with a CSS sprite technique. I'm thinking a game with graphics like these (mostly simple shapes) could benefit from canvas, but doing it the old-fashioned way does have the benefit of cross-browser support.

The code is available on GitHub but I couldn't figure out what license he's using.

The ProtoRPG engine aims to be "something between Ultima V and Ultima VI" and I think it's already well on its way there. In the demo game you can walk around the world, talk to different people and if you go downstairs you get to fight some rather big rats. Nice job, I hope some cool games come out of this endeavour.

There are several pages on the website dealing with development of games using ProtoRPG, so if you've ever wanted to make your own roleplaying game, here's your head start.

The game relies heavily on the Prototype and Scriptaculous libraries (the reason for the name ProtoRPG, I presume).

If you've played Bomberman or Dynablaster before, there isn't much new to the gameplay. You make your way through the map, disposing of both boulders and monsters by strategically placing timed bombs in your path. Some boulders contain power-ups like extra bombs.

The animated sprites are done with div masks, the sound is provided by a bit of custom Flash. There is also a multiplayer mode which I have not tested, but the author says it is quite buggy, so maybe that's just the same..

This game was made because I wanted to both get to know the Digg API and do some more canvas graphics. The result was this unusual shooter where enemies are spawned when stories are "dugg" on Digg.com. The number of diggs the story has dictates the size and strength of the enemy and the number of points gained from blasting it to social media hell.

Along your way to internet stardom, you'll meet various obstacles ranging from simple blocking structures to electrical zappers and black holes. But don't worry, if you're so unfortunate as to lose all your heroes, you automatically get reinforcements for the low low price of 25% of your accumulated score.

With the exception of the black holes and the pre-rendered text, all graphics in the game are created with canvas. Digg data is brought in via JSONP calls to the Digg API. There are no sound effects, but there is a music track (that you can turn off if you don't like it), made possible via SoundManager2. The music is by friend_kami and brainworks, all released under Creative Commons licenses and found at SectionZ.

The original blog post has many more details about the game.

Mark Wilcox has taken the gameplay from the classic Space Invaders arcade game, expanded a bit upon it and mixed it with his talent for making cool, cartoony B-movie inspired artwork. The result is Invaders from Mars.

My only complaint is that it's a bit sluggish (for me, at least). Everything seems to have been made with simple DOM elements and GIF files for the sprites. Sound effects have been made possible via SoundManager2.

Make sure you also visit Mark's blog where he talks about - among other things - the development of Invaders from Mars.

This tutorial by Bill Mill takes you through all the steps needed to make a simple Breakout clone using canvas, starting at the very basics with simply drawing a circle on a canvas before moving to collision detection, keyboard input and everything else needed.

The game itself is not very fancy, it just has the most basic features found in games like these (ie. a paddle, a ball and bricks to destroy), but I suppose that is expected since we're dealing with a tutorial and not a full game. If you're looking for something more advanced in terms of gameplay, I suggest you check out DHTML Arkanoid.

The mechanics of this game are pretty simple. Your car is moving right and on the road you'll have to avoid obstacles and cars moving in the other direction. As if that wasn't enough, you also have to shift gears in time. That said, the game is not that hard and is actually quite fun.

RedLine uses the gameQuery library (an extension to jQuery) which also enables sound with embedded Wave audio files.

Either I suck at this or this game is just really hard. You're armed with a sword and a gun of some sort, your task is easy - don't get your brains eaten. However, more often than not, I end up in a bloody pool followed by a voice telling me that I have indeed "failed"!

Nonetheless, this could become a pretty sweet zombie shooter game with a bit of work. The graphics are nice (although borrowed from various free sprite/tile sets) and there's a sound track that you may or may not like. The neatest feature of the game has to be the motor cycle that the protagonist is somehow able to pull out of his pocket. Nice!

The game powered by jQuery and uses a bit of Flash to get the sound going. You can choose between a canvas mode and a HTML/CSS mode with varying performance depending on which browser you're using.

The gameplay in this arcade game by Brent Silby is simple but also most easily explained by actually playing it. Positioned in the middle of the screen is what I suppose is your space ship. Enemies come at you in swarms from all directions and your only weapons are 4 "things" that you can extrude in four directions (up, down, left and right). At the end of each "thing" is something or other that makes the aliens go boom. As the aliens come in ever increasing numbers and from several directions simultaneously, the game gets really hard and your hand to eye coordination skills are put to the test.

The graphics have a wonderful pixelated, arcade look to them that I really like.

Brent Silby created this game with one of his students and made it a learning experience for him. It's a pretty sweet game that starts out simple and easy but soon becomes harder and harder.

You (a turtle) start out bound to the earth with enemies coming at you. As you shoot your way through them, you pick up upgrades that give you two-directional fire and eventually the ability to fly. You'll need these as enemies start coming from above as well and before you know it they'll be everywhere - as seen in the second screenshot.

The game was made with DHTML and CSS sprites for animations. There is no sound.

Noah Hayes decided to recreate the old Pong, but instead of making it the usual game of trying to out-pong your opponent, you must now try to do the exact opposite and keep the ball from going past your team mate. Nice touch on an old game, implemented through good old DHTML with a touch of Prototype and Scriptaculous.

This twist on the old Pong game is brought to us by Steff Luczyn who also made the typing twitch game, Finger Fandango. The changes to the original Pong mechanics are simple yet powerful. The goal is as always to keep the ball from hitting the walls, but there are now paddles on all 4 walls and they're all controlled by you. Horizontal mouse movement controls the paddles on the top and bottom walls, vertical movement controls the left and right paddles. It takes a bit of getting used to this, at least if your eye-hand coordination is as bad as mine.

There's not much to say about the technological aspects (the code is unreadable), other than everything seems to be made out of div elements, not surprising, given the very basic visual appearance. That's not a bad thing, though.