HTML5 Game Development by Example: Beginner's Guide

Book Image

HTML5 Game Development by Example: Beginner's Guide

By : Seng Hin Mak

Book Image

HTML5 Game Development by Example: Beginner's Guide

By: Seng Hin Mak

Overview of this book

HTML5 Game Development by Example Beginner's Guide Second Edition

HTML5 Game Development by Example Beginner's Guide Second Edition

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Introducing HTML5 Games

Introducing HTML5 Games

Discovering new features in HTML5

Discovering new features in CSS3

The benefit of creating HTML5 games

What others are playing with HTML5

What we are going to create in this book

Preparing the development environment

Getting Started with DOM-based Game Development

Getting Started with DOM-based Game Development

Preparing the HTML documents for a DOM-based game

Time for action – installing the jQuery library

Setting up the Ping Pong game elements

Time for action – placing Ping Pong game elements in the DOM

Getting mouse input

Time for action – moving DOM objects by mouse input

Time for action – Moving the ball with JavaScript Interval

Beginning collision detection

Time for action – hitting the ball with the paddles

Controlling the left paddle movement

Time for action – auto moving the left paddle

Showing text dynamically in HTML

Time for action – Showing the score of both players

Building a Card-matching Game in CSS3

Building a Card-matching Game in CSS3

Moving game objects with CSS3 transition

Time for action – moving a playing card around

Creating a card-flipping effect

Time for action – flipping a card with CSS3

Creating a card-matching memory game

Time for action – preparing the card-matching game

Adding game logic to the matching game

Time for action – adding game logic to the matching game

Embedding web fonts into our game

Time for action – embedding a font from the Google Fonts directory

Building the Untangle Game with Canvas and the Drawing API

Building the Untangle Game with Canvas and the Drawing API

Introducing the HTML5 canvas element

Drawing a circle in the Canvas

Time for action – drawing color circles in the Canvas

Time for action – putting the circle drawing code into a function

Time for action – saving the circle position

Drawing lines in the Canvas

Time for action – drawing straight lines between each circle

Using mouse events to interact with objects drawn in the Canvas

Time for action – dragging the circles in the Canvas

Detecting line intersection in the Canvas

Time for action – distinguishing the intersected lines

Adding touch support for tablets

Time for action – adding the touch input support

Building a Canvas Game's Masterclass

Building a Canvas Game's Masterclass

Making the Untangle puzzle game

Time for action – making the Untangle puzzle game in Canvas

Drawing text in the Canvas

Time for action – displaying the progress level text inside the canvas element

Time for action – embedding a Google web font into the canvas element

Drawing images in the Canvas

Time for action – adding graphics to the game

Time for action – adding CSS styles and image decoration to the game

Animating a sprite sheet in Canvas

Time for action – making a game guide animation

Creating a multilayer Canvas game

Time for action – dividing the game into four layers

Adding Sound Effects to Your Games

Adding Sound Effects to Your Games

Adding a sound effect to the Play button

Time for action – adding sound effects to the Play button

Building a mini piano musical game

Time for action – creating a basic background for the music game

Time for action – creating the playback visualization in the music game

Creating a keyboard-driven mini piano musical game

Time for action – creating a mini piano musical game

Adding additional features to the mini piano game

Time for action – removing missed melody notes

Time for action – adding functionalities to record the music level data

Adding touch support

Time for action – indicating a game over event in the console

Handling the audio event in playback complete events

Time for action – indicating a game over event in the console

Saving the Game's Progress

Saving the Game's Progress

Storing data using HTML5 local storage

Time for action – creating a game over dialog with the elapsed played time

Time for action – saving the game score

Saving objects in the local storage

Time for action – saving the time alongside the score

Notifying players when they break a new record with a nice ribbon effect

Time for action – creating a ribbon in CSS3

Saving the entire game progress

Time for action – saving all essential game data in the local storage

Time for action – resuming a game from the local storage

Caching the game for offline access

Time for action – adding the AppCache Manifest

Building a Multiplayer Draw-and-Guess Game with WebSockets

Building a Multiplayer Draw-and-Guess Game with WebSockets

Installing a WebSocket server

Time for action – installing Node.js

Time for action – running a WebSocket server

Time for action – showing the connection count in a WebSocket application

Time for action – sending total count to all users

Building a chatting application with WebSockets

Time for action – sending a message to the server through WebSockets

Sending every received message on the server side to create a chat room

Time for action – sending messages to all connected browsers

Making a shared drawing whiteboard with Canvas and WebSockets

Time for action – making a local drawing whiteboard with the Canvas

Time for action – sending the drawing through WebSockets

Building a multiplayer draw-and-guess game

Time for action – building the draw-and-guess game

Building a Physics Car Game with Box2D and Canvas

Building a Physics Car Game with Box2D and Canvas

Installing the Box2D JavaScript library

Time for action – installing the Box2D physics library

Creating a static ground body in the physics world

Time for action – creating a ground in the world

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

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 a revolute joint

Adding force to the car with a keyboard input

Time for action – adding force to the car

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

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 the 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

Adding a final touch to make the game fun to play

Time for action – decorating the game and adding a fuel limitation

Adding touch support for tablets

Time for action – adding touch support

Deploying HTML5 Games

Deploying HTML5 Games

Preparing the deploying materials

Putting the game on the Web

Hosting the node.js server

Deploying as a mobile web app in the home screen

Time for action – adding a meta tag for a mobile web app

Building an HTML5 game into a Mac OS X app

Time for action—putting the HTML5 games into a Mac app

Building an HTML5 game into a mobile app with the Web View

Building with the PhoneGap build

App store's reviewing process

Pop Quiz Answers

Pop Quiz Answers

Chapter 2, Getting Started with DOM-based Game Development

Chapter 3, Building a Card-matching Game in CSS3

Chapter 4, Building the Untangle Game with Canvas and the Drawing API

Chapter 5, Building a Canvas Game's Masterclass

Chapter 6, Adding Sound Effects to Your Games

Chapter 7, Saving the Game's Progress

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Time for action – embedding a Google web font into the canvas element

Let's draw the Canvas texts with a handwriting style font:

First, go to the Google font directory and choose a handwriting style font. I used the font Rock Salt and you can get it from the following URL: http://www.google.com/fonts/specimen/Rock+Salt.
The Google font directory provides a CSS link code that we can add to our game in order to embed the font. Add the following CSS link to the head of index.html:
```
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
```
The next thing is to use the font. We open the untangle.drawing.js JavaScript file and modify the context font property in the drawLevelProgress function to the following:
```
ctx.font = "26px 'Rock Salt'";
```
It is time to open our game in the web browser to test the result. The text drawn in the Canvas is now using the font we chose in the Google font directory.

What just happened?

We just chose a web font and embedded it into...