HTML5 Game Development HOTSHOT

Table of Contents

HTML5 Game Development HOTSHOT

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Mission briefing

Why is it awesome?

Your Hotshot objectives

Mission checklist

Task 1

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Mission accomplished

A Hotshot challenge / Hotshot challenges

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Building a CSS Quest Game

Mission briefing

Why is it awesome?

Your Hotshot objectives

Mission checklist

Creating the HTML structure

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

HTML structure

Modularizing the logic

Variable scope in JavaScript

Classified intel

Managing the game scene

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Creating buttons

Placing the scene logic and the namespace

The transition between scenes

The scene object inheritance

Prototype chaining

Classified intel

Representing the quest composition

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Separating the data and view

Visualizing the quest patterns

Quest level

Composition and quest modules

Placing the patterns on the deck

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Selecting the pattern

Engage thrusters

Objective complete – mini debriefing

Undo the player composition

Comparing the player and compositions of the quest

Prepare for lift off

Representing a pattern overlapping relationship

Engage thrusters

Objective complete – mini debriefing

Comparing players and compositions of the quest

Classified intel

Showing different quests

Engage thrusters

Objective complete – mini debriefing

Adding a countdown timer to the game

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Mission accomplished

Hotshot challenges

Storing the data in local storage

Collecting stars

2. Card Battle!

Mission briefing

Why is it awesome?

Your Hotshot objectives

Mission checklist

Creating the game scenes

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

HTML structure for scenes

HTML structure for game objects

Logic modules

Game flow

Scenes' methods

Creating a 3D card-flipping effect

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

3D transform

The card-flipping effect

Toggling the flipping state

Classified intel

Selecting a card

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Resetting the card's initial position

Selecting the card with a click event

Removing the non-selected cards

Short delay before the card goes into transition

Classified intel

Adding a power value to the cards

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Randomize logic

Card definition

Classified intel

Creating the opponent's card

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

The opponent card's transition

The entry point of the battle animation

Building the battle animation

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

The animation sequence

Using the CSS keyframes animation

The card shaking animation

The blaze animation

Classified intel

Adding health points to the game

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

The health point module

The health points reduction formula

Ending the game

Classified intel

Restarting the game for the next round of battle

Engage thrusters

Objective complete – mini debriefing

Mission accomplished

Hotshot challenges

3. Space Runner

Mission briefing

Why is it awesome?

Your Hotshot objectives

Mission checklist

Managing the scenes

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Defining the floor and tiles in the game

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

The tiles

The tile pattern

The setting.js file

Classified intel

The role of HTML, CSS, and JavaScript

Controlling the tiles creation in JavaScript

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

The Tile definition

The view object for the runway

The temporary code

Using translate3d for 2D translation

Classified intel

Using a game loop

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Integer map

Game loop

The main Game loop

Moving the tiles down

The duration

Classified intel

Parallax background scrolling

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Parallel scrolling background

Controlling a player with the keyboard

Engage thrusters

Objective complete – mini debriefing

Classified intel

Determining a collision between the player and tiles

Prepare for lift off

Engage thrusters

Objective complete

Determining collision

Spritesheet animation

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Creating the spritesheet image

Spritesheet using CSS3 animation

Changing the animation speed

Classified intel

Spritesheet animation versus CSS3 transition

Mission accomplished

Hotshot challenges

4. Multiply Defense

Mission briefing

Why is it awesome?

Your Hotshot objectives

Mission checklist

Setting up the canvas and EaselJS

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Why use library to draw on a canvas?

The addChild method

The CreateJS namespace

Classified intel

Defining the numbered box

Engage thrusters

Objective complete – mini debriefing

Drawing a shape with the Graphics object

Class inheritance

Container

Chaining the prototype and inheritance

Random position

Classified intel

The game loop and falling boxes

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Inputs and equations

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Removing the boxes

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

The easing function

Ending the game

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Restarting the game

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Pausing the game

Replacing the rectangle shape with bitmap graphics

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Mission accomplished

A Hotshot challenge

5. Building an Isometric City Game

Mission briefing

Why is it awesome?

Your Hotshot objectives

Mission checklist

Designing the game's user interface

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Tween-based cloud animation

Classified intel

Placing the tiles and grid in the city layer

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Registration point

Isometric formula

Choosing which building to build

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Button helper

Classified intel

Placing buildings on the floor

Prepare for lift off

Planning the placing flow

Engage thrusters

Objective complete – mini debriefing

Conversion from screen coordinates to isometric coordinates

Drawing the building

Building view classes

Applying color filter

Classified intel

The different mouseover events

Translating coordinates between global and local

Creating depth illustrations by ordering the buildings

Advancing the construction progress over time

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Generating coins and diamonds

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Collecting pop-up diamonds

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Diamond sprite animation

Classified intel

Saving and loading the game progress

Engage thrusters

Objective complete – mini debriefing

Using local storage

Classified intel

Having more than one saving slot

Mission accomplished

Hotshot challenges

Eliminating waiting time by paying

Upgrading buildings

Providing mini quests

6. Space Defenders

Mission briefing

Why is it awesome?

Your Hotshot objectives

Mission checklist

Setting up the user interface

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

The head-up display

Classified intel

The role of Adobe Flash when creating assets

Separating the JavaScript files into modules

Placing the defense buildings

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Summoning the enemies

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Enemies that reach the earth

Classified intel

Generating energy

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Enemies attacking the buildings

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Designing the movement of the enemy

Classified intel

Caching graphics inside the assets file

Firing bullets and attacking the enemies

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Controlling enemy waves

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

The enemy spawn logic

Controlling the difficulty of the game

Classified intel

The tower defense strategy

Loading the bitmap graphics into the game

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Mission accomplished

Hotshot challenges

Providing more statistics

Managing scenes

Adding a pause button

Adding a keyboard shortcut

Introducing an alternate currency

7. A Ball-shooting Machine with Physics Engine

Mission briefing

Why is it awesome?

Your Hotshot objectives

Mission checklist

Preparing the vendor files

Creating a simulated physics world

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Defining gravity

Debug draw

Understanding body definition and fixture definition

Defining shapes

Pixels per meter

The update method

Classified intel

Shooting the ball

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Shooting the ball

Applying the force

Explaining the construction of the physics world

Classified intel

Handling collision detection

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Contact listener

User data

Classified intel

Object removal

Defining levels

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Building the level

Classified intel

Designing the physics world

Adding a launch bar with power

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Adding a cross obstacle

Engage thrusters

Objective complete – mini debriefing

Classified intel

Visualizing the graphics

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Adding the addChildAt display object to a specific z-index when adding a child

Classified intel

Visualizing the spinning cross

9-slice scaling

Choosing a level

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Choosing a level

Classified intel

Clearing all bodies to start the game all over

Mission accomplished

Hotshot challenges

8. Creating a Sushi Shop Game with Device Scaling

Mission briefing

Why is it awesome?

Your Hotshot objectives

Mission checklist

SoundJS

Making the responsive layout

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Decorating the game

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Background-size – cover and contain

Using border-image to decorate the customer view

Making the sushi

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Creating a customer queue

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Resizing the canvas

Refilling sushi ingredients

Engage thrusters

Objective complete – mini debriefing

Classified intel

Adding sound effects

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Classified intel

Distributing the game

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Concatenate and minify the code

Hosting a static website

Classified intel

Making the game mobile friendly

Prepare for lift off

Engage thrusters

Objective complete – mini debriefing

Enable the touch event

An iOS mobile web app

Classified intel

Mobile app distribution

Offline cache

Mission accomplished

A Hotshot challenge

Index

HTML5 Game Development HOTSHOT

HTML5 Game Development HOTSHOT

Copyright © 2014 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: July 2014

Production reference: 1010714

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-546-6

www.packtpub.com

Cover image by Thomas Mak (<mak@makzan.net>)

Credits

Author

Makzan

Reviewers

Maxime AILLOUD

Hatem Alimam

Othree Kao

Willian PotHix Molinari

Kevin Roast

Tim Severien

Roberto Ulloa

Commissioning Editor

Erol Staveley

Acquisition Editors

Saleem Ahmed

Antony Lowe

Rebecca Pedley

Luke Presland

Content Development Editor

Amey Varangaonkar

Technical Editors

Mrunmayee Patil