├── 9781430247166.jpg
├── Code - Published
    ├── chapter01
    │   ├── absolutePositioning
    │   │   └── absolutePositioning.html
    │   ├── backgroundImages
    │   │   ├── backgroundImages.html
    │   │   └── cat.png
    │   ├── class
    │   │   └── class.html
    │   ├── classAndId
    │   │   └── classAndId.html
    │   ├── floatingElements
    │   │   ├── cat.png
    │   │   ├── floatingElements.html
    │   │   ├── hedgehog.png
    │   │   └── tiger.png
    │   ├── floatingElementsFinished
    │   │   ├── cat.png
    │   │   ├── floatingElementsFinished.html
    │   │   ├── hedgehog.png
    │   │   └── tiger.png
    │   ├── id
    │   │   └── id.html
    │   ├── organizingFiles
    │   │   ├── newStyle.css
    │   │   └── simpleDocument.html
    │   ├── projectFolder
    │   │   ├── images
    │   │   │   └── photo.jpg
    │   │   ├── sounds
    │   │   │   └── song.mp3
    │   │   ├── src
    │   │   │   ├── main.html
    │   │   │   └── style.css
    │   │   └── videos
    │   │   │   └── movie.mp4
    │   ├── simpleWebPage
    │   │   ├── ocean.jpg
    │   │   └── simpleWebpage.html
    │   └── styledWebPage
    │   │   ├── ocean.jpg
    │   │   └── styledWebpage.html
    ├── chapter02
    │   ├── 01_displayConsoleOutput.html
    │   ├── 02_numberVariables.html
    │   ├── 03_addingNumbers.html
    │   ├── 04_mathmaticalOperations.html
    │   ├── 05_stringVariables.html
    │   ├── 06_combiningStrings.html
    │   ├── 07_trueAndFalse.html
    │   ├── 08_comparingValues.html
    │   ├── 09_greaterOrLesser.html
    │   ├── 10_comparingStrings.html
    │   ├── 11_compoundIfStatements.html
    │   ├── 12_switchStatement.html
    │   ├── 13_usingAnd.html
    │   ├── 14_usingOr.html
    │   ├── 15_functions.html
    │   ├── 16_functionsWithArguments.html
    │   ├── 17_functionsWithMultipleArguments.html
    │   ├── 18_calculator.html
    │   ├── 19_returnFunctionCalculator.html
    │   ├── 20_returningValues.html
    │   ├── 21_functionExpressions.html
    │   ├── 22_displayHTMLText.html
    │   ├── 23_changeCSS.html
    │   ├── 24_creatingHTMLElements.html
    │   ├── 25_eventListener.html
    │   ├── 26_removeEventListener.html
    │   ├── 27_counting.html
    │   ├── 28_enterKey.html
    │   ├── 29_enteringText.html
    │   └── organizingFiles
    │   │   ├── main.html
    │   │   └── program.js
    ├── chapter03
    │   ├── alienAttack
    │   │   ├── images
    │   │   │   ├── alien.png
    │   │   │   ├── background.png
    │   │   │   ├── cannon.png
    │   │   │   └── missile.png
    │   │   └── src
    │   │   │   └── alienAttack.html
    │   ├── alienAttackFinished
    │   │   ├── fonts
    │   │   │   └── emulogic.ttf
    │   │   ├── images
    │   │   │   ├── alien.png
    │   │   │   ├── background.png
    │   │   │   ├── cannon.png
    │   │   │   ├── explosion.png
    │   │   │   └── missile.png
    │   │   └── src
    │   │   │   ├── alienAttack.css
    │   │   │   ├── alienAttackFinished.html
    │   │   │   └── emulogic.ttf
    │   ├── alienExplosion
    │   │   ├── images
    │   │   │   ├── alien.png
    │   │   │   ├── background.png
    │   │   │   ├── cannon.png
    │   │   │   ├── explosion.png
    │   │   │   └── missile.png
    │   │   └── src
    │   │   │   └── alienExplosion.html
    │   ├── customButton.html
    │   ├── numberGameWithButton.html
    │   ├── numberGameWithGraphics
    │   │   ├── images
    │   │   │   ├── arrow.png
    │   │   │   └── scale.png
    │   │   └── src
    │   │   │   └── numberGameWithGraphics.html
    │   ├── numberGame_1.html
    │   ├── numberGame_2.html
    │   ├── numberGame_3.html
    │   ├── numberGame_4.html
    │   ├── randomNumbers.html
    │   └── usingParseint.html
    ├── chapter04
    │   ├── Forest of Lyrica
    │   │   ├── fonts
    │   │   │   ├── Ginga.ttf
    │   │   │   ├── Merriweather-Bold.ttf
    │   │   │   └── Merriweather.ttf
    │   │   ├── images
    │   │   │   ├── bench.png
    │   │   │   ├── cottage.png
    │   │   │   ├── dragon.png
    │   │   │   ├── gate.png
    │   │   │   ├── glade.png
    │   │   │   ├── keep.png
    │   │   │   ├── paper.png
    │   │   │   ├── path.png
    │   │   │   ├── river.png
    │   │   │   └── well.png
    │   │   └── src
    │   │   │   ├── forestOfLyrica.html
    │   │   │   ├── lyrica.css
    │   │   │   ├── lyrica1.html
    │   │   │   ├── lyrica2.html
    │   │   │   ├── lyrica3.html
    │   │   │   ├── lyrica4.html
    │   │   │   ├── lyrica5.html
    │   │   │   └── lyrica6.html
    │   ├── arrayLoop.html
    │   ├── arraySearch.html
    │   ├── artificialLife.html
    │   ├── basicArray.html
    │   ├── database.html
    │   ├── forLoop.html
    │   ├── usingIndexOf.html
    │   ├── usingPop.html
    │   ├── usingPush.html
    │   └── usingSplice.html
    ├── chapter05
    │   ├── islandAdventure
    │   │   ├── fonts
    │   │   │   └── PiratesWriters.ttf
    │   │   ├── images
    │   │   │   ├── background.png
    │   │   │   ├── home.png
    │   │   │   ├── island.png
    │   │   │   ├── monster.png
    │   │   │   ├── pirate.png
    │   │   │   ├── ship.png
    │   │   │   └── water.png
    │   │   └── src
    │   │   │   ├── islandAdventure1.html
    │   │   │   ├── islandAdventure2.html
    │   │   │   ├── islandAdventure3.html
    │   │   │   ├── islandAdventure4.html
    │   │   │   ├── islandAdventure5.html
    │   │   │   ├── islandAdventure6.html
    │   │   │   └── islandAdventureFinished.html
    │   ├── looping2DArrays.html
    │   ├── loopingThroughObjects.html
    │   ├── twoDimensionalArrays.html
    │   └── visualizing2DArrays.html
    ├── chapter06
    │   ├── 10_stateChangeTimer.html
    │   ├── 11_animationObject.html
    │   ├── 12_tilesheetWithRows.html
    │   ├── 13_animationLoop.html
    │   ├── 14_randomAnimation.html
    │   ├── 1_displayingWithCanvas.html
    │   ├── 2_robotObject.html
    │   ├── 3_loopingThroughObjects.html
    │   ├── 4_changingStates.html
    │   ├── 5_renderingStates.html
    │   ├── 6_usingSetTimeout.html
    │   ├── 7_usingSetInterval.html
    │   ├── 8_usingClearInterval.html
    │   ├── 9_timerObject.html
    │   ├── frames.png
    │   ├── monster.png
    │   ├── monsterSmash
    │   │   ├── fonts
    │   │   │   └── Vanilla.ttf
    │   │   ├── images
    │   │   │   └── monsterTileSheet.png
    │   │   └── src
    │   │   │   ├── monsterSmash.css
    │   │   │   ├── monsterSmash1.html
    │   │   │   ├── monsterSmash2.html
    │   │   │   └── monsterSmashFinished.html
    │   ├── monsterStates.png
    │   └── monsterTileSheet.png
    ├── chapter07
    │   ├── 10_screenBoundaries.html
    │   ├── 11_screenWrapping.html
    │   ├── 12_basicScrolling.html
    │   ├── 13_betterScrolling.html
    │   ├── 14_parallaxScrolling.html
    │   ├── 15_mouseControl.html
    │   ├── 16_touchControl.html
    │   ├── 1_basicSprite.html
    │   ├── 2_manySprites.html
    │   ├── 3_manyImageFiles.html
    │   ├── 4_interactiveSprite.html
    │   ├── 5_interactiveSpriteWithRotation.html
    │   ├── 6_interactiveSpriteWithTransparency.html
    │   ├── 7_interactiveSpriteWithShadows.html
    │   ├── 8_interactiveSpriteHTML.html
    │   ├── 9_keyboardControl.html
    │   ├── background.png
    │   ├── basicScrolling_Old.html
    │   ├── betterScrolling_Old.html
    │   ├── cat.png
    │   ├── keyboardControl_KeyArray.html
    │   ├── parallaxScrollingTileSheet.png
    │   ├── phobosTileSheet.png
    │   ├── requestAnimationFramePolyfill.js
    │   ├── tiger.png
    │   └── tileSheetWithBackground.png
    ├── chapter08
    │   ├── 1_pointCollision.html
    │   ├── 2_canvasText.html
    │   ├── 3_circleCollision.html
    │   ├── 4_blockingCircles.html
    │   ├── 5_rectangleCollision.html
    │   ├── 6_changingStates.html
    │   ├── 7_healthMeter.html
    │   ├── 8_updateScore.html
    │   ├── 9_blockingRectangles.html
    │   ├── catAndBox.png
    │   ├── catAndMonster.png
    │   ├── circles.png
    │   ├── collision.js
    │   ├── collisionTileSheet.png
    │   ├── requestAnimationFramePolyfill.js
    │   └── squares.png
    ├── chapter09
    │   └── alienArmada
    │   │   ├── fonts
    │   │       └── emulogic.ttf
    │   │   ├── images
    │   │       └── alienArmada.png
    │   │   ├── sounds
    │   │       ├── explosion.mp3
    │   │       ├── explosion.ogg
    │   │       ├── music.mp3
    │   │       ├── music.ogg
    │   │       ├── shoot.mp3
    │   │       └── shoot.ogg
    │   │   └── src
    │   │       ├── alienArmada.css
    │   │       ├── alienArmada.html
    │   │       ├── alienArmada1.js
    │   │       ├── alienArmada2.js
    │   │       ├── alienArmada3.js
    │   │       ├── alienArmada4.js
    │   │       ├── alienArmada5.js
    │   │       ├── alienArmada6.js
    │   │       ├── alienArmadaFinished.js
    │   │       ├── collision.js
    │   │       ├── objects.js
    │   │       └── requestAnimationFramePolyfill.js
    ├── chapter10
    │   ├── monsterMayhem
    │   │   ├── images
    │   │   │   └── monsterMayhem.png
    │   │   └── src
    │   │   │   ├── collision.js
    │   │   │   ├── monsterMayhem.html
    │   │   │   ├── monsterMayhem.js
    │   │   │   ├── objects.js
    │   │   │   └── requestAnimationFramePolyfill.js
    │   ├── monsterMaze
    │   │   ├── images
    │   │   │   └── monsterMaze.png
    │   │   └── src
    │   │   │   ├── collision.js
    │   │   │   ├── monsterMaze.html
    │   │   │   ├── monsterMaze.js
    │   │   │   ├── objects.js
    │   │   │   └── requestAnimationFramePolyfill.js
    │   ├── movingMonster
    │   │   ├── movingMonster.html
    │   │   ├── movingMonster.png
    │   │   └── requestAnimationFramePolyfill.js
    │   ├── timeBombPanic
    │   │   ├── images
    │   │   │   └── timeBombPanic.png
    │   │   └── src
    │   │   │   ├── collision.js
    │   │   │   ├── objects.js
    │   │   │   ├── requestAnimationFramePolyfill.js
    │   │   │   ├── timeBombPanic.html
    │   │   │   └── timeBombPanic.js
    │   └── timeBombScroll
    │   │   ├── images
    │   │       └── timeBombPanic.png
    │   │   └── src
    │   │       ├── collision.js
    │   │       ├── objects.js
    │   │       ├── requestAnimationFramePolyfill.js
    │   │       ├── timeBombScroll.html
    │   │       └── timeBombScroll.js
    ├── chapter11
    │   ├── 1_acceleration.html
    │   ├── 2_friction.html
    │   ├── 3_bounce.html
    │   ├── 4_rectangleBounce.html
    │   ├── 5_circleBounce.html
    │   ├── 6_gravity.html
    │   ├── 7_jumping.html
    │   ├── 8_platforms.html
    │   ├── cat.png
    │   ├── catAndBox.png
    │   ├── circles.png
    │   ├── collision.js
    │   ├── hedgehogApocalypse
    │   │   ├── images
    │   │   │   └── hedgehogApocalypse.png
    │   │   └── src
    │   │   │   ├── collision.js
    │   │   │   ├── hedgehogAplocalypse.html
    │   │   │   ├── hedgehogApocalypse.js
    │   │   │   ├── objects.js
    │   │   │   └── requestAnimationFramePolyfill.js
    │   └── requestAnimationFramePolyfill.js
    └── chapter12
    │   ├── constructorFunction.html
    │   ├── dragAndDrop
    │       ├── dragAndDrop.png
    │       ├── dragAndDropMouse.html
    │       ├── dragAndDropTouch.html
    │       └── requestAnimationFramePolyfill.js
    │   ├── hedgehogMouse
    │       ├── images
    │       │   └── hedgehogApocalypse.png
    │       └── src
    │       │   ├── collision.js
    │       │   ├── hedgehogAplocalypse.html
    │       │   ├── hedgehogApocalypse.js
    │       │   ├── objects.js
    │       │   └── requestAnimationFramePolyfill.js
    │   ├── images
    │       ├── bee.png
    │       ├── buttonFairy.png
    │       ├── catAndBox.png
    │       └── vehicles.png
    │   ├── keyboard
    │       ├── carKeyboard.html
    │       ├── requestAnimationFramePolyfill.js
    │       ├── rocketKeyboard.html
    │       └── tank.html
    │   ├── killerBeePandemonium
    │       ├── images
    │       │   └── killerBeePandemonium.png
    │       └── src
    │       │   ├── collision.js
    │       │   ├── killerBeeMouse.html
    │       │   ├── killerBeeMouse.js
    │       │   ├── killerBeeTouch.html
    │       │   ├── killerBeeTouch.js
    │       │   ├── objects.js
    │       │   └── requestAnimationFramePolyfill.js
    │   ├── mouse
    │       ├── beeFollowMouse.html
    │       ├── beeRotateAndShootMouse.html
    │       ├── buttonFairyMouse.html
    │       ├── carMouse.html
    │       ├── clickToMove.html
    │       ├── easingMouse.html
    │       ├── followMouse.html
    │       ├── platformsMouse.html
    │       ├── requestAnimationFramePolyfill.js
    │       └── rocketMouse.html
    │   └── touch
    │       ├── beeFollowTouch.html
    │       ├── beeRotateAndShootTouch.html
    │       ├── buttonFairyTouch.html
    │       ├── carTouch.html
    │       ├── easingTouch.html
    │       ├── followTouch.html
    │       ├── platformsTouch.html
    │       ├── requestAnimationFramePolyfill.js
    │       ├── rocketTouch.html
    │       └── tapToMove.html
├── LICENSE.txt
├── README.md
└── contributing.md


/9781430247166.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/9781430247166.jpg


--------------------------------------------------------------------------------
/Code - Published/chapter01/absolutePositioning/absolutePositioning.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Absolute positioning</title>
 3 | 
 4 | <style>
 5 | 
 6 | #stage
 7 | {
 8 |   position: relative;
 9 |   display: block;
10 |   width: 400px;
11 |   height: 300px;
12 |   border: 1px dashed black;
13 | }
14 | 
15 | #square
16 | {
17 |   position: absolute;
18 |   top: 120px;
19 |   left: 200px;
20 |   display: block;
21 |   width: 100px;
22 |   height: 100px;
23 |   background-color: black;
24 | }
25 | 
26 | </style>
27 | 
28 | <div id="stage">
29 |   <div id="square"></div>
30 | </div>


--------------------------------------------------------------------------------
/Code - Published/chapter01/backgroundImages/backgroundImages.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Background images</title>
 3 | 
 4 | <style>
 5 | 
 6 | #cat
 7 | {
 8 | 	width: 100px;
 9 | 	height: 100px;
10 | 	background-image: url("cat.png");
11 | }
12 | 
13 | </style>
14 | 
15 | <div id="cat"></div>


--------------------------------------------------------------------------------
/Code - Published/chapter01/backgroundImages/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/backgroundImages/cat.png


--------------------------------------------------------------------------------
/Code - Published/chapter01/class/class.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using a class</title>
 3 | 
 4 | <style>
 5 | 
 6 | .animal
 7 | {
 8 | 	font-family: Monaco, "Courier New", monospace;
 9 |   font-size: 50px;
10 | }
11 | 
12 | </style>
13 | 
14 | <div class="animal">Cat</div>
15 | <div class="animal">Tiger</div>
16 | <div class="animal">Hedgehog</div>


--------------------------------------------------------------------------------
/Code - Published/chapter01/classAndId/classAndId.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using a class and id together</title>
 3 | 
 4 | <style>
 5 | 
 6 | .animal
 7 | {
 8 | 	font-family: Monaco, "Courier New", monospace;
 9 | 	font-size: 30px;
10 | }
11 | 
12 | #cat
13 | {
14 | 	font-style: italic;
15 | }
16 | 
17 | #tiger
18 | {
19 | 	font-weight: bold;
20 | }
21 | 
22 | #hedgehog
23 | {
24 | 	text-decoration: underline;
25 | }
26 | 
27 | </style>
28 | 
29 | <div class="animal" id="cat">Cat</div>
30 | <div class="animal" id="tiger">Tiger</div>
31 | <div class="animal" id="hedgehog">Hedgehog</div>


--------------------------------------------------------------------------------
/Code - Published/chapter01/floatingElements/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/floatingElements/cat.png


--------------------------------------------------------------------------------
/Code - Published/chapter01/floatingElements/floatingElements.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Floating elements</title>
 3 | <style>
 4 | 
 5 | #stage
 6 | {
 7 |   display: block;
 8 | 	width: 400px;
 9 | 	height: 300px;
10 | 	border: 1px dashed black;
11 | }
12 | 
13 | img
14 | {
15 | 	display: block;
16 | }
17 | 
18 | </style>
19 | 
20 | <div id="stage">
21 |   <img src="cat.png">
22 |   <img src="tiger.png">
23 |   <img src="hedgehog.png">
24 | </div>


--------------------------------------------------------------------------------
/Code - Published/chapter01/floatingElements/hedgehog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/floatingElements/hedgehog.png


--------------------------------------------------------------------------------
/Code - Published/chapter01/floatingElements/tiger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/floatingElements/tiger.png


--------------------------------------------------------------------------------
/Code - Published/chapter01/floatingElementsFinished/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/floatingElementsFinished/cat.png


--------------------------------------------------------------------------------
/Code - Published/chapter01/floatingElementsFinished/floatingElementsFinished.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Floating elements</title>
 3 | 
 4 | <style>
 5 | 
 6 | @font-face 
 7 | {
 8 |   font-family: LondrinaSolid-Regular;
 9 |   src: url("LondrinaSolid-Regular.otf");
10 | }
11 | 
12 | #stage
13 | {
14 |   display: block;
15 | 	width: 400px;
16 | 	height: 300px;
17 | 	border: 1px dashed black;
18 | }
19 | 
20 | h1
21 | {
22 |   clear: left;
23 |   display: block;
24 |   text-align: center;
25 | 	padding-top: 50px;
26 | 	font-family: LondrinaSolid-Regular;
27 | 	font-size: 40px;
28 | }
29 | 
30 | .animal
31 | {
32 | 	display: block;
33 | 	width: 100px;
34 | 	height: 100px;
35 | 	margin-left: 25px;
36 | 	margin-top: 50px;
37 | 	float: left;
38 | }
39 | 
40 | #cat
41 | {
42 |   background-image: url("cat.png");
43 | }
44 | 
45 | #tiger
46 | {
47 |   background-image: url("tiger.png");
48 | }
49 | 
50 | #hedgehog
51 | {
52 |   background-image: url("hedgehog.png");
53 | }
54 | 
55 | </style>
56 | 
57 | <div id="stage">
58 | <div class="animal" id="cat"></div>
59 | <div class="animal" id="tiger"></div>
60 | <div class="animal" id="hedgehog"></div>
61 | <h1>Dangerous Animals!</h1>
62 | </div>


--------------------------------------------------------------------------------
/Code - Published/chapter01/floatingElementsFinished/hedgehog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/floatingElementsFinished/hedgehog.png


--------------------------------------------------------------------------------
/Code - Published/chapter01/floatingElementsFinished/tiger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/floatingElementsFinished/tiger.png


--------------------------------------------------------------------------------
/Code - Published/chapter01/id/id.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using an id</title>
 3 | 
 4 | <style>
 5 | 
 6 | #stage
 7 | {
 8 |   width: 400px;
 9 | 	height: 300px;
10 | 	border: 1px dashed black;
11 | }
12 | 
13 | </style>
14 | 
15 | <div id="stage"></div>


--------------------------------------------------------------------------------
/Code - Published/chapter01/organizingFiles/newStyle.css:
--------------------------------------------------------------------------------
 1 | h1
 2 | {
 3 |   font-size: 40px;
 4 | }
 5 | 
 6 | p
 7 | {
 8 |   font-family: Helvetica, Verdana, Arial, sans-serif; 
 9 | }
10 | 


--------------------------------------------------------------------------------
/Code - Published/chapter01/organizingFiles/simpleDocument.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <title>A simple document</title>
3 | <link rel="stylesheet" href="newStyle.css">
4 | 
5 | <h1>Page Heading</h1>
6 | <p>A bit of text.</p>


--------------------------------------------------------------------------------
/Code - Published/chapter01/projectFolder/images/photo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/projectFolder/images/photo.jpg


--------------------------------------------------------------------------------
/Code - Published/chapter01/projectFolder/sounds/song.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/projectFolder/sounds/song.mp3


--------------------------------------------------------------------------------
/Code - Published/chapter01/projectFolder/src/main.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Organizing project folders</title>
 3 | <link rel="stylesheet" href="style.css">
 4 | 
 5 | <h1>Organizing project folders</h1>
 6 | 
 7 | <h2>Images</h2>
 8 | <img src="../images/photo.jpg">
 9 | 
10 | <h2>Video</h2>
11 | <video controls>
12 | <source src="../videos/movie.mp4">
13 | </video>
14 | 
15 | <h2>Audio</h2>
16 | <audio controls>
17 | <source src="../sounds/song.mp3">
18 | </audio>
19 | 


--------------------------------------------------------------------------------
/Code - Published/chapter01/projectFolder/src/style.css:
--------------------------------------------------------------------------------
 1 | h1, h2
 2 | {
 3 | 	font-family: Monaco, Courier, monospace;
 4 | }
 5 | 
 6 | h1
 7 | {
 8 | 	font-size: 20px;
 9 | }
10 | 
11 | h2
12 | {
13 | 	font-size: 16px;
14 | }


--------------------------------------------------------------------------------
/Code - Published/chapter01/projectFolder/videos/movie.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/projectFolder/videos/movie.mp4


--------------------------------------------------------------------------------
/Code - Published/chapter01/simpleWebPage/ocean.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/simpleWebPage/ocean.jpg


--------------------------------------------------------------------------------
/Code - Published/chapter01/simpleWebPage/simpleWebpage.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | <title>A web page</title>
 6 | </head>
 7 | 
 8 | <body>
 9 | 
10 | <h1>A simple web page</h1>
11 | <p>Everything you see on this page was made using basic HTML tags.</p>
12 | 
13 | <h2>This is a sub-heading</h2>
14 | <p>You use HTML tags to <em>structure information</em>. This is a paragraph of text structured with a p tag.</p>
15 | 
16 | <h2>Making lists</h2>
17 | <p>You can also use tags to <strong>make a list</strong> of things.</p>
18 | <ul>
19 |   <li>First item</li>
20 |   <li>Second item</li>
21 |   <li>Third item</li>
22 | </ul>
23 | 
24 | <h2>Adding links</h2>
25 | <p>Its easy to create hyperlinks to other web pages, or to create a link to generate an email. Here's how:</p>
26 | <ul>
27 |   <li><a href="http://www.w3schools.com" target="_blank">Here's a good resource</a> for learning HTML.</li>
28 |   <li>If you want to say Hi, <a href="mailto:hello@kittykatattack.com?Subject=Hello%20there!">Send me an email</a>.</li>
29 | </ul>
30 | 
31 | <p>Add a photo with an img tag, like this:</p>
32 | <img src="ocean.jpg" alt="A photo of the ocean">
33 | 
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/Code - Published/chapter01/styledWebPage/ocean.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter01/styledWebPage/ocean.jpg


--------------------------------------------------------------------------------
/Code - Published/chapter01/styledWebPage/styledWebpage.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 | <title>A web page</title>
  5 | <style>
  6 | 
  7 | h1
  8 | {
  9 | 	font-family: Georgia, “Times New Roman”, serif;
 10 | 	font-size: 30px;
 11 | 	color: #7924ff;
 12 | 	font-style: italic;
 13 | 	font-weight: bold;
 14 | }
 15 | 
 16 | h2
 17 | {
 18 |   font-family: "Lucida Console", Monaco, monospace;
 19 |   font-size: 20px;
 20 |   color: teal;
 21 | }
 22 | 
 23 | p, li
 24 | {
 25 | 	
 26 | 	font-family: Helvetica, Arial, sans-serif;
 27 | 	font-size: 16px;
 28 | }
 29 | 
 30 | em
 31 | {
 32 | 	text-decoration: underline;	
 33 | 	font-style: normal;
 34 | }
 35 | 
 36 | strong
 37 | {
 38 | 	font-weight: bold;
 39 | 	color: red;
 40 | }
 41 | 
 42 | 
 43 | li 
 44 | {
 45 | 	list-style-type: square;
 46 | }
 47 | 
 48 | a
 49 | {
 50 | 	color: green;
 51 | 	text-decoration: none;
 52 | }
 53 | 
 54 | a:hover
 55 | {
 56 | 	background-color: black;
 57 | 	color: white;
 58 | }
 59 | 
 60 | img
 61 | {
 62 |   width: 250px;
 63 | 	height: auto;
 64 | 	border-style: dashed;
 65 | 	border-width: 2px;
 66 | 	border-color: navy;
 67 | 	padding: 10px;
 68 | }
 69 | 
 70 | </style>
 71 | </head>
 72 | 
 73 | <body>
 74 | <h1>A simple web page</h1>
 75 | <p>Everything you see on this page was made using basic HTML tags.</p>
 76 | 
 77 | <h2>This is a sub-heading</h2>
 78 | <p>You use HTML tags to <em>structure information</em>. This is a paragraph of text structured with a p tag.</p>
 79 | 
 80 | <h2>Making lists</h2>
 81 | <p>You can also use tags to <strong>make a list</strong> of things.</p>
 82 | <ul>
 83 |   <li>First item</li>
 84 |   <li>Second item</li>
 85 |   <li>Third item</li>
 86 | </ul>
 87 | 
 88 | <!-- This is a comment in the document. It won't appear in the web browser-->
 89 | 
 90 | <h2>Adding links</h2>
 91 | <p>Its easy to create hyperlinks to other web pages, or to create a link to generate an email. Here's how:</p>
 92 | <ul>
 93 |   <li><a href="http://www.w3schools.com" target="_blank">Here's a good resource</a> for learning HTML.</li>
 94 |   <li>If you want to say Hi, <a href="mailto:hello@kittykatattack.com?Subject=Hello%20there!">Send me an email</a>.</li>
 95 | </ul>
 96 | 
 97 | <p>Add a photo with an img tag, like this:</p>
 98 | <img src="ocean.jpg" alt="A photo of the ocean">
 99 | 
100 | </body>
101 | </html>


--------------------------------------------------------------------------------
/Code - Published/chapter02/01_displayConsoleOutput.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <title>Display console output</title>
3 | 
4 | <script>
5 | 
6 | console.log("Hello World!");
7 | 
8 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/02_numberVariables.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Number variables</title>
 3 | 
 4 | <script>
 5 | 
 6 | var number = 12;
 7 | //var number = 6 + 4;
 8 | console.log(number);
 9 | 
10 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/03_addingNumbers.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Adding numbers</title>
 3 | 
 4 | <script>
 5 | 
 6 | var firstNumber = 4;
 7 | var secondNumber = 3;
 8 | var total = firstNumber + secondNumber;
 9 | 	
10 | //Display the total
11 | console.log(total);
12 | 
13 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/04_mathmaticalOperations.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <title>Math operations</title>
 3 | 
 4 | <script>
 5 | 
 6 | var firstNumber = 4;
 7 | var secondNumber = 3;
 8 | 	
 9 | //Mathematical operations
10 | var total = firstNumber + secondNumber;
11 | var product = firstNumber * secondNumber;
12 | var quotient = firstNumber / secondNumber;
13 | var difference = firstNumber - secondNumber;
14 | 	
15 | //Display the total
16 | console.log(total);
17 | 	
18 | //Display the product
19 | console.log(product);
20 | 	
21 | //Display the quotient
22 | console.log(quotient);
23 | 	
24 | //Display the difference
25 | console.log(difference);
26 | 
27 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/05_stringVariables.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <title>String variables</title>
3 | 
4 | <script>
5 | 
6 | var message = "This can be any text you want to display";
7 | console.log(message);
8 | 
9 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/06_combiningStrings.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Combining strings</title>
 3 | 
 4 | <script>
 5 | 
 6 | var firstWord = "Hungry";
 7 | var secondWord = "hippo";
 8 | var combinedWords = firstWord + " " + secondWord;
 9 | 	
10 | console.log(combinedWords);
11 | 
12 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/07_trueAndFalse.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>True and false variable</title>
 3 | 
 4 | <script>
 5 | 
 6 | //Initialize the variable to false when the game starts
 7 | var universeEaten = false;
 8 | 	
 9 | //Change it to true later in the game
10 | universeEaten = true;
11 | 	
12 | //Display its value
13 | console.log(universeEaten);
14 | 
15 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/08_comparingValues.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Comparing values</title>
 3 | 
 4 | <script>
 5 | 
 6 | var firstNumber = 10;
 7 | var secondNumber = 12;
 8 | 	
 9 | if(firstNumber === secondNumber)
10 | {
11 | 	console.log("The numbers are the same");
12 | }
13 | else
14 | {
15 | 	console.log("The numbers are different");
16 | }
17 | 	
18 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/09_greaterOrLesser.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Greater or lesser</title>
 3 | 
 4 | <script>
 5 | 
 6 | var firstNumber = 10;
 7 | var secondNumber = 12;
 8 | 	
 9 | if(firstNumber > secondNumber)
10 | {
11 | 	console.log("The first number is greater");
12 | }
13 | else
14 | {
15 | 	console.log("The second number is greater");
16 | }
17 | 	
18 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/10_comparingStrings.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Comparing strings</title>
 3 | 
 4 | <script>
 5 | 
 6 | var firstAnimal = "cat";
 7 | var secondAnimal = "hippo";
 8 | 	
 9 | if(firstAnimal === secondAnimal)
10 | {
11 |   console.log("The animals are the same");
12 | }
13 | else
14 | {
15 | 	console.log("The animals are different");
16 | }
17 | 	
18 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/11_compoundIfStatements.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Compound if statements</title>
 3 | 
 4 | <script>
 5 | 
 6 | var animal = "cat";
 7 | 	
 8 | if(animal === "horse")
 9 | {
10 | 	console.log("It's a horse");
11 | }
12 | else if(animal === "mouse")
13 | {
14 | 	console.log("It's a mouse");
15 | }
16 | else if(animal === "cat")
17 | {
18 | 	console.log("It's a cat");
19 | }
20 | else
21 | {
22 | 	console.log("I don't know what it is");
23 | }
24 | 	
25 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/12_switchStatement.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Compound if statements</title>
 3 | 
 4 | <script>
 5 | 
 6 | var animal = "cat";
 7 | 	
 8 | switch(animal)
 9 | {
10 |   case "horse":
11 | 	  console.log("It's a horse");
12 | 	  break;
13 | 	  
14 | 	case "mouse":
15 | 	  console.log("It's a mouse");
16 | 	  break; 
17 | 	  
18 | 	case "cat":
19 | 	  console.log("It's a cat");
20 | 	  break;     
21 | 	  
22 | 	default:
23 | 	  console.log("I don't know what it is");
24 | }
25 | 	
26 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/13_usingAnd.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Switch statement</title>
 3 | 
 4 | <script>
 5 | 
 6 | var spellIsBroken = true;
 7 | var witchIsDead = true;
 8 | 
 9 | if(spellIsBroken && witchIsDead)
10 | {
11 |   console.log("Game Over!");
12 | }
13 | else
14 | {
15 |   console.log("Keep playing...");
16 | }	
17 | 	
18 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/14_usingOr.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using and</title>
 3 | 
 4 | <script>
 5 | 
 6 | var spellIsBroken = true;	
 7 | var witchIsDead = false;	
 8 | 	
 9 | if(spellIsBroken || witchIsDead)
10 | {
11 |   console.log("Game Over!");
12 | }
13 | else
14 | {
15 |   console.log("Keep playing...");
16 | }
17 | 	
18 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/15_functions.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Functions with arguments</title>
 3 | 
 4 | <script>
 5 | 
 6 | var firstNumber = 4;
 7 | var secondNumber = 3;
 8 | 
 9 | add();
10 | 	
11 | function add()
12 | {
13 | 	var total = firstNumber + secondNumber;
14 | 	console.log(total);
15 | }
16 | 
17 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/16_functionsWithArguments.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Functions with arguments</title>
 3 | 
 4 | <script>
 5 | 
 6 | displayAnything("Hello");
 7 | 	
 8 | function displayAnything(thingToDisplay)
 9 | {
10 | 	console.log(thingToDisplay);
11 | }
12 | 
13 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/17_functionsWithMultipleArguments.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Functions with multiple arguments</title>
 3 | 
 4 | <script>
 5 | 
 6 | add(3, 4);
 7 | 	
 8 | function add(firstNumber, secondNumber)
 9 | {
10 | 	var total = firstNumber + secondNumber;
11 | 	console.log(total);
12 | }
13 | 
14 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/18_calculator.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Calculator</title>
 3 | 
 4 | <script>
 5 | 
 6 | add(12, 6);
 7 | subtract(67, 45);
 8 | multiply(34, 26);
 9 | divide(100, 5);
10 | 
11 | function add(firstNumber, secondNumber)
12 | {
13 |   var total = firstNumber + secondNumber;
14 |   console.log(total); 
15 | }
16 | 	
17 | function subtract(firstNumber, secondNumber)
18 | {
19 |   var difference = firstNumber - secondNumber;
20 |   console.log(difference); 
21 | }
22 | 	
23 | function multiply(firstNumber, secondNumber)
24 | {
25 |   var product = firstNumber * secondNumber;
26 |   console.log(product); 
27 | }
28 | 	
29 | function divide(firstNumber, secondNumber)
30 | {
31 |   var quotient = firstNumber / secondNumber;
32 |   console.log(quotient); 
33 | }
34 | 
35 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/19_returnFunctionCalculator.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Return function calculator</title>
 3 | 
 4 | <script>
 5 | 
 6 | var addition = add(12, 6);
 7 | var subtraction = subtract(67, 45);
 8 | var multiplication = multiply(34, 26);
 9 | var division = divide(100, 5);
10 | 
11 | console.log(addition);
12 | console.log(subtraction);
13 | console.log(multiplication);
14 | console.log(division);
15 | 
16 | function add(firstNumber, secondNumber)
17 | {
18 |   var total = firstNumber + secondNumber;
19 |   return total; 
20 | }
21 | 	
22 | function subtract(firstNumber, secondNumber)
23 | {
24 |   var difference = firstNumber - secondNumber;
25 |   return difference;
26 | }
27 | 	
28 | function multiply(firstNumber, secondNumber)
29 | {
30 |   var product = firstNumber * secondNumber;
31 |   return product;
32 | }
33 | 	
34 | function divide(firstNumber, secondNumber)
35 | {
36 |   var quotient = firstNumber / secondNumber;
37 |   return quotient;
38 | }
39 | 
40 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/20_returningValues.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Returning values</title>
 3 | 
 4 | <script>
 5 | 
 6 | var total = add(4, 4);
 7 | 	
 8 | console.log(total);
 9 | 	
10 | function add(firstNumber, secondNumber)
11 | {
12 |   var sum = firstNumber + secondNumber;
13 |   return sum;
14 | }
15 | 
16 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/21_functionExpressions.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Function expressions</title>
 3 | 
 4 | <script>
 5 | 	
 6 | var add = function(firstNumber, secondNumber)
 7 | {
 8 |   var total = firstNumber + secondNumber;
 9 |   console.log(total);
10 | };
11 | 
12 | add(4, 4);
13 | 
14 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/22_displayHTMLText.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Display HTML text</title>
 3 | 
 4 | <p id="output"></p>
 5 | 
 6 | <script>
 7 | 
 8 | var output = document.querySelector("#output");
 9 | output.innerHTML = "Hello World!";
10 | 
11 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/23_changeCSS.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Change CSS</title>
 3 | 
 4 | <p class="example">Hello World!</p>
 5 | 
 6 | <script>
 7 | 
 8 | var example = document.querySelector(".example");
 9 | example.style.color = "red";
10 | example.style.fontSize = "50px";
11 | example.style.textDecoration = "underline";
12 | 
13 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/24_creatingHTMLElements.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Creating HTML elements</title>
 3 | 
 4 | <body></body>
 5 | 
 6 | <script>
 7 | 
 8 | var p = document.createElement("p");
 9 | document.body.appendChild(p);
10 | p.innerHTML = "Hello World!";
11 | 
12 | //You can create an id for the element like this:
13 | p.setAttribute("id", "example");
14 | 
15 | //Remove an element like this
16 | //p.parentNode.removeChild(p);
17 | 
18 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/25_eventListener.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Event listener</title>
 3 | 
 4 | <button>click me</button>
 5 | 
 6 | <script>
 7 | 
 8 | var button = document.querySelector("button");
 9 | button.addEventListener("click", clickHandler, false);
10 | 
11 | //Change the mouse arrow to a pointing hand
12 | //button.style.cursor = "pointer";
13 | 	
14 | function clickHandler()
15 | {
16 |   console.log("Button clicked");
17 | }
18 | 
19 | //You can combine the event listener and handler in one block of code like this:
20 | /*
21 | button.addEventListener("click", function()
22 | {
23 |   console.log("Button clicked");
24 | }, false);
25 | */
26 | 
27 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/26_removeEventListener.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Remove an event listener</title>
 3 | 
 4 | <button>click me</button>
 5 | 
 6 | <script>
 7 | 
 8 | var button = document.querySelector("button");
 9 | button.addEventListener("click", clickHandler, false);
10 | 
11 | //Change the mouse arrow to pointing hand
12 | //button.style.cursor = "pointer";
13 | 	
14 | function clickHandler()
15 | {
16 |   console.log("Button clicked");
17 |   button.removeEventListener("click", clickHandler, false);
18 |   button.style.display = "none";
19 | }
20 | 	
21 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/27_counting.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Event listener</title>
 3 | 
 4 | <button>click me</button>
 5 | 
 6 | <script>
 7 | 
 8 | //Access the button
 9 | var button = document.querySelector("button");
10 | button.addEventListener("click", clickHandler, false);
11 | 
12 | //Create a score variable and initialize it to zero
13 | var score = 0;
14 | console.log(score);
15 | 
16 | 	
17 | function clickHandler()
18 | {
19 |   score = score + 1;
20 |   console.log(score);
21 | }
22 | 	
23 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/28_enterKey.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Enter key</title>
 3 | 
 4 | <script>
 5 | 
 6 | window.addEventListener("keydown", keydownHandler, false);
 7 | 	
 8 | function keydownHandler(event)
 9 | {
10 |   if(event.keyCode === 13)
11 |   {
12 |     console.log("Enter key pressed");
13 |   }
14 | }
15 | 	
16 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/29_enteringText.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Entering and displaying text</title>
 3 | 
 4 | <input id="input" type="text" placeholder="Enter some text…"> 
 5 | <button>enter</button>
 6 | <p id="output"></p>
 7 | 	
 8 | <script>
 9 | 
10 | var button = document.querySelector("button");
11 | button.addEventListener("click", clickHandler, false);
12 | button.style.cursor = "pointer";
13 | 	
14 | function clickHandler()
15 | {
16 |   var input = document.querySelector("#input");
17 |   var output = document.querySelector("#output");
18 |   output.innerHTML = input.value;
19 | }
20 | 	
21 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/organizingFiles/main.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <title>Organizing files</title>
3 | <script src="program.js"></script>


--------------------------------------------------------------------------------
/Code - Published/chapter02/organizingFiles/program.js:
--------------------------------------------------------------------------------
1 | (function(){
2 | 
3 | window.alert("The JavaScript program has loaded!");
4 | 
5 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttack/images/alien.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttack/images/alien.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttack/images/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttack/images/background.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttack/images/cannon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttack/images/cannon.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttack/images/missile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttack/images/missile.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttackFinished/fonts/emulogic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttackFinished/fonts/emulogic.ttf


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttackFinished/images/alien.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttackFinished/images/alien.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttackFinished/images/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttackFinished/images/background.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttackFinished/images/cannon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttackFinished/images/cannon.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttackFinished/images/explosion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttackFinished/images/explosion.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttackFinished/images/missile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttackFinished/images/missile.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttackFinished/src/alienAttack.css:
--------------------------------------------------------------------------------
  1 | *
  2 | {
  3 |   font-family: emulogic;  
  4 |   padding: 0px;
  5 |   margin: 0px;
  6 | }
  7 | 
  8 | @font-face 
  9 | {
 10 |   font-family: emulogic;
 11 |   src: url("../fonts/emulogic.ttf");
 12 |   
 13 |   /*
 14 |   
 15 |   Note: Firefox requires that the font file
 16 |   be in the same folder as the CSS file.
 17 |   If you are using Firefox, copy the emulogic.ttf font
 18 |   into the src folder and use this src property:
 19 |   
 20 |   src: url("../fonts/emulogic.ttf");
 21 |   
 22 |   */
 23 |   
 24 | }
 25 | 
 26 | 
 27 | h1
 28 | {
 29 |   text-align: center;
 30 |   font-size: 24px;
 31 |   color: #FFBF00;
 32 |   padding-bottom: 20px;
 33 |   
 34 |   text-shadow: 3px 3px lime;
 35 |   
 36 |   -webkit-text-stroke: 1px #000;
 37 |   -moz-text-stroke: 1px #000;
 38 |   text-stroke: 1px #000;
 39 | }
 40 | 
 41 | p
 42 | {
 43 |   text-align: center;
 44 |   font-size: 12px;
 45 |   padding-bottom: 20px;
 46 |   color: #FFBF00;
 47 | }
 48 | 
 49 | input
 50 | {
 51 |   font-size: 15px;
 52 |   background-color: black;
 53 |   color: #FFBF00;
 54 |   width: 75px;
 55 |   padding: 5px 10px;
 56 |   border: 1px solid lime;
 57 | 	-webkit-border-radius: 10px;
 58 | 	-moz-border-radius: 10px;
 59 | 	border-radius: 10px;	
 60 | }
 61 | 
 62 | button
 63 | {
 64 |   font-size: 15px;
 65 |   color: #FFBF00;
 66 |   padding: 5px 10px;
 67 |   border: 2px solid lime;
 68 | 	
 69 |   -webkit-border-radius: 10px;
 70 |   -moz-border-radius: 10px;
 71 |   border-radius: 10px;	
 72 |   background: black;
 73 | 	
 74 |   -webkit-user-select: none;
 75 |   -moz-user-select: none;
 76 |   user-select: none;
 77 | }
 78 | 
 79 | button:hover
 80 | {
 81 |   background-color: #FFBF00;
 82 |   color: #000;
 83 | }
 84 | 
 85 | button:active
 86 | {
 87 |   background-color: #9e7606;
 88 |   color: #000;
 89 | }
 90 | 
 91 | #game
 92 | {
 93 |   margin: 0px auto;
 94 |   width: 330px;
 95 |   height: auto;
 96 |   padding: 15px;
 97 |   border: black;  
 98 |   
 99 |   background:-webkit-linear-gradient(300deg, #588063, #000);
100 | 	background:-moz-linear-gradient(top, #588063, #000);
101 | 	background: linear-gradient(top, #588063, #000);
102 | 	
103 | 	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
104 | 	-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
105 | 	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
106 | 	
107 | 	-webkit-border-radius: 10px;
108 | 	-moz-border-radius: 10px;
109 | 	border-radius: 10px;	
110 | }
111 | 
112 | #stage
113 | {
114 |   margin: 0px auto;
115 |   width: 300px;
116 |   height: 300px;
117 | 	position: relative;
118 | 	
119 |   -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
120 |   -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
121 |   box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
122 | 	
123 | 	margin-bottom: 20px;
124 | 	border: 1px solid lime;
125 | }
126 | 
127 | #background
128 | {
129 |   width: 300px;
130 |   height: 300px;
131 |   position: absolute;
132 |   top: 0px;
133 |   left: 0px;
134 |   background-image: url(../images/background.png);
135 | }
136 | 
137 | #cannon
138 | {
139 |   width: 20px;
140 |   height: 20px;
141 |   position: absolute;
142 |   top: 270px;
143 |   left: 140px;
144 |   background-image: url(../images/cannon.png);
145 | }
146 | 
147 | #alien
148 | {
149 |   width: 20px;
150 |   height: 20px;
151 |   position: absolute;
152 |   top: 20px;
153 |   left: 80px;
154 |   background-image: url(../images/alien.png);
155 | }
156 | 
157 | #missile
158 | {
159 |   width: 10px;
160 |   height: 10px;
161 |   position: absolute;
162 |   top: 240px;
163 |   left: 145px;
164 |   background-image: url(../images/missile.png);
165 | }
166 | 
167 | #explosion
168 | {
169 |   width: 20px;
170 |   height: 20px;
171 |   position: absolute;
172 |   top: 0px;
173 |   left: 0px;
174 |   background-image: url(../images/explosion.png);
175 |   display: none;
176 | }
177 | 


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienAttackFinished/src/emulogic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienAttackFinished/src/emulogic.ttf


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienExplosion/images/alien.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienExplosion/images/alien.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienExplosion/images/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienExplosion/images/background.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienExplosion/images/cannon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienExplosion/images/cannon.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienExplosion/images/explosion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienExplosion/images/explosion.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/alienExplosion/images/missile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/alienExplosion/images/missile.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/customButton.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Custom button</title>
 3 | 
 4 | <style>
 5 | 
 6 | button
 7 | {
 8 | 	font-family: Arial, Helvetica, sans-serif;
 9 | 	font-size: 14px;
10 | 	color: #fff;
11 | 	padding: 10px 20px;
12 | 	border: 2px solid #000;
13 | 	cursor: pointer;
14 | 	
15 | 	-webkit-border-radius: 10px;
16 | 	-moz-border-radius: 10px;
17 | 	border-radius: 10px;	
18 | 	
19 | 	background:-webkit-linear-gradient(top, #a3a3a3, #000);
20 | 	background:-moz-linear-gradient(top, #a3a3a3, #000);
21 | 	background: linear-gradient(top, #a3a3a3, #000);
22 | 	
23 | 	-webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
24 | 	-moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
25 | 	box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
26 | 	
27 | 	-webkit-user-select: none;
28 |   -moz-user-select: none;
29 |   user-select: none;
30 | }
31 | 
32 | button:hover
33 | {
34 |   background: -webkit-linear-gradient(top, #acc7a3, #506651);
35 |   background: -moz-linear-gradient(top, #acc7a3, #506651);
36 |   background: linear-gradient(top, #acc7a3, #506651);
37 | }
38 | 
39 | button:active
40 | {
41 |   background: -webkit-linear-gradient(top, #858565, #c5c9a9);
42 |   background: -moz-linear-gradient(top, #858565, #c5c9a9);
43 |   background: linear-gradient(top, #858565, #c5c9a9);
44 | }
45 | 
46 | </style>
47 | 
48 | <button>guess</button>
49 | 	


--------------------------------------------------------------------------------
/Code - Published/chapter03/numberGameWithGraphics/images/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/numberGameWithGraphics/images/arrow.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/numberGameWithGraphics/images/scale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter03/numberGameWithGraphics/images/scale.png


--------------------------------------------------------------------------------
/Code - Published/chapter03/numberGameWithGraphics/src/numberGameWithGraphics.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <meta charset="utf-8">
  3 | <title>Number guessing game with graphics</title>
  4 | 
  5 | <style type="text/css">
  6 | 
  7 | #stage
  8 | {
  9 |   width: 300px;
 10 |   height: 33px;
 11 | 	position: relative;
 12 | }
 13 | 
 14 | #scale
 15 | {
 16 |   width: 300px;
 17 |   height: 33px;
 18 |   position: absolute;
 19 |   top: 0px;
 20 |   left: 0px;
 21 |   background-image: url(../images/scale.png);
 22 | }
 23 | 
 24 | #arrow
 25 | {
 26 |   width: 17px;
 27 |   height: 22px;
 28 |   position: absolute;
 29 |   top: 0px;
 30 |   left: 0px;
 31 |   background-image: url(../images/arrow.png);
 32 |   
 33 |   /*Transition*/
 34 |   -webkit-transition: left 0.5s ease-out 0s;
 35 |   -moz-transition: left 0.5s ease-out 0s;
 36 |   transition: left 0.5s ease-out 0s;
 37 | }
 38 | 
 39 | </style>
 40 | 
 41 | <div id="stage">
 42 |   <div id="scale"></div>
 43 |   <div id="arrow"></div>
 44 | </div>
 45 | 
 46 | <p id="output">I am thinking of a number between 0 and 99.</p>
 47 | <input id="input" type="text" placeholder="Enter your guess…"> 
 48 | <button>guess</button>
 49 | 	
 50 | <script type="text/javascript">
 51 | 
 52 | //Game variables
 53 | var mysteryNumber = 50;
 54 | var playersGuess = 0;
 55 | var guessesRemaining = 10;
 56 | var guessesMade = 0;
 57 | var gameState = "";
 58 | var gameWon = false;
 59 | 
 60 | //The input and output fields
 61 | var input = document.querySelector("#input");
 62 | var output = document.querySelector("#output");
 63 | 
 64 | //The button
 65 | var button = document.querySelector("button");
 66 | button.style.cursor = "pointer";
 67 | button.addEventListener("click", clickHandler, false);
 68 | 
 69 | //The arrow
 70 | var arrow = document.querySelector("#arrow");
 71 | 
 72 | function render()
 73 | {
 74 |   //Position the arrow
 75 |   //Multipy the players guess by 3 to get the
 76 |   //corrent pixel position on the scale
 77 |   arrow.style.left = playersGuess * 3 + "px";
 78 | }
 79 | 
 80 | function clickHandler()
 81 | {
 82 |   playGame();
 83 | }
 84 | 
 85 | function playGame()
 86 | {  
 87 |   guessesRemaining = guessesRemaining - 1;
 88 |   guessesMade = guessesMade + 1;
 89 |   gameState = " Guess: " + guessesMade + ", Remaining: " + guessesRemaining;
 90 |   
 91 |   playersGuess = parseInt(input.value);
 92 | 
 93 |   if(playersGuess > mysteryNumber)
 94 |   {
 95 |     output.innerHTML = "That's too high." + gameState;
 96 |     
 97 |     //Check for the end of the game
 98 |     if (guessesRemaining < 1)
 99 |     {
100 |       endGame();
101 |     }
102 |   }
103 |   else if(playersGuess < mysteryNumber)
104 |   {
105 |     output.innerHTML = "That's too low." + gameState;
106 |     
107 |     //Check for the end of the game
108 |     if (guessesRemaining < 1)
109 |     {
110 |       endGame();
111 |     }
112 |   }
113 |   else if(playersGuess === mysteryNumber)
114 |   {
115 |     gameWon = true;
116 |     endGame();
117 |   }
118 |   
119 |   //Update the graphic display
120 |   render();
121 | }
122 | 
123 | function endGame()
124 | {
125 |   if (gameWon)
126 |   {
127 |     output.innerHTML
128 |       = "Yes, it's " + mysteryNumber + "!" + "<br>" 
129 |       + "It only took you " + guessesMade + " guesses.";
130 |   }
131 |   else
132 |   {
133 |     output.innerHTML
134 |       = "No more guesses left!" + "<br>" 
135 |       + "The number was: " + mysteryNumber + ".";
136 |   }
137 | }
138 | 
139 | 	
140 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter03/numberGame_1.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Number guessing game</title>
 3 | 
 4 | <p id="output">I am thinking of a number between 0 and 99.</p>
 5 | <input id="input" type="text" placeholder="Enter your guess…"> 
 6 | <button>guess</button>
 7 | 	
 8 | <script type="text/javascript">
 9 | 
10 | //Game variables
11 | var mysteryNumber = 50;
12 | var playersGuess = 0;
13 | 
14 | //The input and output fields
15 | var input = document.querySelector("#input");
16 | var output = document.querySelector("#output");
17 | 
18 | //The button
19 | var button = document.querySelector("button");
20 | button.style.cursor = "pointer";
21 | button.addEventListener("click", clickHandler, false);
22 | 
23 | function clickHandler()
24 | {
25 |   playGame();
26 | }
27 | 
28 | function playGame()
29 | {
30 |   playersGuess = parseInt(input.value);
31 |   
32 |   if(playersGuess > mysteryNumber)
33 |   {
34 |     output.innerHTML = "That's too high.";
35 |   }
36 |   else if(playersGuess < mysteryNumber)
37 |   {
38 |     output.innerHTML = "That's too low.";
39 |   }
40 |   else if(playersGuess === mysteryNumber)
41 |   {
42 |     output.innerHTML = "You got it!";
43 |   }
44 | }
45 | 	
46 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter03/numberGame_2.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Number guessing game</title>
 3 | 
 4 | <p id="output">I am thinking of a number between 0 and 99.</p>
 5 | <input id="input" type="text" placeholder="Enter your guess…"> 
 6 | <button>guess</button>
 7 | 	
 8 | <script>
 9 | 
10 | //Game variables
11 | var mysteryNumber = 50;
12 | var playersGuess = 0;
13 | var guessesRemaining = 10;
14 | var guessesMade = 0;
15 | var gameState = "";
16 | 
17 | //The input and output fields
18 | var input = document.querySelector("#input");
19 | var output = document.querySelector("#output");
20 | 
21 | //The button
22 | var button = document.querySelector("button");
23 | button.style.cursor = "pointer";
24 | button.addEventListener("click", clickHandler, false);
25 | 
26 | function clickHandler()
27 | {
28 |   playGame();
29 | }
30 | 
31 | function playGame()
32 | {
33 |   guessesRemaining = guessesRemaining - 1;
34 |   guessesMade = guessesMade + 1;
35 |   gameState = " Guess: " + guessesMade + ", Remaining: " + guessesRemaining;
36 |   
37 |   playersGuess = parseInt(input.value);
38 | 
39 |   if(playersGuess > mysteryNumber)
40 |   {
41 |     output.innerHTML = "That's too high." + gameState;
42 |   }
43 |   else if(playersGuess < mysteryNumber)
44 |   {
45 |     output.innerHTML = "That's too low." + gameState;
46 |   }
47 |   else if(playersGuess === mysteryNumber)
48 |   {
49 |     output.innerHTML = "You got it!";
50 |   }
51 | }
52 | 	
53 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter03/numberGame_3.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Number guessing game</title>
 3 | 
 4 | <p id="output">I am thinking of a number between 0 and 99.</p>
 5 | <input id="input" type="text" placeholder="Enter your guess…"> 
 6 | <button>guess</button>
 7 | 	
 8 | <script>
 9 | 
10 | //Game variables
11 | var mysteryNumber = 50;
12 | var playersGuess = 0;
13 | var guessesRemaining = 10;
14 | var guessesMade = 0;
15 | var gameState = "";
16 | var gameWon = false;
17 | 
18 | //The input and output fields
19 | var input = document.querySelector("#input");
20 | var output = document.querySelector("#output");
21 | 
22 | //The button
23 | var button = document.querySelector("button");
24 | button.style.cursor = "pointer";
25 | button.addEventListener("click", clickHandler, false);
26 | 
27 | function clickHandler()
28 | {
29 |   playGame();
30 | }
31 | 
32 | function playGame()
33 | {
34 |   guessesRemaining = guessesRemaining - 1;
35 |   guessesMade = guessesMade + 1;
36 |   gameState = " Guess: " + guessesMade + ", Remaining: " + guessesRemaining;
37 |   
38 |   playersGuess = parseInt(input.value);
39 | 
40 |   if(playersGuess > mysteryNumber)
41 |   {
42 |     output.innerHTML = "That's too high." + gameState;
43 |     
44 |     //Check for the end of the game
45 |     if (guessesRemaining < 1)
46 |     {
47 |       endGame();
48 |     }
49 |   }
50 |   else if(playersGuess < mysteryNumber)
51 |   {
52 |     output.innerHTML = "That's too low." + gameState;
53 |     
54 |     //Check for the end of the game
55 |     if (guessesRemaining < 1)
56 |     {
57 |       endGame();
58 |     }
59 |   }
60 |   else if(playersGuess === mysteryNumber)
61 |   {
62 |     gameWon = true;
63 |     endGame();
64 |   }
65 | }
66 | 
67 | function endGame()
68 | {
69 |   if (gameWon)
70 |   {
71 |     output.innerHTML
72 |       = "Yes, it's " + mysteryNumber + "!" + "<br>" 
73 |       + "It only took you " + guessesMade + " guesses.";
74 |   }
75 |   else
76 |   {
77 |     output.innerHTML
78 |       = "No more guesses left!" + "<br>" 
79 |       + "The number was: " + mysteryNumber + ".";
80 |   }
81 | }
82 | 	
83 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter03/numberGame_4.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <meta charset="utf-8">
  3 | <title>Number guessing game</title>
  4 | 
  5 | <p id="output">I am thinking of a number between 0 and 99.</p>
  6 | <input id="input" type="text" placeholder="Enter your guess…" autofocus> 
  7 | <button>guess</button>
  8 | 	
  9 | <script>
 10 | 
 11 | //Game variables
 12 | var mysteryNumber = Math.floor(Math.random() * 100);
 13 | var playersGuess = 0;
 14 | console.log(mysteryNumber);
 15 | 
 16 | var guessesRemaining = 10;
 17 | var guessesMade = 0;
 18 | var gameState = "";
 19 | var gameWon = false;
 20 | 
 21 | //The input and output fields
 22 | var input = document.querySelector("#input");
 23 | var output = document.querySelector("#output");
 24 | 
 25 | //The button
 26 | var button = document.querySelector("button");
 27 | button.addEventListener("click", clickHandler, false);
 28 | button.style.cursor = "pointer";
 29 | 
 30 | //Listen for enter key presses
 31 | window.addEventListener("keydown", keydownHandler, false);
 32 | 
 33 | function keydownHandler(event)
 34 | {
 35 |   if(event.keyCode === 13)
 36 |   {
 37 |     validateInput();
 38 |   }
 39 | }
 40 | 
 41 | function clickHandler()
 42 | {
 43 |   validateInput();
 44 | }
 45 | 
 46 | function validateInput()
 47 | {
 48 |   playersGuess = parseInt(input.value);
 49 |   
 50 |   //If you're worried about infinity, use this:
 51 |   //!isNaN(playersGuess) && isFinite(playersGuess);
 52 |   if(isNaN(playersGuess))
 53 |   {
 54 |     output.innerHTML = "Please enter a number.";
 55 |   }
 56 |   else
 57 |   {
 58 |     playGame();
 59 |   }
 60 | }
 61 | 
 62 | function playGame()
 63 | {
 64 |   guessesRemaining = guessesRemaining - 1;
 65 |   guessesMade = guessesMade + 1;
 66 |   gameState 
 67 |     = " Guess: " + guessesMade 
 68 |     + ", Remaining: " + guessesRemaining;
 69 |   
 70 |   playersGuess = parseInt(input.value);
 71 | 
 72 |   if(playersGuess > mysteryNumber)
 73 |   {
 74 |     output.innerHTML = "That's too high." + gameState;
 75 |     
 76 |     //Check for the end of the game
 77 |     if (guessesRemaining < 1)
 78 |     {
 79 |       endGame();
 80 |     }
 81 |   }
 82 |   else if(playersGuess < mysteryNumber)
 83 |   {
 84 |     output.innerHTML = "That's too low." + gameState;
 85 |     
 86 |     //Check for the end of the game
 87 |     if (guessesRemaining < 1)
 88 |     {
 89 |       endGame();
 90 |     }
 91 |   }
 92 |   else if(playersGuess === mysteryNumber)
 93 |   {
 94 |     gameWon = true;
 95 |     endGame();
 96 |   }
 97 | }
 98 | 
 99 | 
100 | function endGame()
101 | {
102 |   if (gameWon)
103 |   {
104 |     output.innerHTML
105 |       = "Yes, it's " + mysteryNumber + "!" + "<br>" 
106 |       + "It only took you " + guessesMade + " guesses.";
107 |   }
108 |   else
109 |   {
110 |     output.innerHTML
111 |       = "No more guesses left!" + "<br>" 
112 |       + "The number was: " + mysteryNumber + ".";
113 |   }
114 |   
115 |   //Disable the button
116 |   button.removeEventListener("click", clickHandler, false);
117 |   button.disabled = true;
118 |   
119 |   //Disable the enter key
120 |   window.removeEventListener("keydown", keydownHandler, false);
121 |   
122 |   //Disable the input field
123 |   input.disabled = true;
124 | }
125 | 
126 | 	
127 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter03/randomNumbers.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Random numbers</title>
 3 | 
 4 | <script>
 5 | 
 6 | var randomVariable
 7 | 
 8 | //A random number between 0 and 1
 9 | 
10 | randomVariable = Math.random();
11 | console.log(randomVariable);
12 | 
13 | //Randomly find 0 or 1 for a random 50% 
14 | //chance of something happening
15 | 
16 | var rainToday;
17 | 
18 | if(Math.round(Math.random()) === 1)
19 | {
20 | 	rainToday = true;
21 | 	console.log("It's going to rain.");
22 | }
23 | 	else
24 |  {
25 | 	rainToday = false;
26 | 	console.log("No rain today.");
27 | }
28 | 
29 | //A random number between 0 and 99
30 | 
31 | randomVariable = Math.floor(Math.random() * 100);
32 | console.log("0 - 99: " + randomVariable);
33 | 
34 | //A random number between 1 and 100
35 | 
36 | randomVariable = Math.ceil(Math.random() * 100);
37 | console.log("1 - 100: " + randomVariable);
38 | 
39 | //A random number between 1 and 10
40 | 
41 | randomVariable = Math.ceil(Math.random() * 10);
42 | console.log("1 - 10: " + randomVariable);
43 | 
44 | //A random number between 10 and 25
45 | 
46 | randomVariable = Math.floor(Math.random() * 16) + 10;
47 | console.log("10 - 25: " + randomVariable);
48 | 
49 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter03/usingParseint.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Comparing strings</title>
 3 | 
 4 | <script>
 5 | 
 6 | var firstNumber = 12;
 7 | var secondNumber = "12";
 8 | 	
 9 | if(firstNumber === parseInt(secondNumber))
10 | {
11 |   console.log("same");
12 | }
13 | else
14 | {
15 | 	console.log("different");
16 | }
17 | 	
18 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/fonts/Ginga.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/fonts/Ginga.ttf


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/fonts/Merriweather-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/fonts/Merriweather-Bold.ttf


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/fonts/Merriweather.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/fonts/Merriweather.ttf


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/images/bench.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/images/bench.png


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/images/cottage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/images/cottage.png


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/images/dragon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/images/dragon.png


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/images/gate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/images/gate.png


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/images/glade.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/images/glade.png


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/images/keep.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/images/keep.png


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/images/paper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/images/paper.png


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/images/path.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/images/path.png


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/images/river.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/images/river.png


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/images/well.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter04/Forest of Lyrica/images/well.png


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/src/lyrica.css:
--------------------------------------------------------------------------------
  1 | *
  2 | {
  3 |   font-family: Merriweather;
  4 |   color: #000;  
  5 |   font-size: 16px;
  6 |   padding: 0px;
  7 |   margin: 0px;
  8 | }
  9 | 
 10 | @font-face 
 11 | {
 12 |   font-family: Merriweather;
 13 |   src: url("../fonts/Merriweather.ttf");
 14 | }
 15 | 
 16 | @font-face 
 17 | {
 18 |   font-family: Merriweather-Bold;
 19 |   src: url("../fonts/Merriweather-Bold.ttf");
 20 | }
 21 | 
 22 | @font-face 
 23 | {
 24 |   font-family: Ginga;
 25 |   src: url("../fonts/Ginga.ttf");
 26 | }
 27 | 
 28 | h1
 29 | {
 30 |   text-align: center;
 31 |   font-family: Ginga;
 32 |   font-size: 80px;
 33 |   padding-bottom: 10px;
 34 |   padding-top: 80px;
 35 |   font-weight: normal;
 36 | }
 37 | em
 38 | {
 39 |   font-size: 14px;
 40 | }
 41 | p
 42 | {
 43 |   width: 300px;
 44 |   margin: 0px auto;
 45 | }
 46 | 
 47 | img
 48 | {
 49 |   margin: 0px auto;
 50 |   display: block;
 51 |   margin-bottom: 20px;
 52 | }
 53 | 
 54 | input
 55 | {
 56 |   position: absolute;
 57 |   bottom: 30px;
 58 |   left: 135px;
 59 |   width: 160px;
 60 |   padding: 2px 2px 2px 5px;
 61 |   border: 1px solid black;
 62 |   background-color: rgba(255,255,255,0.3);
 63 |   -webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
 64 | 	-moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
 65 | 	box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
 66 | }
 67 | 
 68 | button
 69 | {
 70 |   position: absolute;
 71 |   bottom: 30px;
 72 |   left: 310px;
 73 |   height: 25px;
 74 |   width: 50px;
 75 |   
 76 |   font-family: Merriweather;
 77 | 	font-size: 14px;
 78 | 	color: #000;
 79 | 	border: 1px solid #000;
 80 | 	
 81 | 	-webkit-border-radius: 10px;
 82 | 	-moz-border-radius: 10px;
 83 | 	border-radius: 10px;	
 84 | 	
 85 | 	background:-webkit-linear-gradient(top, rgba(255,255,255,0.6), rgba(0,0,0,0.2));
 86 | 	background:-moz-linear-gradient(top, #a3a3a3, rgba(0,0,0,0.2));
 87 | 	background: linear-gradient(top, #a3a3a3, rgba(0,0,0,0.2));
 88 | 	
 89 | 	-webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
 90 | 	-moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
 91 | 	box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
 92 | 	
 93 | 	-webkit-user-select: none;
 94 |   -moz-user-select: none;
 95 |   user-select: none;
 96 | }
 97 | 
 98 | 
 99 | #stage
100 | {
101 |   width: 500px;
102 |   height: 648px;
103 |   background-color: gray;
104 |   position: relative;
105 |   background-image: url("../images/paper.png");
106 | }
107 | 
108 | 
109 | 


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/src/lyrica1.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>The Forest of Lyrica - 1</title>
 3 | 
 4 | <p id="output"></p>
 5 | 
 6 | <script>
 7 | 
 8 | //Create the map
 9 | var map = [];
10 | 
11 | map[0] = "An old stone keep.";
12 | map[1] = "A deep well.";
13 | map[2] = "A sunny glade.";
14 | map[3] = "A sleeping dragon.";
15 | map[4] = "A narrow pathway.";
16 | map[5] = "An ancient gate.";
17 | map[6] = "The edge of a river.";
18 | map[7] = "A lonely wooden bench.";
19 | map[8] = "An isolated cottage. Faint music comes from inside.";
20 | 
21 | //Set the player's start location
22 | var mapLocation = 4;
23 | 
24 | //The output element
25 | var output = document.querySelector("#output");
26 | 
27 | //Display the player's location
28 | output.innerHTML = map[mapLocation]; 
29 | 
30 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/src/lyrica2.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>The Forest of Lyrica - 2</title>
  3 | 
  4 | <p id="output"></p>
  5 | <input id="input" type="text" placeholder="Enter your action…"> 
  6 | <button>enter</button>
  7 | 
  8 | <script>
  9 | 
 10 | //Create the map
 11 | var map = [];
 12 | 
 13 | map[0] = "An old stone keep.";
 14 | map[1] = "A deep well.";
 15 | map[2] = "A sunny glade.";
 16 | map[3] = "A sleeping dragon.";
 17 | map[4] = "A narrow pathway.";
 18 | map[5] = "An ancient gate.";
 19 | map[6] = "The edge of a river.";
 20 | map[7] = "A lonely wooden bench.";
 21 | map[8] = "An isolated cottage. Faint music comes from inside.";
 22 | 
 23 | //Set the player's start location
 24 | var mapLocation = 4;
 25 | 
 26 | //Initialize the player's input
 27 | var playersInput = "";
 28 | 
 29 | //Initialize the gameMessage
 30 | var gameMessage = "";
 31 | 
 32 | //Create an array of actions the game understands
 33 | //and a variable to store the current action
 34 | var actionsIKnow = ["north", "east", "south", "west"];
 35 | var action = "";
 36 | 
 37 | //The input and output fields
 38 | var output = document.querySelector("#output");
 39 | var input = document.querySelector("#input");
 40 | 
 41 | //The button
 42 | var button = document.querySelector("button");
 43 | button.style.cursor = "pointer";
 44 | button.addEventListener("click", clickHandler, false);
 45 | 
 46 | //Display the player's location
 47 | render();
 48 | 
 49 | function clickHandler()
 50 | {
 51 |   playGame();
 52 | }
 53 | 
 54 | function playGame()
 55 | {
 56 |   //Get the player's input and convert it to lowercase
 57 |   playersInput = input.value;
 58 |   playersInput = playersInput.toLowerCase();
 59 |   
 60 |   //Reset these variables from the previous turn
 61 |   gameMessage = "";
 62 |   action = "";
 63 |   
 64 |   //Figure out the player's action
 65 |   for(i = 0; i < actionsIKnow.length; i++)
 66 |   {
 67 |     if(playersInput.indexOf(actionsIKnow[i]) !== -1)
 68 |     {
 69 |       action = actionsIKnow[i];
 70 |       console.log("player's action: " + action);
 71 |       break;
 72 |     }
 73 |   }
 74 |   
 75 |   //Choose the correct action
 76 |   switch(action)
 77 |   {
 78 |     case "north":
 79 |       mapLocation -= 3;
 80 |       break;
 81 |     
 82 |     case "east":
 83 |       mapLocation += 1;
 84 |       break;
 85 |       
 86 |     case "south":
 87 |       mapLocation += 3;
 88 |       break;
 89 |       
 90 |     case "west":
 91 |       mapLocation -= 1;
 92 |       break;
 93 |     		  
 94 | 		default:
 95 | 		  gameMessage = "I don't understand that.";
 96 |   }
 97 |   
 98 |   //Render the game
 99 |   render();
100 | }
101 | 
102 | function render()
103 | {
104 |   //Render the location
105 |   output.innerHTML = map[mapLocation];
106 |   
107 |   //Display the game message
108 |   output.innerHTML += "<br><em>" + gameMessage + "</em>";
109 | }
110 | 
111 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/Forest of Lyrica/src/lyrica3.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>The Forest of Lyrica - 3</title>
  3 | 
  4 | <img src="" width="300" height="267">
  5 | <p id="output"></p>
  6 | <input id="input" type="text" placeholder="Enter your action…"> 
  7 | <button>enter</button>
  8 | 
  9 | <script>
 10 | 
 11 | //Create the map
 12 | var map = [];
 13 | 
 14 | map[0] = "An old stone keep.";
 15 | map[1] = "A deep well.";
 16 | map[2] = "A sunny glade.";
 17 | map[3] = "A sleeping dragon.";
 18 | map[4] = "A narrow pathway.";
 19 | map[5] = "An ancient gate.";
 20 | map[6] = "The edge of a river.";
 21 | map[7] = "A lonely wooden bench.";
 22 | map[8] = "An isolated cottage. Faint music comes from inside.";
 23 | 
 24 | //Set the player's start location
 25 | var mapLocation = 4;
 26 | 
 27 | //Set the images
 28 | var images = [];
 29 | 
 30 | images[0] = "keep.png";
 31 | images[1] = "well.png";
 32 | images[2] = "glade.png";
 33 | images[3] = "dragon.png";
 34 | images[4] = "path.png";
 35 | images[5] = "gate.png";
 36 | images[6] = "river.png";
 37 | images[7] = "bench.png";
 38 | images[8] = "cottage.png";
 39 | 
 40 | //Initialize the player's input
 41 | var playersInput = "";
 42 | 
 43 | //Initialize the gameMessage
 44 | var gameMessage = "";
 45 | 
 46 | //Create an array of actions the game understands
 47 | //and a variable to store the current action
 48 | var actionsIKnow = ["north", "east", "south", "west"];
 49 | var action = "";
 50 | 
 51 | //The img element
 52 | var image = document.querySelector("img");
 53 | 
 54 | //The input and output fields
 55 | var output = document.querySelector("#output");
 56 | var input = document.querySelector("#input");
 57 | 
 58 | //The button
 59 | var button = document.querySelector("button");
 60 | button.style.cursor = "pointer";
 61 | button.addEventListener("click", clickHandler, false);
 62 | 
 63 | //Dispay the player's location
 64 | render();
 65 | 
 66 | function clickHandler()
 67 | {
 68 |   playGame();
 69 | }
 70 | 
 71 | function playGame()
 72 | {
 73 |   //Get the player's input and convert it to lowercase
 74 |   playersInput = input.value;
 75 |   playersInput = playersInput.toLowerCase();
 76 |   
 77 |   //Reset these variables from the previous turn
 78 |   gameMessage = "";
 79 |   action = "";
 80 |   
 81 |   //Figure out the player's action
 82 |   for(i = 0; i < actionsIKnow.length; i++)
 83 |   {
 84 |     if(playersInput.indexOf(actionsIKnow[i]) !== -1)
 85 |     {
 86 |       action = actionsIKnow[i];
 87 |       console.log("player's action: " + action);
 88 |       break;
 89 |     }
 90 |   }
 91 |   
 92 |   //Choose the correct action
 93 |   switch(action)
 94 |   {
 95 |     case "north":
 96 |       mapLocation -= 3;
 97 |       break;
 98 |     
 99 |     case "east":
100 |       mapLocation += 1;
101 |       break;
102 |       
103 |     case "south":
104 |       mapLocation += 3;
105 |       break;
106 |       
107 |     case "west":
108 |       mapLocation -= 1;
109 |       break;
110 |     		  
111 | 		default:
112 | 		  gameMessage = "I don't understand that.";
113 |   }
114 |   
115 |   //Render the game
116 |   render();
117 | }
118 | 
119 | function render()
120 | {
121 |   //Render the location
122 |   output.innerHTML = map[mapLocation];
123 |   image.src = "../images/" + images[mapLocation];
124 |   
125 |   //Display the game message
126 |   output.innerHTML += "<br><em>" + gameMessage + "</em>";
127 | }
128 | 
129 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/arrayLoop.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>For loop</title>
 3 | 
 4 | <script>
 5 | 
 6 | var closet = [];
 7 | 
 8 | closet[0] = "hat";
 9 | closet[1] = "umbrella";
10 | closet[2] = "katana";
11 | 
12 | //View the entire array 
13 | 
14 | for(var i = 0; i < closet.length; i++)
15 | {
16 |   console.log("Element " + i + ": " + closet[i]);
17 | }
18 | 
19 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/arraySearch.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Array search</title>
 3 | 
 4 | <script>
 5 | 
 6 | var closet = [];
 7 | 
 8 | closet[0] = "hat";
 9 | closet[1] = "umbrella";
10 | closet[2] = "katana";
11 | 
12 | //Search for umbrella
13 | 
14 | for(var i = 0; i < closet.length; i++)
15 | {
16 |   if(closet[i] === "umbrella")
17 |   {
18 |     console.log("Umbrella found at position: " + i);
19 |     break;
20 |   }
21 | }
22 | 
23 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/artificialLife.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Artificial life</title>
 3 | 
 4 | <p id="output">Hi! How are you today?</p>
 5 | <input id="input" type="text" placeholder="Enter some text…"> 
 6 | <button>enter</button>
 7 | 
 8 | <script>
 9 | 
10 | var replies = [];
11 | 
12 | replies[0] = "Oh really??";
13 | replies[1] = "That's interesting.";
14 | replies[2] = "Now I'm not so sure. Can you explain?";
15 | replies[3] = "And how do you feel about that?";
16 | replies[4] = "Is that usual for you?";
17 | 
18 | var output = document.querySelector("#output");
19 | 
20 | var button = document.querySelector("button");
21 | button.addEventListener("click", clickHandler, false);
22 | button.style.cursor = "pointer";
23 | 	
24 | function clickHandler()
25 | {
26 |   var randomNumber = Math.floor(Math.random() * 5);
27 |   output.innerHTML = replies[randomNumber];
28 | }
29 | 
30 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/basicArray.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>For loop</title>
 3 | 
 4 | <script>
 5 | 
 6 | //Create an empty array
 7 | var closet = [];
 8 | 
 9 | //Add three things
10 | closet[0] = "hat";
11 | closet[1] = "umbrella";
12 | closet[2] = "katana";
13 | 
14 | //View the entire array contents 
15 | console.log("Entire array: " + closet);
16 | 
17 | //View individual elements
18 | console.log("Element 0: " + closet[0]); 
19 | console.log("Element 1: " + closet[1]); 
20 | console.log("Element 2: " + closet[2]); 
21 | 
22 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/database.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Database</title>
 3 | 
 4 | <script>
 5 | 
 6 | var planetNames = ["Jupiter", "Venus", "Saturn", "Mars"];
 7 | var distancesFromEarth = [5.2, 0.72, 9.5, 1.5];
 8 | var sunnyInAugust = [false, true, false, true];
 9 | 
10 | //Display the planet information
11 | for(var i = 0; i < planetNames.length; i++)
12 | {
13 |   console.log(planetNames[i]);
14 |   console.log(distancesFromEarth[i]); 
15 |   console.log(sunnyInAugust[i]);
16 |   console.log("----------");
17 | }
18 | 
19 | //Find the sunny planets
20 | 
21 | console.log("These planets are sunny in August:");
22 | 
23 | for(var i = 0; i < planetNames.length; i++)
24 | {
25 |   if(sunnyInAugust[i])
26 |   {
27 |     console.log(planetNames[i]);
28 |   }
29 | }
30 | 
31 | //Find the closest planet
32 | 
33 | var closestPlanet = "";
34 | var shortestDistance = 10;
35 | 
36 | for(var i = 0; i < planetNames.length; i++)
37 | {
38 |   if(distancesFromEarth[i] < shortestDistance)
39 |   {
40 |     shortestDistance = distancesFromEarth[i];
41 |     closestPlanet = planetNames[i];  
42 |   }
43 | }
44 | 
45 | console.log("Closest planet: " + closestPlanet);
46 | console.log("Shortest distance: " + shortestDistance);
47 | 
48 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/forLoop.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>For loop</title>
 3 | 
 4 | <script>
 5 | 
 6 | //Display "Hello world!" 5 times
 7 | 
 8 | console.log("--- Hello World ---");
 9 | 
10 | for(var i = 0; i < 5; i++)
11 | {
12 |   console.log("Hello world!");
13 | }
14 | 
15 | //Count from 0 to 4
16 | 
17 | console.log("--- 0 to 4 ---");
18 | 
19 | for(var i = 0; i < 5; i++)
20 | {
21 |   console.log(i);
22 | }
23 | 
24 | //Count from 1 to 5
25 | 
26 | console.log("--- 1 to 5 ---");
27 | 
28 | for(var i = 1; i <= 5; i++)
29 | {
30 |   console.log(i);
31 | }
32 | 
33 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/usingIndexOf.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using indexOf</title>
 3 | 
 4 | <script>
 5 | 
 6 | var longStringOfText = "This string contains the word north.";
 7 | 
 8 | if(longStringOfText.indexOf("north") !== -1)
 9 | { 
10 |  console.log("word found");
11 | }
12 | else
13 | {
14 |   console.log("word not found");
15 | }
16 | 
17 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/usingPop.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using pop</title>
 3 | 
 4 | <script>
 5 | 
 6 | //Create an empty array
 7 | var closet = ["hat", "umbrella", "katana"];
 8 | 
 9 | //Pop the last element
10 | var lastElement = closet.pop();
11 | 
12 | //View the value of lastElement
13 | console.log("The popped element: " + lastElement);
14 | 
15 | //View the new closet array
16 | console.log("The closet array: " + closet);
17 | 
18 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/usingPush.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using push</title>
 3 | 
 4 | <script>
 5 | 
 6 | //Create an empty array
 7 | var closet = [];
 8 | 
 9 | //Add three things
10 | closet.push("hat");
11 | closet.push("umbrella");
12 | closet.push("katana");
13 | 
14 | //View the entire array contents 
15 | console.log("Entire array: " + closet);
16 | 
17 | //View individual elements
18 | console.log("Element 0: " + closet[0]); 
19 | console.log("Element 1: " + closet[1]); 
20 | console.log("Element 2: " + closet[2]); 
21 | 
22 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter04/usingSplice.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using splice</title>
 3 | 
 4 | <script>
 5 | 
 6 | //Create an empty array
 7 | var closet = ["hat", "umbrella", "katana"];
 8 | 
 9 | //splice out the middle element
10 | var middleElement = closet.splice(1, 1);
11 | 
12 | //View the value of middleElement
13 | console.log("The spliced element: " + middleElement);
14 | 
15 | //View the new closet array
16 | console.log("The closet array: " + closet);
17 | 
18 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter05/islandAdventure/fonts/PiratesWriters.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter05/islandAdventure/fonts/PiratesWriters.ttf


--------------------------------------------------------------------------------
/Code - Published/chapter05/islandAdventure/images/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter05/islandAdventure/images/background.png


--------------------------------------------------------------------------------
/Code - Published/chapter05/islandAdventure/images/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter05/islandAdventure/images/home.png


--------------------------------------------------------------------------------
/Code - Published/chapter05/islandAdventure/images/island.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter05/islandAdventure/images/island.png


--------------------------------------------------------------------------------
/Code - Published/chapter05/islandAdventure/images/monster.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter05/islandAdventure/images/monster.png


--------------------------------------------------------------------------------
/Code - Published/chapter05/islandAdventure/images/pirate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter05/islandAdventure/images/pirate.png


--------------------------------------------------------------------------------
/Code - Published/chapter05/islandAdventure/images/ship.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter05/islandAdventure/images/ship.png


--------------------------------------------------------------------------------
/Code - Published/chapter05/islandAdventure/images/water.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter05/islandAdventure/images/water.png


--------------------------------------------------------------------------------
/Code - Published/chapter05/islandAdventure/src/islandAdventure1.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Island Adventure 1</title>
  3 | 
  4 | <style>
  5 | 
  6 | #stage 
  7 | {
  8 |   position: relative;
  9 |   width: 384px;
 10 |   height: 384px;
 11 |   background-image: url("../images/background.png");
 12 | }
 13 | 
 14 | .cell
 15 | {
 16 |   display: block;
 17 |   position: absolute;
 18 |   width: 64px;
 19 |   height: 64px;
 20 | }
 21 | 
 22 | p
 23 | {
 24 |   width: 400px;
 25 | }
 26 | 
 27 | </style>
 28 | 
 29 | <div id="stage"></div>
 30 | <p id="output"></p>
 31 | 
 32 | <script>
 33 | 
 34 | //Get a reference to the stage and output
 35 | var stage = document.querySelector("#stage");
 36 | var output = document.querySelector("#output");
 37 | 
 38 | //The game map
 39 | var map =
 40 | [
 41 |   [0, 2, 0, 0, 0, 3],
 42 |   [0, 0, 0, 1, 0, 0],
 43 |   [0, 1, 0, 0, 0, 0],
 44 |   [0, 0, 0, 0, 2, 0],
 45 |   [0, 2, 0, 1, 0, 0],
 46 |   [0, 0, 0, 0, 0, 0]
 47 | ];
 48 | 
 49 | //Map code
 50 | var WATER = 0;
 51 | var ISLAND = 1;
 52 | var PIRATE = 2;
 53 | var HOME = 3;
 54 | 
 55 | //The size of each cell
 56 | var SIZE = 64;
 57 | 
 58 | //The number of rows and columns
 59 | var ROWS = map.length;
 60 | var COLUMNS = map[0].length;
 61 | 
 62 | render();
 63 | 
 64 | function render()
 65 | {
 66 |   //Clear the stage of img tag cells
 67 |   //from the previous turn
 68 |   
 69 |   if(stage.hasChildNodes())
 70 |   {
 71 |     for(var i = 0; i < ROWS * COLUMNS; i++) 
 72 |     {	 
 73 |       stage.removeChild(stage.firstChild);
 74 |     }
 75 |   }
 76 |   
 77 |   //Render the game by looping through the map arrays
 78 |   for(var row = 0; row < ROWS; row++) 
 79 |   {	
 80 |     for(var column = 0; column < COLUMNS; column++) 
 81 |     { 
 82 |       //Create a img tag called cell
 83 |       var cell = document.createElement("img");
 84 | 
 85 |       //Set it's CSS class to "cell"
 86 |       cell.setAttribute("class", "cell");
 87 | 
 88 |       //Add the img tag to the <div id="stage"> tag
 89 |       stage.appendChild(cell);
 90 | 
 91 |       //Find the correct image for this map cell
 92 |       switch(map[row][column])
 93 |       {
 94 |         case WATER:
 95 |           cell.src = "../images/water.png";
 96 |           break;
 97 | 
 98 |         case ISLAND:
 99 |           cell.src = "../images/island.png";
100 |           break; 
101 | 
102 |         case PIRATE:
103 |           cell.src = "../images/pirate.png";
104 |           break; 
105 | 
106 |         case HOME:
107 |           cell.src = "../images/home.png";
108 |           break;   
109 |       } 
110 |   
111 |       //Position the cell 
112 |       cell.style.top = row * SIZE + "px";
113 |       cell.style.left = column * SIZE + "px";
114 |     }
115 |   }
116 | }
117 | 
118 | </script>
119 | 
120 | 


--------------------------------------------------------------------------------
/Code - Published/chapter05/islandAdventure/src/islandAdventure2.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Island Adventure 2</title>
  3 | 
  4 | <style>
  5 | 
  6 | #stage 
  7 | {
  8 |   position: relative;
  9 |   width: 384px;
 10 |   height: 384px;
 11 |   background-image: url("../images/background.png");
 12 | }
 13 | 
 14 | .cell
 15 | {
 16 |   display: block;
 17 |   position: absolute;
 18 |   width: 64px;
 19 |   height: 64px;
 20 | }
 21 | 
 22 | p
 23 | {
 24 |   width: 400px;
 25 | }
 26 | 
 27 | </style>
 28 | 
 29 | <div id="stage"></div>
 30 | <p id="output"></p>
 31 | 
 32 | <script>
 33 | 
 34 | //Get a reference to the stage and output
 35 | var stage = document.querySelector("#stage");
 36 | var output = document.querySelector("#output");
 37 | 
 38 | //The game map
 39 | var map =
 40 | [
 41 |   [0, 2, 0, 0, 0, 3],
 42 |   [0, 0, 0, 1, 0, 0],
 43 |   [0, 1, 0, 0, 0, 0],
 44 |   [0, 0, 0, 0, 2, 0],
 45 |   [0, 2, 0, 1, 0, 0],
 46 |   [0, 0, 0, 0, 0, 0]
 47 | ];
 48 | 
 49 | //The game objects map
 50 | var gameObjects =
 51 | [
 52 |   [0, 0, 0, 0, 0, 0],
 53 |   [0, 0, 0, 0, 0, 0],
 54 |   [0, 0, 0, 0, 0, 0],
 55 |   [0, 0, 0, 0, 0, 0],
 56 |   [0, 0, 0, 0, 0, 0],
 57 |   [4, 0, 0, 0, 0, 0]
 58 | ];
 59 | 
 60 | //Map code
 61 | var WATER = 0;
 62 | var ISLAND = 1;
 63 | var PIRATE = 2;
 64 | var HOME = 3;
 65 | var SHIP = 4;
 66 | 
 67 | //The size of each cell
 68 | var SIZE = 64;
 69 | 
 70 | //The number of rows and columns
 71 | var ROWS = map.length;
 72 | var COLUMNS = map[0].length;
 73 | 
 74 | //An automatic way of setting the ship's start position
 75 | var shipRow;
 76 | var shipColumn;
 77 | 
 78 | for(var row = 0; row < ROWS; row++) 
 79 | {	
 80 |   for(var column = 0; column < COLUMNS; column++) 
 81 |   {
 82 |     if(gameObjects[row][column] === SHIP)
 83 |     { 
 84 |       shipRow = row;
 85 |       shipColumn = column;
 86 |     }
 87 |   }
 88 | }
 89 | 
 90 | render();
 91 | 
 92 | function render()
 93 | {
 94 |   //Clear the stage of img cells
 95 |   //from the previous turn
 96 |   
 97 |   if(stage.hasChildNodes())
 98 |   {
 99 |     for(var i = 0; i < ROWS * COLUMNS; i++) 
100 |     {	 
101 |       stage.removeChild(stage.firstChild);
102 |     }
103 |   }
104 |   
105 |   //Render the game by looping through the map arrays
106 |   for(var row = 0; row < ROWS; row++) 
107 |   {	
108 |     for(var column = 0; column < COLUMNS; column++) 
109 |     { 
110 |       //Create a img tag called cell
111 |       var cell = document.createElement("img");
112 | 
113 |       //Set it's CSS class to "cell"
114 |       cell.setAttribute("class", "cell");
115 | 
116 |       //Add the img tag to the <div id="stage"> tag
117 |       stage.appendChild(cell);
118 | 
119 |       //Find the correct image for this map cell
120 |       switch(map[row][column])
121 |       {
122 |         case WATER:
123 |           cell.src = "../images/water.png";
124 |           break;
125 | 
126 |         case ISLAND:
127 |           cell.src = "../images/island.png";
128 |           break; 
129 | 
130 |         case PIRATE:
131 |           cell.src = "../images/pirate.png";
132 |           break; 
133 | 
134 |         case HOME:
135 |           cell.src = "../images/home.png";
136 |           break;   
137 |       }  
138 |       
139 |       //Add the ship from the gameObjects array
140 | 	    switch(gameObjects[row][column])
141 | 	    {
142 | 	      case SHIP:
143 | 	        cell.src = "../images/ship.png";
144 | 	        break;   
145 | 	    } 
146 |   
147 |       //Position the cell 
148 |       cell.style.top = row * SIZE + "px";
149 |       cell.style.left = column * SIZE + "px";
150 |     }
151 |   }
152 | }
153 | 
154 | </script>
155 | 
156 | 


--------------------------------------------------------------------------------
/Code - Published/chapter05/looping2DArrays.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Looping through 2D arrays</title>
 3 | 
 4 | <script>
 5 | 
 6 | var closet =
 7 | [
 8 |   ["ball", "yoyo", "teddy"],
 9 |   ["Austen", "Bronte", "Swift"],
10 |   ["guitar", "tabla", "flute"]
11 | ];
12 | 
13 | //Find the number of rows and columns
14 | var ROWS = closet.length;
15 | var COLUMNS = closet[0].length;
16 | 
17 | //loop through each row
18 | for(var row = 0; row < ROWS; row++) 
19 | {
20 |   console.log("--- Array: " + row);
21 | 	
22 | 	//loop through each element of each row
23 |   for(var column = 0; column < COLUMNS; column++) 
24 |   {
25 |     //Display the row
26 |     console.log(closet[row][column]);
27 | 		
28 |     //Display the column
29 |     //console.log(_collectionJar[row][column]);
30 |   }
31 | }
32 | 
33 | /* The output:
34 | 
35 | --- Array: 0
36 | ball
37 | tabla
38 | flute
39 | --- Array: 1
40 | Austen
41 | Bronte
42 | Swift
43 | --- Array: 2
44 | guitar
45 | tabla
46 | flute
47 | 
48 | */
49 | 
50 | </script>
51 | 
52 | 


--------------------------------------------------------------------------------
/Code - Published/chapter05/loopingThroughObjects.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Robot</title>
 3 | 
 4 | <script type="text/javascript">
 5 | 
 6 | //Create an object
 7 | var robot = 
 8 | {
 9 |   material: "titanium", 
10 |   happy: true,
11 |   
12 |   makeBreakfast: function()
13 |   {
14 |     console.log("Here are your waffles and milk, master."); 
15 |   }
16 | };
17 | 
18 | //Loop through all the robot's properties and methods
19 | console.log("--- The robot's properties and methods ---");
20 | 
21 | for(var i in robot)
22 | {
23 |   console.log(i + ": " + robot[i]);
24 | }
25 | 
26 | //Find the robot's material
27 | 
28 | for(var i in robot)
29 | {
30 |   if(i === "material")
31 |   {
32 |     console.log("The robot is made from " + robot[i]);
33 |     break;
34 |   }
35 | }
36 | 
37 | //Make a new robot
38 | 
39 | var newRobot = Object.create(robot);
40 | 
41 | //Add a new method to the robot
42 | 
43 | newRobot.newProperty = "This belongs to the newRobot";
44 | 
45 | //Loop through all the new robot's properties and methods
46 | console.log("--- All the new robot's properties and methods ---");
47 | 
48 | for(var i in newRobot)
49 | {
50 |   console.log(i + ": " + newRobot[i]);
51 | }
52 | 
53 | //Loop through only the properties and methods that belong to the new robot
54 | console.log("--- Only the new robot's properties and methods ---");
55 | 
56 | for(var i in newRobot)
57 | {
58 |   if(newRobot.hasOwnProperty(i))
59 |   {
60 |     console.log(i + ": " + newRobot[i]);
61 |   }
62 | }
63 | 
64 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter05/twoDimensionalArrays.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>2D arrays</title>
 3 | 
 4 | <script>
 5 | 
 6 | var closet =
 7 | [
 8 |   ["ball", "yoyo", "teddy"],
 9 |   ["Austen", "Bronte", "Swift"],
10 |   ["guitar", "tabla", "flute"]
11 | ];
12 | 
13 | //View the entire array.
14 | //ball, yoyo, teddy, Austen, Bronte, 
15 | //Swift, guitar, tabla, flute
16 | 
17 | console.log("Entire 2D array: " + closet);
18 | 
19 | //View the first array.
20 | //ball, yoyo, teddy
21 | 
22 | console.log("Array 0: " + closet[0]);
23 | 
24 | //View the second array.
25 | //Austen, Bronte, Swift
26 | 
27 | console.log("Array 1: " + closet[1]);
28 | 
29 | //The first element in the second array.
30 | //Austen
31 | 
32 | console.log("First element of second array: " 
33 |   + closet[1][0]);
34 | 
35 | //The third element in the third array.
36 | //flute
37 | 
38 | console.log("Third element of third array: " 
39 |   + closet[2][2]);
40 | 
41 | //The second element in the first array.
42 | //yoyo
43 | 
44 | console.log("Second element of first array: " 
45 |   + closet[0][1]);
46 |   
47 | </script>
48 | 


--------------------------------------------------------------------------------
/Code - Published/chapter05/visualizing2DArrays.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Visualizing 2D arrays</title>
 3 | 
 4 | <style>
 5 | 
 6 | #stage 
 7 | {
 8 |   position: relative;
 9 | }
10 | 
11 | .cell
12 | {
13 |   position: absolute;
14 |   width: 30px;
15 |   height: 30px;
16 |   border: 1px solid black;
17 |   background-color: white;
18 | }
19 | 
20 | </style>
21 | 
22 | <div id="stage"></div>
23 | 
24 | <script>
25 | 
26 | //Get a reference to the stage
27 | var stage = document.querySelector("#stage");
28 | 
29 | //The 2D array that defines the pattern
30 | var pattern =
31 | [
32 |   [1, 0, 1],
33 |   [0, 1, 0],
34 |   [1, 0, 1]
35 | ];
36 | 
37 | //The size of each cell
38 | var SIZE = 30;
39 | 
40 | //The space between each cell
41 | var SPACE = 10;
42 | 
43 | //Display the array
44 | var ROWS = pattern.length;
45 | var COLUMNS = pattern[0].length;
46 | 
47 | for(var row = 0; row < ROWS; row++) 
48 | {	
49 |   for(var column = 0; column < COLUMNS; column++) 
50 |   { 
51 |     //Create a div HTML element called cell
52 |     var cell = document.createElement("div");
53 |     
54 |     //Set it's CSS class to "cell"
55 |     cell.setAttribute("class", "cell");
56 |     
57 |     //Add the div HTML element to the stage
58 |     stage.appendChild(cell);
59 |     
60 |     //Make it black if it's a "1"
61 |     if(pattern[row][column] === 1)
62 |     {
63 |       cell.style.backgroundColor = "black";
64 |     }
65 |     
66 |     //Position the cell in the correct place
67 |     //with 10 pixels of space around it
68 |     cell.style.top = row * (SIZE + SPACE) + "px";
69 |     cell.style.left = column * (SIZE + SPACE) + "px";
70 |   }
71 | }
72 | 
73 | </script>
74 | 
75 | 


--------------------------------------------------------------------------------
/Code - Published/chapter06/10_stateChangeTimer.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>State change timer</title>
 3 | 
 4 | <canvas width="64" height="64"></canvas>
 5 | 
 6 | <script type="text/javascript">
 7 | 
 8 | var monster =
 9 | {
10 |   //The monster's image
11 |   image: "monsterStates.png",
12 |   
13 |   //The monster's states
14 |   NORMAL: 0,
15 |   SCARED: 1,
16 |   
17 |   //Set its initial state
18 |   state: 0
19 | };
20 | 
21 | //Set up the canvas and drawing surface
22 | var canvas = document.querySelector("canvas");
23 | var drawingSurface = canvas.getContext("2d");
24 | 
25 | //Load the monster's image
26 | var monsterImage = new Image();
27 | monsterImage.addEventListener("load", render, false);
28 | monsterImage.src = monster.image;
29 | 
30 | //Change the monster's state by pressing a key
31 | window.addEventListener("keydown", keydownHandler, false);
32 | 
33 | function keydownHandler(event)
34 | {
35 |   //When a key is pressed, change the
36 |   //monster's state   
37 |   becomeScared();
38 | }
39 | 
40 | function becomeScared()
41 | {
42 |   monster.state = monster.SCARED;
43 |   setTimeout(becomeNormal, 1000);
44 |   render();
45 | }
46 | 
47 | function becomeNormal()
48 | {
49 |   monster.state = monster.NORMAL;
50 |   render();
51 | }
52 | 
53 | function render()
54 | {
55 |   
56 |   drawingSurface.drawImage
57 |   (
58 |     monsterImage, 
59 |     64 * monster.state, 0, 64, 64, 
60 |     0, 0, 64, 64
61 |   );
62 |   
63 | }
64 | 
65 | </script>
66 | 
67 | 


--------------------------------------------------------------------------------
/Code - Published/chapter06/11_animationObject.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Animation object</title>
 3 | 
 4 | <canvas width="128" height="128"></canvas>
 5 | 
 6 | <script>
 7 | 
 8 | //Create the monster object
 9 | 
10 | var monster =
11 | {
12 |   //The monster's image file and the size of each frame cell
13 |   IMAGE: "frames.png",
14 |   SIZE: 128,
15 |   
16 |   //The numbers of the animation frames and the starting frame
17 |   numberOfFrames: 5,
18 |   currentFrame: 0,
19 |   
20 |   //Properties of the animation cell's x and
21 |   //y positions on the tile sheet.
22 |   //They're 0 when this object first loads
23 |   sourceX: 0,
24 |   sourceY: 0,
25 |     
26 |   //The monster's updateAnimation method
27 |   updateAnimation: function()
28 |   { 
29 |     //Use currentFrame to find the correct section
30 |     //of the tilesheet to display
31 |     this.sourceX = this.currentFrame * this.SIZE;
32 |     this.sourceY = 0;
33 |     
34 |     //Increase currentFrame by 1 if it's no greater 
35 |     //than the total number of frames
36 |     if(this.currentFrame < this.numberOfFrames)
37 |     {
38 |       this.currentFrame++;
39 |     }
40 |   }
41 | };
42 | 
43 | //Set up the canvas and drawing surface
44 | var canvas = document.querySelector("canvas");
45 | var drawingSurface = canvas.getContext("2d");
46 | 
47 | //Load the animation tile sheet
48 | var image = new Image();
49 | image.addEventListener("load", loadHandler, false);
50 | image.src = monster.IMAGE;
51 | 
52 | function loadHandler()
53 | { 
54 |   //Start the animation
55 |   updateAnimation();
56 | }
57 | 
58 | function updateAnimation()
59 | { 
60 |   //Set a timer to call updateAnimation every 300 milliseconds
61 |   setTimeout(updateAnimation, 300);
62 |   
63 |   //Update the monster's animation frames
64 |   monster.updateAnimation();
65 |   
66 |   //Render the animation
67 |   render();
68 | }
69 | 
70 | function render()
71 | {
72 |   //Clear the canvas of any previous frames
73 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
74 |   
75 |   //Draw the monster's current animation frame  
76 |   drawingSurface.drawImage
77 |   (
78 |     image, 
79 |     monster.sourceX, monster.sourceY, monster.SIZE, monster.SIZE, 
80 |     0, 0, monster.SIZE, monster.SIZE
81 |   );
82 | }
83 | 
84 | </script>
85 | 
86 | 


--------------------------------------------------------------------------------
/Code - Published/chapter06/12_tilesheetWithRows.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Tilesheet with rows</title>
 3 | 
 4 | <canvas width="128" height="128"></canvas>
 5 | 
 6 | <script>
 7 | 
 8 | //Create the monster object
 9 | 
10 | var monster =
11 | {
12 |   //The tilesheet image, its size, and the number of columns it has
13 |   IMAGE: "monsterTileSheet.png",
14 |   SIZE: 128,
15 |   COLUMNS: 3,
16 |   
17 |   //The numbers of the animation frames and the starting frame
18 |   numberOfFrames: 5,
19 |   currentFrame: 0,
20 |   
21 |   //Properties of the animation cell's x and
22 |   //y positions on the tile sheet.
23 |   //They're 0 when this object first loads
24 |   sourceX: 0,
25 |   sourceY: 0,
26 |     
27 |   //The monster's updateAnimation method
28 |   updateAnimation: function()
29 |   { 
30 |     //Find the frame's correct column and row
31 |     //on the tilesheet
32 |     this.sourceX 
33 |       = Math.floor(this.currentFrame % this.COLUMNS) * this.SIZE;
34 |     this.sourceY 
35 |       = Math.floor(this.currentFrame / this.COLUMNS) * this.SIZE;
36 |      
37 |     if(this.currentFrame < this.numberOfFrames)
38 |     {
39 |       //Advance currentFrame by 1
40 |       this.currentFrame++;
41 |     }
42 |   }
43 | };
44 | 
45 | //Set up the canvas and drawing surface
46 | var canvas = document.querySelector("canvas");
47 | var drawingSurface = canvas.getContext("2d");
48 | 
49 | //Load the animation tile sheet
50 | var image = new Image();
51 | image.addEventListener("load", loadHandler, false);
52 | image.src = monster.IMAGE;
53 | 
54 | function loadHandler()
55 | { 
56 |   //Start the animation
57 |   updateAnimation();
58 | }
59 | 
60 | function updateAnimation()
61 | { 
62 |   //Set a timer to call updateAnimation every 300 milliseconds
63 |   setTimeout(updateAnimation, 300);
64 |   
65 |   //Update the monster's animation frames
66 |   monster.updateAnimation();
67 |   
68 |   //Render the animation
69 |   render();
70 | }
71 | 
72 | function render()
73 | {
74 |   //Clear the canvas of any previous frames
75 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
76 |   
77 |   //Draw the monster's current animation frame  
78 |   drawingSurface.drawImage
79 |   (
80 |     image, 
81 |     monster.sourceX, monster.sourceY, monster.SIZE, monster.SIZE, 
82 |     0, 0, monster.SIZE, monster.SIZE
83 |   );
84 | }
85 | 
86 | </script>
87 | 
88 | 


--------------------------------------------------------------------------------
/Code - Published/chapter06/13_animationLoop.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Animation loop</title>
  3 | 
  4 | <canvas width="128" height="128"></canvas>
  5 | 
  6 | <script>
  7 | 
  8 | //Create the monster object
  9 | 
 10 | var monster =
 11 | {
 12 |   //The tilesheet image, its size, and the number of columns it has
 13 |   IMAGE: "monsterTileSheet.png",
 14 |   SIZE: 128,
 15 |   COLUMNS: 3,
 16 |   
 17 |   //The numbers of the animation frames and the starting frame
 18 |   numberOfFrames: 5,
 19 |   currentFrame: 0,
 20 |   
 21 |   //Properties of the animation frames's x and
 22 |   //y positions on the tile sheet.
 23 |   //They're 0 when this object first loads
 24 |   sourceX: 0,
 25 |   sourceY: 0,
 26 |   
 27 |   //A variable to control the direction of the loop   
 28 |   forward: true,
 29 |     
 30 |   //The monster's updateAnimation method
 31 |   updateAnimation: function()
 32 |   { 
 33 |     this.sourceX 
 34 |       = Math.floor(this.currentFrame % this.COLUMNS) * this.SIZE;
 35 |     this.sourceY 
 36 |       = Math.floor(this.currentFrame / this.COLUMNS) * this.SIZE;
 37 | 	  
 38 | 	  //If the last frame has been reached, set forward to false
 39 | 	  if(this.currentFrame === this.numberOfFrames)
 40 |     {
 41 |       this.forward = false;
 42 |     }
 43 |     
 44 |     //If the first frame has been reached, set forward to true
 45 |     if(this.currentFrame === 0)
 46 |     {
 47 |       this.forward = true;
 48 |     }
 49 |     
 50 |     //Add 1 to currentFrame if forward is true, subtract 1 if it's false
 51 | 	  if(this.forward)
 52 | 	  {
 53 | 	    this.currentFrame++;
 54 | 	  }
 55 | 	  else
 56 | 	  {
 57 | 	   this.currentFrame--;
 58 | 	  }
 59 |   }
 60 | };
 61 | 
 62 | //Set up the canvas and drawing surface
 63 | var canvas = document.querySelector("canvas");
 64 | var drawingSurface = canvas.getContext("2d");
 65 | 
 66 | //Load the animation tile sheet
 67 | var image = new Image();
 68 | image.addEventListener("load", loadHandler, false);
 69 | image.src = monster.IMAGE;
 70 | 
 71 | function loadHandler()
 72 | { 
 73 |   //Start the animation
 74 |   updateAnimation();
 75 | }
 76 | 
 77 | function updateAnimation()
 78 | { 
 79 |   //Set a timer to call updateAnimation every 300 milliseconds
 80 |   setTimeout(updateAnimation, 300);
 81 |   
 82 |   //Update the monster's animation frames
 83 |   monster.updateAnimation();
 84 |   
 85 |   //Render the animation
 86 |   render();
 87 | }
 88 | 
 89 | function render()
 90 | {
 91 |   //Clear the canvas of any previous frames
 92 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
 93 |   
 94 |   //Draw the monster's current animation frame  
 95 |   drawingSurface.drawImage
 96 |   (
 97 |     image, 
 98 |     monster.sourceX, monster.sourceY, monster.SIZE, monster.SIZE, 
 99 |     0, 0, monster.SIZE, monster.SIZE
100 |   );
101 | }
102 | 
103 | </script>
104 | 
105 | 


--------------------------------------------------------------------------------
/Code - Published/chapter06/14_randomAnimation.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Random animation</title>
  3 | 
  4 | <canvas width="128" height="128"></canvas>
  5 | 
  6 | <script>
  7 | 
  8 | //Create the monster object
  9 | 
 10 | var monster =
 11 | {
 12 |   //The size of each frame on the tile sheet
 13 |   //and the tile sheet's number of columns
 14 |   IMAGE: "monsterTileSheet.png",
 15 |   SIZE: 128,
 16 |   COLUMNS: 3,
 17 |   
 18 |   //The numbers of the animation frames and the starting frame
 19 |   numberOfFrames: 5,
 20 |   currentFrame: 0,
 21 |   
 22 |   //Properties of the animation frames's x and
 23 |   //y positions on the tile sheet.
 24 |   //They're 0 when this object first loads
 25 |   sourceX: 0,
 26 |   sourceY: 0,
 27 |   
 28 |   //A property to control the loop  
 29 |   forward: true,
 30 |   
 31 |   //States
 32 |   HIDING: 0,
 33 |   JUMPING: 1,
 34 |   state: this.HIDING,
 35 |   
 36 |   //A property to store the random time
 37 |   waitTime: undefined,
 38 |   
 39 |   //A method to find a random animation time
 40 |   findWaitTime: function()
 41 |   {
 42 |     this.waitTime = Math.ceil(Math.random() * 60);  
 43 |   },
 44 |   
 45 |   //The monster's updateAnimation method
 46 |   updateAnimation: function()
 47 |   { 
 48 |     //Figure out the monster's state
 49 |     if(this.waitTime > 0  || this.waitTime === undefined)
 50 |     {
 51 |       this.state = this.HIDING;
 52 |     }
 53 |     else
 54 |     {
 55 |       this.state = this.JUMPING;
 56 |     }
 57 |     
 58 |     //Switch the monster's action based on its state
 59 |     switch(this.state)
 60 |     {
 61 |       case this.HIDING:
 62 |         this.currentFrame = 0;
 63 |         this.waitTime--;
 64 |         break;
 65 |         
 66 |       case this.JUMPING:
 67 |         //If the last frame has been reached, set forward to false
 68 |     	  if(this.currentFrame === this.numberOfFrames)
 69 |         {
 70 |           this.forward = false;
 71 |         }
 72 | 
 73 |         //If the first frame has been reached, set forward to true
 74 |         if(this.currentFrame === 0 && this.forward === false)
 75 |         {
 76 |           //Set forward to true, find a new waitTime,
 77 |           //set the state to HIDING and break the switch statement
 78 |           this.forward = true;
 79 |           this.findWaitTime();
 80 |           this.state = this.HIDING;
 81 |           break;
 82 |         }
 83 | 
 84 |         //Add 1 to currentFrame if forward is true, subtract 1 if it's false
 85 |     	  if(this.forward)
 86 |       	{
 87 |       	  this.currentFrame++;
 88 |       	}
 89 |       	else
 90 |       	{
 91 |       	  this.currentFrame--;
 92 |       	}
 93 |     }
 94 |     
 95 |     this.sourceX 
 96 |       = Math.floor(this.currentFrame % this.COLUMNS) * this.SIZE;
 97 |     this.sourceY 
 98 |       = Math.floor(this.currentFrame / this.COLUMNS) * this.SIZE;
 99 |   }
100 | };
101 | 
102 | //Set up the canvas and drawing surface
103 | var canvas = document.querySelector("canvas");
104 | var drawingSurface = canvas.getContext("2d");
105 | 
106 | //Load the animation tile sheet
107 | var image = new Image();
108 | image.addEventListener("load", loadHandler, false);
109 | image.src = monster.IMAGE;
110 | 
111 | function loadHandler()
112 | { 
113 |   //Find a random wait time
114 |   monster.findWaitTime();
115 |   
116 |   //Start the animation
117 |   updateAnimation();
118 | }
119 | 
120 | function updateAnimation()
121 | { 
122 |   //Set a timer to call updateAnimation every 300 milliseconds
123 |   setTimeout(updateAnimation, 300);
124 |   
125 |   //Update the monster's animation frames
126 |   monster.updateAnimation();
127 |   
128 |   //Render the animation
129 |   render();
130 | }
131 | 
132 | function render()
133 | {
134 |   //Clear the canvas of any previous frames
135 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
136 |   
137 |   //Draw the monster's current animation frame  
138 |   drawingSurface.drawImage
139 |   (
140 |     image, 
141 |     monster.sourceX, monster.sourceY, monster.SIZE, monster.SIZE, 
142 |     0, 0, monster.SIZE, monster.SIZE
143 |   );
144 | }
145 | 
146 | </script>
147 | 
148 | 


--------------------------------------------------------------------------------
/Code - Published/chapter06/1_displayingWithCanvas.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Displaying an image with canvas</title>
 3 | 
 4 | <style>
 5 | 
 6 | canvas
 7 | {
 8 |   border: 1px dashed black;
 9 | }
10 | 
11 | </style>
12 | 
13 | <canvas width="64" height="64"></canvas>
14 | 
15 | <script>
16 | 
17 | //1. Get a reference to the canvas
18 | var canvas = document.querySelector("canvas");
19 | 
20 | //2. Get a reference to the canvas's drawing surface
21 | var drawingSurface = canvas.getContext("2d");
22 | 
23 | //3. Create a monsterImage variable to hold the new image
24 | var monsterImage = new Image();
25 | 
26 | //4. Add a listener to the image to call the 
27 | //render function when the image has loaded
28 | monsterImage.addEventListener("load", loadHandler, false);
29 | 
30 | //5. Assign the image's src property to the image you want to load
31 | monsterImage.src = "monster.png";
32 | 
33 | function loadHandler()
34 | { 
35 |   
36 |   //6. Draw the monsterImage onto the drawingSurface
37 |   //drawingSurface.drawImage(monsterImage, 20, 20);
38 |   drawingSurface.drawImage
39 |   (
40 |     monsterImage, 
41 |     0, 0, 64, 64,
42 |     0, 0, 64, 64
43 |   );
44 |   
45 |   //Draw the monster's left eye
46 |   /*
47 |   drawingSurface.drawImage
48 |   (
49 |     monsterImage, 
50 |     3, 12, 28, 28,
51 |     0, 0, 28, 28
52 |   );
53 |   */
54 |   
55 |   //Center the eye
56 |   /*
57 |   drawingSurface.drawImage
58 |   (
59 |     monsterImage, 
60 |     3, 12, 28, 28,
61 |     18, 18, 28, 28
62 |   );
63 |   */
64 |   
65 |   /*
66 |   //Make the eye fill the whole canvas
67 |   drawingSurface.drawImage
68 |   (
69 |     monsterImage, 
70 |     3, 12, 28, 28,
71 |     0, 0, 64, 64
72 |   );
73 |   */
74 |   
75 |   //Make the destination image a quarter of the size and position
76 |   //it at the bottom left corner
77 |   /*
78 |   drawingSurface.drawImage
79 |   (
80 |     monsterImage, 
81 |     0, 0, 64, 64,
82 |     32, 32, 32, 32
83 |   );
84 |   */
85 | }
86 | 
87 | </script>
88 | 
89 | 


--------------------------------------------------------------------------------
/Code - Published/chapter06/2_robotObject.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Robot</title>
 3 | 
 4 | <script>
 5 | 
 6 | var robot = 
 7 | {
 8 |   material: "titanium", 
 9 |   happy: true,
10 |   
11 |   makeBreakfast: function()
12 |   {
13 |     if(this.happy)
14 |     {
15 |       console.log("Here are your waffles and milk, master."); 
16 |     }
17 |     else
18 |     {
19 |       console.log("Here's your burnt toast and lukewarm water, master.");
20 |     }
21 |   }
22 | };
23 | 
24 | //Command my robot to make breakfast
25 | robot.happy = false;
26 | robot.makeBreakfast();
27 | 
28 | //Display the properties
29 | console.log(robot.material);
30 | console.log(robot.happy);
31 | 
32 | //Change the properties
33 | robot.material = "plastic";
34 | robot.happy = false;
35 | 
36 | console.log(robot.material);
37 | console.log(robot.happy);
38 | 
39 | //Make more robots
40 | var newRobot = Object.create(robot);
41 | newRobot.material = "transparent aluminium";
42 | newRobot.makeBreakfast();
43 | console.log(newRobot.material);
44 | 
45 | //Add a new property
46 | robot.color = "blue";
47 | console.log(robot.color);
48 | 
49 | //Add a new method
50 | robot.enslaveHumanity = function()
51 | {
52 |   console.log("The robot starts uploading lots of cat videos in a suspicious manner.");
53 | }
54 | 
55 | robot.enslaveHumanity();
56 | 
57 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter06/3_loopingThroughObjects.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Looping through objects</title>
 3 | 
 4 | <script>
 5 | 
 6 | //A basic object
 7 | var robot = 
 8 | {
 9 |   material: "titanium", 
10 |   happy: true,
11 |   
12 |   makeBreakfast: function()
13 |   {
14 |     if(this.happy)
15 |     {
16 |       console.log("Here are your waffles and milk, master."); 
17 |     }
18 |     else
19 |     {
20 |       console.log("Here's your burnt toast and lukewarm water, master.");
21 |     }
22 |   }
23 | };
24 | 
25 | //Loop through the object's properties
26 | for(var i in robot)
27 | {
28 |   console.log(i + ": " + robot[i]);
29 | }
30 | 
31 | /*
32 | This is what that above loop displays:
33 | 
34 | material: titanium
35 | happy: true
36 | makeBreakfast: function(){
37 | 
38 | */
39 | 
40 | //Find the value of a specific property
41 | if("material" in robot)
42 | {
43 |   console.log("The robot is made from: " + robot.material);
44 | }
45 | 
46 | /*
47 | This is what that above loop displays:
48 | 
49 | The robot is made from titanium
50 | 
51 | */
52 | 
53 | //Create a new object and add a new property to it
54 | var newRobot = Object.create(robot);
55 | newRobot.newProperty = "This belongs to the newRobot";
56 | 
57 | //Use a loop to find out what properties newRobot has
58 | 
59 | for(var i in newRobot)
60 | {
61 |   console.log(i + ": " + newRobot[i]);
62 | }
63 | 
64 | /*
65 | This is what that above loop displays:
66 | 
67 | newProperty: This belongs to the newRobot
68 | material: titanium
69 | happy: true
70 | makeBreakfast: function(){
71 | 
72 | */
73 | 
74 | //Find properties that only belong to the newRobot
75 | for(var i in newRobot)
76 | {
77 |   if(newRobot.hasOwnProperty(i))
78 |   {
79 |     console.log(i + ": " + newRobot[i]);
80 |   }
81 | }
82 | 
83 | /*
84 | This is what that above loop displays:
85 | 
86 | newProperty: This belongs to the newRobot
87 | 
88 | */
89 | 
90 | 
91 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter06/4_changingStates.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Changing states</title>
 3 | 
 4 | <script>
 5 | 
 6 | var monster =
 7 | {
 8 |   //Define the monster's states  
 9 |   NORMAL: 0,
10 |   SCARED: 1,
11 |   
12 |   //Set its initial state
13 |   state: 0
14 | };
15 | 
16 | //Display the monster's initial state
17 | console.log("The monster's initial state: " + monster.state);
18 | 
19 | //Change the monsters state by pressing a key
20 | window.addEventListener("keydown", keydownHandler, false);
21 | 
22 | function keydownHandler(event)
23 | {
24 |   //Change the monster's state
25 |   monster.state = monster.SCARED;
26 |   
27 |   //Display the new state
28 |   console.log("The monster's new state: " + monster.state);
29 | }
30 | 
31 | </script>
32 | 
33 | 


--------------------------------------------------------------------------------
/Code - Published/chapter06/5_renderingStates.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Rendering states</title>
 3 | 
 4 | <canvas width="64" height="64"></canvas>
 5 | 
 6 | <script>
 7 | 
 8 | var monster =
 9 | {
10 |   //The monster's image
11 |   image: "monsterStates.png",
12 |   
13 |   //The monster's states
14 |   NORMAL: 0,
15 |   SCARED: 1,
16 |   
17 |   //Set its initial state
18 |   state: 0
19 | };
20 | 
21 | //Set up the canvas and drawing surface
22 | var canvas = document.querySelector("canvas");
23 | var drawingSurface = canvas.getContext("2d");
24 | 
25 | //Load the monster's image
26 | var monsterImage = new Image();
27 | monsterImage.addEventListener("load", render, false);
28 | monsterImage.src = monster.image;
29 | 
30 | //Change the monsters state by pressing and releasing a key
31 | window.addEventListener("keydown", keydownHandler, false);
32 | window.addEventListener("keyup", keyupHandler, false);
33 | 
34 | function keydownHandler(event)
35 | {
36 |   //When a key is pressed, change the
37 |   //monster's state to SCARED and render it
38 |   monster.state = monster.SCARED;
39 |   render();
40 | }
41 | 
42 | function keyupHandler(event)
43 | {
44 |   //When a key is released, change the
45 |   //monster's state to NORMAL and render it
46 |   monster.state = monster.NORMAL;
47 |   render();
48 | }
49 | 
50 | function render()
51 | {
52 |   
53 |   //Render the correct state 
54 |   switch(monster.state)
55 |   {
56 |     case monster.NORMAL:
57 |       drawingSurface.drawImage
58 |       (
59 |         monsterImage, 
60 |         0, 0, 64, 64, 
61 |         0, 0, 64, 64
62 |       );
63 |       break;
64 |     
65 |     case monster.SCARED:
66 |       drawingSurface.drawImage
67 |       (
68 |         monsterImage, 
69 |         64, 0, 64, 64, 
70 |         0, 0, 64, 64
71 |       );
72 |   }
73 |   //Shortcut
74 |   /*
75 |   drawingSurface.drawImage
76 |   (
77 |     monsterImage, 
78 |     64 * monster.state, 0, 64, 64, 
79 |     0, 0, 64, 64
80 |   );
81 |   */
82 | }
83 | 
84 | </script>
85 | 
86 | 


--------------------------------------------------------------------------------
/Code - Published/chapter06/6_usingSetTimeout.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using setTimeout</title>
 3 | 
 4 | <script>
 5 | 
 6 | window.setTimeout(timer, 1000);
 7 | 
 8 | function timer()
 9 | {
10 |   console.log("tick!");
11 | }
12 | 
13 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter06/7_usingSetInterval.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using setInterval</title>
 3 | 
 4 | <script>
 5 | 
 6 | window.setInterval(timer, 1000);
 7 | 
 8 | function timer()
 9 | {
10 |   console.log("tick!");
11 | }
12 | 
13 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter06/8_usingClearInterval.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Using clearInterval</title>
 3 | 
 4 | <script>
 5 | 
 6 | var interval = window.setInterval(timer, 1000);
 7 | var counter = 0;
 8 | 
 9 | function timer()
10 | { 
11 |   if(counter < 5)
12 |   {
13 |     console.log("tick! " + counter);
14 |   }
15 |   else
16 |   {
17 |     window.clearInterval(interval);
18 |   }
19 |   
20 |   counter++;
21 | }
22 | 
23 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter06/9_timerObject.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Timer object</title>
 3 | 
 4 | <script>
 5 | 
 6 | var timer =
 7 | { 
 8 |   start: function()
 9 |   {
10 |     var self = this;
11 |     window.setInterval(function(){self.tick();}, 1000); 
12 |   },
13 |   tick: function()
14 |   {
15 |     console.log("tick!");
16 |   }
17 | };
18 | 
19 | timer.start();
20 | 
21 | </script>
22 | 
23 | 


--------------------------------------------------------------------------------
/Code - Published/chapter06/frames.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter06/frames.png


--------------------------------------------------------------------------------
/Code - Published/chapter06/monster.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter06/monster.png


--------------------------------------------------------------------------------
/Code - Published/chapter06/monsterSmash/fonts/Vanilla.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter06/monsterSmash/fonts/Vanilla.ttf


--------------------------------------------------------------------------------
/Code - Published/chapter06/monsterSmash/images/monsterTileSheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter06/monsterSmash/images/monsterTileSheet.png


--------------------------------------------------------------------------------
/Code - Published/chapter06/monsterSmash/src/monsterSmash.css:
--------------------------------------------------------------------------------
 1 | *
 2 | {
 3 |   padding: 0px;
 4 |   margin: 0px;
 5 |   -webkit-user-select: none;
 6 |   -moz-user-select: none;
 7 |   user-select: none;
 8 | }
 9 | 
10 | #stage 
11 | {
12 |   position: relative;
13 |   width: 552px;
14 |   height: 414px;
15 | }
16 | 
17 | canvas
18 | {
19 |   display: block;
20 |   position: absolute;
21 |   width: 128px;
22 |   height: 128px;
23 |   
24 |   -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
25 | 	-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
26 | 	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
27 | 	
28 | 	-webkit-border-radius: 10px;
29 | 	-moz-border-radius: 10px;
30 | 	border-radius: 10px;
31 | 	
32 | 	cursor: pointer;	
33 | }
34 | 
35 | @font-face 
36 | {
37 |   font-family: Vanilla;
38 |   src: url("../fonts/Vanilla.ttf");
39 | }
40 | 
41 | p
42 | {
43 |   font-family: Vanilla;
44 |   font-size: 20px;
45 |   padding: 20px;
46 | }


--------------------------------------------------------------------------------
/Code - Published/chapter06/monsterStates.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter06/monsterStates.png


--------------------------------------------------------------------------------
/Code - Published/chapter06/monsterTileSheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter06/monsterTileSheet.png


--------------------------------------------------------------------------------
/Code - Published/chapter07/11_screenWrapping.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Screen wrapping</title>
  3 | 
  4 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
  5 | 
  6 | <script src="requestAnimationFramePolyfill.js"></script>
  7 | <script>
  8 | 
  9 | //--- The sprite object
 10 | 
 11 | var spriteObject =
 12 | {
 13 |   sourceX: 0,
 14 |   sourceY: 0,
 15 |   sourceWidth: 64,
 16 |   sourceHeight: 64,
 17 |   x: 0,
 18 |   y: 0,
 19 |   width: 64,
 20 |   height: 64,
 21 |   vx: 0,
 22 |   vy: 0
 23 | };
 24 | 
 25 | //--- The main program
 26 | 
 27 | //The canvas and its drawing surface
 28 | var canvas = document.querySelector("canvas");
 29 | var drawingSurface = canvas.getContext("2d");
 30 | 
 31 | //An array to store the sprites
 32 | var sprites = [];
 33 | 
 34 | //Create the cat sprite and center it
 35 | var cat = Object.create(spriteObject);
 36 | cat.x = 243;
 37 | cat.y = 168;
 38 | sprites.push(cat);
 39 | 
 40 | //Load the image
 41 | var image = new Image();
 42 | image.addEventListener("load", loadHandler, false);
 43 | image.src = "cat.png";
 44 | 
 45 | //Arrow key codes
 46 | var UP = 38;
 47 | var DOWN = 40;
 48 | var RIGHT = 39;
 49 | var LEFT = 37;
 50 | 
 51 | //Directions
 52 | var moveUp = false;
 53 | var moveDown = false;
 54 | var moveRight = false;
 55 | var moveLeft = false;
 56 | 
 57 | //Add keyboard listeners
 58 | window.addEventListener("keydown", function(event)
 59 | {
 60 |   switch(event.keyCode)
 61 |   {
 62 |     case UP:
 63 | 	    moveUp = true;
 64 | 	    break;
 65 | 	  
 66 | 	  case DOWN:
 67 | 	    moveDown = true;
 68 | 	    break;
 69 | 	    
 70 | 	  case LEFT:
 71 | 	    moveLeft = true;
 72 | 	    break;  
 73 | 	    
 74 | 	  case RIGHT:
 75 | 	    moveRight = true;
 76 | 	    break; 
 77 |   }
 78 | }, false);
 79 | 
 80 | window.addEventListener("keyup", function(event)
 81 | {
 82 |   switch(event.keyCode)
 83 |   {
 84 |     case UP:
 85 | 	    moveUp = false;
 86 | 	    break;
 87 | 	  
 88 | 	  case DOWN:
 89 | 	    moveDown = false;
 90 | 	    break;
 91 | 	    
 92 | 	  case LEFT:
 93 | 	    moveLeft = false;
 94 | 	    break;  
 95 | 	    
 96 | 	  case RIGHT:
 97 | 	    moveRight = false;
 98 | 	    break; 
 99 |   }
100 | }, false);
101 | 
102 | function loadHandler()
103 | { 
104 |   update();
105 | }
106 | 
107 | function update()
108 | {
109 |   //The animation loop
110 |   requestAnimationFrame(update, canvas);
111 |   
112 |   //Up
113 |   if(moveUp && !moveDown)
114 |   {
115 |     cat.vy = -5;
116 |   }
117 |   //Down
118 |   if(moveDown && !moveUp)
119 |   {
120 |     cat.vy = 5;
121 |   }
122 |   //Left
123 |   if(moveLeft && !moveRight)
124 |   {
125 |     cat.vx = -5;
126 |   }
127 |   //Right
128 |   if(moveRight && !moveLeft)
129 |   {
130 |     cat.vx = 5;
131 |   }
132 |   
133 |   //Set the cat's velocity to zero if none of the keys are being pressed
134 |   if(!moveUp && !moveDown)
135 |   {
136 |     cat.vy = 0;
137 |   }
138 |   if(!moveLeft && !moveRight)
139 |   {
140 |     cat.vx = 0;
141 |   }
142 |   	
143 |   //Move the cat
144 |   cat.x += cat.vx;
145 |   cat.y += cat.vy;
146 |   
147 |   //Screen wrapping
148 |   if(cat.x + cat.width < 0)
149 |   {
150 |     cat.x = 550;
151 |   }
152 |   if(cat.y + cat.height < 0)
153 |   {
154 |     cat.y = 400;
155 |   }
156 |   if(cat.x > canvas.width)
157 |   {
158 |     cat.x = 0 - cat.width;
159 |   }
160 |   if(cat.y > canvas.height)
161 |   {
162 |     cat.y = 0 - cat.height;
163 |   }
164 |   
165 |   //Render the sprite
166 |   render();
167 | }
168 | 
169 | function render()
170 | { 
171 |   //Clear the previous animation frame
172 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
173 |   
174 |   //Loop through all the sprites and use 
175 |   //their properties to display them
176 |   if(sprites.length !== 0)
177 |   {
178 |     for(var i = 0; i < sprites.length; i++)
179 |     {
180 |       var sprite = sprites[i];
181 |       drawingSurface.drawImage
182 |       (
183 |         image, 
184 |         sprite.sourceX, sprite.sourceY, 
185 |         sprite.sourceWidth, sprite.sourceHeight,
186 |         Math.floor(sprite.x), Math.floor(sprite.y), 
187 |         sprite.width, sprite.height
188 |       ); 
189 |     }
190 |   }
191 | }
192 | 
193 | </script>
194 | 


--------------------------------------------------------------------------------
/Code - Published/chapter07/15_mouseControl.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Mouse control</title>
  3 | 
  4 | <style>
  5 | 
  6 | /*
  7 | Offset the canvas by 50 pixels to test
  8 | Whether this code can find the correct mouse
  9 | position on the canvas
 10 | */
 11 | 
 12 | canvas
 13 | {
 14 |   margin-left: 50px;
 15 |   margin-top: 50px;
 16 | }
 17 | 
 18 | </style>
 19 | 
 20 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
 21 | 
 22 | <script src="requestAnimationFramePolyfill.js"></script>
 23 | <script>
 24 | 
 25 | //--- The sprite object
 26 | 
 27 | var spriteObject =
 28 | {
 29 |   sourceX: 0,
 30 |   sourceY: 0,
 31 |   sourceWidth: 64,
 32 |   sourceHeight: 64,
 33 |   x: 0,
 34 |   y: 0,
 35 |   height: 64,
 36 |   width: 64,
 37 |   vx: 0,
 38 |   vy: 0
 39 | };
 40 | 
 41 | //--- The main program
 42 | 
 43 | //The canvas and its drawing surface
 44 | var canvas = document.querySelector("canvas");
 45 | var drawingSurface = canvas.getContext("2d");
 46 | 
 47 | //An array to store the sprites
 48 | var sprites = [];
 49 | 
 50 | //Create the cat sprite and center it
 51 | var cat = Object.create(spriteObject);
 52 | cat.x = 243;
 53 | cat.y = 168;
 54 | sprites.push(cat);
 55 | 
 56 | //Load the image
 57 | var image = new Image();
 58 | image.src = "cat.png";
 59 | image.addEventListener("load", loadHandler, false);
 60 | 
 61 | //Add a mouse listener
 62 | canvas.addEventListener("mousedown", mousedownHandler, false);
 63 | window.addEventListener("mouseup", mouseupHandler, false);
 64 | 
 65 | function mousedownHandler(event)
 66 | { 
 67 |   //Find the mouse's x and y position
 68 |   var mouseX = event.pageX - canvas.offsetLeft;
 69 |   var mouseY = event.pageY - canvas.offsetTop;
 70 |     
 71 |   //Define the cat's 4 sides
 72 |   var left = cat.x;
 73 |   var right = cat.x + cat.width;
 74 |   var top = cat.y;
 75 |   var bottom = cat.y + cat.height;
 76 |   
 77 |   //Change the velocity based on the mouse's relative position to the cat
 78 |   if(mouseX < left)
 79 |   {
 80 |     cat.vx -= 5;
 81 |   }
 82 |   if(mouseX > right)
 83 |   {
 84 |     cat.vx += 5;
 85 |   }
 86 |   if(mouseY < top)
 87 |   {
 88 |     cat.vy -= 5;
 89 |   }
 90 |   if(mouseY > bottom)
 91 |   {
 92 |     cat.vy += 5;
 93 |   }
 94 | }
 95 | 
 96 | function mouseupHandler(event)
 97 | { 
 98 |   cat.vx = 0; 
 99 |   cat.vy = 0;
100 | }
101 | 
102 | function loadHandler()
103 | { 
104 |   update();
105 | }
106 | 
107 | function update()
108 | {
109 |   //The animation loop
110 |   requestAnimationFrame(update, canvas);
111 |   
112 |   //Move the cat
113 |   cat.x += cat.vx;
114 |   cat.y += cat.vy;
115 |   
116 |   //Stop the cat at the canvas edges
117 |   if (cat.x < 0)
118 |   {
119 |     cat.x = 0;
120 |   }
121 |   if (cat.y < 0)
122 |   {
123 |     cat.y = 0;
124 |   }
125 |   if (cat.x + cat.width > canvas.width)
126 |   {
127 |     cat.x = canvas.width - cat.width;
128 |   }
129 |   if (cat.y + cat.height > canvas.height)
130 |   {
131 |     cat.y = canvas.height - cat.height;
132 |   }
133 |   
134 |   //Render the sprite
135 |   render();
136 | }
137 | 
138 | function render()
139 | { 
140 |   //Clear the previous animation frame
141 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
142 |   
143 |   //Loop through all the sprites and use 
144 |   //their properties to display them
145 |   if(sprites.length !== 0)
146 |   {
147 |     for(var i = 0; i < sprites.length; i++)
148 |     {
149 |       var sprite = sprites[i];
150 |       drawingSurface.drawImage
151 |       (
152 |         image, 
153 |         sprite.sourceX, sprite.sourceY, 
154 |         sprite.sourceWidth, sprite.sourceHeight,
155 |         Math.floor(sprite.x), Math.floor(sprite.y), 
156 |         sprite.width, sprite.height
157 |       ); 
158 |     }
159 |   }
160 | }
161 | 
162 | </script>
163 | 


--------------------------------------------------------------------------------
/Code - Published/chapter07/16_touchControl.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Touch control</title>
  3 | 
  4 | <style>
  5 | 
  6 | /*
  7 | Offset the canvas by 50 pixels to test
  8 | Whether this code can find the correct mouse
  9 | position on the canvas
 10 | */
 11 | 
 12 | canvas
 13 | {
 14 |   margin-left: 50px;
 15 |   margin-top: 50px;
 16 | }
 17 | 
 18 | </style>
 19 | 
 20 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
 21 | <p id="output"></p>
 22 | 
 23 | <script src="requestAnimationFramePolyfill.js"></script>
 24 | <script>
 25 | 
 26 | //--- The sprite object
 27 | 
 28 | var spriteObject =
 29 | {
 30 |   sourceX: 0,
 31 |   sourceY: 0,
 32 |   sourceWidth: 64,
 33 |   sourceHeight: 64,
 34 |   x: 0,
 35 |   y: 0,
 36 |   height: 64,
 37 |   width: 64,
 38 |   vx: 0,
 39 |   vy: 0
 40 | };
 41 | 
 42 | //--- The main program
 43 | 
 44 | //The canvas and its drawing surface
 45 | var canvas = document.querySelector("canvas");
 46 | var drawingSurface = canvas.getContext("2d");
 47 | 
 48 | var output = document.querySelector("#output");
 49 | 
 50 | //An array to store the sprites
 51 | var sprites = [];
 52 | 
 53 | //Create the cat sprite and center it
 54 | var cat = Object.create(spriteObject);
 55 | cat.x = 243;
 56 | cat.y = 168;
 57 | sprites.push(cat);
 58 | 
 59 | //Load the image
 60 | var image = new Image();
 61 | image.src = "cat.png";
 62 | image.addEventListener("load", loadHandler, false);
 63 | 
 64 | //Add a mouse listener
 65 | canvas.addEventListener("touchstart", touchstartHandler, false);
 66 | window.addEventListener("touchend", touchendHandler, false);
 67 | 
 68 | function touchstartHandler(event)
 69 | { 
 70 |   //Find the touch point's x and y position
 71 |   var touchX = event.pageX - canvas.offsetLeft;
 72 |   var touchY = event.pageY - canvas.offsetTop;
 73 |   
 74 |   //display the touch point's x and y positions in the output
 75 |   output.innerHTML = touchX;  
 76 |   output.innerHTML += ", " + touchY;  
 77 |   
 78 |   //Define the cat's 4 sides
 79 |   var left = cat.x;
 80 |   var right = cat.x + cat.width;
 81 |   var top = cat.y;
 82 |   var bottom = cat.y + cat.height;
 83 |   
 84 |   //Change the velocity based on the touch point's relative position to the cat
 85 |   if(touchX < left)
 86 |   {
 87 |     cat.vx -= 5;
 88 |   }
 89 |   if(touchX > right)
 90 |   {
 91 |     cat.vx += 5;
 92 |   }
 93 |   if(touchY < top)
 94 |   {
 95 |     cat.vy -= 5;
 96 |   }
 97 |   if(touchY > bottom)
 98 |   {
 99 |     cat.vy += 5;
100 |   }
101 |   
102 |   //Prevent the canvas from being selected
103 |   event.preventDefault();
104 | }
105 | 
106 | function touchendHandler(event)
107 | { 
108 |   cat.vx = 0; 
109 |   cat.vy = 0;
110 |   
111 |   event.preventDefault();
112 | }
113 | 
114 | function loadHandler()
115 | { 
116 |   update();
117 | }
118 | 
119 | function update()
120 | {
121 |   //The animation loop
122 |   requestAnimationFrame(update, canvas);
123 |   
124 |   //Move the cat
125 |   cat.x += cat.vx;
126 |   cat.y += cat.vy;
127 |   
128 |   //Stop the cat at the canvas edges
129 |   if (cat.x < 0)
130 |   {
131 |     cat.x = 0;
132 |   }
133 |   if (cat.y < 0)
134 |   {
135 |     cat.y = 0;
136 |   }
137 |   if (cat.x + cat.width > canvas.width)
138 |   {
139 |     cat.x = canvas.width - cat.width;
140 |   }
141 |   if (cat.y + cat.height > canvas.height)
142 |   {
143 |     cat.y = canvas.height - cat.height;
144 |   }
145 |   
146 |   //Render the sprite
147 |   render();
148 | }
149 | 
150 | function render()
151 | { 
152 |   //Clear the previous animation frame
153 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
154 |   
155 |   //Loop through all the sprites and use 
156 |   //their properties to display them
157 |   if(sprites.length !== 0)
158 |   {
159 |     for(var i = 0; i < sprites.length; i++)
160 |     {
161 |       var sprite = sprites[i];
162 |       drawingSurface.drawImage
163 |       (
164 |         image, 
165 |         sprite.sourceX, sprite.sourceY, 
166 |         sprite.sourceWidth, sprite.sourceHeight,
167 |         Math.floor(sprite.x), Math.floor(sprite.y), 
168 |         sprite.width, sprite.height
169 |       ); 
170 |     }
171 |   }
172 | }
173 | 
174 | </script>
175 | 


--------------------------------------------------------------------------------
/Code - Published/chapter07/1_basicSprite.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Basic sprite</title>
 3 | 
 4 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
 5 | 
 6 | <script src="requestAnimationFramePolyfill.js"></script>
 7 | <script>
 8 | 
 9 | //--- The sprite object
10 | 
11 | var spriteObject =
12 | {
13 |   //The x and y source position of the sprite's image
14 |   //And its height and width
15 |   sourceX: 0,
16 |   sourceY: 0,
17 |   sourceWidth: 64,
18 |   sourceHeight: 64,
19 |   
20 |   //The x and y position of the sprite on the canvas
21 |   //as well as its height
22 |   x: 0,
23 |   y: 0,
24 |   width: 64,
25 |   height: 64
26 | };
27 | 
28 | //--- The main program
29 | 
30 | //the canvas and its drawing surface
31 | var canvas = document.querySelector("canvas");
32 | var drawingSurface = canvas.getContext("2d");
33 | 
34 | //An array to store the game sprites
35 | var sprites = [];
36 | 
37 | //Create the cat sprite.
38 | //Center it on the canvas and push it into the sprites array
39 | var cat = Object.create(spriteObject);
40 | cat.x = 0;
41 | //cat.y = 168;
42 | cat.y = canvas.height / 2 - cat.height / 2;
43 | cat.x = canvas.width / 2 - cat.width / 2;
44 | sprites.push(cat);
45 | 
46 | //Load the cat's image 
47 | var image = new Image();
48 | image.addEventListener("load", loadHandler, false);
49 | image.src = "cat.png";
50 | 
51 | function loadHandler()
52 | {
53 |   //Update the sprite as soon as the
54 |   //image has been loaded
55 |   update();
56 | }
57 | 
58 | function update()
59 | {
60 |   //Create the animation loop
61 |   requestAnimationFrame(update, canvas);
62 |   
63 |   //Change the sprite's x position
64 |   //to make it move to the right across the canvas
65 |   cat.x++;
66 |   
67 |   render();
68 | }
69 | 
70 | function render()
71 | { 
72 |   //Clear the previous animation frame
73 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
74 |   
75 |   //Loop through all the sprites and use 
76 |   //their properties to display them
77 |   if(sprites.length !== 0)
78 |   {
79 |     for(var i = 0; i < sprites.length; i++)
80 |     {
81 |       var sprite = sprites[i];
82 |       drawingSurface.drawImage
83 |       (
84 |         image, 
85 |         sprite.sourceX, sprite.sourceY, 
86 |         sprite.sourceWidth, sprite.sourceHeight,
87 |         Math.floor(sprite.x), Math.floor(sprite.y), 
88 |         sprite.width, sprite.height
89 |       ); 
90 |     }
91 |   }
92 | }
93 | 
94 | </script>
95 | 


--------------------------------------------------------------------------------
/Code - Published/chapter07/2_manySprites.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Many sprites</title>
  3 | 
  4 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
  5 | 
  6 | <script src="requestAnimationFramePolyfill.js"></script>
  7 | <script>
  8 | 
  9 | //--- The sprite object
 10 | 
 11 | var spriteObject =
 12 | {
 13 |   //The x and y source position of the sprite's image
 14 |   //And its height and width
 15 |   sourceX: 0,
 16 |   sourceY: 0,
 17 |   sourceWidth: 64,
 18 |   sourceHeight: 64,
 19 |   
 20 |   //The x and y position of the sprite on the canvas
 21 |   //as well as its height
 22 |   x: 0,
 23 |   y: 0,
 24 |   width: 64,
 25 |   height: 64
 26 | };
 27 | 
 28 | //--- The main program
 29 | 
 30 | //the canvas and its drawing surface
 31 | var canvas = document.querySelector("canvas");
 32 | var drawingSurface = canvas.getContext("2d");
 33 | 
 34 | //An array to store the game sprites
 35 | var sprites = [];
 36 | 
 37 | //Create the background sprite, position it
 38 | //and push it into the sprites array
 39 | 
 40 | var background = Object.create(spriteObject);
 41 | background.sourceY = 64;
 42 | background.sourceWidth = 550;
 43 | background.sourceHeight = 400;
 44 | background.width = 550;
 45 | background.height = 400;
 46 | background.x = 0;
 47 | background.y = 0;
 48 | sprites.push(background);
 49 | 
 50 | //Create the cat sprite.
 51 | //Center it on the canvas and push it into the sprites array
 52 | var cat = Object.create(spriteObject);
 53 | cat.x = 0;
 54 | cat.y = 168;
 55 | sprites.push(cat);
 56 | 
 57 | //Create the tiger sprite, position it
 58 | //and push it into the sprites array
 59 | var tiger = Object.create(spriteObject);
 60 | tiger.sourceX = 64;
 61 | tiger.x = 300;
 62 | tiger.y = 336;
 63 | sprites.push(tiger);
 64 | 
 65 | //Load the cat's image 
 66 | var image = new Image();
 67 | image.addEventListener("load", loadHandler, false);
 68 | image.src = "tileSheetWithBackground.png";
 69 | 
 70 | function loadHandler()
 71 | {
 72 |   //Update the sprite as soon as the image has been loaded
 73 |   update();
 74 | }
 75 | 
 76 | function update()
 77 | {
 78 |   //Create the animation loop
 79 |   requestAnimationFrame(update, canvas);
 80 |   
 81 |   //Make the cat move right
 82 |   cat.x++;
 83 |   
 84 |   //Make the tiger move up
 85 |   tiger.y--;
 86 |   
 87 |   //Render the game
 88 |   render();
 89 | }
 90 | 
 91 | function render()
 92 | { 
 93 |   //Clear the previous animation frame
 94 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
 95 |   
 96 |   //Loop through all the sprites and use 
 97 |   //their properties to display them
 98 |   if(sprites.length !== 0)
 99 |   {
100 |     for(var i = 0; i < sprites.length; i++)
101 |     {
102 |       var sprite = sprites[i];
103 |       drawingSurface.drawImage
104 |       (
105 |         image, 
106 |         sprite.sourceX, sprite.sourceY, 
107 |         sprite.sourceWidth, sprite.sourceHeight,
108 |         Math.floor(sprite.x), Math.floor(sprite.y), 
109 |         sprite.width, sprite.height
110 |       ); 
111 |     }
112 |   }
113 | }
114 | 
115 | </script>
116 | 


--------------------------------------------------------------------------------
/Code - Published/chapter07/3_manyImageFiles.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Many Image files</title>
  3 | 
  4 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
  5 | 
  6 | <script src="requestAnimationFramePolyfill.js"></script>
  7 | <script>
  8 | 
  9 | //--- The sprite object
 10 | 
 11 | var spriteObject =
 12 | {
 13 |   //The name of the sprite's image file
 14 |   image: "",
 15 |   
 16 |   //The x and y source position of the image
 17 |   //And its height and width
 18 |   sourceX: 0,
 19 |   sourceY: 0,
 20 |   sourceWidth: 64,
 21 |   sourceHeight: 64,
 22 |   
 23 |   //Its destination height and width, and x and y position
 24 |   width: 64,
 25 |   height: 64,
 26 |   x: 0,
 27 |   y: 0,
 28 | };
 29 | 
 30 | //--- The main program
 31 | 
 32 | //the canvas and its drawing surfave
 33 | var canvas = document.querySelector("canvas");
 34 | var drawingSurface = canvas.getContext("2d");
 35 | 
 36 | //An array to store the sprites
 37 | var sprites = [];
 38 | 
 39 | //An array to store the images that will be loaded and
 40 | //a variable that will used to count them as they load
 41 | var assetsToLoad = [];
 42 | var assetsLoaded = 0;
 43 | 
 44 | //Create the background sprite.
 45 | //Position it at the top left corner of the canvas 
 46 | //and push it into the sprites array
 47 | var background = Object.create(spriteObject);
 48 | background.sourceWidth = 550;
 49 | background.sourceHeight = 400;
 50 | background.width = 550;
 51 | background.height = 400;
 52 | background.x = 0;
 53 | background.y = 0;
 54 | sprites.push(background);
 55 | 
 56 | //Create the background image and push it into the images array
 57 | var backgroundImage = new Image();
 58 | backgroundImage.addEventListener("load", loadHandler, false);
 59 | backgroundImage.src = "background.png";
 60 | assetsToLoad.push(backgroundImage);
 61 | 
 62 | //Create the cat sprite.
 63 | //Position it on the canvas and push it into the sprites array
 64 | var cat = Object.create(spriteObject);
 65 | cat.x = 0;
 66 | cat.y = 168;
 67 | sprites.push(cat);
 68 | 
 69 | //Create the cat image and push it into the images array
 70 | var catImage = new Image();
 71 | catImage.addEventListener("load", loadHandler, false);
 72 | catImage.src = "cat.png";
 73 | assetsToLoad.push(catImage);
 74 | 
 75 | //Create the tiger sprite, position it
 76 | //and push it into the sprites array
 77 | var tiger = Object.create(spriteObject);
 78 | tiger.x = 300;
 79 | tiger.y = 336;
 80 | sprites.push(tiger);
 81 | 
 82 | //Create the tiger image and push it into the images array
 83 | var tigerImage = new Image();
 84 | tigerImage.addEventListener("load", loadHandler, false);
 85 | tigerImage.src = "tiger.png";
 86 | assetsToLoad.push(tigerImage);
 87 | 
 88 | function loadHandler()
 89 | {
 90 |   //Each time an image loads, 1 is added to assetsLoaded
 91 |   assetsLoaded++;
 92 |   
 93 |   //When assetsLoaded matches the number of images in the
 94 |   //assetsToLoad array, a loop assigns the image to the sprite
 95 |   if(assetsLoaded === assetsToLoad.length)
 96 |   {
 97 |     //Assign the images to the sprites
 98 |     for(var i = 0; i < assetsToLoad.length; i++)
 99 |     {
100 |       sprites[i].image = assetsToLoad[i];
101 |     }
102 |     
103 |     //Call the update function to start the animation
104 |     update();
105 |   }
106 | }
107 | 
108 | function update()
109 | {
110 |   //Set this update function to loop at 60 frames per second
111 |   requestAnimationFrame(update, canvas);
112 |   
113 |   //Make the cat move right
114 |   cat.x++;
115 |   
116 |   //Make the tiger move up
117 |   tiger.y--;
118 |   
119 |   //Render the game
120 |   render();
121 | }
122 | 
123 | function render()
124 | { 
125 |   //Clear the previous animation frame
126 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
127 |   
128 |   //Loop through all the sprites and use 
129 |   //their properties to display them
130 |   if(sprites.length !== 0)
131 |   {
132 |     for(var i = 0; i < sprites.length; i++)
133 |     {
134 |       var sprite = sprites[i];
135 |       drawingSurface.drawImage
136 |       (
137 |         sprite.image, 
138 |         sprite.sourceX, sprite.sourceY, 
139 |         sprite.sourceWidth, sprite.sourceHeight,
140 |         Math.floor(sprite.x), Math.floor(sprite.y), 
141 |         sprite.width, sprite.height
142 |       ); 
143 |     }
144 |   }
145 | }
146 | 
147 | </script>
148 | 


--------------------------------------------------------------------------------
/Code - Published/chapter07/9_keyboardControl.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Keyboard control</title>
  3 | 
  4 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
  5 | 
  6 | <script src="requestAnimationFramePolyfill.js"></script>
  7 | <script>
  8 | 
  9 | //--- The sprite object
 10 | 
 11 | var spriteObject =
 12 | {
 13 |   sourceX: 0,
 14 |   sourceY: 0,
 15 |   sourceWidth: 64,
 16 |   sourceHeight: 64,
 17 |   x: 0,
 18 |   y: 0,
 19 |   width: 64,
 20 |   height: 64,
 21 |   vx: 0,
 22 |   vy: 0
 23 | };
 24 | 
 25 | //--- The main program
 26 | 
 27 | //The canvas and its drawing surface
 28 | var canvas = document.querySelector("canvas");
 29 | var drawingSurface = canvas.getContext("2d");
 30 | 
 31 | //An array to store the sprites
 32 | var sprites = [];
 33 | 
 34 | //Create the cat sprite and center it
 35 | var cat = Object.create(spriteObject);
 36 | cat.x = 243;
 37 | cat.y = 168;
 38 | sprites.push(cat);
 39 | 
 40 | //Load the image
 41 | var image = new Image();
 42 | image.addEventListener("load", loadHandler, false);
 43 | image.src = "cat.png";
 44 | 
 45 | //Arrow key codes
 46 | var UP = 38;
 47 | var DOWN = 40;
 48 | var RIGHT = 39;
 49 | var LEFT = 37;
 50 | 
 51 | //Directions
 52 | var moveUp = false;
 53 | var moveDown = false;
 54 | var moveRight = false;
 55 | var moveLeft = false;
 56 | 
 57 | //Add keyboard listeners
 58 | window.addEventListener("keydown", function(event)
 59 | {
 60 |   switch(event.keyCode)
 61 |   {
 62 |     case UP:
 63 | 	    moveUp = true;
 64 | 	    break;
 65 | 	  
 66 | 	  case DOWN:
 67 | 	    moveDown = true;
 68 | 	    break;
 69 | 	    
 70 | 	  case LEFT:
 71 | 	    moveLeft = true;
 72 | 	    break;  
 73 | 	    
 74 | 	  case RIGHT:
 75 | 	    moveRight = true;
 76 | 	    break; 
 77 |   }
 78 | }, false);
 79 | 
 80 | window.addEventListener("keyup", function(event)
 81 | {
 82 |   switch(event.keyCode)
 83 |   {
 84 |     case UP:
 85 | 	    moveUp = false;
 86 | 	    break;
 87 | 	  
 88 | 	  case DOWN:
 89 | 	    moveDown = false;
 90 | 	    break;
 91 | 	    
 92 | 	  case LEFT:
 93 | 	    moveLeft = false;
 94 | 	    break;  
 95 | 	    
 96 | 	  case RIGHT:
 97 | 	    moveRight = false;
 98 | 	    break; 
 99 |   }
100 | }, false);
101 | 
102 | function loadHandler()
103 | { 
104 |   update();
105 | }
106 | 
107 | function update()
108 | {
109 |   //The animation loop
110 |   requestAnimationFrame(update, canvas);
111 |   
112 |   //Up
113 |   if(moveUp && !moveDown)
114 |   {
115 |     cat.vy = -5;
116 |   }
117 |   //Down
118 |   if(moveDown && !moveUp)
119 |   {
120 |     cat.vy = 5;
121 |   }
122 |   //Left
123 |   if(moveLeft && !moveRight)
124 |   {
125 |     cat.vx = -5;
126 |   }
127 |   //Right
128 |   if(moveRight && !moveLeft)
129 |   {
130 |     cat.vx = 5;
131 |   }
132 |   
133 |   //Set the cat's velocity to zero if none of the keys are being pressed
134 |   if(!moveUp && !moveDown)
135 |   {
136 |     cat.vy = 0;
137 |   }
138 |   if(!moveLeft && !moveRight)
139 |   {
140 |     cat.vx = 0;
141 |   }
142 |   	
143 |   //Move the cat
144 |   cat.x += cat.vx;
145 |   cat.y += cat.vy;
146 |   
147 |   //Render the sprite
148 |   render();
149 | }
150 | 
151 | function render()
152 | { 
153 |   //Clear the previous animation frame
154 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
155 |   
156 |   //Loop through all the sprites and use 
157 |   //their properties to display them
158 |   if(sprites.length !== 0)
159 |   {
160 |     for(var i = 0; i < sprites.length; i++)
161 |     {
162 |       var sprite = sprites[i];
163 |       drawingSurface.drawImage
164 |       (
165 |         image, 
166 |         sprite.sourceX, sprite.sourceY, 
167 |         sprite.sourceWidth, sprite.sourceHeight,
168 |         Math.floor(sprite.x), Math.floor(sprite.y), 
169 |         sprite.width, sprite.height
170 |       ); 
171 |     }
172 |   }
173 | }
174 | 
175 | </script>
176 | 


--------------------------------------------------------------------------------
/Code - Published/chapter07/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter07/background.png


--------------------------------------------------------------------------------
/Code - Published/chapter07/basicScrolling_Old.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Basic scrolling</title>
  3 | 
  4 | <canvas width="550" height="400" style="border: 1px dashed black">
  5 | 
  6 | <script>
  7 | 
  8 | //--- The sprite object
  9 | 
 10 | var sprite =
 11 | {
 12 |   sourceX: 0,
 13 |   sourceY: 0,
 14 |   sourceWidth: 64,
 15 |   sourceHeight: 64,
 16 |   x: 0,
 17 |   y: 0,
 18 |   height: 64,
 19 |   width: 64
 20 | };
 21 | 
 22 | //--- The main program
 23 | 
 24 | //the canvas and its drawing surfave
 25 | var canvas = document.querySelector("canvas");
 26 | var drawingSurface = canvas.getContext("2d");
 27 | 
 28 | //An array to store the sprites
 29 | var sprites = [];
 30 | 
 31 | //Create the background sprite
 32 | var background = Object.create(spriteObject);
 33 | background.sourceY = 64;
 34 | background.sourceWidth = 2561;
 35 | background.sourceHeight = 1922;
 36 | background.width = 2561;
 37 | background.height = 1922;
 38 | background.x = -(background.width - canvas.width) / 2; 
 39 | background.y = -(background.height - canvas.height) / 2;
 40 | sprites.push(background);
 41 | 
 42 | //Create the cat sprite and center it
 43 | var cat = Object.create(spriteObject);
 44 | cat.x = 243;
 45 | cat.y = 168;
 46 | sprites.push(cat);
 47 | 
 48 | //Load the image
 49 | var image = new Image();
 50 | image.src = "phobosTileSheet.png";
 51 | image.addEventListener("load", loadHandler, false);
 52 | 
 53 | //Add a keyboard listener
 54 | window.addEventListener("keydown", keydownHandler, false);
 55 | window.addEventListener("keyup", keyupHandler, false);
 56 | 
 57 | //Arrow key codes
 58 | var UP = 38;
 59 | var DOWN = 40;
 60 | var RIGHT = 39;
 61 | var LEFT = 37;
 62 | 
 63 | //General vx and vy variables to 
 64 | //control the movement of the cat and background
 65 | var vx = 0;
 66 | var vy = 0;
 67 | 
 68 | function keydownHandler(event)
 69 | { 
 70 |   switch(event.keyCode)
 71 |   {
 72 |     case UP:
 73 | 	    vy = -5;
 74 | 	    break;
 75 | 	  
 76 | 	  case DOWN:
 77 | 	    vy = 5;
 78 | 	    break;
 79 | 	    
 80 | 	  case LEFT:
 81 | 	    vx = -5;
 82 | 	    break;  
 83 | 	    
 84 | 	  case RIGHT:
 85 | 	    vx = 5;
 86 | 	    break; 
 87 |   }
 88 | }
 89 | 
 90 | function keyupHandler(event)
 91 | { 
 92 |   if(event.keyCode === LEFT
 93 |   || event.keyCode === RIGHT)
 94 |   {
 95 |     vx = 0; 
 96 |   }
 97 |   else if(event.keyCode === DOWN
 98 |   || event.keyCode === UP)
 99 |   {
100 |     vy = 0;
101 |   }
102 | }
103 | 
104 | function loadHandler()
105 | {
106 |   update();
107 | }
108 | 
109 | function update()
110 | {
111 |   //Start the animation loop
112 |   setTimeout(update, 16);
113 |   
114 |   //Move the background
115 |   background.x += -vx;
116 |   background.y += -vy;
117 |   
118 |   //Check the canvas boundaries and prevent the 
119 |   //background from crossing them
120 |   if (background.x > 0)
121 |   {
122 |     background.x = 0;
123 |   }
124 |   if (background.y > 0)
125 |   {
126 |     background.y = 0;
127 |   }
128 |   if (background.x < canvas.width - background.width)
129 |   {
130 |     background.x = canvas.width - background.width;
131 |   }
132 |   if (background.y < canvas.height - background.height)
133 |   {
134 |     background.y = canvas.height - background.height;
135 |   }
136 | 
137 |   render();
138 | }
139 | 
140 | function render(event)
141 | { 
142 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
143 |   
144 |   for(var i = 0; i < sprites.length; i++)
145 |   {
146 |      var sprite = sprites[i];
147 |      drawingSurface.drawImage
148 |      (
149 |        image, 
150 |        sprite.sourceX, sprite.sourceY, 
151 |        sprite.sourceWidth, sprite.sourceHeight,
152 |        sprite.x, sprite.y, 
153 |        sprite.width, sprite.height
154 |      ); 
155 |   }
156 | }
157 | </script>
158 | 


--------------------------------------------------------------------------------
/Code - Published/chapter07/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter07/cat.png


--------------------------------------------------------------------------------
/Code - Published/chapter07/parallaxScrollingTileSheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter07/parallaxScrollingTileSheet.png


--------------------------------------------------------------------------------
/Code - Published/chapter07/phobosTileSheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter07/phobosTileSheet.png


--------------------------------------------------------------------------------
/Code - Published/chapter07/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter07/tiger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter07/tiger.png


--------------------------------------------------------------------------------
/Code - Published/chapter07/tileSheetWithBackground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter07/tileSheetWithBackground.png


--------------------------------------------------------------------------------
/Code - Published/chapter08/1_pointCollision.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Point collision</title>
  3 | <meta charset="utf-8">
  4 | 
  5 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
  6 | 
  7 | <script src="requestAnimationFramePolyfill.js"></script>
  8 | <script>
  9 | 
 10 | //--- The sprite object
 11 | 
 12 | var spriteObject =
 13 | {
 14 |   sourceX: 0,
 15 |   sourceY: 0,
 16 |   sourceWidth: 64,
 17 |   sourceHeight: 64,
 18 |   x: 0,
 19 |   y: 0,
 20 |   width: 64,
 21 |   height: 64,
 22 |   
 23 |   //Getters to define the
 24 |   //left, right, top and bottom sides
 25 |   left: function()
 26 |   {
 27 |     return this.x;
 28 |   },
 29 |   right: function()
 30 |   {
 31 |     return this.x + this.width;
 32 |   },
 33 |   top: function()
 34 |   {
 35 |     return this.y;
 36 |   },
 37 |   bottom: function()
 38 |   {
 39 |     return this.y + this.height;
 40 |   }
 41 | };
 42 | 
 43 | //--- The main program
 44 | 
 45 | //The canvas and its drawing surface
 46 | var canvas = document.querySelector("canvas");
 47 | var drawingSurface = canvas.getContext("2d");
 48 | 
 49 | //Canvas text properties
 50 | drawingSurface.font = "normal bold 18px Helvetica";
 51 | drawingSurface.fillStyle = "#000";
 52 | drawingSurface.textBaseline = "top";
 53 | 
 54 | //An array to store the sprites
 55 | var sprites = [];
 56 | 
 57 | //Create the square and center it
 58 | var square = Object.create(spriteObject);
 59 | square.x = canvas.width / 2 - square.width / 2;
 60 | square.y = canvas.height / 2 - square.height / 2;;
 61 | sprites.push(square);
 62 | 
 63 | //Load the image
 64 | var image = new Image();
 65 | image.addEventListener("load", loadHandler, false);
 66 | image.src = "squares.png";
 67 | 
 68 | //The collision message
 69 | var message = "No collision…";
 70 | 
 71 | //Variables to store the mouse's x and y positions
 72 | var mouseX = 0;
 73 | var mouseY = 0;
 74 | 
 75 | //Add a mousemove event listener
 76 | canvas.addEventListener("mousemove", function(event)
 77 | {
 78 |   
 79 |   //Find the mouse's x and y position on the canvas
 80 |   mouseX = event.pageX - canvas.offsetLeft;
 81 |   mouseY = event.pageY - canvas.offsetTop;
 82 |   
 83 | }, false);
 84 | 
 85 | function loadHandler()
 86 | { 
 87 |   update();
 88 | }
 89 | 
 90 | function update()
 91 | {
 92 |   //The animation loop
 93 |   requestAnimationFrame(update, canvas);
 94 |   
 95 |   //Use hitTestPoint to check for a collision and
 96 |   //return the result (true or false) to the collision variable
 97 |   if(hitTestPoint(mouseX, mouseY, square))
 98 |   {
 99 |     message = "Collision!";
100 |   }
101 |   else
102 |   {
103 |     message = "No Collision…";
104 |   }
105 |   
106 |   //Render the sprites
107 |   render();
108 | }
109 | 
110 | function hitTestPoint(pointX, pointY, sprite)
111 | {  
112 |   var hit 
113 |     = pointX > sprite.left() && pointX < sprite.right()
114 |     && pointY > sprite.top() && pointY < sprite.bottom();
115 |     
116 |   return hit;
117 | }
118 | 
119 | //Alternative way to write the hitTestPoint method
120 | /* 
121 | function hitTestPoint(pointX, pointY, sprite)
122 | {  
123 |   var hit = false;
124 |   
125 |   if(pointX > sprite.left()
126 |   && pointX < sprite.right()
127 |   && pointY > sprite.top()
128 |   && pointY < sprite.bottom())
129 |   {
130 |     hit = true;
131 |   }
132 | 
133 |   return hit;
134 | }
135 | */
136 | 
137 | function render()
138 | { 
139 |   //Clear the previous animation frame
140 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
141 |   
142 |   //Loop through all the sprites and use 
143 |   //their properties to display them
144 |   if(sprites.length !== 0)
145 |   {
146 |     for(var i = 0; i < sprites.length; i++)
147 |     {
148 |       var sprite = sprites[i];
149 |       drawingSurface.drawImage
150 |       (
151 |         image, 
152 |         sprite.sourceX, sprite.sourceY, 
153 |         sprite.sourceWidth, sprite.sourceHeight,
154 |         Math.floor(sprite.x), Math.floor(sprite.y), 
155 |         sprite.width, sprite.height
156 |       ); 
157 |     }
158 |   }
159 |   
160 |   //Display the message text above the square
161 |   drawingSurface.fillText(message, square.x, square.y - 45);
162 | }
163 | 
164 | </script>
165 | 


--------------------------------------------------------------------------------
/Code - Published/chapter08/2_canvasText.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Canvas text</title>
 3 | <meta charset="UTF-8">
 4 | 
 5 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
 6 | 
 7 | <script>
 8 | 
 9 | //The canvas and its drawing surface
10 | var canvas = document.querySelector("canvas");
11 | var drawingSurface = canvas.getContext("2d");
12 | 
13 | //Canvas text properties
14 | drawingSurface.font = "normal bold 24px Helvetica";
15 | drawingSurface.fillStyle = "#000";
16 | drawingSurface.textBaseline = "top";
17 | 
18 | //Display the text
19 | drawingSurface.fillText("Any text to display", 100, 180);
20 | 
21 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter08/catAndBox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter08/catAndBox.png


--------------------------------------------------------------------------------
/Code - Published/chapter08/catAndMonster.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter08/catAndMonster.png


--------------------------------------------------------------------------------
/Code - Published/chapter08/circles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter08/circles.png


--------------------------------------------------------------------------------
/Code - Published/chapter08/collisionTileSheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter08/collisionTileSheet.png


--------------------------------------------------------------------------------
/Code - Published/chapter08/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter08/squares.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter08/squares.png


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/fonts/emulogic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter09/alienArmada/fonts/emulogic.ttf


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/images/alienArmada.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter09/alienArmada/images/alienArmada.png


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/sounds/explosion.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter09/alienArmada/sounds/explosion.mp3


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/sounds/explosion.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter09/alienArmada/sounds/explosion.ogg


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/sounds/music.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter09/alienArmada/sounds/music.mp3


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/sounds/music.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter09/alienArmada/sounds/music.ogg


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/sounds/shoot.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter09/alienArmada/sounds/shoot.mp3


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/sounds/shoot.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter09/alienArmada/sounds/shoot.ogg


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/src/alienArmada.css:
--------------------------------------------------------------------------------
1 | @font-face 
2 | {
3 |   font-family: emulogic;
4 |   src: url("../fonts/emulogic.ttf");
5 | }


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/src/alienArmada.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <title>Alien Armada!</title>
 4 | 
 5 | <!-- The stylesheet -->
 6 | <link rel="stylesheet" href="alienAttack.css">
 7 | 
 8 | <!-- The sounds -->
 9 | <audio id="music">
10 |   <source src="../sounds/music.mp3" type="audio/mpeg" loop>
11 |   <source src="../sounds/music.ogg" type="audio/ogg" loop>
12 | </audio>
13 | <audio id="shootSound">
14 |   <source src="../sounds/shoot.mp3" type="audio/mpeg">
15 |   <source src="../sounds/shoot.ogg" type="audio/ogg">
16 | </audio>
17 | <audio id="explosionSound">
18 |   <source src="../sounds/explosion.mp3" type="audio/mpeg">
19 |   <source src="../sounds/explosion.ogg" type="audio/ogg">
20 | </audio>
21 | 
22 | <!-- The canvas -->
23 | <canvas width="480" height="320"></canvas>
24 | 
25 | <!-- The game code -->
26 | <script src="requestAnimationFramePolyfill.js"></script>
27 | <script src="../src/objects.js"></script>
28 | <script src="../src/collision.js"></script>
29 | 
30 | <!-- Change the JS file below to "alienArmada1.js" to view the first stage in the project -->
31 | <script src="../src/alienArmadaFinished.js"></script>
32 | 


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/src/alienArmada1.js:
--------------------------------------------------------------------------------
  1 | (function(){
  2 | 
  3 | //The canvas
  4 | var canvas = document.querySelector("canvas");
  5 | 
  6 | //Create the drawing surface 
  7 | var drawingSurface = canvas.getContext("2d");
  8 | 
  9 | //Arrays to store the game objects and assets to load
 10 | var sprites = [];
 11 | var assetsToLoad = [];
 12 | 
 13 | //Create the background
 14 | var background = Object.create(spriteObject);
 15 | background.x = 0;
 16 | background.y = 0;
 17 | background.sourceY = 32;
 18 | background.sourceWidth = 480;
 19 | background.sourceHeight = 320;
 20 | background.width = 480;
 21 | background.height = 320;
 22 | sprites.push(background);
 23 | 
 24 | //Create the cannon and center it
 25 | var cannon = Object.create(spriteObject);
 26 | cannon.x = canvas.width / 2 - cannon.width / 2;
 27 | cannon.y = 280;
 28 | sprites.push(cannon);
 29 | 
 30 | //Load the tilesheet image
 31 | var image = new Image();
 32 | image.addEventListener("load", loadHandler, false);
 33 | image.src = "../images/alienArmada.png";
 34 | assetsToLoad.push(image);
 35 | 
 36 | //Variable to count the number of assets the game needs to load
 37 | var assetsLoaded = 0;
 38 | 
 39 | //Game states
 40 | var LOADING = 0
 41 | var PLAYING = 1;
 42 | var OVER = 2;
 43 | var gameState = LOADING;
 44 | 
 45 | //Arrow key codes
 46 | var RIGHT = 39;
 47 | var LEFT = 37;
 48 | 
 49 | //Directions
 50 | var moveRight = false;
 51 | var moveLeft = false;
 52 | 
 53 | //Add keyboard listeners
 54 | window.addEventListener("keydown", function(event)
 55 | {
 56 |   switch(event.keyCode)
 57 |   {
 58 | 	  case LEFT:
 59 | 	    moveLeft = true;
 60 | 	    break;  
 61 | 	    
 62 | 	  case RIGHT:
 63 | 	    moveRight = true;
 64 |   }
 65 | }, false);
 66 | 
 67 | window.addEventListener("keyup", function(event)
 68 | {
 69 |   switch(event.keyCode)
 70 |   {	    
 71 | 	  case LEFT:
 72 | 	    moveLeft = false;
 73 | 	    break;  
 74 | 	    
 75 | 	  case RIGHT:
 76 | 	    moveRight = false;
 77 |   }
 78 | }, false);
 79 | 
 80 | //Start the game animation loop
 81 | update();
 82 | 
 83 | function update()
 84 | { 
 85 |   //The animation loop
 86 |   requestAnimationFrame(update, canvas);
 87 |   
 88 |   //Change what the game is doing based on the game state
 89 |   switch(gameState)
 90 |   {
 91 |     case LOADING:
 92 |       console.log("loading…");
 93 |       break;
 94 |     
 95 |     case PLAYING:
 96 |       playGame();
 97 |       break;
 98 |     
 99 |     case OVER:
100 |       endGame();
101 |       break;
102 |   }
103 |   
104 |   //Render the game
105 |   render();
106 | }
107 | 
108 | function loadHandler()
109 | { 
110 |   assetsLoaded++;
111 |   if(assetsLoaded === assetsToLoad.length)
112 |   {
113 |     //Remove the load event listener
114 |     image.removeEventListener("load", loadHandler, false);
115 |          
116 |     //Start the game 
117 |     gameState = PLAYING;
118 |   }
119 | }
120 | 
121 | function playGame()
122 | {
123 |   //Left
124 |   if(moveLeft && !moveRight)
125 |   {
126 |     cannon.vx = -8;
127 |   }
128 |   //Right
129 |   if(moveRight && !moveLeft)
130 |   {
131 |     cannon.vx = 8;
132 |   }
133 | 
134 |   //Set the cannon's velocity to zero if none of the keys are being pressed
135 |   if(!moveLeft && !moveRight)
136 |   {
137 |     cannon.vx = 0;
138 |   }
139 |   
140 |   //Move the cannon and keep it within the screen boundaries
141 |   cannon.x = Math.max(0, Math.min(cannon.x + cannon.vx, canvas.width - cannon.width));
142 | }
143 | 
144 | function endGame()
145 | {
146 |   //Empty for now
147 | }
148 | 
149 | function render()
150 | { 
151 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
152 |   
153 |   //Display the sprites
154 |   if(sprites.length !== 0)
155 |   {
156 |     for(var i = 0; i < sprites.length; i++)
157 |     {
158 |       var sprite = sprites[i];
159 |       drawingSurface.drawImage
160 |       (
161 |         image, 
162 |         sprite.sourceX, sprite.sourceY, 
163 |         sprite.sourceWidth, sprite.sourceHeight,
164 |         Math.floor(sprite.x), Math.floor(sprite.y), 
165 |         sprite.width, sprite.height
166 |       ); 
167 |     }
168 |   }
169 | }
170 | 
171 | }());
172 | 


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/src/objects.js:
--------------------------------------------------------------------------------
 1 | //--- The sprite object
 2 | 
 3 | var spriteObject =
 4 | {
 5 |   sourceX: 0,
 6 |   sourceY: 0,
 7 |   sourceWidth: 32,
 8 |   sourceHeight: 32,
 9 |   width: 32,
10 |   height: 32,
11 |   x: 0,
12 |   y: 0,
13 |   vx: 0,
14 |   vy: 0,
15 |   visible: true,
16 |   
17 |   //Getters
18 |   centerX: function()
19 |   {
20 |     return this.x + (this.width / 2);
21 |   },
22 |   centerY: function()
23 |   {
24 |     return this.y + (this.height / 2);
25 |   },
26 |   halfWidth: function()
27 |   {
28 |     return this.width / 2;
29 |   },
30 |   halfHeight: function()
31 |   {
32 |     return this.height / 2;
33 |   }
34 | };
35 | 
36 | //--- The alien object
37 | 
38 | var alienObject = Object.create(spriteObject);
39 | alienObject.NORMAL = 1;
40 | alienObject.EXPLODED = 2;
41 | alienObject.state = alienObject.NORMAL;
42 | alienObject.update = function()
43 | {
44 |   this.sourceX = this.state * this.width;
45 | };
46 | 
47 | //--- The message object
48 | 
49 | var messageObject =
50 | {
51 |   x: 0,
52 |   y: 0,
53 |   visible: true,
54 |   text: "Message",
55 |   font: "normal bold 20px Helvetica",
56 |   fillStyle: "red",
57 |   textBaseline: "top"
58 | };
59 | 
60 | 


--------------------------------------------------------------------------------
/Code - Published/chapter09/alienArmada/src/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter10/monsterMayhem/images/monsterMayhem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter10/monsterMayhem/images/monsterMayhem.png


--------------------------------------------------------------------------------
/Code - Published/chapter10/monsterMayhem/src/monsterMayhem.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <title>Monster Mayhem</title>
 4 | 
 5 | <!-- The canvas -->
 6 | <canvas width="704" height="512"></canvas>
 7 | 
 8 | <!-- The game code -->
 9 | <script src="requestAnimationFramePolyfill.js"></script>
10 | <script src="../src/objects.js"></script>
11 | <script src="../src/collision.js"></script>
12 | <script src="../src/monsterMayhem.js"></script>


--------------------------------------------------------------------------------
/Code - Published/chapter10/monsterMayhem/src/objects.js:
--------------------------------------------------------------------------------
 1 | //--- The sprite object
 2 | 
 3 | var spriteObject =
 4 | {
 5 |   sourceX: 0,
 6 |   sourceY: 0,
 7 |   sourceWidth: 64,
 8 |   sourceHeight: 64,
 9 |   width: 64,
10 |   height: 64,
11 |   x: 0,
12 |   y: 0,
13 |   vx: 0,
14 |   vy: 0,
15 |   visible: true,
16 |   scrollable: true,
17 |   
18 |   //Getters
19 |   centerX: function()
20 |   {
21 |     return this.x + (this.width / 2);
22 |   },
23 |   centerY: function()
24 |   {
25 |     return this.y + (this.height / 2);
26 |   },
27 |   halfWidth: function()
28 |   {
29 |     return this.width / 2;
30 |   },
31 |   halfHeight: function()
32 |   {
33 |     return this.height / 2;
34 |   },
35 | };
36 | 
37 | //--- The monster object
38 | 
39 | monsterObject = Object.create(spriteObject);
40 | monsterObject.sourceX = 128;
41 | 
42 | //The monster's states
43 | monsterObject.NORMAL = [2,0];
44 | monsterObject.SCARED = [2,1];
45 | monsterObject.state = monsterObject.NORMAL;
46 |    
47 | monsterObject.update = function()
48 | { 
49 |   this.sourceX = this.state[0] * this.width;
50 |   this.sourceY = this.state[1] * this.height;
51 | };
52 | 
53 | //The monster's allowed speed
54 | monsterObject.speed = 1;
55 | 
56 | //Properties to help the monster change direction
57 | monsterObject.NONE = 0;
58 | monsterObject.UP = 1;
59 | monsterObject.DOWN = 2;
60 | monsterObject.LEFT = 3;
61 | monsterObject.RIGHT = 4;
62 | monsterObject.validDirections = [];
63 | monsterObject.direction = monsterObject.NONE;
64 | monsterObject.hunt = false;


--------------------------------------------------------------------------------
/Code - Published/chapter10/monsterMayhem/src/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter10/monsterMaze/images/monsterMaze.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter10/monsterMaze/images/monsterMaze.png


--------------------------------------------------------------------------------
/Code - Published/chapter10/monsterMaze/src/monsterMaze.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <title>Monster Maze</title>
 4 | 
 5 | <!-- The canvas -->
 6 | <canvas width="704" height="512"></canvas>
 7 | 
 8 | <!-- The game code -->
 9 | <script src="requestAnimationFramePolyfill.js"></script>
10 | <script src="../src/objects.js"></script>
11 | <script src="../src/collision.js"></script>
12 | <script src="../src/monsterMaze.js"></script>


--------------------------------------------------------------------------------
/Code - Published/chapter10/monsterMaze/src/objects.js:
--------------------------------------------------------------------------------
 1 | //--- The sprite object
 2 | 
 3 | var spriteObject =
 4 | {
 5 |   sourceX: 0,
 6 |   sourceY: 0,
 7 |   sourceWidth: 64,
 8 |   sourceHeight: 64,
 9 |   width: 64,
10 |   height: 64,
11 |   x: 0,
12 |   y: 0,
13 |   vx: 0,
14 |   vy: 0,
15 |   visible: true,
16 |   
17 |   //Getters
18 |   centerX: function()
19 |   {
20 |     return this.x + (this.width / 2);
21 |   },
22 |   centerY: function()
23 |   {
24 |     return this.y + (this.height / 2);
25 |   },
26 |   halfWidth: function()
27 |   {
28 |     return this.width / 2;
29 |   },
30 |   halfHeight: function()
31 |   {
32 |     return this.height / 2;
33 |   },
34 | };
35 | 
36 | //--- The monster object
37 | 
38 | monsterObject = Object.create(spriteObject);
39 | monsterObject.sourceX = 128;
40 | 
41 | //The monster's states
42 | monsterObject.NORMAL = [2,0];
43 | monsterObject.SCARED = [2,1];
44 | monsterObject.state = monsterObject.NORMAL;
45 |    
46 | monsterObject.update = function()
47 | { 
48 |   this.sourceX = this.state[0] * this.width;
49 |   this.sourceY = this.state[1] * this.height;
50 | };
51 | 
52 | //The monster's allowed speed
53 | monsterObject.speed = 1;
54 | 
55 | //Properties to help the monster change direction
56 | monsterObject.NONE = 0;
57 | monsterObject.UP = 1;
58 | monsterObject.DOWN = 2;
59 | monsterObject.LEFT = 3;
60 | monsterObject.RIGHT = 4;
61 | monsterObject.validDirections = [];
62 | monsterObject.direction = monsterObject.NONE;
63 | monsterObject.hunt = true;


--------------------------------------------------------------------------------
/Code - Published/chapter10/monsterMaze/src/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter10/movingMonster/movingMonster.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter10/movingMonster/movingMonster.png


--------------------------------------------------------------------------------
/Code - Published/chapter10/movingMonster/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter10/timeBombPanic/images/timeBombPanic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter10/timeBombPanic/images/timeBombPanic.png


--------------------------------------------------------------------------------
/Code - Published/chapter10/timeBombPanic/src/objects.js:
--------------------------------------------------------------------------------
 1 | //--- The sprite object
 2 | 
 3 | var spriteObject =
 4 | {
 5 |   sourceX: 0,
 6 |   sourceY: 0,
 7 |   sourceWidth: 64,
 8 |   sourceHeight: 64,
 9 |   width: 64,
10 |   height: 64,
11 |   x: 0,
12 |   y: 0,
13 |   vx: 0,
14 |   vy: 0,
15 |   visible: true,
16 |   
17 |   //Getters
18 |   centerX: function()
19 |   {
20 |     return this.x + (this.width / 2);
21 |   },
22 |   centerY: function()
23 |   {
24 |     return this.y + (this.height / 2);
25 |   },
26 |   halfWidth: function()
27 |   {
28 |     return this.width / 2;
29 |   },
30 |   halfHeight: function()
31 |   {
32 |     return this.height / 2;
33 |   },
34 | };
35 | 
36 | //--- The message object
37 | 
38 | var messageObject =
39 | {
40 |   x: 0,
41 |   y: 0,
42 |   visible: true,
43 |   text: "Message",
44 |   font: "normal bold 20px Helvetica",
45 |   fillStyle: "red",
46 |   textBaseline: "top"
47 | };
48 | 
49 | //--- The gameTimer object
50 | 
51 | var gameTimer =
52 | {
53 |   time: 0,
54 |   interval: undefined,
55 |   
56 |   start: function()
57 |   {
58 |     var self = this;
59 | 	this.interval = setInterval(function(){self.tick();}, 1000);
60 |   },
61 |   tick: function()
62 |   {
63 |     this.time--;
64 |   },
65 |   stop: function()
66 |   {
67 |     clearInterval(this.interval);
68 |   },
69 |   reset: function()
70 |   {
71 |     this.time = 0;
72 |   }
73 | };
74 | 
75 | 


--------------------------------------------------------------------------------
/Code - Published/chapter10/timeBombPanic/src/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter10/timeBombPanic/src/timeBombPanic.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <title>Time Bomb Panic</title>
 4 | 
 5 | <!-- The canvas -->
 6 | <canvas width="704" height="512"></canvas>
 7 | 
 8 | <!-- The game code -->
 9 | <script src="requestAnimationFramePolyfill.js"></script>
10 | <script src="../src/objects.js"></script>
11 | <script src="../src/collision.js"></script>
12 | <script src="../src/timeBombPanic.js"></script>


--------------------------------------------------------------------------------
/Code - Published/chapter10/timeBombScroll/images/timeBombPanic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter10/timeBombScroll/images/timeBombPanic.png


--------------------------------------------------------------------------------
/Code - Published/chapter10/timeBombScroll/src/objects.js:
--------------------------------------------------------------------------------
 1 | //--- The sprite object
 2 | 
 3 | var spriteObject =
 4 | {
 5 |   sourceX: 0,
 6 |   sourceY: 0,
 7 |   sourceWidth: 64,
 8 |   sourceHeight: 64,
 9 |   width: 64,
10 |   height: 64,
11 |   x: 0,
12 |   y: 0,
13 |   vx: 0,
14 |   vy: 0,
15 |   visible: true,
16 |   scrollable: true,
17 |   
18 |   //Getters
19 |   centerX: function()
20 |   {
21 |     return this.x + (this.width / 2);
22 |   },
23 |   centerY: function()
24 |   {
25 |     return this.y + (this.height / 2);
26 |   },
27 |   halfWidth: function()
28 |   {
29 |     return this.width / 2;
30 |   },
31 |   halfHeight: function()
32 |   {
33 |     return this.height / 2;
34 |   },
35 | };
36 | 
37 | //--- The message object
38 | 
39 | var messageObject =
40 | {
41 |   x: 0,
42 |   y: 0,
43 |   visible: true,
44 |   text: "Message",
45 |   font: "normal bold 20px Helvetica",
46 |   fillStyle: "red",
47 |   textBaseline: "top"
48 | };
49 | 
50 | //--- The gameTimer object
51 | 
52 | var gameTimer =
53 | {
54 |   time: 0,
55 |   interval: undefined,
56 |   
57 |   start: function()
58 |   {
59 |     var self = this;
60 | 		this.interval = setInterval(function(){self.tick();}, 1000);
61 |   },
62 |   tick: function()
63 |   {
64 |     this.time--;
65 |   },
66 |   stop: function()
67 |   {
68 |     clearInterval(this.interval);
69 |   },
70 |   reset: function()
71 |   {
72 |     this.time = 0;
73 |   }
74 | };
75 | 
76 | 


--------------------------------------------------------------------------------
/Code - Published/chapter10/timeBombScroll/src/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter10/timeBombScroll/src/timeBombScroll.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Time Bomb Scroll</title>
 3 | <meta charset="utf-8">
 4 | 
 5 | <!-- The canvas -->
 6 | <canvas width="704" height="512"></canvas>
 7 | 
 8 | <!-- The game code -->
 9 | <script src="requestAnimationFramePolyfill.js"></script>
10 | <script src="../src/objects.js"></script>
11 | <script src="../src/collision.js"></script>
12 | <script src="../src/timeBombScroll.js"></script>


--------------------------------------------------------------------------------
/Code - Published/chapter11/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter11/cat.png


--------------------------------------------------------------------------------
/Code - Published/chapter11/catAndBox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter11/catAndBox.png


--------------------------------------------------------------------------------
/Code - Published/chapter11/circles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter11/circles.png


--------------------------------------------------------------------------------
/Code - Published/chapter11/hedgehogApocalypse/images/hedgehogApocalypse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter11/hedgehogApocalypse/images/hedgehogApocalypse.png


--------------------------------------------------------------------------------
/Code - Published/chapter11/hedgehogApocalypse/src/hedgehogAplocalypse.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <title>Hedgehog Apocalypse</title>
 4 | 
 5 | <!-- The canvas -->
 6 | <canvas width="1024" height="768"></canvas>
 7 | 
 8 | <!-- The game code -->
 9 | <script src="requestAnimationFramePolyfill.js"></script>
10 | <script src="../src/objects.js"></script>
11 | <script src="../src/collision.js"></script>
12 | <script src="../src/hedgehogApocalypse.js"></script>


--------------------------------------------------------------------------------
/Code - Published/chapter11/hedgehogApocalypse/src/objects.js:
--------------------------------------------------------------------------------
 1 | //--- The sprite object
 2 | 
 3 | var spriteObject =
 4 | {
 5 |   sourceX: 0,
 6 |   sourceY: 0,
 7 |   sourceWidth: 64,
 8 |   sourceHeight: 64,
 9 |   width: 64,
10 |   height: 64,
11 |   x: 0,
12 |   y: 0,
13 |   vx: 0,
14 |   vy: 0,
15 |   visible: true,
16 |   
17 |   //Physics properties
18 |   accelerationX: 0, 
19 |   accelerationY: 0, 
20 |   speedLimit: 5, 
21 |   friction: 0.96,
22 |   bounce: -0.7,
23 |   gravity: 0.3,
24 |     
25 |   //Platform game properties   
26 |   isOnGround: undefined,
27 |   jumpForce: -10,
28 | 
29 |   //Getters
30 |   centerX: function()
31 |   {
32 |     return this.x + (this.width / 2);
33 |   },
34 |   centerY: function()
35 |   {
36 |     return this.y + (this.height / 2);
37 |   },
38 |   halfWidth: function()
39 |   {
40 |     return this.width / 2;
41 |   },
42 |   halfHeight: function()
43 |   {
44 |     return this.height / 2;
45 |   }
46 | };
47 | 
48 | //--- The hedgehog object
49 | hedgehogObject = Object.create(spriteObject);
50 | 
51 | //The hedgehog's states
52 | hedgehogObject.NORMAL = [1,0];
53 | hedgehogObject.SQUASHED = [2,0];
54 | hedgehogObject.state = hedgehogObject.NORMAL;
55 |    
56 | hedgehogObject.update = function()
57 | { 
58 |   this.sourceX = this.state[0] * this.sourceWidth;
59 |   this.sourceY = this.state[1] * this.sourceHeight;
60 | };
61 | 
62 | //The hedgehog's allowed speed
63 | hedgehogObject.speed = 1;
64 | 
65 | //--- The message object
66 | 
67 | var messageObject =
68 | {
69 |   x: 0,
70 |   y: 0,
71 |   visible: true,
72 |   text: "Message",
73 |   font: "normal bold 20px Helvetica",
74 |   fillStyle: "red",
75 |   textBaseline: "top"
76 | };


--------------------------------------------------------------------------------
/Code - Published/chapter11/hedgehogApocalypse/src/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter11/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter12/constructorFunction.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <title>Constructor function</title>
 4 | 
 5 | <script>
 6 | 
 7 | //A basic object with a property and a method
 8 | function Robot() 
 9 | {
10 |     this.mood = "happy";
11 | }
12 | Robot.prototype.displayMood = function() 
13 | {
14 |     console.log("I am feeling " + this.mood);
15 | };
16 | 
17 | //Use a constructor function to make a newRobot object from the original
18 | var newRobot = new Robot();
19 | 
20 | //View the newRobot's mood property
21 | console.log(newRobot.mood);
22 | 
23 | //Call the newRobot's displayMood method
24 | newRobot.displayMood();
25 | 
26 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter12/dragAndDrop/dragAndDrop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter12/dragAndDrop/dragAndDrop.png


--------------------------------------------------------------------------------
/Code - Published/chapter12/dragAndDrop/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter12/hedgehogMouse/images/hedgehogApocalypse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter12/hedgehogMouse/images/hedgehogApocalypse.png


--------------------------------------------------------------------------------
/Code - Published/chapter12/hedgehogMouse/src/hedgehogAplocalypse.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <title>Hedgehog Apocalypse</title>
 4 | 
 5 | <!-- The canvas -->
 6 | <canvas width="1024" height="768">
 7 | 
 8 | <!-- The game code -->
 9 | <script src="requestAnimationFramePolyfill.js"></script>
10 | <script src="../src/objects.js"></script>
11 | <script src="../src/collision.js"></script>
12 | <script src="../src/hedgehogApocalypse.js"></script>


--------------------------------------------------------------------------------
/Code - Published/chapter12/hedgehogMouse/src/objects.js:
--------------------------------------------------------------------------------
 1 | //--- The sprite object
 2 | 
 3 | var spriteObject =
 4 | {
 5 |   sourceX: 0,
 6 |   sourceY: 0,
 7 |   sourceWidth: 64,
 8 |   sourceHeight: 64,
 9 |   x: 0,
10 |   y: 0,
11 |   vx: 0,
12 |   vy: 0,
13 |   height: 64,
14 |   width: 64,
15 |   visible: true,
16 |   
17 |   //Physics properties
18 |   accelerationX: 0, 
19 |   accelerationY: 0, 
20 |   speedLimit: 5, 
21 |   friction: 0.96,
22 |   bounce: -0.7,
23 |   gravity: 0.3,
24 |     
25 |   //Platform game properties   
26 |   isOnGround: undefined,
27 |   jumpForce: -10,
28 |   
29 |   //Getters
30 |   centerX: function()
31 |   {
32 |     return this.x + (this.width / 2);
33 |   },
34 |   centerY: function()
35 |   {
36 |     return this.y + (this.height / 2);
37 |   },
38 |   halfWidth: function()
39 |   {
40 |     return this.width / 2;
41 |   },
42 |   halfHeight: function()
43 |   {
44 |     return this.height / 2;
45 |   }
46 | };
47 | 
48 | //--- The hedgehog object
49 | hedgehogObject = Object.create(spriteObject);
50 | 
51 | //The hedgehog's states
52 | hedgehogObject.NORMAL = [1,0];
53 | hedgehogObject.SQUASHED = [2,0];
54 | hedgehogObject.state = hedgehogObject.NORMAL;
55 |    
56 | hedgehogObject.update = function()
57 | { 
58 |   this.sourceX = this.state[0] * this.sourceWidth;
59 |   this.sourceY = this.state[1] * this.sourceHeight;
60 | };
61 | 
62 | //The hedgehog's allowed speed
63 | hedgehogObject.speed = 1;
64 | 
65 | //--- The message object
66 | 
67 | var messageObject =
68 | {
69 |   x: 0,
70 |   y: 0,
71 |   visible: true,
72 |   text: "Message",
73 |   font: "normal bold 20px Helvetica",
74 |   fillStyle: "red",
75 |   textBaseline: "top"
76 | };


--------------------------------------------------------------------------------
/Code - Published/chapter12/hedgehogMouse/src/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter12/images/bee.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter12/images/bee.png


--------------------------------------------------------------------------------
/Code - Published/chapter12/images/buttonFairy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter12/images/buttonFairy.png


--------------------------------------------------------------------------------
/Code - Published/chapter12/images/catAndBox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter12/images/catAndBox.png


--------------------------------------------------------------------------------
/Code - Published/chapter12/images/vehicles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter12/images/vehicles.png


--------------------------------------------------------------------------------
/Code - Published/chapter12/keyboard/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter12/killerBeePandemonium/images/killerBeePandemonium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/Code - Published/chapter12/killerBeePandemonium/images/killerBeePandemonium.png


--------------------------------------------------------------------------------
/Code - Published/chapter12/killerBeePandemonium/src/killerBeeMouse.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <title>Killer Bee Pandemonium - Mouse Controlled</title>
 4 | 
 5 | <!-- The canvas -->
 6 | <canvas width="1024" height="768"></canvas>
 7 | 
 8 | <!-- The game code -->
 9 | <script src="requestAnimationFramePolyfill.js"></script>
10 | <script src="../src/objects.js"></script>
11 | <script src="../src/collision.js"></script>
12 | <script src="../src/killerBeeMouse.js"></script>


--------------------------------------------------------------------------------
/Code - Published/chapter12/killerBeePandemonium/src/killerBeeTouch.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = no">
 4 | <title>Killer Bee Pandemonium - Touch Controlled</title>
 5 | 
 6 | <!-- The canvas -->
 7 | <canvas width="1024" height="768"></canvas>
 8 | 
 9 | <!-- The game code -->
10 | <script src="requestAnimationFramePolyfill.js"></script>
11 | <script src="../src/objects.js"></script>
12 | <script src="../src/collision.js"></script>
13 | <script src="../src/killerBeeTouch.js"></script>


--------------------------------------------------------------------------------
/Code - Published/chapter12/killerBeePandemonium/src/objects.js:
--------------------------------------------------------------------------------
 1 | //--- The sprite object
 2 | 
 3 | var spriteObject =
 4 | {
 5 |   sourceX: 0,
 6 |   sourceY: 0,
 7 |   sourceWidth: 64,
 8 |   sourceHeight: 64,
 9 |   width: 64,
10 |   height: 64,
11 |   x: 0,
12 |   y: 0,
13 |   vx: 0,
14 |   vy: 0,
15 |   visible: true,
16 |   rotation: 0,
17 |   
18 |   //Physics properties
19 |   accelerationX: 0, 
20 |   accelerationY: 0,
21 |   speed: 3, 
22 |   rotationSpeed: 0.3,
23 |   speedLimit: 5, 
24 |   friction: 0.96,
25 |       
26 |   //Getters
27 |   centerX: function()
28 |   {
29 |     return this.x + (this.width / 2);
30 |   },
31 |   centerY: function()
32 |   {
33 |     return this.y + (this.height / 2);
34 |   },
35 |   halfWidth: function()
36 |   {
37 |     return this.width / 2;
38 |   },
39 |   halfHeight: function()
40 |   {
41 |     return this.height / 2;
42 |   }
43 | };
44 | 
45 | //--- The message object
46 | 
47 | var messageObject =
48 | {
49 |   x: 0,
50 |   y: 0,
51 |   visible: true,
52 |   text: "Message",
53 |   font: "normal bold 20px Helvetica",
54 |   fillStyle: "red",
55 |   textBaseline: "top"
56 | };


--------------------------------------------------------------------------------
/Code - Published/chapter12/killerBeePandemonium/src/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter12/mouse/easingMouse.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <meta charset="utf-8">
  3 | <title>Easing</title>
  4 | 
  5 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
  6 | 
  7 | <script src="requestAnimationFramePolyfill.js"></script>
  8 | <script>
  9 | 
 10 | //--- The sprite object
 11 | 
 12 | var spriteObject =
 13 | {
 14 |   sourceX: 0,
 15 |   sourceY: 0,
 16 |   sourceWidth: 64,
 17 |   sourceHeight: 64,
 18 |   width: 64,
 19 |   height: 64,
 20 |   x: 0,
 21 |   y: 0,
 22 |   vx: 0,
 23 |   vy: 0,
 24 |   visible: true,
 25 |   
 26 |   //Physics properties
 27 |   accelerationX: 0, 
 28 |   accelerationY: 0, 
 29 |   speedLimit: 5, 
 30 |   friction: 0.96,
 31 |   
 32 |   //Getters
 33 |   centerX: function()
 34 |   {
 35 |     return this.x + (this.width / 2);
 36 |   },
 37 |   centerY: function()
 38 |   {
 39 |     return this.y + (this.height / 2);
 40 |   },
 41 |   halfWidth: function()
 42 |   {
 43 |     return this.width / 2;
 44 |   },
 45 |   halfHeight: function()
 46 |   {
 47 |     return this.height / 2;
 48 |   }
 49 | };
 50 | 
 51 | //--- The main program
 52 | 
 53 | //The canvas
 54 | var canvas = document.querySelector("canvas"); 
 55 | var drawingSurface = canvas.getContext("2d");
 56 | 
 57 | //Object arrays
 58 | var sprites = [];
 59 | var assetsToLoad = [];
 60 | var assetsLoaded = 0;
 61 | 
 62 | //The mouse
 63 | var mouseX = 0;
 64 | var mouseY = 0;
 65 | 
 66 | //Hide the mouse
 67 | //canvas.style.cursor = "none";
 68 | 
 69 | //The fairy
 70 | var fairy = Object.create(spriteObject);
 71 | fairy.sourceWidth = 77;
 72 | fairy.width = 77;
 73 | fairy.x = canvas.width / 2 - fairy.halfWidth();
 74 | fairy.y = canvas.height / 2 - fairy.halfHeight();
 75 | console.log(fairy.x);
 76 | sprites.push(fairy);
 77 | 
 78 | //Load the tilesheet image
 79 | var image = new Image();
 80 | image.addEventListener("load", loadHandler, false);
 81 | image.src = "../images/buttonFairy.png";
 82 | assetsToLoad.push(image);
 83 | 
 84 | //Add a mouse listener
 85 | canvas.addEventListener("mousemove", mousemoveHandler, false);
 86 | 
 87 | //The easing constant
 88 | EASING = 0.1;
 89 | 
 90 | //Game states
 91 | var LOADING = 0;
 92 | var PLAYING = 1;
 93 | var gameState = LOADING;
 94 | 
 95 | update();
 96 | 
 97 | function mousemoveHandler(event)
 98 | { 
 99 |   //Find the mouse's x and y position.
100 |   //Subtract the canvas's top and left offset
101 |   mouseX = event.pageX - canvas.offsetLeft;
102 |   mouseY = event.pageY - canvas.offsetTop;
103 | }
104 | function playGame()
105 | { 
106 |   //Figure out the distance between the mouse and the center of the fairy
107 |   var vx = mouseX - (fairy.x + fairy.halfWidth()); 
108 |   var vy = mouseY - (fairy.y + fairy.halfHeight());  
109 |   distance = Math.sqrt(vx * vx + vy * vy);
110 | 	
111 | 	//Move the fairy if it's more than 1 pixel away from the mouse 
112 |   if (distance >= 1)
113 |   {
114 |     fairy.x += vx * EASING; 
115 |     fairy.y += vy * EASING;
116 |   }	
117 | }
118 | 
119 | 
120 | function update()
121 | { 
122 |   //The animation loop
123 |   requestAnimationFrame(update, canvas);
124 |   
125 |   //Change what the game is doing based on the game state
126 |   switch(gameState)
127 |   {
128 |     case LOADING:
129 |       console.log("loading...");
130 |       break;
131 |     
132 |     case PLAYING:
133 |       playGame();
134 |       break;
135 |   }
136 |   
137 |   //Render the game
138 |   render();
139 | }
140 | 
141 | function loadHandler()
142 | { 
143 |   assetsLoaded++;
144 |   if(assetsLoaded === assetsToLoad.length)
145 |   {
146 |     gameState = PLAYING;
147 |   }
148 | }
149 | 
150 | function render()
151 | { 
152 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
153 |   
154 |   //Display the sprites
155 |   if(sprites.length !== 0)
156 |   {
157 | 	  for(var i = 0; i < sprites.length; i++)
158 | 	  {
159 | 	     var sprite = sprites[i];
160 | 	     if(sprite.visible)
161 | 	     {
162 | 		     drawingSurface.drawImage
163 | 		     (
164 | 		       image, 
165 | 		       sprite.sourceX, sprite.sourceY, 
166 | 		       sprite.sourceWidth, sprite.sourceHeight,
167 | 		       Math.floor(sprite.x), Math.floor(sprite.y), 
168 | 		       sprite.width, sprite.height
169 | 		     ); 
170 | 	     }
171 | 	  }
172 |   }
173 | }
174 | 
175 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter12/mouse/followMouse.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <meta charset="utf-8">
  3 | <title>Follow</title>
  4 | 
  5 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
  6 | 
  7 | <script src="requestAnimationFramePolyfill.js"></script>
  8 | <script>
  9 | 
 10 | //--- The sprite object
 11 | 
 12 | var spriteObject =
 13 | {
 14 |   sourceX: 0,
 15 |   sourceY: 0,
 16 |   sourceWidth: 64,
 17 |   sourceHeight: 64,
 18 |   height: 64,
 19 |   width: 64,
 20 |   x: 0,
 21 |   y: 0,
 22 |   vx: 0,
 23 |   vy: 0,
 24 |   visible: true,
 25 |   
 26 |   //Physics properties
 27 |   accelerationX: 0, 
 28 |   accelerationY: 0, 
 29 |   speedLimit: 5, 
 30 |   friction: 0.96,
 31 | 
 32 |   //Getters
 33 |   centerX: function()
 34 |   {
 35 |     return this.x + (this.width / 2);
 36 |   },
 37 |   centerY: function()
 38 |   {
 39 |     return this.y + (this.height / 2);
 40 |   },
 41 |   halfWidth: function()
 42 |   {
 43 |     return this.width / 2;
 44 |   },
 45 |   halfHeight: function()
 46 |   {
 47 |     return this.height / 2;
 48 |   }
 49 | };
 50 | 
 51 | //--- The main program
 52 | 
 53 | //The canvas
 54 | var canvas = document.querySelector("canvas"); 
 55 | var drawingSurface = canvas.getContext("2d");
 56 | 
 57 | //Object arrays
 58 | var sprites = [];
 59 | var assetsToLoad = [];
 60 | var assetsLoaded = 0;
 61 | 
 62 | //The mouse
 63 | var mouseX = 0;
 64 | var mouseY = 0;
 65 | 
 66 | //Hide the mouse
 67 | canvas.style.cursor = "none";
 68 | 
 69 | //The fairy
 70 | var fairy = Object.create(spriteObject);
 71 | fairy.sourceWidth = 77;
 72 | fairy.width = 77;
 73 | fairy.x = canvas.width / 2 - fairy.halfWidth();
 74 | fairy.y = canvas.height / 2 - fairy.halfHeight();
 75 | console.log(fairy.x);
 76 | sprites.push(fairy);
 77 | 
 78 | //Load the tilesheet image
 79 | var image = new Image();
 80 | image.addEventListener("load", loadHandler, false);
 81 | image.src = "../images/buttonFairy.png";
 82 | assetsToLoad.push(image);
 83 | 
 84 | //Add a mouse listener
 85 | canvas.addEventListener("mousemove", mousemoveHandler, false);
 86 | 
 87 | //Game states
 88 | var LOADING = 0;
 89 | var PLAYING = 1;
 90 | var gameState = LOADING;
 91 | 
 92 | update();
 93 | 
 94 | function mousemoveHandler(event)
 95 | { 
 96 |   //Find the mouse's x and y position.
 97 |   //Subtract the canvas's top and left offset
 98 |   mouseX = event.pageX - canvas.offsetLeft;
 99 |   mouseY = event.pageY - canvas.offsetTop;
100 | }
101 | function playGame()
102 | { 
103 |   fairy.x = mouseX - (fairy.halfWidth()); 
104 | 	fairy.y = mouseY - (fairy.halfHeight());
105 | }
106 | 
107 | 
108 | function update()
109 | { 
110 |   //The animation loop
111 |   requestAnimationFrame(update, canvas);
112 |   
113 |   //Change what the game is doing based on the game state
114 |   switch(gameState)
115 |   {
116 |     case LOADING:
117 |       console.log("loading...");
118 |       break;
119 |     
120 |     case PLAYING:
121 |       playGame();
122 |       break;
123 |   }
124 |   
125 |   //Render the game
126 |   render();
127 | }
128 | 
129 | function loadHandler()
130 | { 
131 |   assetsLoaded++;
132 |   if(assetsLoaded === assetsToLoad.length)
133 |   {
134 |     gameState = PLAYING;
135 |   }
136 | }
137 | 
138 | function render()
139 | { 
140 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
141 |   
142 |   //Display the sprites
143 |   if(sprites.length !== 0)
144 |   {
145 | 	  for(var i = 0; i < sprites.length; i++)
146 | 	  {
147 | 	     var sprite = sprites[i];
148 | 	     if(sprite.visible)
149 | 	     {
150 | 		     drawingSurface.drawImage
151 | 		     (
152 | 		       image, 
153 | 		       sprite.sourceX, sprite.sourceY, 
154 | 		       sprite.sourceWidth, sprite.sourceHeight,
155 | 		       Math.floor(sprite.x), Math.floor(sprite.y), 
156 | 		       sprite.width, sprite.height
157 | 		     ); 
158 | 	     }
159 | 	  }
160 |   }
161 | }
162 | 
163 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter12/mouse/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/Code - Published/chapter12/touch/followTouch.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <meta charset="utf-8">
  3 | <meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = no">
  4 | <title>Follow</title>
  5 | 
  6 | <canvas width="550" height="400" style="border: 1px dashed black"></canvas>
  7 | 
  8 | <script src="requestAnimationFramePolyfill.js"></script>
  9 | <script type="text/javascript">
 10 | 
 11 | //--- The sprite object
 12 | 
 13 | var spriteObject =
 14 | {
 15 |   sourceX: 0,
 16 |   sourceY: 0,
 17 |   sourceWidth: 64,
 18 |   sourceHeight: 64,
 19 |   width: 64,
 20 |   height: 64,
 21 |   x: 0,
 22 |   y: 0,
 23 |   vx: 0,
 24 |   vy: 0,
 25 |   visible: true,
 26 |   
 27 |   //Physics properties
 28 |   accelerationX: 0, 
 29 |   accelerationY: 0, 
 30 |   speedLimit: 5, 
 31 |   friction: 0.96,
 32 | 
 33 |   //Getters
 34 |   centerX: function()
 35 |   {
 36 |     return this.x + (this.width / 2);
 37 |   },
 38 |   centerY: function()
 39 |   {
 40 |     return this.y + (this.height / 2);
 41 |   },
 42 |   halfWidth: function()
 43 |   {
 44 |     return this.width / 2;
 45 |   },
 46 |   halfHeight: function()
 47 |   {
 48 |     return this.height / 2;
 49 |   }
 50 | };
 51 | 
 52 | //--- The main program
 53 | 
 54 | //The canvas
 55 | var canvas = document.querySelector("canvas"); 
 56 | var drawingSurface = canvas.getContext("2d");
 57 | 
 58 | //Object arrays
 59 | var sprites = [];
 60 | var assetsToLoad = [];
 61 | var assetsLoaded = 0;
 62 | 
 63 | //The fairy
 64 | var fairy = Object.create(spriteObject);
 65 | fairy.sourceWidth = 77;
 66 | fairy.width = 77;
 67 | fairy.x = canvas.width / 2 - fairy.halfWidth();
 68 | fairy.y = canvas.height / 2 - fairy.halfHeight();
 69 | console.log(fairy.x);
 70 | sprites.push(fairy);
 71 | 
 72 | //The touch point (Initialize it to the fairy's center point)
 73 | var touchX = fairy.x + fairy.halfWidth();
 74 | var touchY = fairy.y + fairy.halfHeight();
 75 | 
 76 | //Load the tilesheet image
 77 | var image = new Image();
 78 | image.addEventListener("load", loadHandler, false);
 79 | image.src = "../images/buttonFairy.png";
 80 | assetsToLoad.push(image);
 81 | 
 82 | //Add a listener
 83 | canvas.addEventListener("touchmove", touchmoveHandler, false);
 84 | 
 85 | //Game states
 86 | var LOADING = 0;
 87 | var PLAYING = 1;
 88 | var gameState = LOADING;
 89 | 
 90 | update();
 91 | 
 92 | function touchmoveHandler(event)
 93 | { 
 94 |   //Find the touch point's x and y position.
 95 |   //Subtract the canvas's top and left offset
 96 |   touchX = event.targetTouches[0].pageX - canvas.offsetLeft;
 97 |   touchY = event.targetTouches[0].pageY - canvas.offsetTop;
 98 |   
 99 |   //Prevent the canvas from being selected
100 |   event.preventDefault();
101 | }
102 | function playGame()
103 | { 
104 |   fairy.x = touchX - (fairy.halfWidth()); 
105 | 	fairy.y = touchY - (fairy.halfHeight());
106 | }
107 | 
108 | function update()
109 | { 
110 |   //The animation loop
111 |   requestAnimationFrame(update, canvas);
112 |   
113 |   //Change what the game is doing based on the game state
114 |   switch(gameState)
115 |   {
116 |     case LOADING:
117 |       console.log("loading...");
118 |       break;
119 |     
120 |     case PLAYING:
121 |       playGame();
122 |       break;
123 |   }
124 |   
125 |   //Render the game
126 |   render();
127 | }
128 | 
129 | function loadHandler()
130 | { 
131 |   assetsLoaded++;
132 |   if(assetsLoaded === assetsToLoad.length)
133 |   {
134 |     gameState = PLAYING;
135 |   }
136 | }
137 | 
138 | function render()
139 | { 
140 |   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
141 |   
142 |   //Display the sprites
143 |   if(sprites.length !== 0)
144 |   {
145 | 	  for(var i = 0; i < sprites.length; i++)
146 | 	  {
147 | 	     var sprite = sprites[i];
148 | 	     if(sprite.visible)
149 | 	     {
150 | 		     drawingSurface.drawImage
151 | 		     (
152 | 		       image, 
153 | 		       sprite.sourceX, sprite.sourceY, 
154 | 		       sprite.sourceWidth, sprite.sourceHeight,
155 | 		       Math.floor(sprite.x), Math.floor(sprite.y), 
156 | 		       sprite.width, sprite.height
157 | 		     ); 
158 | 	     }
159 | 	  }
160 |   }
161 | }
162 | 
163 | </script>


--------------------------------------------------------------------------------
/Code - Published/chapter12/touch/requestAnimationFramePolyfill.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller
 5 | // fixes from Paul Irish and Tino Zijdel
 6 | 
 7 | (function() {
 8 | 
 9 | var lastTime = 0;
10 | var vendors = ['ms', 'moz', 'webkit', 'o'];
11 | 
12 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
13 | {
14 |   window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15 |   window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16 |   window[vendors[x]+'CancelRequestAnimationFrame'];
17 | }
18 |  
19 | if (!window.requestAnimationFrame)
20 |   window.requestAnimationFrame = function(callback, element) {
21 |   var currTime = new Date().getTime();
22 |   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23 |   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
24 |   lastTime = currTime + timeToCall;
25 |   return id;
26 | };
27 |  
28 | if (!window.cancelAnimationFrame)
29 | {
30 |   window.cancelAnimationFrame = function(id) 
31 |   {
32 |     clearTimeout(id);
33 |   };
34 | }
35 | 
36 | }());


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/foundation-game-design-w-html5-javascript/ba65a24f4143488fb44bd9b7a1598a832de54b5d/LICENSE.txt


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Apress Source Code
 2 | 
 3 | This repository accompanies [*Foundation Game Design with HTML5 and JavaScript*](http://www.apress.com/9781430247166) by Rex van der Spuy (Apress, 2012).
 4 | 
 5 | ![Cover image](9781430247166.jpg)
 6 | 
 7 | Download the files as a zip using the green button, or clone the repository to your machine using Git.
 8 | 
 9 | ## Releases
10 | 
11 | Release v1.0 corresponds to the code in the published book, without corrections or updates.
12 | 
13 | ## Contributions
14 | 
15 | See the file Contributing.md for more information on how you can contribute to this repository.
16 | 


--------------------------------------------------------------------------------
/contributing.md:
--------------------------------------------------------------------------------
 1 | # Contributing to Apress Source Code
 2 | 
 3 | Copyright for Apress source code belongs to the author(s). However, under fair use you are encouraged to fork and contribute minor corrections and updates for the benefit of the author(s) and other readers.
 4 | 
 5 | ## How to Contribute
 6 | 
 7 | 1. Make sure you have a GitHub account.
 8 | 2. Fork the repository for the relevant book.
 9 | 3. Create a new branch on which to make your change, e.g. 
10 | `git checkout -b my_code_contribution`
11 | 4. Commit your change. Include a commit message describing the correction. Please note that if your commit message is not clear, the correction will not be accepted.
12 | 5. Submit a pull request.
13 | 
14 | Thank you for your contribution!


--------------------------------------------------------------------------------