Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

4 (6)

HTML5 Game Development Hotshot

4 (6)

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

With a wide range of projects to build, this step-by-step guide will give you all the tools you need to create a variety of games. Whether you are familiar with the basics of object-oriented programming concepts, are new to HTML game development, or are familiar with just web design, this project-based book will get you up and running in no time. It will teach and inspire you to create great interactive content on the Web.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Mission briefing

Task 1

Mission accomplished

A Hotshot challenge / Hotshot challenges

Conventions

Reader feedback

Customer support

Free Chapter

1. Building a CSS Quest Game

1. Building a CSS Quest Game

Mission briefing

Creating the HTML structure

Managing the game scene

Representing the quest composition

Placing the patterns on the deck

Selecting the pattern

Comparing the player and compositions of the quest

Showing different quests

Adding a countdown timer to the game

Mission accomplished

Hotshot challenges

2. Card Battle!

2. Card Battle!

Mission briefing

Creating the game scenes

Creating a 3D card-flipping effect

Selecting a card

Adding a power value to the cards

Creating the opponent's card

Building the battle animation

Adding health points to the game

Restarting the game for the next round of battle

Mission accomplished

Hotshot challenges

3. Space Runner

3. Space Runner

Mission briefing

Managing the scenes

Defining the floor and tiles in the game

Controlling the tiles creation in JavaScript

Using a game loop

Parallax background scrolling

Controlling a player with the keyboard

Determining a collision between the player and tiles

Spritesheet animation

Mission accomplished

Hotshot challenges

4. Multiply Defense

4. Multiply Defense

Mission briefing

Setting up the canvas and EaselJS

Defining the numbered box

The game loop and falling boxes

Inputs and equations

Removing the boxes

Ending the game

Restarting the game

Replacing the rectangle shape with bitmap graphics

Mission accomplished

A Hotshot challenge

5. Building an Isometric City Game

5. Building an Isometric City Game

Mission briefing

Designing the game's user interface

Placing the tiles and grid in the city layer

Choosing which building to build

Placing buildings on the floor

Advancing the construction progress over time

Generating coins and diamonds

Collecting pop-up diamonds

Saving and loading the game progress

Mission accomplished

Hotshot challenges

6. Space Defenders

6. Space Defenders

Mission briefing

Setting up the user interface

Placing the defense buildings

Summoning the enemies

Generating energy

Enemies attacking the buildings

Firing bullets and attacking the enemies

Controlling enemy waves

Loading the bitmap graphics into the game

Mission accomplished

Hotshot challenges

7. A Ball-shooting Machine with Physics Engine

7. A Ball-shooting Machine with Physics Engine

Mission briefing

Creating a simulated physics world

Shooting the ball

Handling collision detection

Defining levels

Adding a launch bar with power

Adding a cross obstacle

Visualizing the graphics

Choosing a level

Mission accomplished

Hotshot challenges

8. Creating a Sushi Shop Game with Device Scaling

8. Creating a Sushi Shop Game with Device Scaling

Mission briefing

Making the responsive layout

Decorating the game

Making the sushi

Creating a customer queue

Refilling sushi ingredients

Adding sound effects

Distributing the game

Making the game mobile friendly

Mission accomplished

A Hotshot challenge

Index

Index

Customer Reviews

4 (6)

5 star

33.3%

4 star

50%

3 star

0%

2 star

16.7%

1 star

0%

Using a game loop

In the previous section, we placed the tiles in HTML directly, and then moved the temporary code for the creation of tiles from HTML to JavaScript.

Although the tiles are created programmatically, it is a one-time creation only. The tiles do not move. No new tiles are created after the initialization.

What we will do in this task is continuously create tiles based on a predefined pattern, and keep moving the existing tiles down.

Prepare for lift off

In this task, we are going to create tiles based on the data provided by the user instead of having the tile patterns hardcoded.

Before we start, let's remove the temporary code that creates testing tiles in JavaScript. The startOver function is reverted to the following state:

gameScene.startOver = function() {
  game.view.runway.reset();
  game.isGameOver = false;
};

We need to prepare the data for the tiles so that the game can loop and create more tiles.

We have used an integer value in both HTML and CSS to represent different...

Visually different images

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 Hotshot

Search

Your notes and bookmarks