HTML5 Game Development Hotshot

Book Image

HTML5 Game Development Hotshot

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

Book Image

HTML5 Game Development Hotshot

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

Overview of this book

HTML5 Game Development HOTSHOT

HTML5 Game Development HOTSHOT

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Building a CSS Quest Game

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

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

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

Multiply Defense

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

Building an Isometric City Game

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

Space Defenders

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

A Ball-shooting Machine with Physics Engine

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

Creating a Sushi Shop Game with Device Scaling

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

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Setting up the user interface

In this task, we will get started with the project by setting up the structure and the user interface.

Prepare for lift off

In this project, we will try a different method of using the graphical assets. We will include the assets.js file, which you can find in the code bundle. This is the file generated by the CreateJS toolkit from Adobe Flash. The following screenshot shows that we lay out the graphical symbols on the stage inside the Flash IDE. The assets.js file includes background, buildings, enemies, and the wave-cleared message. They all come with a name that we can reference and instantiate in our game.

Engage thrusters

The following steps build the foundation of our project:

First, we only show the core part of the index.html file in the following code. When we deploy the code, we always want to have the entire HTML structure:
```
...
<section id="game" class="row">
  <canvas id="canvas" width="640" height="1000"></canvas>
  <div id="hud"...
```