Examples of good Javascript/HTML5 based games [closed]

There is a lot of hype around HTML5 but to say that Flash is largely being replaced by it is an overstatement. While video and audio tags may gain traction, gaming will be one area that holds out for a long time, not just because of better tooling and performance, but also because there is a business infrastructure built around distributing Swf files, that wouldn't easily adapt to HTML and js. The html5 games I have seen using canvas are roughly where flash was 7 years ago, and by the time ie9 is widely distributed enough that canvas is a viable option, Flash will have already introduced it's planned 3d and possibly hardware acceleration features.

In the interest of exploring just how far you can take the newest crop of browsers, I and some colleagues cross-compiled the open-source Java port of Quake II to Safari/Chrome (it ought to work on Firefox at some point as well, though it didn't initially, largely for performance reasons). The project is here: http://code.google.com/p/quake2-gwt-port/

It still requires some care and feeding to get it up and running (e.g., WebGL still isn't enabled by default in any shipping browser), but we uploaded a video here: http://www.youtube.com/watch?v=XhMN0wlITLk (sorry it's so dark -- gamma issues remain) and you can see our Google I/O talk here: http://code.google.com/intl/fr-FR/events/io/2010/sessions/gwt-html5.html

I don't know how long it's going to be before we can realistically depend on all these new browser features (WebGL, WebSocket, audio/video, local storage, et al), but if it all comes together it could make a huge difference in the ability to ship games directly on the web. But there are still a lot of hurdles that remain (e.g., don't hold your breath for Microsoft to implement WebGL in IE10).

EA's Lord of Ultima is probably the most visually impressive Javascript/HTML based game I've seen.

Note: It a strategy game and not an action title so while it has a nice smooth scrolling map, there isn't anything beyond clicking on buttons as far as direct interactivity goes.

"I'm curious what's possible and what the limitations are."

The limitations are browser-based. If you're using something hot like the Webkit nightlies, there's basically nothing that flash can do that the browser can't do natively, such as:

• 2d Graphics (via canvas) with rotation, scaling, opacity, etc.
• 3d (via canvas and WebGL)
• Audio (via the audio tag, though it currently sucks even in browsers that support it)
• HTTP (via XMLHTTPRequest)
• Local Storage (via the localStorage API)
• Sockets (via Web Sockets)
• SVG
• Video (via the video tag)

AFAIK that's all possible in Google Chrome as well (and if it's not, it will be soon). Sounds like a complete gaming environment to me :)

(I included links to all this stuff in my first draft but StackExchange wouldn't let me post them since I'm new; sorry!)

Contrasaurus

This game was painstakingly created with blood, sweat, tears, and HTML5. The core matrix transform library was spun out as Matrix.js. Additionally many of the core language extensions, sprites, sounds, and canvas libraries are working their way into The Pixie Game Platform.

No Flash, all HTML5 Canvas and Audio. Works best in Chrome.

You REALLY have to check out CAAT library - it's awesome! It's a scenegraph (e.g thing.addchild / thing2.removechild) library for canvas.

This demo of it blew me away, along with the game also contained on that page: http://labs.hyperandroid.com/animation

So much so that I transferred over our own game to use it, and it only took me one night.

Drop in, multiplayer snowball fight http://holiday2010.ogilvy.com

So much so that I have tried to improve the lirary and add stuff back into it: http://github.com/onedayitwillmake/CAAT-Hello

Available on github: http://github.com/onedayitwillmake/CAAT-Hello/tree/circlepack

Have a look at these websites:

• http://html5games.com/
• http://web.appstorm.net/roundups/browsers/10-html5-games-paving-the-way/

A jquery ui guy is building a game engine called Aves using javascript/html. This video describes some of the challenges he ran into during development. He talked a lot about how slow canvas was and that it isn't currently hw accelerated.

You could also find a whole bunch of games developed using the Effect Games engine. Although the engine looks fairly sandboxed into his site with all tooling and assets existing there.

IMO the greatest limitation of developing a js/html game is sound. The tag performs differently event wise across safari/firefox/chrome all of which must be latest version. Last I checked safari worked only with MP3 and firefox only works with OGG. Although its completely feasible to overcome this with a combo of serverside logic.

I currently hobby in writing Flash games and can't see that domain being overcome by HTML5(js/css/html) until portals start accepting them or the web app stores go online.

Coincidentally, there was a question on Slashdot today about html5/javascript gaming:

http://ask.slashdot.org/story/10/07/14/0632238/JavaScriptHTML-5-Gaming

It mentions specifically Galactic Plunder, a side-scrolling space shooter:

http://dougx.net/plunder/plunder.html

Even though controls are screwed up/need work, I am fond of Akihabara - http://www.kesiev.com/akihabara/

Google Pacman has to be one of the more impressive JS/HTML games I've seen (granted, it's the only one I've seen, but it's still really impressive :)

Source Code locations

There are excellent tutorials for the Akihabara Libraries put together by Darius Kazemi and Darren Torpey at: Akihabara Tutorials

Biolab Disaster is a pretty good sidescrolling platformer showing what can be done with html5 and js. http://playbiolab.com/

I just finished porting my Space Strategy game from Silverlight/C# to pure HTML5/Javascript/Canvas:

Astriarch - Ruler of the Stars

It is a 2D game and graphically very simple, so it lends itself nicely to using the canvas because there isn't lots of painting going on. That being said, I'm impressed with what some of the other, more animated games are doing out there with the same technology. Like angry birds at the chrome web store: Angry Birds, you might also want to check out some of the other games in the Chrome Web store for more examples.

One reason I ported my game was I wanted it to be able to run on tablet/mobile devices without having to re-code the whole thing in Java or Objective C. iOS and Android both have 'WebView' controls to make this easier, but I've had trouble in the little bit of tinkering around I've done with it (iOS requires all your assets to be in one folder as far as I've seen).

This type of cross-platform requirement is a good reason why some people are moving away from Flash and towards HTML5, but the downside is that you have to test on N different browsers and versions and have all the headaches associated with typical web development. These problems are alleviated by libraries like jQuery and some of the other HTML5 game libraries/platforms mentioned here (ImpactJS is one I've seen but haven't tried). Also these problems will not be as much of an issue when FireFox 7 is out and IE 9+ becomes more pervasive.

If you are interested in some of the problems I faced porting from Silverlight to HTML5 Canvas you should check out my blog post here:Porting Silverlight App to javascript using HTML5 Canvas tag

http://www.javascriptgaming.com/

A really interesting HTML5 development framework I recently stumbled upon is Sencha. It's mainly for handheld/touch devices, but what's not gonna be touch-based a couple years from now? Here are some intriguing demos, including a card game:

http://www.sencha.com/products/touch/demos.php

Here are some HTML5 games on Effects Games... there are even projects there you can jump in an get involved. Been killing time between compiles mostly with their Crystal Galaxy Demo

From the site: "Cycleblob is implemented using WebGL and HTML 5 canvas elements and is written completely in JavaScript."

http://cycleblob.com/

Here are 3 great games using the ImpactJS engine.

Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.

If you're currently unsure about what you can do with HTML5, I'd say these are currently the best examples. Keep in mind though that because it's such a hot topic, the field is changing quickly!

Z-Type

A Space Shoot'em'Up where you type to shoot.

Biolab

Fight your way through an infected Biolab in this Jump'n'Run. Use your Plasma Gun to shoot everything that moves! There are 3 levels to explore and 6 types of enemies to fight.

Creatures & Castles

An action-puzzle game in which you help a young treasure hunter steal vast quantities of treasure from a medieval castle.

try Private Joe for a full 2d retro arcade shooter

if you'd like to try mobile-optimzed games, head over to marketJS