Contents
About the Author
About the Technical Reviewer
About the Cover Image Artist
Introduction
Chapter 1: The State of Open Web Games
A brief introduction
Why should you care about open web games?
Easy to get started
Excellent documentation
Large and friendly community
Write once, use anywhere
Uncompiled and open
Everyone has control
Access to the world's biggest audience
What is the current state of open web games?
Game-related browser technologies already exist
2D graphics with HTML5 canvas and SVG
3D graphics with WebGL
Better animation performance with requestAnimationFrame
Music and sound with HTML5 audio and the audio data APIs
Real-time multiplayer gameplay with WebSockets
Store data locally with IndexedDB, Local Storage, and other APIs
Play games offline with the application cache
Immersive gameplay with the FullScreen API
Tame the mouse with the Mouse Lock API
Console-like experience with the Gamepad API
Identify players with services like BrowserID
Create native OS applications with environments like WebRT
With much more on the way
There are plenty of good open web games out there
Bejeweled
Angry Birds
Robots Are People Too
Runfield
TF2 WebGL demo
Distribution and monetization options already exist
Mozilla Labs Apps project
Chrome Web Store
Facebook
iOS App Store
Many more
The not-so-good side to open web games
What does the future hold and what still needs to be done?
Chapter 2: Complexity from Simplicity
Who am I?
Game design background
A to B
Influence and inspiration
Brainstorming phase
Pre-production
Production
Post-production and release
Reception
Rules of simplicity
Why A to B works
Processing.js
How does Processing.js work?
Who should use Processing.js?
What are its strengths and weaknesses?
Is it a good fit for games?
Examples and integration of Processing.js
Basic Processing syntax
Embedding a sketch
In-line processing
Integrating JavaScript
Using audio
Importing and loading images
High-score list with jQuery
Summary
Resources
Chapter 3: How to Make Multi-Platform HTML5 Games from Scratch
Introduction
Three-part code organization
HTML, a content language
Bootstrapping our game
CSS, a descriptive stylesheet language
CSS syntax
Some significant CSS properties
Stylesheet languages above CSS
Making our page transition effects
JavaScript, a high-level dynamic language
Coding the game controller
Coding our Chess Game
Game specification
Game styles
Game logic
Scope and namespacing
The Game class
The Renderer class
The Storage class
Implementing our controller
The result
Mobile frameworks
jQuery and Zepto
PhoneGap
PhoneGap Build
Configuration of our chess game
WebAppBuilder
Makefile for of our chess game
Internationalization
The example
HTML code
JavaScript i18n basic code
Pure DOM vs. canvas–based game
Overview of the Canvas API
Solutions comparison: Canvas
Solutions comparison: Pure DOM
You can mix both
Conclusion
Other resources
Chapter 4: Creating, Saving, and Loading Tracks
Who we are, what we will build, and why
The application and the sense behind it
Why levels are important
Split the big thing into small components
The HTML markup
Adding a little style
The JavaScript structure
The drawing loop
The bricks
Square
Circle
Curve
Triangle
Adding bricks to the grid
Implement rotation
Implement the Clear button
The Store
Saving tracks
Retrieving tracks
Implement the Save button
Create the saved tracks list
Summary
Chapter 5: 3D CSS Tutorial
Introduction
Overview of the elements
Game variables
The container’s 3D properties
Events and game loop timer
Game loop overview
Making new fish
Fish update
Fish render
Making fish
Setting the fish properties
Recycling the fish
Exploding the fish
Particles
Parallax layers
Disabling default touch/mouse behavior
Conclusion
Chapter 6: Particle Systems
Introduction
Math
Vectors
Adding checks
Random values
Components
Particles
Emitters
Forces
Renderer
System
Hello fireworks
Designing the spark
Implementing the main loop
Implementing the emitter
Forces
Life and death
Rendering
Fire
Creating the textures
Loading the textures
Implementing the emitter
Implementing the forces
Implementing the main loop
Rotation
Fading out of existence
Smoke
Creating the textures
Implementing the emitter
Implementing the main loop
Optimizations
Single particles
Typed arrays
requestAnimationFrame
Micro optimizations
Chaining expressions
Rounding
Optimized fireworks
Conclusion
Chapter 7: Beginning WebGL
WebGL Origins
How does WebGL work?
Uses and limitations
Demonstrations
OS, graphics card, and browser support
Testing for WebGL support
Libraries
Matrix libraries
Higher-level APIs
Debugging tools
3D refresher
Coordinate system
Transforms
Composing the scene view
Model to world transform
World to view transform
Projection transform
Viewport
GLSL
Using WebGL
Drawing a simple shape
Setting up a shader program
Animation and depth
User input
Using requestAnimationFrame
Creating movement
Using an index buffer
Loading a complex model
A basic game
Planning
Adding a texture
Drawing our dart
Mouse events
Basic collision detection
Scoring
Summary
Chapter 8: CycleBlob: A WebGL Lightcycle Game
What is WebGL?
Starting with WebGL
Work environment setup
The problem with local disk files
Debugging JavaScript
A better editor
3D models and geometry
Models classification
Static models
Dynamic models
Geometric processing
Movement and positioning
Situating on a grid
Transformation components
Camera positioning
Animation engine
Speed and measurements
Animation timing
Frame rate control
Code structure
Starting up
The tick() function
Data structures
Conclusion
Reference
Chapter 9: A Real-Time Multiplayer Game Using WebSockets
Philosophy of netcode
Designing the bumper cars game
The game logic
The game client, Part 1
The game server
The game client, Part 2
Conclusion
Appendix: Setting up node.js
Windows
UNIX
Chapter 10: Hard-Pressed for a Choice of Technology
Why the choice is so hard to make
Rendering
SVG
What benefits does SVG offer?
What are the drawbacks of SVG?
Canvas
What are the benefits of canvas?
What drawbacks does canvas have?
Choosing a rendering technology
Audio
Connection
Server-Sent Events
What benefits do Server-Sent Events offer?
What are the drawbacks of Server-Sent Events?
WebSocket
What are the benefits of WebSocket?
What are the drawbacks of WebSocket?
Choosing a connection technology
Client databases
Web fonts
Conclusion
Index
