Table of Contents

About This Book

What You Will Need

How to Read This Book

How This Book Is Organized

Part I: Building the Foundation

Part II: Basic Game Development

Part III: Diving Deeper

Part IV: The Part of Tens

We Even Use the Internet Thingy!

Icons Used in This Book

Where to Go from Here

Chapter 1: Playing on the Web

Building the Framework

Setting Up Your Workshop

Web browsers

A programmer’s editor

Graphics tools

Audio tools

Building Your First Game

Building a Basic Page

Dressing up the page

Providing a link

Beautifying the page

Making a style reusable

Building the next node

Adding a sound effect

Add another page for a victory

Making it your own

Chapter 2: Talking to the User

Making an Interactive Form

Adding JavaScript to Your Page

Creating the custom greeting

Making the magic happen

A program where everyone knows your name

Modifying the page itself

Adding style to your forms

Do it with style

Creating a style for the form

Outsourcing your JavaScript code

Building the Word Story Game

Designing the game

Building the HTML foundation

Adding the CSS style

Writing the code

Chapter 3: Coding Like a Pro

Working with Variables

You’re just my type: Handling different data types

Using a computer program to do bad math

Managing data types correctly

Making Choices with if

Changing the greeting with if

The different flavors of if

Conditional operators

Managing Repetition with for loops

Setting up the web page

Initializing the output

Creating the basic for loop

Introducing shortcut operators

Counting backward

Counting by fives

Building While Loops

Making a basic while loop

Getting your loops to behave

Managing more complex loops

Managing bugs with a debugger

Sending Data to and from Functions

Returning a value from a function

Sending arguments to a function

Using Arrays to Simplify Data

Building the arrays

Stepping through the books array

Using the for . . . in loop to access array elements

Chapter 4: Random Thoughts: Building a Simple Game

Creating Random Numbers

Seriously, math can be fun

Making the HTML form

Writing the roll() function

Building the Number Guesser

Designing the program

Building the HTML for the game

Writing the CSS for the number guesser

Thinking through the game’s data

Setting up the initialization routine

Responding to the Button

Chapter 5: Introducing simpleGame.js

Using a Game Engine

Essential game engine features

Gaming on the web

Building an Animation with simpleGame.js

Building your page

Initializing your game

Updating the animation

Starting from a template

Considering Objects

Making instance pudding

Adding methods to the madness

Bringing Your Game

Checking the keyboard

Moving the sprite

Baby, you can drive my car

Chapter 6: Creating Game Elements

Building Your Own Sprite Objects

Making a stock sprite object

Building your own sprite

Using your new critter

Adding a property to your critter

Adding methods to classes

Sound Programming Principles

Game Programming’s Greatest Hits!

Setting up bounding rectangle collisions

Distance-based collisions

It’s All About Timing . . .

Chapter 7: Getting to a Game

Building a Real Game

Planning Your Game

Programming On the Fly

There seems to be a bug in this program

Fly, fly! fly!

Clearly, We Need an Amphibian

Making a frog

Adding a background

Managing updates

Combining the Frog and the Fly

Building a library of reusable objects

When Sprites Collide

Collisions apply to the frog and the fly

Resetting the fly — on the fly

Working with Multiple Flies

Adding the Final Touches

Adding the timer

Resetting the game

Chapter 8: Motion and Animation

Physics — Even More Fun Than You Remember

Newton without all the figs

Phuzzy physics

Lost in Space

Becoming a space cadet

Building the space simulation

Don’t Be a Drag — Adding Drag Effects

Drag racing

Implementing drag

Do You Catch My Drift?

Burning virtual rubber

Adding drift to your sprites

Recognizing the Gravity of the Situation

Adding rockets to your ride

Use the force (vector), Luke

Houston, We’ve Achieved Orbit

Round and round she goes . . .

Decoding the alphabet soup

This isn’t rocket science

Writing the orbit code

Does This Car Come with a Missile Launcher?

Projectiles in a nutshell

It’s time to launch the missiles

Building a Multi-State Animation

Chapter 9: Going Mobile

Using HTML5 as a Mobile Language

Don’t you need a special language?

HTML5 is a great compromise

So what else do you need?

Putting Your Game on a Server

Using a control panel

Uploading a page with a control panel

Using an FTP client

Making Your Game App-Ready

Managing the screen size

Making your game look like an app

Removing the Safari toolbar

Storing your game offline

Managing Alternate Input

Adding buttons

Responding to the mouse

Reading the Virtual Joystick

Controlling an object with the virtual joystick

Driving with joy(sticks)

Using virtual arrow keys

Tilting at windmills with the accelerometer

Reading the tilt

Calibrating the accelerometer

Chapter 10: Documenting simpleGame

Overview of SimpleGame

The Scene Object

Primary properties of the Scene object

Important methods of the Scene class

The Sprite Class

Main properties of the sprite

Appearance methods of the Sprite

Movement methods of the sprite

Boundary methods of the sprite

Collision methods of the sprite

Animation methods of the sprite

Utility Classes

The Sound object

The Timer object

The virtual joystick

The virtual accelerometer

The game button

Keyboard array

Making the Game Engine Your Own

Chapter 11: Ten Great Game Asset Resources

Dia Diagramming Tool

GIMP — A Powerful Image Editor

Ari’s SpriteLib

Reiner’s Tilesets

OpenGameArt

Blender

Audacity — Useful for Sound Effects

Freesound.org

SoundJay.com

BFXR Incredible Eight-Bit Sound Effects

InkScape

Chapter 12: Ten Concepts Behind simpleGame

Using the Canvas Tag

Looking at a canvas

Basic canvas drawing

Creating an Animation Loop

Angles in the Outfield

Transformations in Canvas

Coordinates inside coordinates . . .

Transforming an image

Vector Projection

Examining the problem

Building a triangle

Would you like sides with that?

Solving for dx and dy

Converting components back to vectors

Using the Sound Object

Reading the Keyboard

Managing basic keyboard input

Responding to multiple key presses

Managing the Touch Interface

Handling touch data and events

Collision Detection

Enabling bounding-box collisions

Calculating the distance between sprites

Boundary Checking

Chapter 13: Ten Game Starters

Lunar Lander

The eagle has landed

Producing a text console

Enhancing the game

Mail Pilot

Building an “endless” background

Improving the top-down racer

The Marble-Rolling Game

Managing dual input

Building an array of obstacles

Improving the marble game

Whack-a-Mole

Building a mole in a hole game

Other features of the mole game

Improving the mole game

Jump and Run on Platforms

Jumping and landing

Coming in for a landing

Making draggable blocks

Improving the platform game

Pong — the Granddaddy of Them All

Building the player paddle

Adding artificial stupidity

Building a ball to bounce off boundaries

Putting some spin on the ball

Improving the Pong game

I’m a Fighter, Not a Lover — RPGs

Building the base Character class

One does not simply build an orc . . .

We need a hero

Improving the role-playing game

Tanks — and You’re Welcome!

Tanks, turrets, and shells

Building a bullet

Improving the tank game

Miles and Miles of Tiles and Tiles

Creating a Tile object

Building a map from tiles

Updating the tiles

Loading a tile map

Improving the tile world

Tic-Tac-Toe Is the Way to Go

Creating the board

Setting up the visual layout

Checking for a winning combination

Adding an AI

Improving the tic-tac-toe game

Cheat Sheet