Index
Numerics
2.5D, 84
2D, billboarding, 140
3D
Camera object (Three.js), 128-129
lighting, 120
materials, 120
models,
loading with Three.js, 129-131
sourcing, 143
normal, 121
picking, 142
shading
flat shading, 121
Gouraud shading, 121
Lambertian shading, 121
Phong shading, 122
simulating in 2D space, 84
parallaxing, 85-87
perspective projection, 84
snowman scene
setting up in Three.js, 123-127
viewing in Three.js, 128-129
textures, 134-135
vertex, 118-119
3D Studio MAX, 129
37signals, 153
A
accessing drawing APIs with GWT, 151-152
actions performed in game loop, 53
adding functions to Raphael, 113
Pong, 68
Minimax algorithm, 69-70
tic-tac-toe, 68
AJAX (Asynchronous JavaScript and XML), 2, 43
aliases, CoffeeScript, 156
ambient lighting, 120
Android, 180
application layers, 182
applications, packaging
with Appcelerator Titanium, 193-194
with PhoneGap, 195-198
audio element support, 192
Angry Birds, 64
animating
cards, 107-110
models, 142-143
objects along paths, 113
animation
time-based, 140
Trident.js, 79
easing, 81-82
keyframes, 81
spritesheets, 83
timelines, creating, 80
z-ordering, 86
APIs
Canvas, 15-16
Components API, 58
Core API, 57-58
drawing APIs for GWT, accessing, 151-152
for Appcelerator Titanium, 191
for PhoneGap, 189
Geolocation API, 8-10
IndexedDB API, 7
JFugue, 89
networking, 58
node-cache, 168
storage APIs, Lawnchair, 183-185
SVG, 16
WebGL, 16
WebSQL API, 6-7
Appcelerator Titanium
Android applications, packaging, 193-194
APIs, 191
Application Cache, 5-6
applications, running offline, 201
manifest file, 201-203
application frameworks
Appcelerator Titanium, 191
Android applications, packaging, 193-194
APIs, 191
PhoneGap, 188
Android applications, packaging, 195-198
APIs, 189
documentation, 190
Event API, 189
FileReader object, 190
FileUpload object, 190
FileWriter object, 190
applications
attributes, configuring, 210-211
deploying games as, 183
extensions, 206
hosted versus packaged, 212
packaging for TapJS, 215
publishing
on Chrome Web Store, 206-208
with Kongregate, 217
simplifying with ExpressJS, 163
application structrue, 165
CoffeeKup, installing, 166
CoffeeKup, layout files, 167-168
CoffeeKup, registering, 167
session management, 165
URL routing, 163-165
TapJS, creating, 213
uploading to Chrome Web Store, 208-210
applying textures to spheres, 135
arithmetic operators, JavaScript, 32
arrays
sets, 54
sorting, 55
Ars Technica, 153
aspect ratio, 128
Asteroids, 66-67
asynchronous connections, WebSQL API, 7
attributes of applications, configuring, 210-211
audio
Copy Me game tones, creating, 88-89
multiple sounds
playing at once, 90
playing sequentially, 91
audio element support (Android)192
audio tag (HTML5), controlling media, 13-14
B
beginPath() function, 72
benchmarking
frame rate, checking with Stats.js, 144
with WebGL Inspector, 145
Berners-Lee, Tim, 1
Bezier curves, 112
Bezier, Pierre, 111
billboarding, 140
bitmap images, creating with SVG files, 105
Blender Conference, 130
browser tools
Chromer Developer tools, 24-25
Firebug, 26
Safari Developer tools, 26
browsers
Geolocation API support, verifying, 8
Google Gears, 3
building Pong with SGF
AI, 68
game physics, 64-66
game pieces, drawing, 61-63
host page, 59-60
main.js file, 60-61
C
CACHE section (Application Cache manifest file), 201
caching data, 168
Camera object (Three.js), 128-129
comparing with SVG, 95-96
displaying in Jo, 188
drawing state, saving and restoring, 77
images, drawing, 79
paths, drawing, 72
sprites, drawing, 73-74
transformations, 75-77
capacitive screens, gestures, 181
Cappuccino, 158
cards
animating, 107-110
drawing, 105
flipping, 108
shuffling, 107
Chrome (Google), extensions, 25
Chrome Developer tools, 24-25
Chrome Frame, 3
Chrome Web Store
applications, publishing
hosted application, deploying, 207-208
metadata, describing, 206
packaged application, deploying, 208
testing applications, 208
applications, uploading, 208-210
classes
CoffeeScript, 157-158
JavaScript, inheritance, 38-40
client-side scripting
JQTouch, 187
JQuery, 185
JQueryMobile, 185-186
Zepto.js, 187
client/server communication
NowJS, 171
Web Sockets, Socket.IO, 169-170
clipping planes, 128
code, minification, 199-201
CoffeeKup
installing, 166
layout files, 167-168
registering with ExpressJS, 167
CoffeeScript, 45
aliases, 156
classes, 157-158
conditional statements, 156
files, compiling, 153
for loops, 156-157
functions, 154
installing, 153
semicolons, use of, 154
splats, 155
var keyword, 154
collision detection (Pong), 65-66
color, specifying in Raphael, 103-104
color picking, 142
comments, minification, 199-201
Comparator (JavaScript), 55-56
comparing
CoffeeScript and JavaScript, 154
microdata and microformats, 17
SVG and Canvas, 95-96
XML and JSON, 44
comparison operators (JavaScript), 34-35
compilers, Google Closure Compiler, 199-201
compiling CoffeeScript files, 153
Components API, 58
conditional loops (JavaScript)
for loops, 37
if-else statement, 35
switch-case statement, 36
while loops, 36
conditional statements, CoffeeScript, 156
configuring application attributes, 210-211
console debugging, 172-173
controlling
media in HTML, 13-14
program flow with loops (JavaScript)
for loops, 37
while loops, 36
Conway’s Game of Life, 136
Copy Me, 87
game text, drawing, 91
game text, styling, 92
game tones, creating, 88-91
objects, drawing, 87-88
Core API, 57-58
creating
Copy Me game tones, 88-91
game rooms with NowJS groups, 174-175
notifications, 11-12
particle systems in Three.js, 140-141
physics system with JigLibJS, 139-140
TapJS applications, 213
timelines in Trident.js, 80
vertex in Three.js, 118-119
Web Sockets, 4
cross-platform frameworks, Jo, 187-188
cross-site scripting, 44
CSS (Cascading Style Sheets), 92, 315
cube mapping, 135
Cufon, 100-102
curveto instruction (Raphael), 111
customizing fonts, 100-102
D
data URIs, 78
Database API
IndexedDB API, 7
WebSQL API, 6-7
debugging Node applications, 172-173
deciding genre for game, 52-53
deploying
games
as applications, 183
as website, 181
hosted applications, 207-208
packaged applications, 208
describing metadata, 206
design document, writing, 51-52
desktop applications, JavaScript, 46-47
development tools
Blender, 29
Chrome Developer tools, 24-25
Eclipse IDE, installing, 20-21
Firebug, 26
GWT, installing, 22
Inkscape, 27
Java, installing, 19-20
ProcessingJS, 27
Raphael, 29
Safari Developer tools, 26
SVG-edit, 27
directional lighting, 120
displaying canvas in Jo, 188
documentation, PhoneGap, 190
cards, 105-110
Copy Me game objects, 87-88, 91
images on Canvas, 79
Pong game pieces, 61-63
drawing APIs
Canvas, 15-16
for GWT, 151-152
SVG, 16
WebGL, 16
drawing state (Canvas), saving and restoring, 77
Dynamic DNS services, 204
E
easing, 81-82
Eclipse IDE, installing, 20-21
equals method, 54
Event API (PhoneGap), 189
events (JQuery), 43
exporting paths from SVG file, 112
ExpressJS, 163
application structure, 165
sessions, managing, 165
URL routing, 163-165
extending Raphael with plug-ins, 113-114
F
Facebook integration, TapJS, 214-217
FALLBACK section (Application Cache manifest file), 202
FileReader object (PhoneGap), 190
files (CoffeeScript), compiling, 153
FileUpload object (PhoneGap), 190
FileWriter object (PhoneGap), 190
filters, SVG, 113
Firebug, 26
first-class objects, 33-34
flat shading, 121
flipping cards, 108
fonts, Cufon, 100-102
for loops
CoffeeScript, 156-157
JavaScript, 37
format, data URIs, 78
forward kinematics, 142
FOV (field of view), 128
fragment shaders, 121
frame rate, checking with Stats.js, 144
frames per second versus time-based animation, 140
functions
adding to Raphael, 113
beginPath(), 72
CoffeeScript, 154
node-cache API, 168
requestAnimationFrame, 123
updateDynamicsWorld, 139
G
game assets, loading in Raphael, 104-105
game loop, actions performed, 53
game physics
rigid body dynamics, 137-138
soft-body dynamics, 138
game pieces, drawing (Pong), 61-63
game play, managing for multiplayer games, 175-176
game rooms
creating with NowJS groups, 174-175
moving between, 175
game server lobby, creating, 173-174
genre of game, deciding on, 52-53
geometry shaders, 121
gestures, 181
JQTouch support, 187
JQueryMobile support, 186
Zepto.js support, 187
GLSL (OpenGL Shader Language), 131-133
GLUEscript, 46
Google App Engine, 23
Google Chrome
extensions, 25
V8, 161
Google Chrome Frame, 3
Google Closure Compiler, minification, 199-201
Google Gears, 3
Google plugin for Eclipse, installing, 20-21
Google SketchUp, 143
Gouraud shading, 121
gradients, 103
Grouchnikov, Kirill, 79
GWT (Google Web Toolkit), 45, 147
drawing APIs, 151-152
JSNI, 149
Pyjamas, 158
RaphaëIGWT, 150
widgets, RootPanel, 148-149
installing, 22
gwt-html, 5-media module (GWT), 151
H
host page, Pong, 59-60
hosted applications
deploying, 207-208
versus packaged applications, 212
hosted Node.js services, Nodester, 204-205
hosting your own server, 203-204
HTML host page, Pong, 59-60
HTML, 51
Application Cache, 5-6
applications, running offline, 201
manifest file, 201-203
applications, publishing to desktop, 217-218
canvas tag, 71
drawing state, saving and restoring, 77
paths, drawing, 72
sprites, drawing, 73-74
transformations, 75-77
data URIs, 78
drawing APIs
Canvas, 15-16
SVG, 16
WebGL, 16
Geolocation API, 8-10
gwt-html, 5-media module (GWT), 151
IndexedDB API, 7
media elements, 13-14
microdata, 17
spritesheets, 78
unsupported media elements, handling
listing multiple sources, 14-15
with Modernizr, 15
Web Storage, 7-8
Web Workers, 4-5
WebSockets, 4
WebSQL API, 6-7
HTML5 tools
Inkscape, 27
ProcessingJS, 27
Raphael, 29
SVG-edit, 27
I
if-else statement (JavaScript), 35
images
bitmap, creating with SVG files, 105
drawing on Canvas, 79
serving, 78
IndexedDB API, 7
inertia, Newton’s first law, 63
inheritance, 38
CoffeeScript, 158
Prototype library, 39-40
injection attacks, cross-site scripting, 44
installing
CoffeeKup, 166
CoffeeScript, 153
Eclipse IDE, 20-21
Google plugin for Eclipse, 20-21
GWT, 22
Java, 19-20
n script file, 162
node-inspector, 172
interacting with notifications, 12
inverse kinematics, 142
iOS, 179
is-a relationships (JavaScript), inheritance, 38
J
Java, installing, 19-20
JavaScript, 1
AJAX, 2
and CoffeeScript, comparing, 154
arithmetic operators, 32
as intermediary language, 45
basic types, 31
Comparator, 55-56
comparison operators, 34-35
conditional loops
for loops, 37
if-else statement, 35
switch-case statement, 36
while loops, 36
functions, 32-33
first-class objects, 33-34
setInterval, 38
setTimeout, 38
inheritance, 38-40
JQuery
AJAX, 43-44
events, 43
ready function, 41
selectors, 42
JSON, 44-45
linked lists, 56-57
mobile platforms, 45
modules, 48
on the desktop, 46-47
server-side, 48
set class, 54
Jetty, 98
JFugue, 89
JigLibJS
physics system, creating, 139-140
setting up, 138
Jo, 187-188
JQTouch, 187
AJAX, 43
cross-site scripting, 44
events, 43
ready function, 41
selectors, 42
JQueryMobile, 185-186
JSNI (JavaScript Native Interface), 149
JSON, 44-45
JSONP (JSON with padding), 45
JVM (Java Virtual Machine), 48
K
key/value store databases, 183
KHTML, 217
Knuth, Donald, 107
Kongregate, publishing games, 217
L
Lambertian shading, 121
launching games
as applications, 183
as website, 181
Lawnchair, 183
records
removing, 185
retrieving, 184
store, creating, 184
layout files, CoffeeKup, 167-168
libraries (JavaScript), Prototype, 39-40
lighting, 120-122
linear gradients, 103
lineto instruction (Raphael), 110-111
linked lists, 56-57
listing multiple media sources in HTML, 14-15
LiveScript, 31
loading
3D models with Three.js, 129-131
game assets in Raphael, 104-105
lobby for multiplayer games, creating, 173-174
Local Server module (Google Gears), 3
localStorage object (Web Storage), 7-8
LOD (level of detail), 121
loops
CoffeeScript, for loops, 156-157
JavaScript
for loops, 37
while loops, 36
M
main.js file, Pong, 60-61
MakeHuman, 143
managing
ExpressJS sessions, 165
multiplayer games, game play, 175-176
multiple Node versions, 162
manifest files, Application Cache, 201-203
manifest.json
hosted applications, deploying, 207-208
metadata, describing, 206
packaged applications, deploying, 208
materials, 120
matrices, 75-76
media elements (HTML5), 13
controlling, 13-14
unsupported, handling, 5
listing multiple sources, 14-15
with Modernizr, 15
metadata, describing, 206
methods, equals, 54
microdata, 17
microformats, comparing with microdata, 17
MIDI, creating Copy Me game tones, 88-91
minification, 199-201
Minimax algorithm, 69-70
Android, packaging applications
with Appcelerator Titanium, 193-194
with PhoneGap, 195-198
platform, selecting, 179
Android, 180
iOS, 179
WebOS, 180
Windows Phone 7, 180
mobile JavaScript platforms, 45
models, animating, 142-143
Modernizr, handling unsupported media elements in HTML, 15
modules
Google Gears, 3
JavaScript, 48
momentum, Newton’s second law, 63
morph targets, 142
moveto instruction (Raphael), 110-111
moving between game rooms, 175
multiplayer games
game play, managing, 175-176
game rooms, creating with NowJS groups, 174-175
lobby, creating, 173-174
participants, managing, 175
multiple media sources, listing (HTML5), 14-15
multiple Node versions, managing, 162
multiple sounds
playing at once, 90
playing sequentially, 91
multitouch screens, gestures, 181
N
n script file, installing, 162
Network module (Appcelerator Titanium), 191
NETWORK section (Application Cache manifest file), 201
networking APIs, 58
Newton’s laws, 63
Node applications, debugging, 172-173
Node Package Manager, 162
node-cache project, 168
node-inspector, installing, 172
applications, debugging, 172-173
ExpressJS, 163
application structure, 165
CoffeeKup, 166-168
installing, 166
layout files, 167-168
registering, 167
sessions, managing, 165
URL routing, 163-165
multiple versions, managing, 162
Node Package Manager, 162
require statement, 161-162
Socket.IO, 169-170
nodes, 56-57
Nodester, 204-205
nonlinear timelines, creating, 81-82
normal, 121
NoSQL key/value stores, 183
notifications
creating, 11-12
interacting with, 12
requesting permission to display, 11
NowJS, 171
NowJS groups, creating game rooms, 174-175
NPM modules, managing with Nodester, 205
O
Objective-J, 158
objects, JavaScript, 31
offline access, running applications with Application Cache, 201-203
OpenGL ES, 117
Opera Unite, 23
operating systems, selecting mobile platforms
Android, 179-180
WebOS, 180
Windows Phone 7, 181
operator overloading, 55
ordering transformations, 76-77
orthographic projection, 84
P
packaged applications
deploying, 208
versus hosted applications, 212
packaging applications for TapJS, 215
paper (Raphael)
creating, 98-99
functions, adding, 113
parabolic arc, 64
parallaxing, 85-87
participants, managing in multiplayer games, 175
particle systems, 66
Asteroids, 66-67
creating in Three.js, 140-141
paths
animating objects on, 113
creating with RaphaelGWT, 150
drawing in Canvas, 72
exporting from SVG file, 112
RaphaelJS, 110
permission to display notifications, requesting, 11
persistence
data caching, 168
Nodester, 205
perspective projection, 84
PhoneGap, 188
Android applications, packaging, 195-198
APIs, 189
documentation, 190
FileReader Object, 190
FileUpload Object, 190
FileWriter Object, 190
Phong reflection, 122
Phong shading, 122
physics
Angry Birds, 64
applying to Pong game pieces, 64-66
forward kinematics, 142
Newton’s laws, 63-64
particle systems, 66
Asteroids, 66-67
creating in Three.js, 140-141
rigid-body dynamics, 137-138
soft-body dynamics, 138
physics engines, JigLibJS
physics system, creating, 139-140
setting up, 138
picking, 142
plane, 127
platforms
Android, application layers, 182
cross-platform JavaScript frameworks, Jo, 187-188
deploying games for, 182
for mobile games, selecting, 179
Android, 180
iOS, 179
WebOS, 180
Windows Phone 7, 180
plug-ins (Raphael), extending, 113-114
point lighting, 120
Pong, building with SGF
AI, 68
game physics, 64-66
game pieces, drawing, 61-63
host page, 59-60
main.js file, 60-61
ProcessingJS, 27
program flow, controlling with loops
for loops, 37
while loops, 36
programming shaders, GLSL, 131-133
Prototype library (JavaScript), inheritance, 39-40
publishing applications
on Chrome Web Store
applications, testing, 208
hosted application, deploying, 207-208
metadata, describing, 206
packaged application, deploying, 208
Kongregate, 217
to desktop, 217-218
Pyjamas, 158
Q-R
radial gradients, 103-104
randomizing algorithm, shuffling cards, 107
Raphael, 29
color, specifying, 103-104
functions, adding, 113
game assets, loading, 104-105
paths, animating objects on, 113
plug-ins, 113-114
RaphaelGWT, 150
RaphaelJS
cards
animating, 107-110
drawing, 105
flipping, 108
shuffling, 107
curveto instruction, 111
development environment, setting up, 97
fonts, customizing, 101-102
game text, creating, 99
moveto instruction, 110-111
paper, creating, 98-99
paths, 110
ray casting, 142
ready function (JQuery), 41
records
removing with Lawnchair, 185
retrieving with Lawnchair, 184
registering CoffeeKup with ExpressJS, 167
removing records with Lawnchair, 185
requestAnimationFrame function, 123
requesting permission to display notifications, 11
requests (AJAX), performing in JQuery, 43
require statement (Node.js), 161-162
restoring Canvas drawing state, 77
retrieving
images
with data URIs, 78
with spritesheets, 78
records with Lawnchair, 184
reversing timelines, 81
rigging, 142-143
rigid-body dynamics, 137-138
Roosendaal, Ton, 129
RootPanel widget, 148-149
S
Safari Developer tools, 26
saving Canvas drawing state, 77
scene graphs, 123
scripting languages, JavaScript, 1
selecting
application frameworks
Appcelerator Titanium, 191
PhoneGap, 188-190
game genre, 52-53
mobile platform, 179
Android, 180
iOS, 179
WebOS, 180
Windows Phone 7, 180
selectors (JQuery), 42
semicolons in CoffeeScript, 154
server-side JavaScript, 48
servers, hosting your own, 203-204
serving images, 78
session management, ExpressJS, 165
sessionStorage object (Web Storage), 7-8
set class (JavaScript), 54
setInterval function (JavaScript), 38
sets, 54-55
setTimeout function (JavaScript), 38
setting up JigLibJS, 138
shaders, 121
GLSL, 131-133
variables, 132
shading
flat shading, 121
Gouraud shading, 121
Lambertian shading, 121
Phong shading, 122
ShapeBuilder API, 152
shuffling cards, 107
simplifying applications with ExpressJS, 163
application structure, 165
CoffeeKup
installing, 166
layout files, 167-168
registering, 167
session management, 165
URL routing, 163-165
simulating 3D in 2D space, 84
parallaxing, 85-87
perspective projection, 84
snowman scene, setting up in Three.js, 123-127
Socket.IO, 169-170
soft-body dynamics, 138
sorting arrays and sets, 55
sound, adding with gwt-html5-media module (GWT), 151
sourcing 3D models, 143
specifying color in Raphael, 103-104
speed considerations for SVG, 114
spheres applying textures, 135
SpiderMonkey, 46
splats, 155
sprites, drawing in Canvas, 73-74
starting
applications with Nodester, 205
timelines in Trident.js, 80
Stats.js, checking frame rate, 144
storage APIs, Lawnchair, 183
records
removing, 185
retrieving, 184
store, creating, 184
Storage objects (Web Storage), 7-8
storing structured data
IndexedDB API, 7
WebSQL API, 6-7
structured data, storing
IndexedDB API, 7
WebSQL API, 6-7
styling text for Copy Me game, 92
Suzanne Awards, 130
SVG (Scalable Vector Graphics), 16, 95
Bezier curves, 112
comparing with Canvas, 95-96
files, converting to bitmap images, 105
filters, 113
paths, exporting, 112
speed considerations, 114
SVG-edit, 27
switch-case statement (JavaScript), 36
synchronous connection, WebSQL API, 7
T
tags, canvas, 71
drawing state, saving and restoring, 77
images, drawing, 79
paths, drawing, 72
sprites, drawing, 73-74
transformations, 75-77
TapJS
applications
creating, 213
packaging, 215
testing applications with Chrome, 208
texels, 134
text
Copy Me, game
drawing, 91
styling, 92
creating with RaphaelJS, 99
fonts, Cufon, 100-102
textures, 134
appying to spheres, 135
cube mapping, 135
UV mapping, 134
themes, 206
3D models, loading, 129-131
Camera object, 128-129
lighting, 120
materials, 120
particle systems, creating, 140-141
ray casting, 142
snowman scene
setting up, 123-127
viewing, 128-129
vertex, creating, 118-119
Tic-Tac-Toe game
AI, 68
sprites, drawing on canvas, 73-74
time-based animation versus frames per second, 140
timelines, 83
creating in Trident.js, 80
keyframes, 81
nonlinear, creating, 81-82
reversing, 81
Titanium Appcelerator, 45
transformations, 75-76
drawing state, saving and restoring, 77
ordering, 76-77
JQTouch, 187
JQueryMobile support, 186
Trident.js, 79
easing, 81-82
keyframes, 81
spritesheets, 83
timelines, reversing, 81
timelines, creating, 80
TurboSquid, 143
U
unsupported media elements in HTML5, handling
listing multiple sources, 14-15
with Modernizr, 15
updateDynamicsWorld function, 139
uploading applications to Chrome Web Store, 208-210
URL routing with ExpressJS, 163-165
user input, 53
UV mapping, 134
V
V8, 161
var keyword (CoffeeScript), 154
variables for shaders, 132
vectors, normal, 121
verifying Geolocation API support on browsers, 8
vertex, 118-119
video tag (HTML5), 13-14
viewing snowman scene in Three.js, 128-129
W
web browsers
Geolocation API support, verifying, 8
Google Chrome V8, 161
Google Gears, 3
MIDI files, playing, 89
web notifications
creating, 11-12
interacting with, 12
permission to display, requesting, 11
web server tools, 23
Web Sockets
simplifying with NowJS, 171
Socket.IO, 169-170
Web Storage, 7-8
Web Workers, 4-5
WebGL Inspector, 145
webhosting
hosted applications, deploying, 207-208
hosted Node.js services, Nodester, 204-205
hosting your own server, 203-204
packaged applications, deploying, 208
websites
CSS, 315
launching games as, 181
Nodester, 204
PhoneGap, 190
WebSockets, 4
WebSQL API, 6-7
while loops (JavaScript), 36
widgets (GWT), RootPanel, 148-149
Windows Phone 7, 180
WorkerPool module (Google Gears), 3
writing
design document, 51-52
shaders in GLSL, 132-133
X-Y-Z
XML, comparing with JSON, 44
XMLHttpRequest object, 2
XULJet, 46-47
z-ordering, 85
Zepto.js, 187