PacktLib: HTML5 Games Development by Example: Beginner’s Guide

HTML5 Games Development by Example

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Introducing HTML5 Games

Discovering new features in HTML5

Discovering new features in CSS3

Learning more detail of new HTML5 and CSS3 features

The benefit of creating HTML5 games

What others are playing with HTML5

Browsing more HTML5 games

What we are going to create in this book

Summary

Getting Started with DOM-based Game Development

Preparing the development environment

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 DOM

Time for action Changing position of elements with jQuery

Getting a keyboard input from players

Time for action Moving DOM objects by a keyboard input

Supporting multiple keyboard input from players

Time for action Listening to keyboard input with another approach

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

Building a Memory 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 Google Font Directory

Summary

Building the Untangle Game with Canvas and Drawing API

Introducing the HTML5 Canvas Element

Drawing a circle in canvas

Time for action Drawing color circles on canvas

Time for action Drawing different arcs with arc function

Time for action Putting the circle drawing code into a function

Time for action Saving the circle position

Drawing lines in canvas

Time for action Drawing straight lines between each circle

Interacting with drawn objects in canvas with mouse events

Time for action Dragging the circles in canvas

Detecting line intersection in canvas

Time for action Distinguishing the intersected lines

Making the untangle puzzle game

Time for action Making the untangle puzzle game in canvas

Summary

Building a Canvas Games Masterclass

Filling shapes with gradient color

Time for action Drawing a gradient color background to the Untangle game

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

Time for action Embedding Google Web Font into the canvas element

Drawing images in canvas

Time for action Adding graphics to the 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

Summary

Adding Sound Effects to your Games

Adding a sound effect to the play button

Time for action Adding sound effects to the play button

Time for action Converting an MP3 sound to Ogg format with Audacity

Building a mini piano musical game

Time for action Creating a basic background to the music game

Time for action Creating the playback visualization in the music game

Linking the play button to the music game scene

Time for action Animating the scene transition

Creating a keyboard-driven mini piano musical game

Time for action Creating a mini piano musical game

Time for action Removing music dots with the splice function

Adding additional features to the mini piano game

Time for action Removing missed melody notes

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

Summary

Using Local Storage to Store Game Data

Storing data by 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 of breaking 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

Summary

Building a Multiplayer Draw-and-Guess Game with WebSockets

Trying an existing WebSockets web application

Time for action Trying the multiuser sketchpad

Installing a WebSocket server

Time for action Installing Node.JS

Time for action Creating a WebSocket server that sends the total count of connections

Time for action Showing the connection count in a WebSocket application

Building a chatting application with WebSockets

Time for action Sending a message to the server through WebSockets

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

Time for action Broadcasting the 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

Decorating the draw-and-guess game with CSS

Time for action Decorating the game

Summary

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

Summary

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers