Book Image

Learn HTML5 by Creating Fun Games

By : Rodrigo Silveira
Book Image

Learn HTML5 by Creating Fun Games

By: Rodrigo Silveira

Overview of this book

HTML is fast, secure, responsive, interactive, and stunningly beautiful. It lets you target the largest number of devices and browsers with the least amount of effort. Working with the latest technologies is always fun and with a rapidly growing mobile market, it is a new and exciting place to be."Learn HTML5 by Creating Fun Games" takes you through the journey of learning HTML5 right from setting up the environment to creating fully-functional games. It will help you explore the basics while you work through the whole book with the completion of each game."Learn HTML5 by Creating Fun Games" takes a very friendly approach to teaching fun, silly games for the purpose of giving you a thorough grounding in HTML5. The book has only as much theory as it has to, often in tip boxes, with most of the information explaining how to create HTML5 canvas games. You will be assisted with lots of simple steps with screenshots building towards silly but addictive games.The book introduces you to HTML5 by helping you understand the setup and the underlying environment. As you start building your first game that is a typography game, you understand the significance of elements used in game development such as input types, web forms, and so on.We will see how to write a modern browser-compatible code while creating a basic Jelly Wobbling Game. Each game introduces you to an advanced topic such as vector graphics, native audio manipulation, and dragging-and-dropping. In the later section of the book, you will see yourself developing the famous snake game using requestAnimationFrame along with the canvas API, and enhancing it further with web messaging, web storage, and local storage. The last game of this book, a 2D Space shooter game, will then help you understand mobile design considerations.
Table of Contents (14 chapters)

JavaScript APIs

As stated earlier, when HTML was created, it was not meant to be used for the development of large enterprise applications. When JavaScript was first created back in 1995, its main goal was to provide a simple scripting language that would allow web designers to add some logic to their web pages. This too was not meant to be a foundation tool from which large, complex applications would be developed.

However, as we have seen with HTML itself, as well as CSS, JavaScript has become very widely used, and developers have outgrown its limited capabilities. Seeing the direction in which developers were taking the language, in an attempt to leverage the Web as a platform, browser vendors started to make improvements to JavaScript as much as was in their power. As a result, very powerful JavaScript engines have emerged. So, as JavaScript become even more used, and as browser became even more powerful, a new set of additions has been added to JavaScript.

Today JavaScript is the most popular scripting language used on the Web. Given its capabilities and the latest tooling available for it, JavaScript has become a very good option for the development of large applications, especially for games. The latest JavaScript APIs allow for 2D and 3D graphics rendering, thread-like behavior, sockets, embedded databases, and a whole lot more. Best of all, this new functionality is built with security in mind, and is not only available on desktop computers, but can also be used in most devices connected to the World Wide Web.

New JavaScript APIs

While the following is not a comprehensive list of all the new and upcoming APIs and language features, it does cover the most significant, stable additions to JavaScript, especially ones that we can leverage for game development. A more detailed explanation of each of the APIs listed in the following list, as well as usage examples, are available in subsequent chapters:



Canvas API

It renders 2D or 3D graphics

Web Audio API

It controls playback of audio files

Web Video API

It controls playback of video files

Geolocation API

It provides access to geographical location of hosting device

Web Socket API

It provides a protocol for two way communication with a remote server

Web Workers API

It provides a thread-like, background worker for concurrent execution

Messaging API

It provides mechanism for communication between different browser contexts

Web Storage API

It provides a key-value pair persistence mechanism

Indexed Database API

It provides a NoSQL object storage mechanism

Drag and Drop API

It provides a native mechanism for dragging and dropping objects

Selector API

It provides a mechanism to select DOM elements using CSS selectors


There was another persistence API in HTML5 that was known as WebSQL. The spec for this API defined an asynchronous way to store and query data in the client using an actual built-in SQL-based database engine. The specification has been deprecated, and was replaced in its entirety by the more robust and more accepted IndexedDB API.