Editorial

Top 10 HTML5 games

A few days ago we ran a story about iOS beating Android on HTML5 performance, so we thought it'd be a perfect time to take a look at some of the best HTML5 games out there. There aren't quite as many around as there are Flash games, but there are some real gems out there that show the strengths of the platform, if you know where to look. Some of these games are mobile, some are them are built with desktops in mind, and some are great on both, but they're all great. 'PC' refers to any kind of traditional computing device here, so if something says PC only, that means it should run just fine on a Mac or Linux box, too. Mobile refers to pretty much everything in between.

10: Onslaught - PC only

Onslaught is a really simple game: you're in an arena, there's monsters coming out of three gates, and you throw different weapons at them. Sometimes there's a boss. Sometimes big enemies split into smaller enemies. All in all, though, it's a pretty mindless defender type game, with a little 8-bit RPG charm thrown in. It's a solid experience, though, one that calls to mind the addictive flash games of yore, and it's enough to hold your attention for a few minutes.

9: Dark Age - PC only

Dark Age is basically Gauntlet in a browser. The areas aren't quite as complex as the original, but it's easy to recognize the same concepts of gameplay: you collect treasure and keys as you navigate a maze filled with hordes of enemies that regenerate from different structures. Take out those structures and they'll stop so you can move on to the next area. The graphics aren't anything to write home about, and it lacks some of the original's variety, but it's pretty decent for something that runs in a browser and definitely worth a look.

8: Space Blaster - PC only

This is a pretty frantic space shooter where you're confronted by hordes of enemies wielding sharp and/or exploding thingies. It shows a good level of polish, although we wonder why the developers didn't go the extra mile and implement some touch friendly controls for the mobile users among us, given all that's been said about HTML5 and mobile.

7: Galactians 2 - Mobile or PC

This game brings all the frustratingly difficult gameplay of your typical Galaxians or Space Invaders type game to your mobile device. While it's still compatible with traditional PCs, keep in mind that the screen will be sized to fit a typical smartphone, so it may seem a bit weird to play it on a full sized display. It's got some decent graphics, and it does a pretty good job of transferring the addictiveness of its bigger brothers to HTML5.

6: Rebel Rescue - Mobile or PC

This is a Star Wars inspired game that's also a not-so-subtle Defender clone. Fly across the barren landscape of Hoth in your T-47 snowspeeder while dodging Imperial drones and other enemies. At the same time, you've got to sweep low to rescue as many stranded rebels as you can, and there's only a limited amount of time to fulfill your quota of rescues before you return to base.

Unfortunately the small screen occasionally made it hard for us to keep up with what was going on, as there is a lot of action taking place on screen at one time. There were a few times when we (quite literally) didn't have a clue what hit us. Still, Rebel Rescue kept us coming back for more, so it must be doing something right.

5:  Curvy - Mobile or PC

Like Rubik's Cube, Curvy is simple on the surface, but exceptionally simple to master. It's far from the most technologically advanced game on this list, and the graphics are hardly anything to write home about. Yet it's on this list because it's just fun. Basically, you're confronted with a screen filled with hexagons. On each hexagon there is a series of colored paths, and it's your job to turn the hexagons until all of the paths fit together. Sounds easy, doesn't it? Give it a try and you'll see otherwise!

4: The Sarien Collection - Mobile or PC

Number 4 on our list is sort of the start of a colossal tie. This and any of the games that come after it could easily be considered the best of the best, at least by our standards, and different people will have different standards of what's 'good' and what's 'bad.' But since this is supposed to be a tidy list, we're just going to put them in this order – but keep in mind that we love them all very, very much!

This is a really amazing collection of games that transfer several classic Sierra adventure games into HTML5 format. You can play the original King's Quest, Police Quest, Space Quest, The Black Cauldron, and Gold Rush here, all for free, and with Sierra's blessing. Pretty sweet, huh? Stop by and give it a shot. The graphics are crude, the sound is absent, and yet these old games have still held up surprisingly good in the twenty-plus years that they've been around, and first time players will find plenty to love here.

3: World's Biggest Pac-Man - PC only

Pretty much everyone has played Pac-Man at some point or another, so we're not even going to bother explaining this one. The novelty of this version comes from its sheer size. Instead of going from one maze to the next, you're plopped into the middle of thousands upon thousands of mazes, and you can go from one to another any time you want, regardless of whether or not you actually finish the one you're in. Oh, and all of these maps happen to have been designed by people just like you – you can even make your own, if you have a Facebook account, although you won't need one to play. Since they're all player made, the mazes can be hit and miss, but just because there are so many good ones, and because the game itself has so much potential, this one earns a solid place on our list.

2: Angry Birds - PC only

This one is 'optimized' for Chrome, but it works on most modern browsers, sans sound, which is provided by Flash in other browsers (mobile users, however, are out of luck). It features a whopping 70 levels, plus seven Chrome exclusive levels, all for free. As you probably already know, it's a physics based demolition game that you might go so far as to call a puzzler. The gameplay centers around sending the titular Angry Birds sailing through the air and into pig infested buildings. Yeah, kind of weird, but it's a video game.

1: Cut the Rope - Mobile or PC

Microsoft really hit the nail right on the head with this one. Not only is it a great game, but it does a good job of showing a level of portability and stability that's just unheard of with Flash. If you're familiar with the mobile apps for myriad platforms, you'll be right at home here. If not, it's pretty simple: strategically cut the ropes that are dangling a piece of candy in the air, guiding it past obstacles and into a vaguely reptilian creature's mouth.

Even though the game, like The World's Biggest Pac-Man, was developed as a promotion for IE9, it runs great on any browser, although IE users will get access to some exclusive levels. With great graphics, a polished gameplay experience, and a brilliant gameplay concept, Cut the Rope is easily the most ambitious HTML5 game out there right now, and a real model for future developers to aspire for.

So, do you have any favorite HTML5 games? Drop us a comment below and let us know!

Sarien Collection image courtesy of Sarien.net

Report a problem with article
Previous Story

Anonymous leaks 2006 source code for Norton AntiVirus

Next Story

HP Pathway to the Cloud road show announced

40 Comments

Commenting is disabled on this article.

Been looking a lot of HTML5 vs Adobe stuff and HTML5 games look like I'm back playing games from the earlier 1990's. People and Apple say HTML5 is going to take over Flash, but Flash so far seems well more polished and advanced.
I guess I'm just confused over the entire thing since I'm not a programmer.

E-Sim - free, massive, multiplayer, social browser game

E-Sim is a simulation of modern world.
You can become a virtual citizen of one of 39 virtual countries and participate in it's political, military and economical life.
Your citizen can become an ordinary soldier, company owner or run for presidential seat and become the leader of the whole country!

You can focus on your own career or help your country in wars and battles. You can organize your own private army or invest in your business - it's all your choice!

Register here: http://e-sim.org/lan.4516/

And the only thing that works properly on Windows 8 tablet is: Curvy.

Angry Birds - nope... first needs a desktop version (Flash required!) and then touch simply does not work .

BigBoy said,
And the only thing that works properly on Windows 8 tablet is: Curvy.

Angry Birds - nope... first needs a desktop version (Flash required!) and then touch simply does not work .

I updated the article to refresh this. Basically, it requires Flash to provide sound to non-Chromium browsers. And as the article says, it doesn't support mobile. But as far as I know, the gameplay is 100% HTML, it's only the (non-essential) sound that uses Flash.

King Mustard said,
Appalling quality. If this is the best HTML5 can do so far, Adobe/Flash has nothing to worry about.

Cut the rope looks great, not sure what you're complaining about there.

WebGL is also VERY powerful. Here's an amazing cars demo in WebGL: http://alteredqualia.com/three/examples/webgl_cars.html

Flash has a lot to worry about, it's not responsive which is something websites are needing to be as more and more use mobile to browse the internet. HTML, CSS and JS is becoming a lot more advanced and since it is responsive is quickly outdoing the need for flash.

SPARTdAN said,

Cut the rope looks great, not sure what you're complaining about there.

WebGL is also VERY powerful. Here's an amazing cars demo in WebGL: http://alteredqualia.com/three/examples/webgl_cars.html

Flash has a lot to worry about, it's not responsive which is something websites are needing to be as more and more use mobile to browse the internet. HTML, CSS and JS is becoming a lot more advanced and since it is responsive is quickly outdoing the need for flash.

AGAIN... Stop promoting WebGL...

It is impressive, because it is running native OpenGL code directly on your GPU. It is not much different than a full OpenGL or DirectX game running inside your browser.

However, it is also highly dangerous because it exposes your video hardware to websites, and is MORE dangerous than ActiveX and older periods in internet history where EXE/Native code was run through the browser.

WebGL is ALSO NOT a standard, and has NOTHING to do with HTML5/CSS3. If Microsoft was promoting WebDirectX, the world would be screaming about them avoiding standards.

Yet Google is doing breaking away from standards because they couldn't get a silly 'true' HTML5 IEFish demo from Microsoft run even close to the IE9 speeds, in Chrome, so they used WebGL instead to 'pretend' it was HTML5.

Today most of the graphical HTML5 demos, that are truly HTML5 still run slow on Chrome even with their new GPU accelerations, with most scoring 1/4th the speed of IE9 and some going all the way to scoring 1/500th the speed of IE9.

WebGL is bad, very bad, and not the direction of the web... Besides not being a standard, it encourages developers to work 'outside' of the HTML5 standard, and it has 'requirements' that are not available everywhere a Browser runs or should run.

It requires OpenGL, which breaks the whole concept of what W3C and HTML5's concept of RIA are supposed to break the world away from. If people want to run OpenGL Apps, Games, they SHOULD NOT being doing it through a browser.

King Mustard said,
Appalling quality. If this is the best HTML5 can do so far, Adobe/Flash has nothing to worry about.

Because MOST browsers still suck at rendering high quality HTML5 graphics consistently well.

For more impressive 'graphical' demos, Bing/Google IETestDrive, and click on More Demos and look at some of the 'simple' graphic demos.

They are beyond what we came to expect from gaming consoles 10 years ago, and will get better as more browsers can rendering them as fast as IE9/IE10.

Heck, here is the Link:
http://ie.microsoft.com/testdrive/Views/SiteMap/

There are some impressive things here. However if you are not using IE9/IE10, they might not be as pretty or fluid.

It is also a good chance to compare the performance of IE versus your favorite browser. It is also fun to test on your phone, and most of these demos WP7 that are IE9 and not IE10 based run well and fluid at 30fps. Which is a contextual thing to remember when you see Google using WebGL or complaining that they can't get the HTML5 rendering performance needed, yet a Microsoft phone running IE9 with GPU acceleration can.

Take care and things will get better.

thenetavenger said,

AGAIN... Stop promoting WebGL...


Mr. thenetavenger - You are doing nothing other than fear mongering and spreading misinformation. Read http://en.wikipedia.org/wiki/WebGL to update what you think WebGL is or is not . Noone has ever asserted that a graphics card can be fried using WebGL, instead the denial of service vulnerabilities were limited to freezing the browser.. and possibility your computer.. however none of these vulnerabilities were ever documented 'in the wild' and many of the holes have already been patched.

Stop hating dude and just embrace the awesomness that is WebGL. Not using a new technology because your afraid is backwards. By your logic, no one should've used Windows95 because of how insecure the operating system was in 1995. Remember vulnerabilities can always be patched through updates! This is called progress.

Daniel_Pooh said,
How can you make a game in HTML?

Right now one of the easiest development tools is Microsoft Visual Studio 11, that also has Blend for HTML5.

You can literally make HTML5 games without even writing code because Microsoft's tools work from the new paradigm that was created from WPF development concepts. (However for a full featured game, some coding will be required.)

Microsoft really hit the nail right on the head with this one. Not only is it a great game, but it does a good job of showing a level of portability and stability that's just unheard of with Flash.

quite ironic you say that when the game actually USES flash player to render sound on chrome and Firefox because the sound api is unreliable on these browsers!

"Second, the current version of Chrome (version 16) has known issues related to media playback that make sound unpredictable in Cut the Rope. We researched workarounds and have attempted to re-encode the media in multiple formats (including WebM), but haven't found a format or MIME configuration or anything else that will reliably fix the problem. These appear to be browser bugs and known issues. More importantly, the game continues to be playable and enjoyable in spite of the intermittent audio. In light of that, while we can say Internet Explorer 9 users get a great plug-in free experience, Chrome and some Firefox users could have run into an audio problem but will notice we fall back to a flash plugin to ensure that sound effects and music will work."

http://www.cuttherope.ie/dev/

so, it does show that HTML5 based games are clearly not on par with flash based games...

link8506 said,

quite ironic you say that when the game actually USES flash player to render sound on chrome and Firefox because the sound api is unreliable on these browsers!

"Second, the current version of Chrome (version 16) has known issues related to media playback that make sound unpredictable in Cut the Rope. We researched workarounds and have attempted to re-encode the media in multiple formats (including WebM), but haven't found a format or MIME configuration or anything else that will reliably fix the problem. These appear to be browser bugs and known issues. More importantly, the game continues to be playable and enjoyable in spite of the intermittent audio. In light of that, while we can say Internet Explorer 9 users get a great plug-in free experience, Chrome and some Firefox users could have run into an audio problem but will notice we fall back to a flash plugin to ensure that sound effects and music will work."

http://www.cuttherope.ie/dev/

so, it does show that HTML5 based games are clearly not on par with flash based games...

So JUST LIKE Chrome Angry Birds, that uses Flash for Audio, and Chrome's integrated Flash features to play sound.

Yes there are still audio issues with HTML5, and as the standards come together.

The 'between' the lines issues with the specifications that create problems like this is something Microsoft has been pushing to get attention and get fixed, not only with W3C, but with Google, Opera, Firefox and others so they are doing things the same way even when the standard leaves room for variations.

When the IE9 team set out to adhere to standards, they noticed a lot of things that were implemented differently on Firefox, Chrome, Safari, but yet were technically in the guidelines of the standards.

http://ie.microsoft.com/testdr...5/BorderRadius/Default.html

*Even a 'dash-dotted border and how it renders the corners was crazy different, let alone more complex aspects of the standards.

It is important that we 'push' Webkit/Google/Apple, Firefox, Opera, to join with Microsoft in eliminating the variances.


Instead we see Google and Firefox spending time with CRAP like WebGL, that is not a standard, and MOVES away from standards to render graphics outside of the specifications completely.
*If Microsoft was pushing a similar technology the world would take torches and pitchforks to Redmond, yet Google and Firefox are given a pass and it almost becoming 'accepted' with most HTML5 scoring tests checking for WebGL support.
(Even with the leading security experts telling people that WebGL is the greatest threat to user security since running native code via a browser was found to be an equally bad idea.)

Cut the rope is an amazing game. The level of detail. The quality graphics and animations. I am amazed this can be done in HTML5. Also this was the only App in Windows 8 CP which made me happy. If other apps can have the quality and performance of this Game .. It will be just perfect!.

Zain Adeel said,
Cut the rope is an amazing game. The level of detail. The quality graphics and animations. I am amazed this can be done in HTML5. Also this was the only App in Windows 8 CP which made me happy. If other apps can have the quality and performance of this Game .. It will be just perfect!.
It was also in the Google Play (Android Market) store for $0.49! Well worth the cost!

Zain Adeel said,
Cut the rope is an amazing game. The level of detail. The quality graphics and animations. I am amazed this can be done in HTML5. Also this was the only App in Windows 8 CP which made me happy. If other apps can have the quality and performance of this Game .. It will be just perfect!.

Try clicking faster on the balloons. You will see that it suffers from performance issues, so it is not that perfect.

Zain Adeel said,
Cut the rope is an amazing game. The level of detail. The quality graphics and animations. I am amazed this can be done in HTML5. Also this was the only App in Windows 8 CP which made me happy. If other apps can have the quality and performance of this Game .. It will be just perfect!.

It is a nice game, but is only the begining, which is what MIcrosoft has been trying to convey. With IE9/IE10's advanced graphical HTML5/CSS rendering, it can shove around some impressive graphics and all with standards based code.

This is why IETestDrive is important, as it demonstrates some of the cool things that can be done with HTML5/CSS3 features, and at speeds that normally would require OpenGL or DirectX in traditional contexts.

(Google using WebGL to render IEFish to show they can get good FPS is disingenuous, as they were being 'cute' in a 'response' to Microsoft, but bypassed HTML5/CSS3 and used a non-standard direct access to OpenGL to get the same level of graphical performance IE9 was getting just moving around HTML5/CSS content. Which is a bit sad for Google, but even more sad that people don't realize they were conned by Google and it also urges people to use non-standards for graphics because even TODAY Chrome and Firefox cannot come close to IE9 or IE10 when it comes to high performance graphical rendering.)

Bing IETestDrive, and try some of the performance demos there, especially the graphically rich ones.

And expect to see HTML5 Apps and Games that are a leap beyond Silverlight/Flash in performance and will start getting into 3D gaming levels in the a few years, which is brilliantly good for everyone.

Shayla said,
the music background still palying after i turn off da browser when played Space Blaster game (on IE9 64bit)

Then the IE9 Page didn't fully close or your sound card has a really bad driver that is running recycling the music in the Audio stack buffer.

Correct me if I'm wrong, but I don't think that Angry Birds is an HTML5 game. If it were, it would work in IE10 Metro would it not? As it is, you get greeted by a "You dont have adobe flash" message.

TCLN Ryster said,
Correct me if I'm wrong, but I don't think that Angry Birds is an HTML5 game. If it were, it would work in IE10 Metro would it not? As it is, you get greeted by a "You dont have adobe flash" message.

Yes, you are right.... AB is not a HTML5 game but flash

TCLN Ryster said,
Correct me if I'm wrong, but I don't think that Angry Birds is an HTML5 game. If it were, it would work in IE10 Metro would it not? As it is, you get greeted by a "You dont have adobe flash" message.

As far as i can recall , its only audio which uses flash to make it generic

TCLN Ryster said,
Correct me if I'm wrong, but I don't think that Angry Birds is an HTML5 game. If it were, it would work in IE10 Metro would it not? As it is, you get greeted by a "You dont have adobe flash" message.

Well, I also was like WTH...

However, it is an HTML5 game, but it checks specifically for Chrome Webkit Audio, and if not available uses Flash Audio.

So in one way, it is technically using HTML5 for graphics, but for audio, it is using Flash unless the browser is SPECIFICALLY Chrome.

Part of Chrome's Webkit Audio functions are based in its integrated Flash.

So Graphically HTML5, but when it comes to Audio, it is not HTML5 based.

And this makes NO sense...

thenetavenger said,

And this makes NO sense...

Indeed it doesn't lol. The way I see it, audio is just as important as video in games. If the whole game isn't HTML5 then the game isn't HTML5. How about we strike it off the above list?

WebGL is not a standard or HTML5... People need to stop this crap before we see massive malware and attacks that fry GPU just buy opening a WebGL web site.

If a website can shove native user shader code and OpenGL call through your GPU directly, which is more than just a Graphics Processors, as they are GP-GPUs it is not different than allowing a website to shove code through your CPU directly. (Using known OpenGL issues, and GPU flaws WebGL code can not only run CODE on your computer, but it can exploit a GPU flaw to FRY IT.)

Google using WebGL to get the same FPS for the IEFish that IE9 was able to get with native HTML5 was disingenious and started a really bad trend in browsers moving to a non-standard for graphics. Microsoft was 'hammered' for not being standards compliant, and yet Firefox and Chrome PROMOTE WebGL that is not only NOT a standard, but is DANGEROUS, and people don't speak out.

thenetavenger said,

WebGL is not a standard or HTML5... People need to stop this crap before we see massive malware and attacks that fry GPU just buy opening a WebGL web site.

Mr. thenetavenger - You are doing nothing other than fear mongering and spreading misinformation. Read http://en.wikipedia.org/wiki/WebGL to update what you think WebGL is or is not . Noone has ever asserted that a graphics card can be fried using WebGL, instead the denial of service vulnerabilities were limited to freezing the browser.. and possibility your computer.. however none of these vulnerabilities were ever documented 'in the wild' and many of the holes have already been patched.

Stop hating dude and just embrace the awesomness that is WebGL. Not using a new technology because your afraid is backwards. By your logic, no one should've used Windows95 because of how insecure the operating system was in 1995. Remember vulnerabilities can always be patched through updates! This is called progress.

thenetavenger said,

WebGL is not a standard or HTML5... People need to stop this crap before we see massive malware and attacks that fry GPU just buy opening a WebGL web site.

If a website can shove native user shader code and OpenGL call through your GPU directly, which is more than just a Graphics Processors, as they are GP-GPUs it is not different than allowing a website to shove code through your CPU directly. (Using known OpenGL issues, and GPU flaws WebGL code can not only run CODE on your computer, but it can exploit a GPU flaw to FRY IT.)

Google using WebGL to get the same FPS for the IEFish that IE9 was able to get with native HTML5 was disingenious and started a really bad trend in browsers moving to a non-standard for graphics. Microsoft was 'hammered' for not being standards compliant, and yet Firefox and Chrome PROMOTE WebGL that is not only NOT a standard, but is DANGEROUS, and people don't speak out.

Aren't we allowing websites to run js code already, compiled to native code by the browser?

WebGL doesn't shove calls straight to the GPU anyway, WebGL's GPU process validates every call before passing it to the GPU.

thenetavenger said,

WebGL is not a standard or HTML5... People need to stop this crap before we see massive malware and attacks that fry GPU just buy opening a WebGL web site.

It is not HTML5 standard , i know that very well. But when did i say so? All i said was :

"and if u wanna consider webgl games ; http://www.webgl.com/category/webgl-games/";
there are no words like html5 , better , firefox and chrome rocks FTW! IE sucks etc


Other than that , WebGl oh god! Its not a malware !

shhac said,
Here is something better but it is only one level:
http://www.adityaravishankar.c.../games/command-and-conquer/

There are definitely some impressive demos of the technology out there, but honestly I really wanted to include only complete games in the list, even if they were fairly simplistic. The last 3 are definitely in the same category, I think. But yeah, that's a great example of what the ethnology is capable of.