HTML 5 Games Development By Example Beginner's Guide Makzan (Packt, 2011) BBS
HTML%205%20Games%20Development%20by%20Example%20-%20Beginner's%20Guide%20-%20Makzan%20(Packt%2C%202011)%20BBS
User Manual: Pdf
Open the PDF directly: View PDF 
.
Page Count: 352
| Download | |
| Open PDF In Browser | View PDF |
HTML5 Games Development by
Example
Beginner's Guide
Create six fun games using the latest HTML5, Canvas, CSS,
and JavaScript techniques
Makzan
BIRMINGHAM - MUMBAI
HTML5 Games Development by Example
Beginner's Guide
Copyright © 2011 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system,
or transmitted in any form or by any means, without the prior written permission of the
publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the
information presented. However, the information contained in this book is sold without
warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers
and distributors will be held liable for any damages caused or alleged to be caused directly
or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
First published: August 2011
Production Reference: 1180811
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-849691-26-0
www.packtpub.com
Cover Image by Girish Suryawanshi (girish.suryawanshi@gmail.com)
Credits
Author
Makzan
Reviewers
Matteo Ferretti
Project Coordinator
Zainab Bagasrawala
Proofreader
Joanna McMahon
Henk Jurriens
William Malone
Indexer
Rekha Nair
Acquisition Editor
David Barnes
Graphics
Geetanjali Sawant
Development Editor
Neha Mallik
Production Coordinators
Melwyn D'sa
Technical Editors
Adline Swetha Jesuthas
Pallavi Kachare
Azharuddin Sheikh
Cover Work
Melwyn D'sa
Copy Editor
Neha Shetty
About the Author
Makzan is the founder of 42games Limited. He has been designing games since he was
a child. He likes to see how the well-designed interactions in his games can trigger the
emotions and influence the player. He believes that games should let a player share joyful
times with friends. Therefore, his favorite game type is multiplayer casual games.
Makzan also wrote a book named Flash Multiplayer Virtual World. It is about developing
a virtual world to play with friends in real time with Adobe Flash and socket server.
I would like to thank the entire team from Packt Publishing. The book
would not have been possible without the help from all the editors and
proofreaders. I thank all the reviewers for providing useful comments
from which I have learned a lot. I thank my family for giving me support
during the book writing process.
About the Reviewers
Matteo Ferretti is a software engineer, an amateur comic-book artist, and an
occasional graphic designer, who was drawn into software development since he
played his first video game.
He fell in love with JavaScript at the end of the 20th century, and he still loves it with the
same passion.
Currently he is working for Mozilla, after more than two years in TomTom as a Senior
Software Engineer and Tech Leader.
I wish to thank my love, Elisa, for her patience and understanding. I also
want to thank my parents, for their continuous support throughout my
whole life.
Henk Jurriens is a software developer and developer evangelist, experienced with Java,
Groovy and Grails, and HTML5. Henk is passionate about new technologies and loves to
talk about it, and so gives different presentations about HTML5, Linked Data, and Groovy
and Grails.
In addition, Henk founded an HTML5 User Group to promote and share knowledge about
HTML5. During the year, different meetups are organized. Together with the Google
Technology User Group, he organized for example, a HTML5 Hackathon.
Last year, Henk also helped with a HTML5 Game Jam and there he saw the potential of
HTML5 Games and this was the reason for him to review this book. With the help of this
book, great HTML5 games can be built!
William Malone is a software developer specializing in dialects of ECMAScript
(ActionScript and JavaScript). He has written many articles about Flash and HTML5
which are available at http://www.williammalone.com.
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files
available? You can upgrade to the eBook version at www.PacktPub.com and as a print book
customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@
packtpub.com for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range
of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here,
you can access, read and search across Packt's entire library of books.
Why Subscribe?
Fully searchable across every book published by Packt
Copy and paste, print and bookmark content
On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today
and view nine entirely free books. Simply use your login credentials for immediate access.
Table of Contents
Preface
Chapter 1: Introducing HTML5 Games
Discovering new features in HTML5
Canvas
Audio
GeoLocation
WebGL
WebSocket
Local Storage
Offline application
Discovering new features in CSS3
CSS3 transition
CSS3 transform
CSS3 animation
Learning more detail of new HTML5 and CSS3 features
The benefit of creating HTML5 games
No third-party plugin required
Supporting iOS devices without plugin
Breaking the boundary of usual browser games
Building HTML5 games
What others are playing with HTML5
Matching game
Sinuous
Asteroid-styled bookmarklet
Quake 2
RumpeTroll
Scrabb.ly
Aves Engine
1
7
8
8
8
8
9
10
10
11
11
12
13
14
15
15
16
16
16
18
18
18
19
19
20
21
21
22
Table of Contents
Browsing more HTML5 games
What we are going to create in this book
Summary
22
23
24
Chapter 2: Getting Started with DOM-based Game Development
25
Preparing the development environment
Preparing the HTML documents for a DOM-based game
Time for action – Installing the jQuery library
New HTML5 doctype
Header and footer
Best practice to place the JavaScript code
Running our code after the page is ready
Setting up the Ping Pong game elements
Time for action – Placing Ping Pong game elements in DOM
Introducing jQuery
Understanding basic jQuery selectors
Understanding the jQuery CSS function
Benefits of using jQuery
Manipulating game elements in DOM with jQuery
Time for action – Changing position of elements with jQuery
Understanding the behavior of absolute position
Getting a keyboard input from players
Time for action – Moving DOM objects by a keyboard input
Understanding a key code
Making constants more readable
Converting strings to numbers with parseInt function
Executing JavaScript expressions directly in the Console panel
Checking the console window
Supporting multiple keyboard input from players
Time for action – Listening to keyboard input with another approach
Declaring global variables in a better way
Creating a JavaScript timer with setInterval function
Understanding Game Loop
Moving a DOM object with JavaScript Interval
Time for action – Moving the ball with JavaScript Interval
Beginning collision detection
Time for action – Hitting the ball with the paddles
Showing text dynamically in HTML
Time for action – Showing the score of both players
Summary
26
26
27
28
29
29
29
30
30
32
33
34
35
35
35
36
37
38
39
40
40
42
42
43
43
45
46
46
47
47
49
50
53
53
56
[ ii ]
Table of Contents
Chapter 3: Building a Memory Matching Game in CSS3
Moving game objects with CSS3 transition
Time for action – Moving a playing card around
2D transforms functions
3D transforms functions
57
57
58
61
61
Tweening the styles by using CSS3 transition
Creating a card-flipping effect
Time for action – Flipping a card with CSS3
Toggling class with jQuery toggleClass function
Controlling the visibility of overlapped elements by z-index
Introducing CSS perspective property
Introducing backface-visibility
Creating a card matching memory game
Downloading the sprites sheet of playing cards
Setting up the game environment
Time for action – Preparing the card matching game
Cloning DOM elements with jQuery
Selecting the first child of an element in jQuery by using child filters
Vertically aligning a DOM element
Using CSS sprite with a background position
Adding game logic to the matching game
Time for action – Adding game logic to the matching game
Executing code after CSS transition ended
Delaying code execution on flipping cards
Randomizing an array in JavaScript
Storing internal custom data with an HTML5 custom data attribute
Accessing custom data attribute with jQuery
Making other playing card games
Embedding web fonts into our game
Time for action – Embedding a font from Google Font Directory
Choosing different font delivery services
Summary
62
64
64
66
67
68
69
70
70
71
71
77
77
77
78
79
80
83
83
83
84
85
87
87
88
90
91
Chapter 4: Building the Untangle Game with Canvas and Drawing API
93
Introducing the HTML5 Canvas Element
Drawing a circle in canvas
Time for action – Drawing color circles on canvas
Putting fallback content when the web browser does not support canvas
Drawing circles and shapes with canvas arc function
Converting degree to radians
Time for action – Drawing different arcs with arc function
Executing the path drawing in canvas
94
95
95
97
98
98
99
102
[ iii ]
Table of Contents
Beginning a path for each style
Closing a path
Wrapping the circle drawing in function
Time for action – Putting the circle drawing code into a function
Generating random numbers in JavaScript
Saving the circle position
Time for action – Saving the circle position
Defining a basic class definition in JavaScript
Drawing lines in canvas
Time for action – Drawing straight lines between each circle
Introducing the line drawing API
Interacting with drawn objects in canvas with mouse events
Time for action – Dragging the circles in canvas
Getting the mouse position in the canvas element
Detecting mouse events on circles in canvas
Game loop
Clearing the canvas
Detecting line intersection in canvas
Time for action – Distinguishing the intersected lines
Determining whether two line segments intersect
Making the untangle puzzle game
Time for action – Making the untangle puzzle game in canvas
Defining the leveling data
Determining level-up
Displaying current level and completeness progress
Summary
Chapter 5: Building a Canvas Games Masterclass
Filling shapes with gradient color
Time for action – Drawing a gradient color background to the Untangle game
Adding color stops in the gradient color
Filling radial gradient color
Time for action – Filling the circles with radial gradient color
Drawing text in canvas
Time for action – Displaying the progress level text inside the canvas element
Using embedded web font inside canvas
Time for action – Embedding Google Web Font into the
canvas element
Drawing images in canvas
Time for action – Adding graphics to the game
Using the drawImage function
[ iv ]
102
103
104
104
105
106
107
108
108
109
111
112
112
116
116
117
118
119
119
123
124
125
129
130
131
131
133
134
134
135
136
136
139
139
142
143
143
144
144
147
Table of Contents
Decorating the canvas-based game
Time for action – Adding CSS styles and images decoration to the game
Animating a sprite sheet in canvas
Time for action – Making a game guide animation
Creating a multi-layers canvas game
Time for action – Dividing the game into four layers
Mixing CSS technique with Canvas drawing
Summary
Chapter 6: Adding Sound Effects to your Games
Adding a sound effect to the play button
Time for action – Adding sound effects to the play button
Defining an audio element
Playing a sound
Pausing a sound
Adjusting the sound volume
Using the jQuery hover event
Creating the Ogg format audio to support Mozilla Firefox
Time for action – Converting an MP3 sound to Ogg format with Audacity
Supporting different web browsers with different audio formats
Building a mini piano musical game
Time for action – Creating a basic background to the
music game
Creating scenes in HTML5 games
Visualizing the music play back
Time for action – Creating the playback visualization in the music game
Choosing the right song for the music game
Storing and extracting the song level data
Getting the elapsed time of the game
Creating music dots
Moving the music dots
Linking the play button to the music game scene
Time for action – Animating the scene transition
Creating a slide-in effect in CSS3
Creating a keyboard-driven mini piano musical game
Time for action – Creating a mini piano musical game
Hitting the three music lines by key down
Determining music dot hits on key down
Removing an element in an array with the given index
Time for action – Removing music dots with the splice function
[]
149
149
152
152
156
156
162
163
165
166
166
169
171
171
172
172
172
173
174
174
174
174
177
178
179
183
183
184
185
186
187
187
189
190
190
192
193
194
194
Table of Contents
Adding additional features to the mini piano game
Adjusting the music volume according to the player
Time for action – Removing missed melody notes
Removing dots from the game
Storing the success count in the last five results
Recording music notes as level data
Time for action – Adding functionality to record the music level data
Handling the audio event on playback completes
Time for action – Indicating a game over event in the console
Handling audio events
Summary
Chapter 7: Using Local Storage to Store Game Data
Storing data by using HTML5 local storage
Creating a game over dialog
Time for action – Creating a game over dialog with the elapsed played time
Saving scores in the browser
Time for action – Saving the game score
Storing and loading data with local storage
The local storage saves the string value
Treating the local storage object as an associated array
Saving objects in the local storage
Time for action – Saving the time alongside the score
Getting the current date and time in JavaScript
Using the native JSON to encode an object into a string
Loading a stored object from a JSON string
Inspecting the local storage in a console window
Notifying players of breaking a new record with a nice ribbon effect
Time for action – Creating a ribbon in CSS3
Saving the entire game progress
Saving the game progress
Time for action – Saving all essential game data in the local storage
Removing a record from the local storage
Cloning an array in JavaScript
Resuming the game progress
Time for action – Resuming a game from the local storage
Summary
195
196
196
198
198
199
199
202
202
203
204
205
206
206
207
210
210
211
212
213
213
214
217
218
218
219
220
221
224
224
224
227
227
228
228
231
Chapter 8: Building a Multiplayer Draw-and-Guess Game with WebSockets 233
Trying an existing WebSockets web application
Time for action – Trying the multiuser sketchpad
[ vi ]
234
235
Table of Contents
Installing a WebSocket server
Installing the Node.JS WebSocket server
Time for action – Installing Node.JS
Creating a WebSockets server to broadcast the connection count
Time for action – Creating a WebSocket server that sends the total
count of connections
Initializing the WebSockets server
Listening to the connection event on the server side
Getting a count of connected clients on the server side
Broadcasting a message to all connected browsers
Creating a client that connects to a WebSocket server and getting the total
connections count
Time for action – Showing the connection count in a WebSocket application
Establishing a WebSocket connection
WebSockets client events
Building a chatting application with WebSockets
Sending a message to the server
Time for action – Sending a message to the server through WebSockets
Sending a message from the client to the server
Receiving a message on the server side
Broadcasting every received message on the server side to create a chat room
Time for action – Broadcasting the messages to all connected browsers
Comparing between WebSockets and polling approaches
Making a shared drawing whiteboard with Canvas and WebSockets
Building a local drawing sketchpad
Time for action – Making a local drawing whiteboard with the Canvas
Drawing on the canvas
236
236
236
238
238
239
240
240
240
241
241
243
243
243
243
244
246
246
247
247
248
250
250
251
254
Broadcasting the drawing to all connected browsers
Time for action – Sending the drawing through WebSockets
Defining a data object to communicate between the client and the server
Packing the drawing lines data into JSON for broadcasting
Recreating the drawing lines after receiving them from other clients
Building a multiplayer draw-and-guess game
Time for action – Building the draw-and-guess game
Controlling the game flow of a multiplayer game
Enumerating connected clients on the serverside
Sending a message to a specific connection on the server side
Improving the game
Storing drawn lines on each game
Improving the answer checking mechanism
254
254
258
259
259
259
260
265
266
267
267
268
268
Decorating the draw-and-guess game with CSS
[ vii ]
268
Time for action – Decorating the game
Summary
Chapter 9: Building a Physics Car Game with Box2D and Canvas
Installing the Box2D JavaScript library
Time for action – Installing the Box2D physics library
Using b2World to create a new world
Using b2AABB to define a bounding area
Setting the gravity of the world
Setting the Box2D to ignore the slept object
Creating a static ground body in the physics world
Time for action – Creating a ground in the world
Creating a shape
Creating a body
Drawing the physics world in the canvas
Time for action – Drawing the physics world into the canvas
Creating a dynamic box in the physics world
Time for action – Putting a dynamic box in the world
Setting the bouncing effect with the restitution property
Advancing the world time
Time for action – Setting up the world step loop
Adding wheels to the game
Time for action – Putting two circles in the world
Creating a physical car
Time for action – Connecting the box and two circles with revolute joint
Using a revolute joint to create an anchor point between two bodies
Adding force to the car with a keyboard input
Time for action – Adding force to the car
Applying force to a body
Understanding the difference between ApplyForce and ApplyImpulse
Adding ramps to our game environment
Time for action – Creating the world with ramps
Checking collisions in the Box2D world
Time for action – Checking a collision between the car and the destination body
Getting the collision contact list
Restarting the game
Time for action – Restarting the game while pressing the R key
Adding a level support to our car game
Time for action – Loading game with levels data
Replacing the Box2D outline drawing with graphics
Time for action – Adding a flag graphic and a car graphic to the game
268
271
273
274
275
277
278
278
278
279
279
280
280
281
281
284
284
285
286
286
287
287
288
289
290
291
291
292
293
293
293
295
295
296
297
297
299
299
303
303
Table of Contents
Using userData in shape and body
Drawing graphics every frame according to the state of its physics body
Rotating and translating an image in the canvas
Adding a final touch to make the game fun to play
Time for action – Decorating the game and adding a fuel
limitation
Adding fuel to add a constraint when applying force
Presenting the remaining fuel in a CSS3 progress bar
Summary
HTML5 game engines
Game sprites, and textures
Sound effects
Appendix: Pop Quiz Answers
306
307
308
308
309
309
314
315
316
316
317
317
319
Chapter 2: Getting Started with DOM-based Game Development
Running our code after the page is ready
Understanding the behavior of absolution position
Chapter 3: Building Memory Match Game in CSS3
Storing internal custom data with HTML5 custom data attribute
Accessing custom data attribute with jQuery
Chapter 4: Building Untangle Game with Canvas and Drawing API
Using startAngle and endAngle
Using closePath with fill command only
Accessing shapes in canvas
Clearing drawn shapes in canvas
Chapter 5: Building Canvas Games Masterclass
Drawing text in canvas
Styling canvas background
Chapter 6: Adding Sound Effects to your Games
Using the audio tag
Chapter 7: Using Local Storage to Store Game Data
Using local storage
Chapter 8: Building Multiplayer Draw-and-Guess Game with WebSockets
Index
319
319
319
319
319
319
320
320
320
320
320
320
320
320
321
321
321
321
321
237
[ ix ]
Preface
HTML5 promises to be the hot new platform for online games. HTML5 games work on
computers, smartphones, and tablets, including iPhones and iPads. Be one of the first
developers to build HTML5 games today and be ready for tomorrow!
This book will show you how to use the latest HTML5 and CSS3 web standards to build card
games, drawing games, physics games, and even multiplayer games over the network. With
this book, you will build six example games with clear systematic tutorials.
HTML5, CSS3, and the related JavaScript API are the latest hot topics in web. These standards
bring us the new game market, HTML5 Games. With the new power from them, we can
design games with HTML5 elements, CSS3 properties, and JavaScript to play in browsers.
This book is divided into nine chapters with each one focusing on one topic. We will create
six games and specifically learn how we draw game objects, animate them, add audio,
connect players, and build a physics game with a Box2D physics engine.
What this book covers
Chapter 1, Introducing HTML5 Games, introduces the new features from HTML5, CSS3, and
related JavaScript API. It also demonstrates what games we can make with these features
and its benefits.
Chapter 2, Getting Started with DOM-based Game Development, kick-starts the game
development journey by creating a traditional Ping Pong game in DOM and jQuery.
Chapter 3, Building Memory Matching Game in CSS3, walks through the new features from
CSS3 and discusses how we can create a memory card matching game in DOM and CSS3.
Chapter 4, Building Untangle Game with Canvas and Drawing API, introduces a new way
to draw games and interact with them in a web page with the new Canvas element. It also
demonstrates how to build a puzzle solving game with Canvas.
Preface
Chapter 5, Building a Canvas Game Masterclass, extends the untangle game to show how we
can draw gradients and images using Canvas. It also discusses sprite sheet animations and
multi-layer management.
Chapter 6, Adding Sounds Effects to Your Games, adds sound effects and background music
to the game by using the Audio element. It discusses the audio format capability among
web browsers and creates a keyboard-driven music game by the end of the chapter.
Chapter 7, Using Local Storage to Store Game Data, extends the CSS3 memory matching
game to demonstrate how we can use the new Local Storage API to store and resume game
progress and best records.
Chapter 8, Building a Multiplayer Draw-and-Guess Game with WebSockets, discusses the
new WebSockets API which allows browsers to establish a persistent connection with the
socket server. This allows multiple players to play the game together in real time. A drawand-guess game is created at the end of chapter.
Chapter 9, Building a Physics Car Game with Box2D and Canvas, teaches how to integrate
a famous physics engine, Box2D, into our Canvas games. It discusses how to create physics
bodies, apply force, connect them together, associate graphics with the physics, and finally
create a platform card game.
What you need for this book
You need the latest modern web browsers, a good text editor, and a basic HTML, CSS, and
JavaScript knowledge.
Who this book is for
This book is for game designers who have a basic understanding of HTML, CSS, and JavaScript
and want to create Canvas or DOM-based games that run on browsers.
Conventions
In this book, you will find several headings appearing frequently.
To give clear instructions of how to complete a procedure or task, we use:
[]
Preface
Time for action – heading
1.
Action 1
2.
Action 2
3.
Action 3
Instructions often need some extra explanation so that they make sense, so they are
followed with:
What just happened?
This heading explains the working of tasks or instructions that you have just completed.
You will also find some other learning aids in the book, including:
Pop quiz – heading
These are short multiple choice questions intended to help you test your own understanding.
Have a go hero – heading
These set practical challenges and give you ideas for experimenting with what you
have learned.
You will also find a number of styles of text that distinguish between different kinds of
information. Here are some examples of these styles, and an explanation of their meaning.
pment
Code words in text are shown as follows: "We will start our HTML5 game develo�������
journey from index.html."
A block of code is set as follows:
// starting game
var date = new Date();
audiogame.startingTime = date.getTime();
// some time later
var date = new Date();
var elapsedTime = (date.getTime() - audiogame.startingTime)/1000;
[]
Preface
When we wish to draw your attention to a particular part of a code block, the relevant lines
or items are set in bold:
function setupLevelData()
{
var notes = audiogame.leveldata.split(";");
// store the total number of dots
audiogame.totalDotsCount = notes.length;
for(var i in notes)
{
var note = notes[i].split(",");
var time = parseFloat(note[0]);
var line = parseInt(note[1]);
var musicNote = new MusicNote(time,line);
audiogame.musicNotes.push(musicNote);
}
}
Any command-line input or output is written as follows:
$ ./configure
$ sudo make install
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: "You will get an introduction
page of the multiuser sketchpad. Right click on the Launch Experiment option and choose
Open link in new window".
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
[]
Preface
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 feedback@packtpub.com, and
mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the
SUGGEST A TITLE form on www.packtpub.com or e-mail suggest@packtpub.com.
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 www.packtpub.com/authors.
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 for this book
You can download the example code files for all Packt books you have purchased from your
account at http://www.PacktPub.com. If you purchased this book elsewhere, you can
visit http://www.PacktPub.com/support and register to have the files e-mailed directly
to you.
Errata
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 http://www.packtpub.com/support,
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
http://www.packtpub.com/support.
[]
Preface
Piracy
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 copyright@packtpub.com with a link to the suspected
pirated material.
We appreciate your help in protecting our authors, and our ability to bring you
valuable content.
Questions
You can contact us at questions@packtpub.com if you are having a problem with any
aspect of the book, and we will do our best to address it.
[]
1
Introducing HTML5 Games
Hyper-Text Markup Language, HTML, has been shaping the Internet in the
last few decades. It defines how content is structured in web and the linkage
between related pages. HTML keeps evolving from version 2 to HTML 4.1,
and later XHTML 1.1. Thanks to those web applications and social network
applications, HTML is now on the way to HTML5.
Cascading Style Sheet (CSS) defines how web pages are presented visually. It
styles all HTML elements and the styles of their states, such as hover and active.
JavaScript is the logic controller of the web page. It makes the web page
dynamic and provides client-side interaction between the page and users. It
accesses the HTML through Document Object Model (DOM). It re-styles the
HTML elements by applying different CSS styles.
These three receipts bring us the new game market, HTML5 Games. With the new power
from them, we can design games with HTML5 elements, CSS3 properties, and JavaScript to
play in the browsers.
In this chapter, we shall:
Discover new features in HTML5
Discuss what makes us so excited around HTML5 and CSS3
Take a look at what others are playing with HTML5 on game designing
Preview what games we are going to build in later chapters
So let's get started.
Introducing HTML5 Games
Discovering new features in HTML5
There are many new things introduced in HTML5 and CSS3. Before getting our hands dirty in
creating the games, let's take an overview of the new features and see how we can use them
to create games.
Canvas
Canvas is an HTML5 element that provides drawing shapes and bitmap manipulation
functions in low level. We can imagine the Canvas element as a dynamic image tag. The
traditional ![]()
tag shows a static image. Whether the image is dynamically generated or
statically loaded from the server, the image is static and will not be changed. We can change
the ![]()
tag to another image source or apply styles to the image, but we cannot modify
the image bitmap context itself.
On the other hand, Canvas is like a client-side dynamic ![]()
tag. We can load images inside
it, draw shapes there, and interact with it by JavaScript.
Canvas plays an important role in HTML5 game development. It is one of our main focuses in
this book.
Audio
Background music and sound effects are often an essential element in game design. HTML5
comes with native audio support by the audio tag. Thanks to this feature, we do not require
the proprietary Flash Player to play sound effects in our HTML5 games. We will discuss the
usage of the audio tag in Chapter 6, Building Music Games with HTML5 Audio Elements.
GeoLocation
GeoLocation lets the web page retrieve the latitude and longitude of the user's computer.
This feature may not have been so useful years ago when everyone was using the Internet
with their desktop PC. There are not many things that we need the road level location
accuracy of the user. We can get the rough location by analyzing the IP address.
These days, more and more users are going on the Internet with their powerful
smartphones. Webkit and other modern mobile browsers are in everyone's pocket.
GeoLocation lets us design mobile applications and games to play with the location.
Location-based services have been used in several social networking applications such
as foursquare (http://foursquare.com) and Gowalla (http://gowalla.com). The
success of this type of location-based social community creates a trend of using location
services with our smartphone.
[]
Chapter 1
WebGL
WebGL extends the Canvas element by providing a set of 3D graphics API in the web
browser. The API follows the standard of OpenGL ES 2.0. The WebGL provides a real 3D
rendering place for 3D HTML5 games. However, not all browsers natively support the WebGL
yet at the time of writing this book. Currently only Mozilla Firefox 4, Google Chrome, and a
nightly build of WebKit browser support it natively.
The technique of creating games for WebGL is quite different from usual HTML5 game
developments. Creating games in WebGL requires handing the 3D models and use of API
similar to the OpenGL. Therefore, we will not discuss the WebGL game development in
this book.
The following screenshot from Google Body (http://bodybrowser.googlelabs.com)
demonstrates how they use WebGL to show a 3D human body that responds to the
user's input:
The LearningWebGL (http://learnwebgl.com) provides a collection of
tutorials on getting started with WebGL. It is a good starting point if you want
to learn more on using it.
[]
Introducing HTML5 Games
WebSocket
WebSocket is part of the HTML5 spec for connecting the web page to a socket server. It
provides us with an event-driven connection between the browser and server. That means
the client does not need to poll the server for new data every short period. The server will
push updates to the browsers whenever there is any data to update. One benefit of this
feature is that the game players can interact with each other almost in real time. When one
player does something and sends data to the server, the server will broadcast an event to
every other connected browser to acknowledge what the player just did. This creates the
possibility of creating multiplayer HTML5 games.
Due to a security issue, WebSocket is now temporary disabled by Mozilla
Firefox and Opera. Safari and Chrome may also drop the support on
WebSocket until the issue is fixed. You can learn more on this issue by
visiting the following link: http://hacks.mozilla.org/2010/12/
websockets-disabled-in-firefox-4/.
Local Storage
HTML5 provides a persistent data storage solution to web browsers.
Local Storage stores key-value paired data persistently. The data is still there after the
browser terminates. Moreover, the data is not limited to be accessible only to the browsers
that created it. It is available to all browser instances with the same domain. Thanks to Local
Storage, we can easily save game status, such as progress and earn achievements, locally in
web browsers.
HTML5 also provides Web SQL Database. It is a client-side relational database and is
currently supported by Safari, Chrome, and Opera. With the database storage, we can
not only store key-value paired data but also complicated relational structures that support
SQL queries.
Local Storage and Web SQL Database are useful for us to save game state locally when
creating games.
Besides Local Storage, some other storage approaches are now being supported by web
browsers. These include Web SQL Database and IndexedDB. These approaches support
querying the stored data with condition and thus are more powerful for supporting a
complicated data structure.
You can find more information on using the Web SQL Database and IndexedDB in the
following link from Mozilla: http://hacks.mozilla.org/2010/06/comparingindexeddb-and-webdatabase/.
[ 10 ]
Chapter 1
Offline application
Normally we need an Internet connection to browse web pages. Sometimes we can browse
cached offline web pages. These cached offline web pages usually expire quickly. With the
next offline application introduced by HTML5, we can declare our cache manifest. It is a list
of files that will be stored for later access without an Internet connection.
With the cache manifest, we can store all the game graphics, game control JavaScript
files, CSS stylesheets, and the HTML files locally. We can pack our HTML5 games as an
offline game on the desktop or the mobile device. Players can play the games even in
airplane mode.
The following screenshot from the Pie Guy game (http://mrgan.com/pieguy) shows
an HTML5 game in iPhone without an Internet connection. Note the little airplane symbol
indicating the offline status:
Discovering new features in CSS3
CSS is the presentation layer as HTML is the content layer. It defines how the HTML looks. We
cannot miss the CSS when creating games with HTML5, especially for DOM-based games. We
may purely use JavaScript to create and style the games with a Canvas element. But we need
CSS when creating DOM-based HTML5 games. Therefore, let's take a look at what is new in
CSS3 and how we can use the new properties to create games.
[ 11 ]
Introducing HTML5 Games
Instead of directly drawing and interacting on the Canvas drawing board, new CSS3
properties let us animate the DOM in different ways. This makes it possible to make
more complicated DOM-based browser games.
CSS3 transition
Traditionally, the style changes immediately when we apply a new style to an element.
CSS3 transition applies tweening during the style changes of the target elements.
For example, we have a blue box here and want to change it to red when we do a
mouseover. We will use the following code snippets:
HTML:
CSS:
a.box {
display:block;
width: 100px;
height: 100px;
background: #00f; /* blue */
border: 1px solid #000;
}
a.box:hover {
background: #f00;
}
The box changes to red immediately when we do a mouseover. With CSS3 transition applied,
we can tween the styles with a specific duration and the easing value:
a.box {
-webkit-transition: all 5s linear;
}
Downloading the example code for this book
You can download the example code files for all Packt books you have
purchased from your account at http://www.PacktPub.com. If you
purchased this book elsewhere, you can visit http://www.PacktPub.
com/support and register to have the files e-mailed directly to you.
[ 12 ]
Chapter 1
The following screenshot shows the box hover effect with the transition applied:
Since the CSS3 spec is still in draft and not yet fixed, the implementation from
different browser vendors may have some minor differences to the W3C spec.
Therefore, browser vendors tend to implement their CSS3 properties with a
vendor prefix to prevent conflict.
Safari and Chrome use the -webkit- prefix. Opera uses the -o- prefix.
Firefox uses the -moz- prefix and IE uses the -ms- prefix. It is a little
complex now to declare a CSS3 property, such as box-shadow, with several
lines of the same rule for several browsers. We can expect the prefix to be
eliminated after that property spec is fixed.
I will just use the -webkit- prefix in most examples to prevent putting so
many similar lines in the book. It is more important to get the concept instead
of reading the same rules with different vendors prefixed here.
CSS3 transform
CSS3 transform lets us scale the elements, rotate the elements, and translate their position.
CSS3 transform is divided into 2D and 3D.
We can reposition an element with translate:
-webkit-transform: translate(x,y);
or scale the element with scale transformation:
-webkit-transform: scale(1.1);
We can also scale and rotate the elements with CSS3 transform and combine other
transformations:
a.box {
-webkit-transition: all 0.5s linear;
-webkit-transform: translate(100px,50px);
}
a.box:hover {
-webkit-transform: translate(100px,50px) scale(1.1) rotate(30deg);
}
[ 13 ]
Introducing HTML5 Games
The following screenshots show the CSS3 transform effect when we do a mouseover:
CSS3 transform 3D further extends the spaces into three axes and it currently works only
on Safari and Mobile Safari. The following screenshot from WebKit.org shows a 3D card
flipping effect when we do a mouseover:
CSS3 animation
CSS3 transition is one type of animation. It declares the tweening animation between two
styles of the elements.
CSS3 animation is one step further. We can define key frames of an animation. Each key
frame contains a set of properties that should change at that moment. It is like a set of CSS3
transitions applied in sequence to the target element.
[ 14 ]
Chapter 1
The AT-AT Walker (http://anthonycalzadilla.com/css3-ATAT/index-bones.html)
shows a nice demo on creating a skeleton bone animation with CSS3 animation key frames,
transform, and transition:
Learning more detail of new HTML5 and CSS3 features
HTML5Rocks (http://html5rocks.com) from Google provides a solid quick start guide on
new HTML5 elements and CSS3 properties.
Apple also showcases how appealing it can be by using HTML5 in the WebKit-based browser
in their homepage (http://apple.com/html5).
CSS3 Info (http://www.css3.info) is a blog with the latest CSS3 news. It is a good place
to get the latest CSS3 spec status, compatible list, and basic CSS3 codes.
The benefit of creating HTML5 games
We explored several key new features from HTML5 and CSS3. With these features, we can
create HTML5 games on browsers. But why do we need to do that? What is the benefit of
creating HTML5 games?
[ 15 ]
Introducing HTML5 Games
No third-party plugin required
With the native support of all those features in modern browsers, we do not require the
users to pre-install any third-party plugin in order to play. These plugins are not standard.
They are proprietary and usually require an extra plugin installation that we may not be able
to install.
Supporting iOS devices without plugin
Millions of Apple iOS devices around the world do not support third-party plugins such as
Flash Player. Despite whatever reason Apple does not allow Flash Player running on their
Mobile Safaris, HTML5 and related web standard is what they get in their browsers. We can
reach this user base by creating HTML5 games that optimize for mobiles.
Breaking the boundary of usual browser games
In traditional game designing, we build games within a boundary box. We play video games
on a television. We play Flash games in web browsers with a rectangle boundary.
With creativity, we are not bound in a rectangle game stage any more. We can have fun
with all the page elements and we can even use many browser windows to compose
a game. Furthermore, we can even just use the URL bar to create a game (http://
probablyinteractive.com/url-hunter). It may sound confusing, but it is because not
many web pages have done this yet.
Photojojo (http://photojojo.com/store/awesomeness/cell-phone-lenses), an
online photography store, provides a fun Easter egg feature on their store page. There is a
switch button on the page with a caption Do not pull. When the user clicks on it, an orange
arm appears from the top with frame-by-frame animation. It holds the web page like a
holding cloth and pulls the whole page up to create a funny scroll-down effect. This is not a
game, but it is fun enough to demonstrate how we can break the boundary.
[ 16 ]
Chapter 1
Here is another example named Twitch (http://reas.com/twitch/) from Chrome
Experiments. It is a collection of mini games where the player has to carry the ball from
the starting point to the end point. The fun part is that each mini game is a small browser
window. When the ball reaches the destination point of that mini game, it is transferred into
the newly created mini game browser to continue the journey. The following screenshot
shows the whole map of Twitch with the individual web browser:
[ 17 ]
Introducing HTML5 Games
Building HTML5 games
Thanks to the new features from HTML5 and CSS3, we can now create an entire game
in the browser. We can control every element in the DOM. We can animate each
document object with CSS3. We have Canvas to dynamically draw things and interact
with them. We have an audio element to handle the background music and sound effects.
We also have Local Storage to save game data and WebSocket to create a real time
multiplayers game. Most modern browsers are already supporting these features. It is
now time to build HTML5 games.
What others are playing with HTML5
It is a good chance to study how different HTML5 games perform by watching other HTML5
games made with different techniques.
Matching game
The Match game (http://10k.aneventapart.com/Uploads/300/) demonstrates a
beautiful matching game with CSS3 animation and other visual enhancements. The game
starts when you press the 3D-like CSS button. The cards present at the back and the front
side are flipped using 3D rotation. The front side patterns are fetched dynamically from an
online gallery.
[ 18 ]
Chapter 1
Sinuous
Sinuous (http://10k.aneventapart.com/Uploads/83/), winner of the 10K Apart,
shows us how a simple game idea with proper implementation can get people addicted to
it. The player controls the big dots in the space with the mouse. The aim is to move the dots
to avoid the flying comets. It sounds easy and simple, but it is definitely addictive and a justone-more-try game. The game is created with a Canvas tag. Players can also play this game
with their webkit-enabled mobile devices, such as iPhone, iPad, and Android.
Asteroid-styled bookmarklet
Erik, a web designer from Sweden, created an interesting bookmarklet. It is an
asteroid-styled game for any web page. Yes, any web page. It shows an abnormal way
to interact with any web page. It creates a plane on the website you are reading from.
You can then fly the plane using arrow keys and fire bullets using the space bar. The fun
part is that the bullets will destroy the HTML elements on the page. Your goal is to destroy
all the things on the web page you choose. This bookmarklet is another example of breaking
the boundary of usual browser games. It tells us that we can think outside the box while
designing HTML5 games.
The bookmarklet is available for installation at http://erkie.github.com/.
[ 19 ]
Introducing HTML5 Games
The following screenshot shows the plane destroying the content on the web page:
Quake 2
Google demonstrates a WebGL HTML5 port of the first person shooter game, Quake 2.
Players move around using the WSAD key and shoot enemies with their mouse. Players
can even play with each other in real time by using WebSocket. According to Google, the
frame-per-seconds of the HTML5 Quake 2 can be up to 60 fps.
The Quake 2 port is available on Google Code at http://code.google.com/p/quake2gwt-port/.
[ 20 ]
Chapter 1
RumpeTroll
RumpeTroll (http://rumpetroll.com/) is an experiment of the HTML5 community
where everyone gets connected via WebSocket. We can give our creatures names and move
around through mouse clicks. We can also type anything to start a chat. Moreover, we can
see what others are doing in real time, thanks to the WebSocketInsert.
Scrabb.ly
Scrabb.ly (http://scrabb.ly) is a multiplayer crossword board game which won the
popularity prize in the Node.js Knockout contest. It connects users together with HTML5
WebSocket. This online board game is DOM-based and driven by JavaScript.
[ 21 ]
Introducing HTML5 Games
Node.js (htt���������������
p://nodejs.org) is an event-driven server-side JavaScript.
It can be used as a server connecting concurrent WebSocket clients.
Aves Engine
Aves Engine is an HTML5 game development framework developed by dextrose. It provides
tools and API for game developers building their own isometric browser game world with the
map editor. The following screenshot captured from the official demonstration video shows
how it creates an isometric world:
The engine also takes care of the 2.5 dimension isometric coordinate system, collision
detection, and other basic virtual world features. This game engine even works well on
mobile devices such as iPad and iPhone. The Aves Engine has gained a lot of attention since
its debut and is now acquired by Zynga Game Network Inc, a big social game company.
The video demonstration of the Aves Engine is available on YouTube at the following link:
http://tinyurl.com/dextrose-aves-engine-sneak
Browsing more HTML5 games
These examples are just a selected few. The following sites provide updates on HTML5 games
created by others:
Canvas Demo (http://canvasdemo.com) collects a set of applications and games
using the HTML5 Canvas tag. It also provides a bunch of Canvas tutorial resources. It
is a good place to start learning Canvas.
[ 22 ]
Chapter 1
HTML5 games (http://html5games.com) collect many HTML5 games and
organizes them into categories.
Mozilla Labs hosted a HTML5 game design contest in early 2011 and many great
games were submitted to the contest. The contest is now over and the list of all the
entries is at the following link: https://gaming.mozillalabs.com/games/.
The HTML5 Game Jam (http://www.html5gamejam.com/games) is an
HTML5 event and the website lists a collection of fun HTML5 games and also
some useful resources.
What we are going to create in this book
In the following chapters, we are going to build six games. We are going to first create a
DOM-based Ping Pong game that can be played by two players in the same machine. Then
we will create a memory matching game with CSS3 animation. Later, we will use Canvas to
create an untangle puzzle game. Next, we will build a music game with audio elements. Then
we will create a multiplayer draw and guess game with WebSocket. Lastly, we will use the
Box2D JavaScript port to create a prototype of a physics car game. The following screenshot
is of the memory matching game that we will build in Chapter 3, Building a Memory
Matching Game in CSS3
[ 23 ]
Introducing HTML5 Games
Summary
We learned a lot in this chapter about basic information of HTML5 games.
Specifically, we covered:
New features from HTML5 and CSS3. We had a glimpse of what techniques we will
use to create our games in later chapters. Canvas, audio, CSS animation, and more
new features were introduced. We will have many new features to play with.
The benefit of creating HTML5 games. We discussed why we want to create HTML5
games. We want to meet the web standard, meet the mobile devices, and break the
boundary of a game.
HTML5 games that others are playing. We listed several existing HTML5 games that
were created with different techniques that we will use. We can test those games
before creating our own.
We also previewed the games that we are going to build throughout the book.
Now that we've learned about some background information of HTML5 games, we're ready
to create our first DOM-based JavaScript-driven game in the next chapter.
[ 24 ]
2
Getting Started with DOM-based
Game Development
We have had an idea about what we are going to learn in the whole book in
Chapter 1, Introducing HTML5 Games. From this chapter, we will go through a
lot of learning-by-doing sections and we will focus on one topic in each section.
Before digging deeply into the cutting edge CSS3 animations and HTML5
Canvas game, let's start with traditional DOM-based game development.
We will warm up with some basic techniques in this chapter.
In this chapter, we will be:
Preparing the development tools
Setting up our first game—Ping Pong
Learning basic positioning with the jQuery JavaScript library
Getting keyboard inputs
Creating the Ping Pong game with scoring
Getting Started with DOM-based Game Development
The following screenshot shows the game we will get after this chapter. It is a Ping Pong
game played by two players with one keyboard simultaneously:
So, let's get on with making our Ping Pong.
Preparing the development environment
The environment for developing HTML5 games is similar to designing websites. We need
web browsers with the required plugin and a good text editor. Which text editor is good is a
never-ending debate. Each text editor comes with its own strength, so just pick your favorite
one. For the browser, we will need a modern browser that supports the latest HTML5, CSS3
spec, and provides us with handy tools for debugging.
There are several modern browser choices on the Internet now. They are Apple Safari
(http://apple.com/safari/), Google Chrome (http://www.google.com/chrome/),
Mozilla Firefox (http://mozilla.com/firefox/), and Opera (http://opera.com).
These browsers support most features we discuss in the examples in the whole book. We
will use Google Chrome to demonstrate most examples in the book because it runs fast and
smooth with CSS3 transition and Canvas.
Preparing the HTML documents for a DOM-based game
Every website, web page, and HTML5 game starts with a default HTML document. Moreover,
the document starts with a basic HTML code. We will start our HTML5 game development
journey from index.html.
[ 26 ]
Chapter 2
Time for action – Installing the jQuery library
We will create our HTML5 Ping Pong game from scratch. It may sound as if we are going
to be preparing all the things ourselves. Luckily, at least we can use a JavaScript library to
help us. jQuery is the JavaScript library we will be using in the whole book. It will help us in
simplifying our JavaScript logic:
1.
Create a new folder named pingpong.
2.
Create a new folder named js inside the pingpong directory.
3.
Now it's time to download the jQuery library. Go to http://jquery.com/.
4.
Select Production and click on Download jQuery.
5.
Save jquery-1.4.4.min.js in the js folder we created in step 2.
6.
Create a new document named index.html and save it in the first game folder.
7.
Open index.html in text editor and insert an empty HTML template:
Ping Pong
Ping Pong
8.
Include the jQuery JavaScript file by adding the following line before the closing of
the body tag:
[ 27 ]
Getting Started with DOM-based Game Development
9.
Finally, we have to ensure that jQuery is loaded successfully. We place the following
code before the close of the body tag and after the jQuery:
10.
Save the index.html and open it in the browser. We should see the following alert
window showing our text. This means our jQuery is correctly set up:
What just happened?
We just created a basic HTML5 page with jQuery and ensured that the jQuery is
loaded correctly.
New HTML5 doctype
The DOCTYPE and meta tags are simplified in HTML5.
In HTML4.01, we declare doctype as the following code:
It is a long line of code, right? While in HTML5, the doctype declaration cannot be simpler:
We even do not have the HTML version in the declaration. This implies that HTML5 will
support all existing content of previous HTML versions. Future HTML versions will also
support the existing content of HTML5.
The simplification also comes to meta tag. We define the charset of the HTML by using
the following short line now:
[ 28 ]
Chapter 2
Header and footer
HTML5 comes with many new features and improvements, one of them is semantics. HTML5
adds new elements to improve the semantics. We just used two, header and footer.
Header gives a heading introduction to the section or the entire page. Therefore, we put
the h1 title inside header. Footer, same as its name, contains the footer information of the
section or the page.
A semantic HTML means that the markup itself provides meaningful
information to the content instead of only defining the visual
outlook.
Best practice to place the JavaScript code
We put the JavaScript code right before the closing