Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers


HTML5 Game Development Hotshot combines the two latest hot topics: HTML5 and game development, and aims to showcase how we can build interactive games on the Web following the latest standards.

HTML5 has been widely adopted recently. It has become popular thanks to the widespread usage of modern web browsers in both desktops and mobile devices. The JavaScript and rendering performance has also improved. The nature of the web standards makes game development shine on web browsers.

We demonstrate two common approaches to build an HTML5 game. They are Document Object Model (DOM) elements with CSS and the canvas tag. The new properties in CSS3 provide convenient and high performance animation and transform control. On the other hand, the canvas tag along with the CreateJS library provide solid game-object management.

What this book covers

The following is a list of what we are going to build in this book. There are eight projects with eight different types of HTML5 games. Each project makes use of the knowledge learned in previous projects and introduces new techniques.

Project 1, Building a CSS Quest Game, starts with building a DOM element-based game. The game requires a player to choose the correct pattern sequence to complete the level.

Project 2, Card Battle!, deals with creating a card battle game that makes use of the CSS transform transition. We also learn the 3D-flipping effect.

Project 3, Space Runner, deals with building a running game that makes use of keyboard controls and frame-based animation in CSS.

Project 4, Multiply Defense, teaches us how to use the canvas tag and CreateJS game library to build an HTML5 game.

Project 5, Building an Isometric City Game, deals with constructing an isometric city-building game. We learn how we can store data locally and grow the city.

Project 6, Space Defenders, deals with creating a defending game. We learn how we can create animations easily in the CreateJS suite.

Project 7, A Ball-shooting Machine with Physics Engine, deals with creating a ball-throwing game by making use of the popular Box2D physics engine.

Project 8, Creating a Sushi Shop Game with Device Scaling, deals with making use of the media query to create a responsive game that works on mobiles or desktops. We also learned how to add sound effects.

After reading through all the projects, we should know how to build production-ready games and deploy them on the server to allow others to play them. The games may combine different web technologies and we learn the flexibility to choose the right technique for a specific type of game.

What you need for this book

In order to follow most of the game examples in this book, you need to have a modern web browser and a code editor. You may install Google Chrome, Mozilla Firefox, or Internet Explorer 10. The default Safari browser from Mac OS X also works like a charm.

In some projects, we used Adobe Flash to create graphics assets and animations. The graphics are exported into image files and a file named assets.js. Adobe Flash is not required to go through these projects. However, if you need to modify the source graphics, you will need Flash CC.

Ideally, we prefer a web server to host the game project. We do not use any server-side logic in this book. Any static web server should work. Optionally, opening the game HTML file directly from the filesystem will work.

Who this book is for

Whether you are familiar with the basics of object-oriented programming concepts, new to HTML game development, or familiar with just web designing, this project-based book will get you up and running in no time. It will teach and inspire you to create great interactive content on the Web.


A Hotshot book has the following sections:

Mission briefing

This section explains what you will build, with screenshots of the completed project.

Why is it awesome?

This section explains why the project is cool, unique, exciting, and interesting. It describes the advantages the project will give you.

Your Hotshot objectives

This section explains the major tasks required to complete your project, which are as follows:

  • Task 1

  • Task 2

  • Task 3

  • Task 4, and so on

Mission checklist

This section mentions prerequisites for the project (if any), such as resources or libraries that need to be downloaded.

Each task is explained using the following sections:

Task 1

Prepare for lift off

This section explains any preliminary work that you may need to do before beginning work on the task. This is a mandatory section.

Engage thrusters

This section lists the steps required in order to complete the task. This is a mandatory section.

Objective complete – mini debriefing

This section explains how the steps performed in the previous section (Engage thrusters) allow us to complete the task.

Classified intel

This section provides extra information that is relevant to the task.

After all the tasks are completed, the following sections should appear:

Mission accomplished

This section explains the task we accomplished in the project. This is mandatory and should occur after all the tasks in the project are completed.

A Hotshot challenge / Hotshot challenges

This section explains things to be done or tasks to be performed using the concepts explained in this project.


In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We will enter the following HTML code in the index.html file."

A block of code is set as follows:

<!DOCTYPE html>
<html lang='en'>
  <meta charset='utf-8'>
  <title>Color Quest</title>
  <link rel="stylesheet" href="game.css">
  <!-- game content here -->
  <script src='js/game.js'></script>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

startLevel: function() { = new game.Quest(this.currentLevel);
  game.compositionSeq = [];
  game.composition = new game.Composition();

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Click on the Compress JavaScript button and the tool generates the compressed code into the text area of the result."


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to , and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from


Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.


You can contact us at if you are having a problem with any aspect of the book, and we will do our best to address it.