HTML5 Game Development by Example: Beginner's Guide - Second Edition电子书

HTML5 Game Development by Example Beginner's Guide Second Edition

Table of Contents

HTML5 Game Development by Example Beginner's Guide Second Edition

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Time for action – heading

What just happened?

Pop quiz – heading

Have a go hero – heading

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Introducing HTML5 Games

Discovering new features in HTML5

Canvas

Audio

Touch Events

GeoLocation

WebGL

WebSocket

Local storage

Offline applications

Discovering new features in CSS3

CSS3 transition

CSS3 transform

CSS3 animation

The benefit of creating HTML5 games

Free and open standards

Support for multiple platforms

Native app-rendering performance in particular scenarios

Breaking the boundary of usual browser games

Building HTML5 games

What others are playing with HTML5

Coca-Cola's Ahh campaign

Asteroid-styled bookmarklet

X-Type

Cursors.io

What we are going to create in this book

Preparing the development environment

Summary

2. Getting Started with DOM-based Game Development

Preparing the HTML documents for a DOM-based game

Time for action – installing the jQuery library

What just happened?

New HTML5 doctype

Header and footer

The best practice to place the JavaScript code

Choosing the jQuery file

Running jQuery inside a scope

Running our code after the page is ready

Pop quiz

Downloading the image assets

Setting up the Ping Pong game elements

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

What just happened?

Using jQuery

Understanding basic jQuery selectors

Understanding the jQuery CSS function

Manipulating game elements in DOM with jQuery

Understanding the behavior of absolute position

Declaring global variables in a better way

Pop quiz

Getting mouse input

Time for action – moving DOM objects by mouse input

What just happened?

Getting the mouse event

RequestAnimationFrame

Checking the console window

Moving a DOM object with JavaScript Interval

Time for action – Moving the ball with JavaScript Interval

What just happened?

Creating a JavaScript timer with the setInterval function

Understanding the game loop

Separating the data and the view logic

Beginning collision detection

Time for action – hitting the ball with the paddles

What just happened?

Have a go hero

Controlling the left paddle movement

Time for action – auto moving the left paddle

What just happened?

Showing text dynamically in HTML

Time for action – Showing the score of both players

What just happened?

Have a go hero – winning the game

Summary

3. Building a Card-matching Game in CSS3

Moving game objects with CSS3 transition

Time for action – moving a playing card around

What just happened?

2D transform functions

3D transform functions

Tweening the styles using CSS3 transition

Have a go hero

Creating a card-flipping effect

Time for action – flipping a card with CSS3

What just happened?

Toggling a class with jQuery's toggleClass function

Introducing CSS' perspective property

Have a go hero

Introducing backface-visibility

Creating a card-matching memory game

Downloading the sprite sheet of playing cards

Setting up the game environment

Time for action – preparing the card-matching game

What just happened?

Cloning DOM elements with jQuery

Selecting the first child of an element in jQuery 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

What just happened?

Executing code after the CSS transition has ended

Delaying code execution on flipping cards

Randomizing an array in JavaScript

Storing internal custom data with an HTML5 custom data attribute

Pop quiz

Accessing custom data attribute with jQuery

Pop quiz

Have a go hero

Making other playing card games

Have a go hero

Embedding web fonts into our game

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

What just happened?

Choosing different font delivery services

Summary

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

What just happened?

Putting in fallback content when the web browser does not support the Canvas

The Canvas context

Drawing circles and shapes with the Canvas arc function

Converting degrees to radians

Executing the path drawing in the Canvas

Beginning a path for each style

Have a go hero

Closing a path

Pop quiz

Wrapping the circle drawing in a function

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

What just happened?

Dividing code into files

Generating random numbers in JavaScript

Saving the circle position

Time for action – saving the circle position

What just happened?

Defining a basic class definition in JavaScript

Have a go hero

Drawing lines in the Canvas

Time for action – drawing straight lines between each circle

What just happened?

Introducing the line drawing API

Using mouse events to interact with objects drawn in the Canvas

Time for action – dragging the circles in the Canvas

What just happened?

Detecting mouse events in circles in the Canvas

Pop quiz

Game loop

Clearing the Canvas

Pop quiz

Detecting line intersection in the Canvas

Time for action – distinguishing the intersected lines

What just happened?

Determining whether two line segments intersect

Adding touch support for tablets

Time for action – adding the touch input support

What just happened?

Handling touches

Mouse move and Touch move

Summary

5. Building a Canvas Game's Masterclass

Making the Untangle puzzle game

Time for action – making the Untangle puzzle game in Canvas

What just happened?

Defining the leveling data

Determining level-up

Displaying the current level and completeness progress

Have a go hero

Drawing text in the Canvas

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

What just happened?

Pop quiz – drawing text in the Canvas

Using embedded web font inside the Canvas

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

What just happened?

Drawing images in the Canvas

Time for action – adding graphics to the game

What just happened?

Have a go hero

Using the drawImage function

Have a go hero – optimizing the background image

Decorating the Canvas-based game

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

What just happened?

Pop quiz – styling a Canvas background

Animating a sprite sheet in Canvas

Time for action – making a game guide animation

What just happened?

Creating a multilayer Canvas game

Time for action – dividing the game into four layers

What just happened?

Mixing a CSS technique with Canvas drawing

Have a go hero

Summary

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

What just happened?

Defining an audio element

Playing a sound

jQuery's selector versus browser selector

Pausing a sound

Adjusting the sound volume

Using the jQuery hover event

File format for WebAudio

Pop quiz – using the audio tag

Building a mini piano musical game

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

What just happened?

Creating scenes in games

Creating a slide-in effect in CSS3

Have a go hero – creating different scene transition effects

Visualizing the music playback

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

What just happened?

Choosing the right song for the music game

Playing audio on mobile devices

Storing and extracting the song-level data

Getting the elapsed time of the game

Creating music dots

Moving the music dots

Creating a keyboard-driven mini piano musical game

Time for action – creating a mini piano musical game

What just happened?

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

Have a go hero

Adding additional features to the mini piano game

Adjusting the music volume according to the player

Time for action – removing missed melody notes

What just happened?

Removing dots from the game

Storing the success count in the last five results

Have a go hero

Recording music notes as level data

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

What just happened?

Adding touch support

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

What just happened?

Handling the audio event in playback complete events

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

What just happened?

Handling audio events

Have a go hero

Summary

7. Saving the Game's Progress

Storing data using HTML5 local storage

Creating a game over dialog

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

What just happened?

Counting time

Saving scores in the browser

Time for action – saving the game score

What just happened?

Storing and loading data with local storage

The local storage saves the string value

Treating the local storage object as an associative array

Saving objects in the local storage

Time for action – saving the time alongside the score

What just happened?

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 when they break a new record with a nice ribbon effect

Time for action – creating a ribbon in CSS3

What just happened?

Have a go hero – saving and comparing only to the fastest time

Saving the entire game progress

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

What just happened?

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

What just happened?

Pop quiz – using local storage

Caching the game for offline access

Time for action – adding the AppCache Manifest

What just happened?

The AppCache file

Summary

8. Building a Multiplayer Draw-and-Guess Game with WebSockets

Installing a WebSocket server

Installing the Node.js WebSocket server

Time for action – installing Node.js

What just happened?

Creating a WebSocket server to send connection count

Time for action – running a WebSocket server

What just happened?

Initializing the WebSocket server

Listening to the connection event on the server side

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

What just happened?

Establishing a WebSocket connection

WebSocket client events

Sending a message to all connected browsers

Time for action – sending total count to all users

What just happened?

Defining class and instant instance methods

Handling a newly connected user

Exporting modules

Sending messages to the client

Building a chatting application with WebSockets

Sending a message to the server

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

What just happened?

Sending a message from the client to the server

Receiving a message on the server side

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

Time for action – sending messages to all connected browsers

What just happened?

Comparing WebSockets with 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

What just happened?

Drawing in the Canvas

Have a go hero – drawing with colors

Sending the drawing to all the connected browsers

Time for action – sending the drawing through WebSockets

What just happened?

Defining a data object to communicate between the client and the server

Packing the drawing lines data into JSON for sending

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

What just happened?

Inheriting the Room class

Controlling the game flow of a multiplayer game

Room and Game Room

Improving the game

Improving the styles

Storing drawn lines on each game

Have a go hero

Improving the answer checking mechanism

Have a go hero

Summary

9. Building a Physics Car Game with Box2D and Canvas

Installing the Box2D JavaScript library

Time for action – installing the Box2D physics library

What just happened?

Using b2World to create a new world

Setting the gravity of the world

Setting Box2D to ignore the sleeping object

Creating a static ground body in the physics world

Time for action – creating a ground in the world

What just happened?

Pixel per meter

Creating a shape with a fixture

Creating a body

Setting the bouncing effect with the restitution property

Drawing the physics world in the canvas

Time for action – drawing the physics world into the Canvas

What just happened?

Creating a dynamic box in the physics world

Time for action – putting a dynamic box in the world

What just happened?

Advancing the world time

Time for action – setting up the world step loop

What just happened?

Adding wheels to the game

Time for action – putting two circles in the world

What just happened?

Creating a physical car

Time for action – connecting the box and two circles with a revolute joint

What just happened?

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

What just happened?

Applying force to a body

Clearing Force

Understanding the difference between ApplyForce and ApplyImpulse

Have a go hero

Adding ramps to our game environment

Time for action – creating the world with ramps

What just happened?

Have a go hero

Checking collisions in the Box2D world

Time for action – checking a collision between the car and the destination body

What just happened?

Getting the collision contact list

Have a go hero

Restarting the game

Time for action – restarting the game while pressing the R key

What just happened?

Have a go hero

Adding a level support to our car game

Time for action – loading the game with levels data

What just happened?

Have a go hero

Replacing the Box2D outline drawing with graphics

Time for action – adding a flag graphic and a car graphic to the game

What just happened?

Using userData in shape and body

Drawing graphics in every frame according to the state of its physics body

Rotating and translating an image in the canvas

Have a go hero

Adding a final touch to make the game fun to play

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

What just happened?

Adding fuel to add a constraint when applying force

Presenting the remaining fuel in a CSS3 progress bar

Adding touch support for tablets

Time for action – adding touch support

What just happened?

Controlling the viewport scale

Touch-specific buttons

Summary

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

What just happened?

Building an HTML5 game into a Mac OS X app

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

What just happened?

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

Building with the PhoneGap build

App store's reviewing process

Summary

A. Pop Quiz Answers

Chapter 2, Getting Started with DOM-based Game Development

Preparing the HTML documents for a DOM-based game

Pop quiz

Setting up the Ping Pong game elements

Pop quiz

Chapter 3, Building a Card-matching Game in CSS3

Storing internal custom data with an HTML5 custom data attribute

Pop quiz

Accessing custom data attribute with jQuery

Pop quiz

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

Drawing a circle in the Canvas

Pop quiz

Using mouse events to interact with objects drawn in the Canvas

Detecting mouse events in circles in the Canvas

Pop quiz

Clearing the Canvas

Pop quiz

Chapter 5, Building a Canvas Game's Masterclass

Drawing text in the Canvas

Pop quiz – drawing text in the Canvas

Drawing images in the Canvas

Pop quiz – styling a Canvas background

Chapter 6, Adding Sound Effects to Your Games

Adding a sound effect to the Play button

Pop quiz – using the audio tag

Chapter 7, Saving the Game's Progress

Saving the entire game progress

Pop quiz – using local storage

Index