2. Getting Started with DOM-based Game Development | HTML5 Game Development by Example(Second Edition)

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

HTML5 Game Development by Example(Second Edition)

3.8 (5)

HTML5 Game Development by Example(Second Edition)

3.8 (5)

Overview of this book

This book is for web designers who have a basic knowledge of HTML, CSS, and JavaScript and want to create Canvas or DOM-based games that run on browsers.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Time for action – heading

Conventions

Reader feedback

Customer support

Free Chapter

1. Introducing HTML5 Games

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

Summary

2. Getting Started with DOM-based Game Development

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

Summary

3. Building a Card-matching Game in CSS3

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

Summary

4. Building the Untangle Game with Canvas and the Drawing API

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

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

Summary

5. Building a Canvas Game's Masterclass

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

Summary

6. Adding Sound Effects to Your Games

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

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

Summary

7. Saving the Game's Progress

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

Summary

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

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

Summary

9. Building a Physics Car Game with Box2D and Canvas

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

Summary

10. Deploying HTML5 Games

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

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

Summary

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

Index

Time for action – Moving the ball with JavaScript Interval

We will use the function to create a timer. The timer moves the ball a little bit every 30 milliseconds. We are going to also change the direction of the ball movement once it hits the playground edge. Let's make the ball move now:

We will use our last example, listening to multiple keyboard inputs, as the starting point.
Open the js/pingpong.js file in the text editor.

In the existing pingpong.playground object, we change to the following code that adds height and width to the playground.

playground: {
  offsetTop: $("#playground").offset().top,
  height: parseInt($("#playground").height()),
  width: parseInt($("#playground").width()),
},

We are now moving the ball, and we need to store the ball's status globally. We will put the ball-related variable inside the pingpong object:
```
var pingpong = {
  //existing data
  ball: {
    speed: 5,
    x: 150,
    y: 100,
    directionX: 1,
    directionY: 1
  }
}
```
We define a gameloop function and...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

HTML5 Game Development by Example(Second Edition)

Search

Your notes and bookmarks