| About the Author |
|
xvii | |
| About the Technical Reviewer |
|
xix | |
| About the Cover Image Artist |
|
xxi | |
| Acknowledgments |
|
xxiii | |
| Introduction |
|
xxv | |
|
Chapter 1 Learning HTML and CSS |
|
|
1 | (58) |
|
|
|
2 | (2) |
|
|
|
2 | (1) |
|
|
|
2 | (1) |
|
Graphic design software (optional) |
|
|
3 | (1) |
|
What kinds of games can I make? |
|
|
4 | (1) |
|
|
|
4 | (13) |
|
|
|
5 | (1) |
|
Structuring HTML documents |
|
|
6 | (1) |
|
|
|
7 | (10) |
|
Make it prettier with CSS |
|
|
17 | (19) |
|
|
|
20 | (6) |
|
|
|
26 | (2) |
|
Borders, padding, height, and width |
|
|
28 | (3) |
|
|
|
31 | (1) |
|
|
|
31 | (5) |
|
Loading background images into HTML elements |
|
|
36 | (14) |
|
Positioning elements with CSS |
|
|
38 | (1) |
|
|
|
39 | (10) |
|
More about block sizes: The box model |
|
|
49 | (1) |
|
|
|
50 | (6) |
|
Separating HTML and CSS code |
|
|
50 | (2) |
|
Organizing code and media |
|
|
52 | (4) |
|
Learning more about HTML and CSS |
|
|
56 | (1) |
|
|
|
57 | (2) |
|
Chapter 2 Learning JavaScript |
|
|
59 | (52) |
|
|
|
59 | (5) |
|
Displaying messages in the console |
|
|
61 | (2) |
|
What should you do if your program doesn't work? |
|
|
63 | (1) |
|
|
|
64 | (24) |
|
|
|
65 | (5) |
|
Working with true or false variables |
|
|
70 | (1) |
|
|
|
70 | (4) |
|
|
|
74 | (4) |
|
|
|
78 | (2) |
|
|
|
80 | (8) |
|
|
|
88 | (17) |
|
Creating new text in an HTML element |
|
|
88 | (2) |
|
Changing CSS with JavaScript |
|
|
90 | (3) |
|
|
|
93 | (5) |
|
|
|
98 | (5) |
|
Entering and displaying text |
|
|
103 | (2) |
|
Organizing your JavaScript code |
|
|
105 | (3) |
|
Linking the JavaScript program to the HTML document |
|
|
106 | (1) |
|
Using the program.js file |
|
|
107 | (1) |
|
A quick guide to debugging code |
|
|
108 | (2) |
|
|
|
110 | (1) |
|
Chapter 3 Your First Games |
|
|
111 | (68) |
|
A basic number-guessing game |
|
|
113 | (15) |
|
|
|
115 | (1) |
|
Using functions to modularize the program |
|
|
115 | (1) |
|
Forcing strings to become numbers |
|
|
116 | (3) |
|
Displaying the game state |
|
|
119 | (3) |
|
|
|
122 | (5) |
|
Modular programming with functions |
|
|
127 | (1) |
|
|
|
128 | (13) |
|
Allowing only numbers to be entered |
|
|
129 | (2) |
|
Using the Enter key to input numbers |
|
|
131 | (1) |
|
Improving the user interface |
|
|
132 | (2) |
|
|
|
134 | (5) |
|
|
|
139 | (2) |
|
Making really nice buttons |
|
|
141 | (8) |
|
|
|
144 | (1) |
|
|
|
145 | (2) |
|
|
|
147 | (1) |
|
Understanding the :hover and :active states |
|
|
147 | (2) |
|
|
|
149 | (8) |
|
Adding a visual display to the number-guessing game |
|
|
149 | (8) |
|
|
|
157 | (20) |
|
|
|
163 | (4) |
|
Figuring out if the alien has been hit |
|
|
167 | (3) |
|
|
|
170 | (1) |
|
|
|
171 | (6) |
|
|
|
177 | (2) |
|
Chapter 4 Creating a Game World |
|
|
179 | (64) |
|
|
|
180 | (5) |
|
Using arrays for storing lots of information |
|
|
185 | (13) |
|
|
|
186 | (2) |
|
Pushing elements into an array |
|
|
188 | (1) |
|
Removing elements from an array |
|
|
189 | (5) |
|
|
|
194 | (1) |
|
|
|
195 | (3) |
|
|
|
198 | (29) |
|
|
|
198 | (2) |
|
|
|
200 | (4) |
|
Finding the player's action |
|
|
204 | (4) |
|
|
|
208 | (3) |
|
Checking game-world boundaries |
|
|
211 | (4) |
|
|
|
215 | (12) |
|
The complete code listing |
|
|
227 | (10) |
|
Creating quests and puzzles |
|
|
235 | (2) |
|
|
|
237 | (4) |
|
|
|
241 | (2) |
|
|
|
243 | (54) |
|
|
|
243 | (12) |
|
Looping through a 2D array |
|
|
246 | (3) |
|
|
|
249 | (6) |
|
Case study: Island Adventure |
|
|
255 | (40) |
|
|
|
256 | (4) |
|
|
|
260 | (3) |
|
|
|
263 | (3) |
|
|
|
266 | (7) |
|
Figuring out where the ship is |
|
|
273 | (1) |
|
|
|
274 | (12) |
|
|
|
286 | (1) |
|
|
|
287 | (8) |
|
|
|
295 | (2) |
|
Chapter 6 Game Objects and Animation |
|
|
297 | (76) |
|
Displaying images with canvas |
|
|
298 | (8) |
|
Using the canvas's drawImage method |
|
|
301 | (5) |
|
|
|
306 | (4) |
|
|
|
306 | (2) |
|
|
|
308 | (1) |
|
Using object properties inside methods |
|
|
309 | (1) |
|
|
|
310 | (4) |
|
Adding new properties and methods |
|
|
311 | (1) |
|
|
|
311 | (3) |
|
|
|
314 | (8) |
|
Displaying the states with canvas |
|
|
315 | (7) |
|
|
|
322 | (7) |
|
|
|
322 | (7) |
|
|
|
329 | (17) |
|
|
|
330 | (2) |
|
|
|
332 | (5) |
|
Using a tilesheet with more than one row |
|
|
337 | (2) |
|
|
|
339 | (2) |
|
Randomly starting animations |
|
|
341 | (5) |
|
|
|
346 | (26) |
|
Making a smashable monster |
|
|
347 | (5) |
|
|
|
352 | (7) |
|
|
|
359 | (2) |
|
|
|
361 | (11) |
|
|
|
372 | (1) |
|
|
|
373 | (70) |
|
|
|
374 | (7) |
|
Creating a basic animated sprite |
|
|
374 | (2) |
|
|
|
376 | (2) |
|
Setting up the canvas and sprite images |
|
|
378 | (1) |
|
Animating and displaying a sprite |
|
|
379 | (2) |
|
|
|
381 | (2) |
|
|
|
383 | (3) |
|
Using individual image files for each sprite |
|
|
386 | (1) |
|
|
|
386 | (3) |
|
|
|
387 | (1) |
|
Making it bigger and smaller |
|
|
387 | (1) |
|
Hiding and showing the sprite |
|
|
388 | (1) |
|
An interactive sprite with rotation |
|
|
389 | (10) |
|
|
|
394 | (2) |
|
|
|
396 | (1) |
|
Using the final render function |
|
|
397 | (2) |
|
|
|
399 | (1) |
|
Moving a sprite with the keyboard |
|
|
399 | (11) |
|
|
|
404 | (1) |
|
Using the keyboard's arrow keys |
|
|
405 | (2) |
|
Figuring out if a key is not being pressed |
|
|
407 | (1) |
|
|
|
408 | (2) |
|
Setting screen boundaries |
|
|
410 | (9) |
|
Blocking movement at the screen edges |
|
|
411 | (7) |
|
|
|
418 | (1) |
|
|
|
419 | (18) |
|
|
|
424 | (5) |
|
|
|
429 | (8) |
|
Moving a sprite with the mouse and touch |
|
|
437 | (5) |
|
|
|
437 | (3) |
|
|
|
440 | (2) |
|
|
|
442 | (1) |
|
Chapter 8 Bumping Into Things |
|
|
443 | (44) |
|
|
|
444 | (7) |
|
The hitTestPoint function |
|
|
446 | (3) |
|
|
|
449 | (2) |
|
|
|
451 | (10) |
|
Detecting collisions between circles |
|
|
452 | (4) |
|
Programming the circle collision code |
|
|
456 | (3) |
|
Preventing the circles from overlapping |
|
|
459 | (2) |
|
|
|
461 | (24) |
|
Detecting collisions between rectangles |
|
|
462 | (6) |
|
Changing a sprite's state |
|
|
468 | (3) |
|
Changing a character's health meter |
|
|
471 | (3) |
|
|
|
474 | (2) |
|
Preventing rectangles from overlapping |
|
|
476 | (3) |
|
Using the blockRectangle function |
|
|
479 | (6) |
|
Using collision functions in your games |
|
|
485 | (1) |
|
|
|
486 | (1) |
|
Chapter 9 Making Video Games |
|
|
487 | (46) |
|
The file and folder structure |
|
|
488 | (2) |
|
|
|
489 | (1) |
|
|
|
489 | (1) |
|
|
|
490 | (9) |
|
|
|
491 | (4) |
|
|
|
495 | (2) |
|
Using a game state manager |
|
|
497 | (2) |
|
|
|
499 | (5) |
|
|
|
504 | (6) |
|
|
|
505 | (1) |
|
|
|
505 | (2) |
|
|
|
507 | (1) |
|
|
|
508 | (2) |
|
|
|
510 | (3) |
|
|
|
513 | (4) |
|
Setting up the game messages |
|
|
514 | (2) |
|
Displaying the score and ending the game |
|
|
516 | (1) |
|
Displaying the game over messages |
|
|
516 | (1) |
|
|
|
517 | (4) |
|
|
|
518 | (2) |
|
|
|
520 | (1) |
|
|
|
521 | (10) |
|
|
|
531 | (2) |
|
|
|
533 | (68) |
|
|
|
534 | (2) |
|
|
|
536 | (10) |
|
Designing the maze with 2D arrays |
|
|
536 | (3) |
|
|
|
539 | (2) |
|
|
|
541 | (4) |
|
Layering the map level arrays |
|
|
545 | (1) |
|
Making bigger sprites and game messages |
|
|
546 | (2) |
|
|
|
548 | (8) |
|
Moving the player character |
|
|
548 | (2) |
|
Collisions with the boxes and the screen boundaries |
|
|
550 | (1) |
|
|
|
551 | (1) |
|
|
|
552 | (3) |
|
|
|
555 | (1) |
|
The complete code for Time Bomb Panic |
|
|
556 | (9) |
|
Scrolling Time Bomb Panic |
|
|
565 | (6) |
|
|
|
566 | (1) |
|
Adding gameWorld and camera objects |
|
|
567 | (1) |
|
|
|
568 | (1) |
|
Preventing the UI sprites from scrolling |
|
|
569 | (1) |
|
Rendering the scrolling game world |
|
|
570 | (1) |
|
|
|
571 | (21) |
|
|
|
572 | (3) |
|
|
|
575 | (4) |
|
Changing the monster's direction |
|
|
579 | (9) |
|
|
|
588 | (3) |
|
Changing the monster's state |
|
|
591 | (1) |
|
|
|
592 | (1) |
|
|
|
592 | (7) |
|
Keep level maps in arrays |
|
|
594 | (1) |
|
Use a LEVEL_COMPLETE state |
|
|
595 | (1) |
|
|
|
596 | (3) |
|
|
|
599 | (1) |
|
|
|
600 | (1) |
|
Chapter 11 Platform Games and Physics |
|
|
601 | (70) |
|
Natural motion using physics |
|
|
602 | (37) |
|
A new spriteObject for physics and platform games |
|
|
603 | (1) |
|
|
|
604 | (9) |
|
|
|
613 | (2) |
|
|
|
615 | (14) |
|
|
|
629 | (2) |
|
|
|
631 | (5) |
|
|
|
636 | (3) |
|
|
|
639 | (31) |
|
|
|
640 | (3) |
|
|
|
643 | (2) |
|
Initializing the game objects and object arrays |
|
|
645 | (1) |
|
|
|
645 | (2) |
|
Creating the user interface |
|
|
647 | (1) |
|
|
|
648 | (1) |
|
|
|
648 | (5) |
|
|
|
653 | (3) |
|
|
|
656 | (1) |
|
Preventing the arrow keys from scrolling the browser window |
|
|
657 | (1) |
|
The complete code listing |
|
|
657 | (13) |
|
|
|
670 | (1) |
|
Chapter 12 Touch and the Mouse |
|
|
671 | (49) |
|
Finding the mouse and touch X and Y positions |
|
|
671 | (5) |
|
|
|
672 | (1) |
|
|
|
673 | (3) |
|
Moving a sprite with easing |
|
|
676 | (4) |
|
|
|
678 | (1) |
|
|
|
679 | (1) |
|
A mouse-based and touch-based platform game |
|
|
680 | (1) |
|
|
|
680 | (1) |
|
|
|
681 | (1) |
|
|
|
681 | (15) |
|
Rotating sprites with canvas |
|
|
682 | (1) |
|
|
|
683 | (2) |
|
|
|
685 | (7) |
|
|
|
692 | (4) |
|
|
|
696 | (7) |
|
|
|
697 | (1) |
|
Making Killer Bee chase the mouse |
|
|
698 | (4) |
|
Using a timer to fire bullets |
|
|
702 | (1) |
|
Putting together the finished game |
|
|
702 | (1) |
|
Using drag and drop for canvas |
|
|
703 | (10) |
|
Selecting draggable sprites |
|
|
704 | (1) |
|
Calculating the mouse's velocity |
|
|
705 | (3) |
|
The drag-and-drop code listing |
|
|
708 | (5) |
|
Combining a touch interface and the mouse in one program |
|
|
713 | (1) |
|
|
|
714 | (6) |
|
What you should know about JavaScript and HTML5 |
|
|
714 | (3) |
|
JavaScript frameworks and APIs |
|
|
717 | (1) |
|
Saving game data and files |
|
|
718 | (1) |
|
|
|
719 | (1) |
|
Games for mobile devices, tablets, and the desktop |
|
|
719 | (1) |
| Summary |
|
720 | (1) |
| Index |
|
721 | |