HTML5 Canvas [269]
What’s Next
8. Canvas Game Essentials
Why Games in HTML5?
Canvas Compared to Flash
What Does Canvas Offer?
Our Basic Game HTML5 File
Our Game’s Design
Game Graphics: Drawing with Paths
Needed Assets
Using Paths to Draw the Game’s Main Character
The static player ship (frame 1)
The ship with thrust engaged (frame 2)
Animating on the Canvas
Game Timer Loop
The Player Ship State Changes
Applying Transformations to Game Graphics
The Canvas Stack
Game Graphic Transformations
Rotating the Player Ship from the Center
Alpha Fading the Player Ship
Using the context.globalAlpha attribute
Game Object Physics and Animation
How Our Player Ship Will Move
The difference between facing and moving
Thrusting in the rotated direction
Redrawing the player ship to start at angle 0
Controlling the Player Ship with the Keyboard
The array to hold our key presses
The key events
Evaluating key presses
Giving the Player Ship a Maximum Velocity
A Basic Game Framework
The Game State Machine
The Update/Render (Repeat) Cycle
The FrameRateCounter Object Prototype
Putting It All Together
Geo Blaster Game Structure
Game application states
Game application state functions
Game application functions
Geo Blaster Global Game Variables
The player Object
Geo Blaster Game Algorithms
Arrays of Logical Display Objects
Rocks
Saucers
Missiles
Explosions and particles
Level Knobs
Level and Game End
Level end
Game end
Awarding the Player Extra Ships
Applying Collision Detection
The Geo Blaster Basic Full Source
Rock Object Prototype
What’s Next
9. Combining Bitmaps and Sound
Geo Blaster Extended
Geo Blaster Tile Sheet
Refresher: Calculating the tile source location
Other new player attributes
The new boundingBoxCollide() algorithm
Rendering the Other Game Objects
Rendering the saucers
Rendering the rocks
Rendering the missiles
Rendering the particles
Adding Sound
The sounds for our game
Adding sound instances and management variables to the game
Loading in sounds and tile sheet assets
Playing sounds
Pooling Object Instances
Object pooling in Geo Blaster Extended
Adding pooling variables to our game
Adding in a Step Timer
How the step timer works
Geo Blaster Extended Full Source
Creating a Dynamic Tile Sheet at Runtime
A Simple Tile-Based Game
Micro Tank Maze Description
Game progression
Game strategy
The Tile Sheet for Our Game
The Playfield
Creating the board
The Player
The Enemy
The Goal
The Explosions
Turn-Based Game Flow and the State Machine
GAME_STATE_INIT
GAME_STATE_WAIT_FOR_LOAD
GAME_STATE_TITLE
GAME_STATE_NEW_GAME
GAME_STATE_WAIT_FOR_PLAYER_MOVE
GAME_STATE_ANIMATE_PLAYER
GAME_STATE_EVALUATE_PLAYER_MOVE
GAME_STATE_ENEMY_MOVE
GAME_STATE_ANIMATE_ENEMY
GAME_STATE_EVALUATE_ENEMY_MOVE
GAME_STATE_EVALUATE_OUTCOME
GAME_STATE_ANIMATE_EXPLODE
GAME_STATE_CHECK_FOR_GAME_OVER
GAME_STATE_PLAYER_WIN
GAME_STATE_PLAYER_LOSE
Simple Tile Movement Logic Overview
Rendering Logic Overview
Simple Homegrown AI Overview
Micro Tank Maze Complete Game Code
What’s Next
10. Mobilizing Games with PhoneGap
Going Mobile!
Introducing PhoneGap
The Application
The Code
Examining the Code for BSBingo.html
The TextButton.js file
The initLists() function
The initButtons() function
The initSounds() function
The chooseButtonsForCard() function
The drawScreen() function
The onMouseClick() function
The onMouseMove() function
The Application Code
Creating the iOS Application with PhoneGap
Installing Xcode
Installing PhoneGap
Creating the BS Bingo PhoneGap Project