Introduction to HTML5 GAMES

HTML5 is a draft specification for the next major iteration of HTML. It represents a break from its predecessors, HTML4 and XHTML. Some elements have been removed and it is no longer based on SGML, an older standard for document markup. HTML5 also has more allowances for incorrect syntax than were present in HTML4. It has rules for parsing to allow different browsers to display the same incorrectly formatted document in the same fashion.There are many notable additions to HTML, such as native drawing support and audiovisual elements. HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup language. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5.

HTML5 includes detailed processing models to encourage more interoperable implementations, it extends, improves and rationalizes the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications. For the same reasons, HTML5 is also a candidate for cross-platform mobile applications, because it includes features designed with low-powered devices in mind. HTML5 was first released with a major update and "W3C Recommendation" status. Its goals are to improve the language with support for the latest multimedia and other new features, to keep the language both easily readable by humans and consistently understood by computers and devices such as Web browsers, parsers, etc., without XHTML's rigidity, and also to remain backward-compatible with older software.

HTML5 is designed so that old browsers can safely ignore new HTML5 constructs. In contrast to HTML 4.01, the HTML5 specification gives detailed rules for lexing and parsing, with the intent that compliant browsers will produce the same results when parsing incorrect syntax. Although HTML5 now defines a consistent behavior for "tag soup" documents, those documents are not regarded as conforming to the HTML5 standard.

HTML5 is no longer defined in SGML or XML. HTML5 is defined with IDL, a language to define interfaces. In other words, HTML5 is defined in terms of what a programmer can do with its elements and attributes. As a consequence, there won't be a formal doctype definition made with an SGML or XML formalism that you could use to validate. Also the character set definition is simpler. HTML (Hypertext Markup Language), invented by Tim Berners-Lee, has come a long way since its inception in 1991.

Below Figure shows a timeline of HTML:-

How Games Work:-

Trying to define exactly what a game is and isn’t is much more difficult than it seems. Although we may think of games as being purely for competition or entertainment, they actually encompass a lot more. A simulation that determines whether a building is constructed soundly could be thought of a game, as can trying to predict how people will react to certain stimuli. The best all-inclusive definition I could come up with is that a game is a form of interaction with goals and structure.

Designing a Game:-

One of the most important things you can do before you sit down to code a game is to plan out what it does. For a large game such as World of Warcraft, this design document would be many pages long and discuss different areas, worlds, and scenarios. But for our purposes, the design documents will be fairly short. In some cases, they could fit on a sticky note. However, they are nevertheless important to create. With an undefined goal, you never know when you have met it.

Writing a Basic Design Document:-

The design document is a contract for how your game will work and allows you to have a record for the future of all your thoughts when beginning the project. How else will you remember why the Whosits are green and the Whatsits are blue and how they each respond to power-ups? If you are creating a game that includes characters, you could also include character studies that outline their motivations and back story. At minimum, the design document should contain the following elements:-

i)The rules of play

ii)The tagline

iii)The title or working title of the game

These elements should be prioritized in that order as well. Game play rules form the basis of a good game. A great title and tagline can only go so far to help out a crappy game. The game play rules describe how play begins, how it ends, and how any positive and negative actions are rewarded and penalized, respectively.

Deciding on a Game Genre:-

Games generally fall into a particular genre or type that describes some of its basic characteristics. The video game industry has dozens if not hundreds of genres and subgenres.

The Game Loop:-

Excuse the cliche, but the game loop is where the magic happens. Much of the time the user will spend interacting with your game will be inside the game loop. Each run of the game loop may execute any of the following limited list of actions:

i)Retrieving user input, such as pressing buttons or directional keys

ii)Receiving input from opponents (computer or human)

iii)Updating player and enemy positions and alive state

iv)Starting or stopping sound effects and background music

v)Drawing the world with the updated positions and states of the players

These actions are often completed many times a second and sometimes at different intervals. The human eye has a limit as to the number of frames it can see, so we might only redraw the screen 30 to 60 times a second, but for we might check for user input 100 times a second. It all depends on the conditions of the game.

Understanding the APIs in Simple Game Framework:-

As mentioned before, SGF builds on the Prototype JavaScript framework to create its game objects. Another interesting feature is that SGF can use the same game logic and assets as well as execute in the browser. It does this by taking advantage of the Rhino programming language, JavaScript on the Java platform, and a Java backend API mirroring the HTML version. It is able to run anywhere that has a JavaScript engine. SGF doesn’t use the Canvas tag in any way. It instead uses div and img elements along with CSS styles to create game play. Even though this is a book about HTML5, having backward compatibility is an important consideration, and there will be occasions when you might want to mix techniques.

Core API:-

The Core API is where the magic happens. It manages the interactions between the keyboard, mouse, and our games, renders our frames, and provides an interface for adding new events to subscribe to using the Observer pattern. The classes and namespace are listed here:-



iii)SGF (namespace)



Game and Input are the two classes in this area that we will use the most. The Game class is a container for all our game objects and manages our game loop by calling the render and update functions on the objects. We can also set our frames per second, which is the number of times we’d like the game to update its state. The Game class also exposes functions to load fonts, other JavaScript files, and sounds. The Input class, as you might guess, gives us a means to get the mouse clicks, mouse movement, and key presses at any given time. isKeyDown is the only instance function we need to worry about and is incidentally the only instance function. We can use it with the preset class properties for common keystrokes, such as the mouse and directional keys, or with key codes from other buttons on the keyboard. The SGF namespace provides only two (but very important) functions. The first is the log function, which is an alias for the native logging function on the platforms that SGF supports. In the case of JavaScript, it is console.log.The second function the SGF namespace provides is require, which is a method that only imports the components you need into your application. In a basic SGF game, all classes are hidden by default and you must use require to make them available for use.

Components API:-

Whereas the Core API controls how the objects interact with each other, the Components API specifies how they are drawn. Here are the classes in this API:-







Component is a class from which all SGF-viewable game objects extend. It can’t be instantiated directly but rather represents a contract that the objects must follow. Component contains properties to specify an object’s dimensions, orientation, depth (zindex), and its own render and update functions. The Container class is a concrete subclass of Component. It implements all of Component’s methods and can hold other Component objects and their subclasses. Container could be used to animate many different objects at once to create interesting simulations. Shape is another class that exists only to provide a contract, giving its children access to a color property in addition to the ones available in Component. Rectangle is a child of Shape. Sprite is a class that represents a single rendered image in a game.These images usually come in what are called spritesheets, providing all the images to create an animation—similar to a flipbook.

Resources API and Networking APIs:-

Games would look rather boring if we were stuck with the default system font and solid colors for objects. SGF’s Resources API gives you the ability to load custom fonts and images to use with your games. SGF has the capability to connect to other clients or servers using its built-in Client class and either the corresponding Server class or another WebSocket server. The API documentation has some sample code, and it might be beneficial to review the networking material.

HTML5 Drawing APIs:-

An interesting area of the HTML5 spec is the new drawing APIs, Canvas, SVG and WebGL provide bitmapped, vector and three-dimensional drawing capabilities, respectively.


The canvas element started its life as an Apple extension to Webkit, the layout engine powering Safari and Chrome, to display Dashboard gadgets and additions to the Safari browser. It was later adopted by Opera, Firefox, and related browsers, eventually becoming a component of the HTML5 specification. The canvas element can be most simply described as a drawable region with height and width attributes using JavaScript as the medium to draw and animate complex graphics such as graphs and images. A full set of 2D drawing functions is exposed by the JavaScript language.

SVG(Scalable Vector Graphics):-

SVG(Scalable Vector Graphics) is a mature W3C specification for drawing static or animated graphics. The ability to inline SVG without the use of an object or embed tag was added in HTML5. Vector graphics use groupings of mathematics formulas to draw primitives such as arcs, lines, paths, and rectangles to create graphics that contain the same quality when rendered at any scale. This is a marked benefit over images whose discernible quality degrades when they are displayed at a scale larger than that for which they were designed.


WebGL is a JavaScript API for 3D drawing that enables the developer to assess graphics hardware and control minute details of the rendering pipeline. It is managed by the Khronos group and shares much of its syntax with OpenGL 2.0 ES. At the time of this writing, WebGL is not supported in Internet Explorer 6+ or the stable branches of Opera and Safari. It is available in the stable builds of Firefox and Chrome/Chromium and in development builds of Opera and Safari.

Google Gears:-

An open source Web browser extension that is used by developers to create a rich platform for Web applications. Gears works with a select group of sites that are specifically designed for compatibility. Gears enables Web applications to interact with your desktop, store data locally in a fully-searchable database, and Run JavaScript in the background to improve performance. Gears, formerly Google Gears, is discontinued utility software offered by Google that aimed to facilitate creating more powerful web apps by adding offline storage and other additional features to web browsers. Released under the BSD license, Gears is free and open-source. Gears was conceived at a time when a comparable alternative was not available. However, Gears was discontinued in favor of the standardized HTML5 means that eventually became prevalent.


Phaser is a free software 2D game framework for making HTML5 games for desktop and mobile. It was created by Photon Storm. Phaser uses both a Canvas and WebGL renderer internally and can automatically swap between them based on browser support. This allows for fast rendering across desktop and mobile. It uses the Pixi.js library for rendering. The only requirement to use Phaser is a web browser that supports the canvas html tag. For desktop this includes Chrome, Firefox, Safari, IE9+ and Opera. Development can be done in either JavaScript or TypeScript. Some of the elements available are:-

i)Images, spritesheets, tweens - Static and dynamic images, and a mechanism to animate them.

ii)Input control

iii)Game Physics - Phaser includes three main physics engines.

Adding Interactivity:-

If you have your own website, or are thinking about building one, you may have a lot of different idea about what kind of content you want to publish, and also what level of user interactivity you need. Maybe you want to build a straight-forward content site (like this one, for example), which most provides text, images, and video. Or perhaps you want a more app-like experience, with lots of interaction. This article covers some of the things you need to know in order to build an interactive, dynamic website. The world wide web was originally designed as a way to share and link documents. Text was considered central, images secondary, video more or less unheard of. Interactivity — the kind found in desktop applications — was simply never considered. This, of course, is no longer the case. Web sites have become graphics heavy, video reigns supreme, and many people use web-based applications — email, document editors, games, social media — as much or more than “traditional” desktop applications. But it is important to know (at least a little) about how the web was originally designed, because it helps explain why things are the way they are now — and helps you understand how to build interactivity into your own site. First we’ll cover a little of the history of web interactivity. This is important to know because sometimes you will hear or read suggestions to use a particular method or technology. If you’ve never heard of it, it might sound new and great. But if you know that it went out of fashion ten years ago, you can avoid it. (You might be surprised at how many people are still out there, using and advocating for decades-old technology). Then, we’ll look at some of the newer, up-to-date technology for adding interactivity to your website.

Web History — Static Pages and Early Interactivity:-

As mentioned above, the world wide web was originally a web of documents — primarily text files, with some (but not many) images. The primary protocols (communication methods) for connecting your computer’s web browser to a web site were built around this idea of documents:-

i)Your browser sends a request (the URL) to the server.

ii)The server sends back to the browser the page that that was requested.

iii)Everything stops until the next request.

This procedure—which is still mostly how the web works—does not lend itself to highly dynamic, desktop-style applications.

First generation dynamic website technology:-

Because of this static “document-orientation,” the first wave of interactive technologies all felt like they were “tacked on” somehow, like they were smashed onto the web.

Common Gateway Interface (CGI):-

If you have any familiarity with PHP or other server-side scripting, you already sort of understand how CGI works. If not, it isn’t hard to understand. Common Gateway Interface (or CGI) was a way to make websites dynamic on the server. It worked like this:-

i)On the server, there is a directory identified as the CGI directory (usually labeled cgi-bin).

ii)In the CGI directory is a bunch of mini computer programs, or pieces of programs, called “scripts”.

iii)When a request was made for a URL corresponding to one of the CGI scripts (, the script would be run.

iv)Whatever the effect of running the script might be would happen (usually reading and writing to a database).

v)The output from the script would be sent back to the browser as if it were a regular document.

CGI scripts could be written in a handful of languages. C and Perl were both very common. This provided a way to build dynamic websites — websites that would respond to the user in one way or another, or that had the potential to be different for every viewer. Since the document that was returned to the browser was generated on the fly by the script, the document viewed by each visitor could be personalized, updated, or unique in any number of ways. Additionally, many individual scripts could be written all together to form a large application, such a Content Management System. CGI has largely been replaced by PHP and other modern web scripting languages and tools, but the basic idea underlying it hasn’t gone away.

Classification of HTML5 into Several Groups:-

HTML5 Classified into several groups based on their functions:-

i)Semantics: Allowing you to describe more precisely what your content is.

ii)Connectivity: allowing you to communicate with the server in new and innovative ways.

iii)Offline and storage: Allowing webpages to store data on the client-side locally and operate offline more efficiently.

iv)Multimedia: Making video and audio first-class citizens in the Open Web.

v)2D/3D graphics and effects: Allowing a much more diverse range of presentation options.

vi)Performance and integration: Providing greater speed optimization and better usage of computer hardware.

vii)Device access: Allowing for the usage of various input and output devices.

viii)Styling: Letting authors write more sophisticated themes.

Copyright © 2018. All Rights Reserved.