HTML5 Games Development by Example: Beginner's Guide

By Makzan
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Introducing HTML5 Games

About this book

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!

The book will show you how to use latest HTML5 and CSS3 web standards to build card games, drawing games, physics games and even multiplayer games over the network. With the book you will build 6 example games with clear step-by-step tutorials.

HTML5, CSS3 and related JavaScript API is the latest hot topic 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.

The book divides into 9 chapters with each one focusing on one topic. We will create 6 games in the book and specifically learn how we draw game objects, animate them, adding audio, connecting players and building physics game with Box2D physics engine.

Publication date:
August 2011
Publisher
Packt
Pages
352
ISBN
9781849691260

 

Chapter 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.

 

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<img> 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<img> 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<img> 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.

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:

Note

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.

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.

Note

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/comparing-indexeddb-and-webdatabase/.

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.

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:

<a href="#" class="box"></a>

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;
}

Note

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.

The following screenshot shows the box hover effect with the transition applied:

Note

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);
}

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.

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?

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.

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:

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.

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 just-one-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/.

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/quake2-gwt-port/.

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.

Note

Node.js (http://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.

  • 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

 

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.

About the Author

  • Makzan

    Makzan focuses on the fields of web development and game design. He has over 14 years of experience in building digital products. He has worked on real-time multiplayer interaction games, iOS applications, and rich interactive websites.

    He has written three books, on building a Flash virtual world, and creating games with HTML5 and the latest web standards and developed a video course as well. He currently teaches courses in Hong Kong and Macao SAR. He writes tutorials and shares his know-how on makzan.net.

    Browse publications by this author
Book Title
Unlock this full book FREE 10 day trial
Start Free Trial