Will a Game written using HTML5 work on smartphones?

Question

I would like to write a game that could be played on smart phones and was wondering if HTML5 might be a way to write games to work on a wide selection of smart phones.

Answer 1

I just ran the HTML5 test:

• My iPod Touch 2nd generation with iOS 3.1.3 scores 125 and 7 bonux points out of 300 in Safari. Of particular note to game development:
  • Full points in Canvas! Great for game rendering.
  • Supports the video element with MPEG-4 and H.264 formats
  • Supports the audio element with PCM, MP3 and AAC formats (great for bgm and sounds!)
  • Session and local storages are supported, as is Web SQL Database! (game save files?)
  • Application Cache is supported; I assume this feature would let you cache game data files (images and such) for faster loading. Sounds great to me!
  • No WebGL support.
  • No WebSocket either; multiplayer games will need to use something else like AJAX polling.
• My Droid Incredible with Android OS 2.1 (+ Sense UI) scores 151 and no bonus points out of 300 on its built-in browser. Again, of particular note:
  • Full Canvas support
  • video element supported but all four codecs had X's on them. I wonder what formats it can play?
  • audio element, same thing as video - supported but formats all have X's.
  • Session and local storage and Web SQL Database all supported
  • Application Cache is supported
  • No WebGL or WebSocket
  • Web workers are supported, which were not supported on my iPod; these could be a good thing in game development for things that act in parallel -- perhaps AI?
• Edit 2011/1/18: My Droid Incredible now has Android 2.2 and scores a 176 out of 300. Tchalvak (in the comments) got the same score with his Droid 2, so it seems to be common for the Android 2.2 browser. I also tried the Opera Mobile browser which got a terrible 72 (no bonus points) out of 300, but fully supports canvas!

So as you can see, the iPod/iPhone and Android are very much neck-and-neck and seem to support a decent range of HTML5 features. Canvas is great for 2D browser graphics and the audio element would probably be great for playing background sounds and music, and it's also really cool to see that both platforms support storage (though you could always just use cookies of course, depending on the size of a game save). So overall I'd say you should go for it. The numbers aren't everything; as wkerslake said "none of these numbers inspire confidence" but if you look through what is supported, it seems to be everything you need!

I say go for it! I wish you the best of luck.

By the way, you might want to watch for Vanthia. It's a browser game which utilizes canvas for efficient drawing. I got to play the closed beta and it was sure coming along! The developer has said very little for over half a year now, except that he is definitely developing it but just keeping things somewhat secret.

You could also get some ideas from Google's recent Pacman interactive logo. It wasn't very HTML5 but it sure was functional! It shows that you don't actually need HTML5 to make a browser game (and I think HTML5 is being thrown around as a buzzword far too much, just as AJAX was or still is). There is a github project with a deobfuscated, cleaned up version of the source that you can look through and play with.

Answer 2

HTML5 is a long way from being ubiquitously supported even in web browsers on PC much less phones.

These numbers are based on the html5test

• IE8 on PC = 27/300
• Chrome 5.0.375.125 on PC = 197/300
• Safari 4.0.4 on PC = 207/300
• Safari on iPhone4 = 185/300

None of those numbers inspire confidence

Answer 3

It might seem a little late but I'd like to provide an update on the situation for HTML5 and the mobile browsers now that some time has passed. Lately, quite a few game engines have been developed that will produce HTML5 compatible games (see: Construct 2 and Game Maker Studio). Both produce OK performance but there has been notable issues with physics extensions and fast moving objects on some platforms. iOS still takes the lead when it comes to performance but Android has come a long way with the latest Chrome builds. It should be noted that Dolphin Browser on Android totes even 100% increase in HTML5 performance, as well! You can see a quick comparison done for a test below:

If you're looking to do manual optimization, there's some great advice listed here. Also, with HTML5 games becoming increasingly popular and allowed on sites like Kongregate and previously other flash exclusive game portals - there's no reason to be afraid of writing HTML5 based games anymore for a mobile device.

A few libraries exist as well to keep things easy to use on mobile, I've listed a couple below:

KineticJS

EaselJS

QuarkJS

Answer 4

as of July 2012, you can make smooth mobile HTML5 games. Check out this video

Answer 5

From the technical point of view it's certainly doable. There are some problems/pitfalls though:

• There aren't much frameworks out in the open, so you'll have to basically write everything from scratch. From the renderer, to sound-handling, collision-detection. This can be a lot of work, depending on what you're trying to do.
• You'll have to have a really good understanding of JavaScript. Some usual OOP practices won't work when using this Language. It's probably not the best choice for a game with huge amounts of code :)
• Don't forget about performance. Smartphones are far from the performance of a typical Desktop-PC. You'll have to test performance carefully on different devices. It might also depend on the JavaScript-Engine (Browser) that is installed on the device. This isn't a HTML5 only issue of course.
• Try to reduce the bandwidth needed for the game. Mobile-devices tend to have slower connections and sometimes people pay for the bandwidth they use. Try to use caching whenever possible.

Answer 6

Found a good post about iPad and HTML5: http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

Also I would avoid heavy canvas drawing on iPad, for some reason it seems to be pretty slow.

Answer 7

You can use PhoneGap Build:

Just upload a zip file with the HTML5 code and it will give you the application for: Android, iOS, winphone, Blackbarry, Symbian ..ecc..