Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Now that Flash is largely being replaced with HTML5 elements (video, audio, canvas, etc.) are there any good examples of web-based games built on completely open standards (meaning Javascript, HTML and CSS)? I see a lot of examples of pure HTML5 implementations of what was once only in Flash (like stuff here: http://www.html5rocks.com/) but not many games, a domain which still seem dominated by Flash. I'm curious what's possible and what the limitations are.

share|improve this question

closed as not constructive by Noctrine Jul 16 '12 at 22:29

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

6  
i recommend you drop the first line - the top rated answer doesn't answer your question but is offended by your premise ;) –  oberhamsi May 26 '11 at 13:27
add comment

20 Answers 20

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.

share|improve this answer
12  
If Adobe doesn't get their act together Flash will be replaced by HTML5 and I personally won't shed a tear. –  Simurr Jul 15 '10 at 20:56
    
@Simuri - I kind of agree. I've used their Flex stuff professionally, and compared to the way Sun manages Java, I'd say Adobe is a lot more... sloppy (for lack of a better word). –  weiji Jul 16 '10 at 7:48
2  
I certainly agree that Adobe need to get their act together. But HTML5 is so obviously just the latest buzzword (like AJAX, Web2.0 previously) and not a real technology you'd want to go out and use right now. –  Iain Jul 16 '10 at 13:46
1  
I disagree. With the recent announcements from Microsoft about IE9 embracing the HTML5 technologies, the only thing really missing is a decent IDE. And I guarantee you that the people behind both Dreamweaver and Visual Studio are trying to figure out just that. This may be early days, but the time to start thinking about using these technologies--and establishing best practices--is now. –  Ryan Corradini Jul 17 '10 at 1:38
    
@Simuri care to explain why? Adobe is far from perfect but there seems to be unwarranted animosity towards Flash (by the way some people carry on you would think Flash stole their lunch money in school). The biggest gripe I have with HTML5 is the lack of consistency across broswers, the lack of performance, and I am not a fan of JavaScript (I like strict languages) –  Allan Jul 22 '10 at 9:56
show 11 more comments

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).

share|improve this answer
1  
That is a very cool demo but not technically an answer to the question. He asked about HTML5, not WebGL; while the two are often conflated, they are different (eg. Internet Explorer is implementing HTML5 but not WebGL.) –  jhocking Apr 11 '11 at 11:22
add comment

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.

share|improve this answer
    
Just tried it - quite impressive! –  Tim Holt Jan 2 '11 at 18:05
    
the link you provide takes me to an index of games. –  expiredninja Jun 14 at 2:09
add comment

"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!)

share|improve this answer
    
All the features are there, but the way to access them, Javascript, is lacking when compared to ActionScript 3 –  Bart van Heukelom Jul 27 '10 at 10:15
    
How so? Please emphasize. –  richtaur Jul 27 '10 at 18:44
1  
ActionScript 3 has classes, which I personally find more intuitive to use than prototyping. It has static typing (but can be as dynamic as JS if needed) which enables better performance and allows for great IDE's with autocompletion, as well as detecting many errors at compile time rather than runtime. Packages ease the mixing of code from multiple projects. –  Bart van Heukelom Jul 28 '10 at 20:30
2  
All of which are subjective advantages or not related to the language itself... –  Rushyo Aug 12 '10 at 8:27
1  
Imo, Javascript is a cool and fluid language when taken for its good parts ^^ Btw, the "audio currently sucks" part is a major issue right now :7 –  Oskar Duveborn Jun 16 '12 at 9:54
add comment

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.

share|improve this answer
add comment

alt text

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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

share|improve this answer
add comment

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

share|improve this answer
add comment

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

share|improve this answer
3  
not HTML5, just DHTML I believe. Plus the sound was done through Flash. This was all to get maximum compatibility. –  Iain Jul 15 '10 at 19:40
add comment

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

share|improve this answer
add comment

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

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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

share|improve this answer
add comment

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

http://cycleblob.com/

share|improve this answer
add comment

try Private Joe for a full 2d retro arcade shooter

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

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.