Many prominent online platforms have ramped up production of HTML5 games over years, which has drawn considerable attention from gamers and the game industry across the globe.
One of the major attractions of HTML5 games is their compatibility with browsers on a wide range of devices, including smartphones, tablets and desktop computers. Moreover, since they are built with HTML5 and JavaScript, it’s possible to develop them in Unity and apply your general programming knowledge.
Thanks to their adaptability, HTML5 games have spread widely and quickly. In contrast to its brisk market share growth, development of HTML5 games has some challenges. More often than not, the most profitable games are the most labor-consuming ones. After working to overcome the challenges, it eventually becomes apparent that the common cause is a lack of technical knowledge.
So in this article we will provide a minimum overview of how HTML5 games function, how they can be developed, and what might be their future.
1. What is HTML5 anyway?
Since HTML1 was created in 1993, HTML, a standard text-encoding system, has been upgraded over the years up to HTML4, published in 1999.
The HTML5 specification, released in 2014, has various advantages, including cleaner code, mobile application development frameworks, and HTML Offline Web Application API, which allows applications to continue to work regardless of Internet connections.
All these factors make HTML5 a ubiquitous and an indispensable tool for web development.
As a standard, HTML5 was retired on January 28, 2021, succeeded by a specification known as the HTML Living Standard.
2. What are HTML5 games?
HTML5 games are video games played using browsers, implemented with HTML5 and JavaScript.
Users do not need to download games or register, meaning they can play without worrying about storage space on their smartphones or PCs.
HTML5 game development doesn’t require building apps and can be developed by downloading source code from repositories like GitHub.
However, unlike native game development using Unity or other software, it requires browser and server expertise.
3. Background to the emergence of HTML5 games
HTML5 was created to eliminate Microsoft Silverlight and Adobe Flash. The latter was known to perform poorly and have security flaws.
With Flash being discontinued at the end of 2020, the increased demand for JavaScript SDKs as substitutes for Flash has also helped propagate HTML5.
This has led to proliferation of HTML5 games developed using the latest JavaScript.
A large number of companies have been developing a wide variety of full-blown HTML5 games, attracting attention of the tech industry.
4. How to find HTML5 games?
Basically, you can start an HTML5 game by simply clicking a URL embedded in a website. In order to find them, you don’t need Google Play Store or App Store, but rather dedicated portals.
Because individual games can be downloaded from multiple portals, diverse types of games belonging to different genres can be found on them. Below are just a few examples of such portals:
・DMM GAMES
・G123
・enza
・d game
・Yahoo! Games
・FB Instant Games
5. HTML5 game development
As mentioned earlier, creating HTML5 games requires skill and knowledge of HTML, CSS, and JavaScript.
In addition to these three basic knowledge sets, knowledge of canvas, an HTML element that uses HTML5 and JavaScript to draw graphics on web apps, and Web Audio API, which processes audio data online, would also be very useful in developing high-performing games.
With all that being said, in this section, we’ll look at how HTML5 games are developed with HTML5 and Javascript.
5-1. HTML Canvas drawing
Canvas is an HTML element that formulates drawings and shapes of characters or various objects in a game.
As the name “canvas” would suggest, it’s like drawing graphics with JavaScript as if you are doing it with “brash” in an HTML5-compatible browser.
The canvas tag is easy to use without requiring a lot of programming skills.
5-1.1 What does Canvas enable you to do?
Canvas tags enable you to depict movements and scaling of characters and objects without using multiple divs.
・Drawing images in jpg/png/gif format.
・Drawing straight lines, rectangles, ellipses, Bézier curves, etc.
・Drawing text.
・Scaling and shifting images.
Less data is used to draw and transform game characters with canvas than with JavaScript so you save up on browser processing power.
5-1.2 CSS is necessary to make HTML5 games with Canvas
CSS is applied to create animated graphics with canvas.
You can use CSS to set the background of Canvas objects as these can have transparent backgrounds. On the other hand, CSS cannot modify the inside of areas that have been drawn by canvas.
5-1.3
Canvas tag can be used simply by writing <canvas> within the HTML body tag. The JavaScript file is loaded right under the <canvas> as shown below.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset=”UTF-8″>
5. <title>Use canvas in HTML/title>
6. </head>
7. <body>
8. <canvas id=”canvas”></canvas>
9. <script type=”text/JavaScript” src=”js/script.js”></script>
10. </body>
11. </html>
5-1.4 Sample use of Canvas
The following describes a rectangle with canvas.
1. <script>
2. const canvas = document.getElementById(‘canvas’);
3. const ctx = canvas.getContext(‘2d’);
4. ctx.fillStyle = ‘#999’;
5. ctx.fillRect(10, 10, 150, 100);
6. </script>
Canvas element in HTML is referenced by Document.getElementById(). Then the element’s context is obtained and stored in the parameter, ctx. Images are rendered by an interface named CanvasRenderingContext2D, a part of Canvas API, the color of the rectangle is specified with fillStyle, and the dimensions are determined with fillRect. These are only the bare basics. The foundation for HTML5 games is completed when you add detailed programming for drawings: e.g. responses when a figure is clicked or when the cursor is moved over a figure.
5-2. Adding sound and music with Web Audio API
Web Audio API is a JavaScript API that enables processing and merging audio data online. You can even apply panning effects within a single context, and link it to <audio> tags.
Let’s take a look at just a handful of things that can be done with Web Audio API.
5-2.1 Better than audio elements
Back in the days, audio elements were used to place music and sound in simple games.
Audio elements in HTML5 games often perform poorly with audio not sounding as expected or large latency, depending on the device or environment, while the Web Audio API allows stable play of any multi-channels audio on both iOS or Android devices.
5-2.2 Adding audio
Equipping games with amazing audio can be quite a challenge. But convincing audio not only refines a player’s experience, but helps capture fans who are going to keep coming back.
To accomplish this, it’s crucial to avoid monotonous and short-looped music that likely drives you insane, although it has been common background music in simple HTML games.
With Web Audio API developers could, for example, join different tracks together and make natural shifts between them with minimum effort to add a nice music loop to a game.
Web Audio API also allows audio to be imported in batches via XHR using BufferLoader. Loading audio usually takes a long time, so to maintain efficiency it’s better to load it incrementally in background while players are loading a page or playing.
5-2.3 Examples of sound effect usage
One place the Web Audio API really shines is playing back sound from multiple, precisely timed sources simultaneously.
Let’s take a look at an example where a player is engaged in a machine-gun battle. The sound of gunfire needs to be varied based on the player’s relative position and distance from the target.
To better simulate the randomness of the real firing sound, The Web Audio API provides two simple ways to adjust the scene: 1) Shifting the time between bullets firing. 2) Changing playbackRate and pitch of each sample.
The worlds of many games are based on geometric principles, either in 2D or in 3D. For this reason, Web Audio API supports stereophonic positional audio for creating a more immersive game experience.
6.Storing data in web storage
HTML5 game data, including settings, can be stored in web storage, an API built with HTML5 and JavaScript for saving, overwriting, deleting, and clearing data in the browser.
Cookies have also been used to store browser data. However, they have a storage limit of 4 KB as well as storage deadlines.
It makes them pale in comparison to web storage that can permanently save up to 5 MB of data.
6-1. Local storage
Local storage, as the name suggests, locally saves up to 5MB of data per origin, enabling offline gameplay.
Script tags and forms only access it when necessary unlike cookies that are sent every time a user visits a website.
6-2. Session storage
Session storage stores data in a browser until the browser/window/tab is closed.
The downside is that game data isn’t shared between windows and tabs.
Both local storage and session storage can be used depending on the specific game and its purpose.
Both types of storage support key-value databases. Key-value databases store data as a collection of records, each record is paired with a unique key that can be used to retrieve data.
7. HTML5 game genres
There are all kinds of HTML5 games from simple breakout clones to complex RPGs. Here are some genres built with HTML5 and JavaScript.
・Breakout clone
・Puzzle
・Shoot’em up
・Snake
・Board/card
・Roguelike
・Role-playing (MMORPG, TRPG, etc. )
・Tactical RPG
Although required developer skill level varies greatly with genres, those with limited knowledge need not worry. Even beginners can create games with simple coding.
8. Will HTML5 games increase in popularity?
Yes, there is much to be excited about. As browsing technology evolves and 5G arrives, HTML5 games are expected to be more stable and immersive than native apps.
Many leading game publishers have already been developing full-fledged HTML5 games every year.
For example, Square Enix, a Japanese production enterprise best known for its seminal game series, Final Fantasy, released two browser games: Imperial SaGa and its predecessor Imperial SaGa Eclipse.
Both are installments of the famous SaGa science fantasy franchise. After Square Enix terminated their support of Imperial SaGa due to waning support for Adobe Flash in December 2019, Imperial SaGa Eclipse made with HTML5 gained a lot of attention.
Given that it requires not just hard work but also very good luck to make a substantial profit with game apps in recent market cycles, HTML5 games will, sooner or later, surpass other mobile games in the industry.
9.Wrapping up
It takes just a click to start an HTML5 game without registration or downloading. And that’s all there is to it. Easy for gamers but somewhat harder for developers. Aside from HTML5, CSS, and JavaScript, you need to know Canvas elements and Web Audio API to develop them. HTML5 games are likely to replace game apps quite soon, so they might be worth exploring.
