Using HTML5 Games On Websites

Posted on July 3, 2013 by

Many Web developers begin to acknowledge the potentials of HTML5-based gaming on their websites although the platform has received bad press in recent years due to development issues and performance problems. While many still say that HTML5 is not ready or doomed to failure, it will eventually become a positive force behind web gaming.

Last year was a bit tough for the HTML5 community, but things are getting better now. It is a very innovative and unique platform for mobile gaming and web developers should learn to use it to add some colors to their websites. They will not only offer refreshing, new features to websites, but there’s always an opportunity to monetize these games. As HTML5 games are playable on any major web browsers, releasing new updates is much easier.

Developers can use specific engines to develop HTML5 games, such as Game Closure, Crafty, ImpactJS and Construct2. Turbulenz is an open source gaming that offers amazing opportunity for web developers and known for its impressive 2D/3D capabilities. Some developers even managed to release games with Unreal engine, which is a quite astonishing achievement and it really proves that HTML5 is a good alternative to Adobe Flash.

It should be noted that HTML5 gaming is currently more suitable on desktops. Mobile web browsers have much lower Javascript performance, but we should see some improvements with iOS 7.0 and Android 5.0 Key Lime Pie. In addition, smartphones and tablets with Android OS are known for their varying display sizes, not to mention the increased display size of new phablets and very high pixel density of 1080p smartphones.

Audio capability of mobile web browsers is mostly inadequate and it sometimes gets so bad that some users choose to play in total silence. The fact is that many entry-level smartphone still uses single-channel audio and on some iOS devices, users won’t even hear anything until they initiate proper actions.

Most Web developers are fully aware of quirks of dealing with specific web browsers and know how to deal with fragmented platforms gracefully. So, these technical challenges shouldn’t put them off, also hopefully current performance and audio issues are only temporary.

There are a number of stages involved with HTML5 game development, including catering to a number of device models, optimizing for both desktop and mobile, drawing to the screen with the canvas API, capturing click/touch events, making loops, using sprites, using simple math functions, such as collision detection and adding some extra polish.


As often mentioned previously, web developers need to consider a plethora of display size and resolutions. This means, they will need to scale their canvas to properly match the view port. There’s a possibility that this would result in degradation of quality and one good trick is by create a smaller canvas and then scale it up to maintain a good performance level. Developers often use a specific meta view port tag to disallow users scale the game and force the game to render at full size.

It is advisable to declare all variables before the main code and use obvious naming scheme. When resizing the interface, developers need to maintain the ratio by using height and width attributes accordingly. They may also scale up the canvas using CSS, so when users resize the browser, the canvas will automatically scale to fit. To improve user experience, developers can add some more pixels and hide the address bar.

Filling the Canvas

After web developers scale the canvas snuggly to its viewport, they can begin drawing some shapes. Initially, web developers may add a few basic geometric shapes. Newer Android and iOS browsers can handle plenty of image sprites, while maintaining high frame rate. On Android 3.2 or older, frame rates drop exponentially as more sprites are added. To speed up the learning process, web developers can employ a basic Draw object, which clears the screen, draws some shapes and show some text. Mozilla Developers Network offers comprehensive resources, including many examples on how to draw the canvas.

Adding Touch/Tap Events

To make the game usable for users, developers need to provide methods to catch click events on desktop and tap events on mobile devices. Both events are quite different. With standard mouse/touchpad click events, developers usually define the X and Y coordinates on the interface. Touch events are somewhat different, as developers need to use touches array, filled with touch coordinates and other relevant data.

They may also need to add specific function to disable zooming, scrolling and other touch-related actions, to prevent interrupting the flow of the HTML5 games. In order to ensure these events work different screen resolutions, web developers need to divide or multiply the pixel coordinate by specific ratio.

Creating a Loop

Any type game requires loops to generate animation. These loops gather user input, process collisions, update characters, show updated characters and repeat the loop. Developers can use some loop functions already available in HTML5 community, which are battery-efficient and offer smoother animation. Again, it’s necessary to ensure that these functions perform consistently well across browsers and platforms.

One issue to consider when using loops is that touches from previous steps could be wiped off immediately from the screen.

Developers should come up with a good approach to remember where things are drawn and what are they.

Adding Sprites

Developers need to use something that can hold a reference to all particles, bubbles, touches and other dynamic things.

Adding math functions

Collision detection and other math functions are needed to achieve and maintain realistic gameplay. Web developers can start by learning how basic geometrical shapes can interact with each other on the screen.

Create some shapes that travel on straight trajectory at different speeds to simulate straightforward collision detection mechanism. Alternatively, developers should also try to use a sine wave, which is still somewhat simple mathematically, but much more complex visually.

Developers may use particle effects to simulate explosions, by making a geometrical shape to break apart into plenty of small debris. This involves some knowledge on basic acceleration and deceleration, so that particles can speed up and slow down accordingly. Some games may require wave effects, which can be simulated using some overlapping circles.

Making things Better

After essential features and functions have been added, developers need to polish the game to improve user experience and visual appeal. As an example, they can use local storage to store high scores, add audio and add splash screens.


Web developers should now understand the basics of building HTML5 games and they can decide whether it is necessary to explore this possibility further. If they are a willing to invest some effort and time, HTML5 games can make a great impact to any website. The HTML5 community is prospering and while its niche market isn’t too large, it will surely expand to some extent.

Author :

  • Subash