HTML and CSS Reference
Mobile Web Game Techniques
with Canvas 2D API
Takuo Kihira, Entrepreneur
When we consider mobile HTML5 games, we usually compare them with native games. One might think that native
games are always superior to browser games or that browser games can never touch native games in performance.
But check out the top 10 games in the native app market. Often you will find that many of the top-selling games do not
use 3D graphics, particle effects, and so on. It seems that we are able to create similar kinds of mobile games in the
browser with HTML5.
However, there are two big problems around mobile HTML5 games. One is speed, and the other is compatibility
Needless to say, HTML5 games execute in the browser. This really means that HTML5 games are working on an
emulator or virtual machine, which is called a browser, and of course this is an obvious drawback for performance.
Modern browsers are optimized much like a modern virtual machine, but remain much slower than native apps.
We have to take pains to create mobile games that perform very well without creating them in native code.
In addition, unfortunately we have to face compatibility issues with various browsers. As you'll see later in this
chapter, there are often slight differences, especially between Android legacy browsers, because of their special
customizations. For example, it is possible that browser makers customized their browser to make better scores on
benchmarks, and they may have achieved it—along with adding lots of small compatibility bugs. Unlike server-side
programs, client HTML5 games are recommended to work on not only your own device but also all existing devices
and devices that will appear in the future.
After reading the above, you might feel bad about mobile HTML5. However, the advantages of creating mobile
HTML5 games exceed the disadvantages. For example, imagine that you are playing a game like SimCity. If you want
to let a friend see your town, all you can do is just post a screen shot. Your friends might say, “Cool,” but that's all. But,
if the game was working on browsers, your friends could see not only the picture, but also the dynamic game screen
as soon as they tap your link. The game would be working inside the native Twitter client app without any installation!
Native apps could never achieve such a trick.
So how do you create mobile browser games easily for such a wonderful future? You use Canvas!
Actually, there are two alternatives to get a native-like expression; one is Canvas, and the other is CSS. Which is the
better way to gain speed and avoid compatibility issues? In this chapter, I conclude that Canvas is superior to CSS.
Although CSS has a lot of features, its compatibility is catastrophic, especially on Android Legacy Browsers. If you
want to support Android, I do not recommend using CSS even if you have a lot of patience. Additionally, it is very
difficult to gain speed using CSS when you want to make many sprites move randomly. CSS is not suitable for these
types of games.