HTML5 Games Development by Example: Beginner's Guide

HTML5 Games Development by Example: Beginner's Guide

By : Makzan

Buy this Book

HTML5 Games Development by Example: Beginner's Guide

By: Makzan

Buy this Book

Overview of 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.

HTML5 Games Development by Example

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

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

Chapter 2: Getting Started with DOM-based Game Development

Chapter 3: Building Memory Match Game in CSS3

Chapter 4: Building Untangle Game with Canvas and Drawing API

Chapter 5: Building Canvas Games Masterclass

Chapter 6: Adding Sound Effects to your Games

Chapter 7: Using Local Storage to Store Game Data

Chapter 8: Building Multiplayer Draw-and-Guess Game with WebSockets

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Time for action Checking a collision between the car and the destination body

Carry out the following steps:

1. Again, we start from our game logic. Open the html5games.box2dcargame.js JavaScript file in a text editor.
2. We setup a destination ground in the ground creation code and assign it to our gamewinWall reference inside the carGame global object instance as follows:
```
carGame.gamewinWall = createGround(1200, 215, 15, 25, 0);
```

3. Next, we move on to the step function. In each step, we get the complete contact list from the world and check whether any two colliding objects are car and the destination ground:

function step() {
carGame.world.Step(1.0/60, 1);
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
drawWorld(carGame.world, ctx);
setTimeout(step, 10);
//loop all contact list to check if the car hits the winning wall
for (var cn = carGame.world.GetContactList(); cn != null; cn = cn.GetNext()) {
var body1 = cn.GetShape1().GetBody();
var body2 = cn.GetShape2().GetBody();
if ((body1 == carGame...

HTML5 Games Development by Example: Beginner's Guide

By : Makzan

HTML5 Games Development by Example: Beginner's Guide

By: Makzan

Overview of this book

Related Content you might be interested in

Current Title:

HTML5 Games Development by Example: Beginner's Guide

Time for action Checking a collision between the car and the destination body