5 Awesome HTML5 Games

Contributing Editor

It’s the end of the week, and it’s been a while since I last looked at native browser-based games. I’ve therefore picked a new selection for your research purposes … it’s amazing how far the technology has progressed within a few short months.

The following examples have all been implemented using HTML5 technologies such as canvas and JavaScript. They work in most modern browsers, but most won’t work in Internet Explorer 8.0 and below. Chrome or Opera generally provide the best experience.

Biolab DisasterBiolab Disaster

While I’m far too young to remember 8-bit gaming in the 1980s, Biolab is a homage to those simpler but addictive titles from 20-30 years ago. The game is a space-themed platformer with colorful chunky sprites, great animation and sound effects. The developer, Dominic Szablewski, has also released the canvas-based library at ImpactJS.com.

Biolab is a fine game. In fact, it’s better than many released in the 80s … so I’ve heard.

Crystal GalaxyCrystal Galaxy

Crystal Galaxy is a sideways scrolling space shooter reminiscent of R-Type. However, the game’s unique in that the mouse controls the direction of the ship as well as its location.

Unusually, Crystal Galaxy doesn’t use the HTML5 canvas element. Every sprite is an individual HTML div moved around the screen. It works quickly in all browsers and is even playable in IE6! The authors at EffectGames.com also provide free tools and libraries to help you write your own titles.

Crystal Galaxy is fun, and you won’t be able to resist another go.

Canvas RiderCanvas Rider

As you might expect, Canvas Rider is a version of Line Rider implemented using the HTML5 canvas element. The game is simple: you ride a bicycle over a series of obstacles to reach a goal — but the realistic gravity and physics make it a serious challenge.

What makes Canvas Rider more special is the online track editor and the thousands of tracks submitted by fans of the game.

Agent 008 BallAgent 008 Ball

Agent 008 Ball is a glorious-looking game of pool for one player. The objective is to pot as many balls as possible before the timer runs out.

Again, Agent 008 Ball uses the HTML5 canvas element, but it’s the photo-realistic graphics and real-world physics make the game stand out.

Pirates Love DaisiesPirates Love Daisies

Pirate Love Daisies is a Tower-Defense-like game which pushes the boundaries of what’s possible with HTML5 and JavaScript. It was written by Flash developer Grant Skinner who was commissioned by Microsoft to create a game which showed off the new technologies in IE9.

The game works well in most browsers but, as you’d expect, it’s best on a fast PC using a browser with native hardware-accelerated graphics. For the moment, IE9 beta offers the best experience.

While a browser is never likely to be the best platform for games, these titles show that a little ingenuity can yield amazing results. What’s your favorite, and have you discovered any awesome HTML5 games?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Stephen Hill

    Crystal Galaxy is not HTML5:

    Perhaps you should have included http://wordsquared.com/ which is.

  • Aaron

    You’re missing Word^2! http://www.wordsquared.com

  • Anonymous

    What? no 3D games? 10 years behind still… plus JavaScript is the worst language ever. Loosy goosy, copy paste nasty language.

    • http://www.optimalworks.net/ Craig Buckler

      There are some 3D games but they tend to be more experimental rather than playable. As for being 10 years behind — it’s more than that! These games are run in an environment that was never intended to handle them. It’s a browser with interpreted code.

      JavaScript is a fantastic language, though. It takes a little while to get your head around but, when you do, you’ll realise just how powerful, flexible and elegant it can be.

      • Anonymous

        Once you’ve used ActionScript 3.0 and have seen how the ECMAScript standard should be used you’ll never go back. Of course this is just a personal opinion – doesn’t make either language better or worse. I code solely because I enjoy it, of course making money is up there ;)

        I was a huge Flash hater until I saw Flex Builder 3, now I regret not having an open mind about it years ago.

        Innovation lies in tomorrow, not yesterday.

  • Anonymous

    Crystal Galaxy, “It works quickly in all browsers and is even playable in IE6!”

    It runs bad in firefox and in google chrome the player sprite flashes like it’s wrapped in a blink tag…

    • http://www.optimalworks.net/ Craig Buckler

      It runs well for me — even on a slow netbook. Have you got Firebug or another page analysis plugin enabled?

  • Michael Kordahi

    heaps more HTML5 games listed over at http://makeawesomeweb.com/

  • Russell Davison

    Awesome. I’ve tried them all in my Firefox browser and they work great. Now, I need to look at the source code to see how they do it!
    http://russelldavison.com

  • noonnope

    One question: where’s the HTML5 in all this? :)

    All I can see is Javascript. No JS no games. I’m not liking this pretending any more. All day long HTML5 this HTML5 that, when it’s about JS and codecs. HTML5 != JS. For those outside the hype, that is.

    Let’s be honest about it and say: Javascript, new video codec, new audio codec. OK?

    • Anonymous

      It is annoying they are using the Canvas tag to simply do things we could do 5+ years ago with JavaScript any way. There are other things in HTML5 besides the canvas tag.

  • Jason

    The HTML5 Hype machine continues…

  • raymond

    WOw !!

    So this is good bye to flash games

    correct ?

    • DRM

      No and here’s why. You can view the source of these games and steal them. Flash is compiled and can have further security measures.

    • EastCoast

      No. Flash can do a lot more than any so called ‘html5′ game, the examples here are ‘flash 10 years ago’ level. Flash also has an ecosystem for online gaming e.g mochiads and many games sites that support the distribution and monetization of flash games. Flash 11 is just around the corner with fully accelerated 3d. The ROI on building cross platform games in flash is a lot higher than the difficulties of trying to get an html5 game to run on a range of browsers needed to get decent market penetration.

    • http://www.optimalworks.net/ Craig Buckler

      No, this isn’t goodbye to Flash. As mentioned, Flash is a more mature gaming platform and generally offers a faster experience.

      That said, HTML5/JS does offer an open source alternative which requires no expensive development tools and works on the Apple devices. 3D canvas is already available in Chrome and there are some stunning demos.

  • Silvio Berlusconi

    HTML5 Space Invaders with an Italian twist. Help Berlusconi score some chicks! http://bit.ly/berlsbigperv

  • Bill

    Nice collection! Most of my favs are in the list. I just created Mutant Zombie Monsters, a side scrolling zombie shooter at http://www.mutantzombiemonsters.com/

  • http://www.html5gameengines.com html5 game engine

    Great list. These games have really come a long way. No more need for Flash now!

  • http://goo.gl/OW1aB Vorun KReal

    Here’s one I made to play with HTML5 and canvas goo.gl/OW1aB