diff --git a/9781430247166.jpg b/9781430247166.jpg new file mode 100644 index 0000000..480223a Binary files /dev/null and b/9781430247166.jpg differ diff --git a/Code - Published/.DS_Store b/Code - Published/.DS_Store new file mode 100644 index 0000000..e3c3352 Binary files /dev/null and b/Code - Published/.DS_Store differ diff --git a/Code - Published/chapter01/.DS_Store b/Code - Published/chapter01/.DS_Store new file mode 100644 index 0000000..4d18f30 Binary files /dev/null and b/Code - Published/chapter01/.DS_Store differ diff --git a/Code - Published/chapter01/absolutePositioning/absolutePositioning.html b/Code - Published/chapter01/absolutePositioning/absolutePositioning.html new file mode 100644 index 0000000..51ab0c5 --- /dev/null +++ b/Code - Published/chapter01/absolutePositioning/absolutePositioning.html @@ -0,0 +1,30 @@ + +Absolute positioning + + + +
+
+
\ No newline at end of file diff --git a/Code - Published/chapter01/backgroundImages/backgroundImages.html b/Code - Published/chapter01/backgroundImages/backgroundImages.html new file mode 100644 index 0000000..c5dde7c --- /dev/null +++ b/Code - Published/chapter01/backgroundImages/backgroundImages.html @@ -0,0 +1,15 @@ + +Background images + + + +
\ No newline at end of file diff --git a/Code - Published/chapter01/backgroundImages/cat.png b/Code - Published/chapter01/backgroundImages/cat.png new file mode 100644 index 0000000..c9b9bcd Binary files /dev/null and b/Code - Published/chapter01/backgroundImages/cat.png differ diff --git a/Code - Published/chapter01/class/class.html b/Code - Published/chapter01/class/class.html new file mode 100644 index 0000000..2093448 --- /dev/null +++ b/Code - Published/chapter01/class/class.html @@ -0,0 +1,16 @@ + +Using a class + + + +
Cat
+
Tiger
+
Hedgehog
\ No newline at end of file diff --git a/Code - Published/chapter01/classAndId/classAndId.html b/Code - Published/chapter01/classAndId/classAndId.html new file mode 100644 index 0000000..8ae76cc --- /dev/null +++ b/Code - Published/chapter01/classAndId/classAndId.html @@ -0,0 +1,31 @@ + +Using a class and id together + + + +
Cat
+
Tiger
+
Hedgehog
\ No newline at end of file diff --git a/Code - Published/chapter01/floatingElements/cat.png b/Code - Published/chapter01/floatingElements/cat.png new file mode 100644 index 0000000..c9b9bcd Binary files /dev/null and b/Code - Published/chapter01/floatingElements/cat.png differ diff --git a/Code - Published/chapter01/floatingElements/floatingElements.html b/Code - Published/chapter01/floatingElements/floatingElements.html new file mode 100644 index 0000000..9560e7d --- /dev/null +++ b/Code - Published/chapter01/floatingElements/floatingElements.html @@ -0,0 +1,24 @@ + +Floating elements + + +
+ + + +
\ No newline at end of file diff --git a/Code - Published/chapter01/floatingElements/hedgehog.png b/Code - Published/chapter01/floatingElements/hedgehog.png new file mode 100644 index 0000000..b534dca Binary files /dev/null and b/Code - Published/chapter01/floatingElements/hedgehog.png differ diff --git a/Code - Published/chapter01/floatingElements/tiger.png b/Code - Published/chapter01/floatingElements/tiger.png new file mode 100644 index 0000000..8aeeeb6 Binary files /dev/null and b/Code - Published/chapter01/floatingElements/tiger.png differ diff --git a/Code - Published/chapter01/floatingElementsFinished/.DS_Store b/Code - Published/chapter01/floatingElementsFinished/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter01/floatingElementsFinished/.DS_Store differ diff --git a/Code - Published/chapter01/floatingElementsFinished/cat.png b/Code - Published/chapter01/floatingElementsFinished/cat.png new file mode 100644 index 0000000..c9b9bcd Binary files /dev/null and b/Code - Published/chapter01/floatingElementsFinished/cat.png differ diff --git a/Code - Published/chapter01/floatingElementsFinished/floatingElementsFinished.html b/Code - Published/chapter01/floatingElementsFinished/floatingElementsFinished.html new file mode 100644 index 0000000..6f5c03f --- /dev/null +++ b/Code - Published/chapter01/floatingElementsFinished/floatingElementsFinished.html @@ -0,0 +1,62 @@ + +Floating elements + + + +
+
+
+
+

Dangerous Animals!

+
\ No newline at end of file diff --git a/Code - Published/chapter01/floatingElementsFinished/hedgehog.png b/Code - Published/chapter01/floatingElementsFinished/hedgehog.png new file mode 100644 index 0000000..b534dca Binary files /dev/null and b/Code - Published/chapter01/floatingElementsFinished/hedgehog.png differ diff --git a/Code - Published/chapter01/floatingElementsFinished/tiger.png b/Code - Published/chapter01/floatingElementsFinished/tiger.png new file mode 100644 index 0000000..8aeeeb6 Binary files /dev/null and b/Code - Published/chapter01/floatingElementsFinished/tiger.png differ diff --git a/Code - Published/chapter01/id/id.html b/Code - Published/chapter01/id/id.html new file mode 100644 index 0000000..dfb1b54 --- /dev/null +++ b/Code - Published/chapter01/id/id.html @@ -0,0 +1,15 @@ + +Using an id + + + +
\ No newline at end of file diff --git a/Code - Published/chapter01/organizingFiles/newStyle.css b/Code - Published/chapter01/organizingFiles/newStyle.css new file mode 100644 index 0000000..d1b9b39 --- /dev/null +++ b/Code - Published/chapter01/organizingFiles/newStyle.css @@ -0,0 +1,9 @@ +h1 +{ + font-size: 40px; +} + +p +{ + font-family: Helvetica, Verdana, Arial, sans-serif; +} diff --git a/Code - Published/chapter01/organizingFiles/simpleDocument.html b/Code - Published/chapter01/organizingFiles/simpleDocument.html new file mode 100644 index 0000000..2689791 --- /dev/null +++ b/Code - Published/chapter01/organizingFiles/simpleDocument.html @@ -0,0 +1,6 @@ + +A simple document + + +

Page Heading

+

A bit of text.

\ No newline at end of file diff --git a/Code - Published/chapter01/projectFolder/.DS_Store b/Code - Published/chapter01/projectFolder/.DS_Store new file mode 100644 index 0000000..eeaac63 Binary files /dev/null and b/Code - Published/chapter01/projectFolder/.DS_Store differ diff --git a/Code - Published/chapter01/projectFolder/images/.DS_Store b/Code - Published/chapter01/projectFolder/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter01/projectFolder/images/.DS_Store differ diff --git a/Code - Published/chapter01/projectFolder/images/photo.jpg b/Code - Published/chapter01/projectFolder/images/photo.jpg new file mode 100644 index 0000000..cceff89 Binary files /dev/null and b/Code - Published/chapter01/projectFolder/images/photo.jpg differ diff --git a/Code - Published/chapter01/projectFolder/sounds/song.mp3 b/Code - Published/chapter01/projectFolder/sounds/song.mp3 new file mode 100644 index 0000000..589e572 Binary files /dev/null and b/Code - Published/chapter01/projectFolder/sounds/song.mp3 differ diff --git a/Code - Published/chapter01/projectFolder/src/.DS_Store b/Code - Published/chapter01/projectFolder/src/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter01/projectFolder/src/.DS_Store differ diff --git a/Code - Published/chapter01/projectFolder/src/main.html b/Code - Published/chapter01/projectFolder/src/main.html new file mode 100644 index 0000000..0477478 --- /dev/null +++ b/Code - Published/chapter01/projectFolder/src/main.html @@ -0,0 +1,18 @@ + +Organizing project folders + + +

Organizing project folders

+ +

Images

+ + +

Video

+ + +

Audio

+ diff --git a/Code - Published/chapter01/projectFolder/src/style.css b/Code - Published/chapter01/projectFolder/src/style.css new file mode 100644 index 0000000..0a3d8e3 --- /dev/null +++ b/Code - Published/chapter01/projectFolder/src/style.css @@ -0,0 +1,14 @@ +h1, h2 +{ + font-family: Monaco, Courier, monospace; +} + +h1 +{ + font-size: 20px; +} + +h2 +{ + font-size: 16px; +} \ No newline at end of file diff --git a/Code - Published/chapter01/projectFolder/videos/movie.mp4 b/Code - Published/chapter01/projectFolder/videos/movie.mp4 new file mode 100644 index 0000000..1acb18c Binary files /dev/null and b/Code - Published/chapter01/projectFolder/videos/movie.mp4 differ diff --git a/Code - Published/chapter01/simpleWebPage/ocean.jpg b/Code - Published/chapter01/simpleWebPage/ocean.jpg new file mode 100644 index 0000000..cceff89 Binary files /dev/null and b/Code - Published/chapter01/simpleWebPage/ocean.jpg differ diff --git a/Code - Published/chapter01/simpleWebPage/simpleWebpage.html b/Code - Published/chapter01/simpleWebPage/simpleWebpage.html new file mode 100644 index 0000000..60ccd84 --- /dev/null +++ b/Code - Published/chapter01/simpleWebPage/simpleWebpage.html @@ -0,0 +1,35 @@ + + + + +A web page + + + + +

A simple web page

+

Everything you see on this page was made using basic HTML tags.

+ +

This is a sub-heading

+

You use HTML tags to structure information. This is a paragraph of text structured with a p tag.

+ +

Making lists

+

You can also use tags to make a list of things.

+ + +

Adding links

+

Its easy to create hyperlinks to other web pages, or to create a link to generate an email. Here's how:

+ + +

Add a photo with an img tag, like this:

+A photo of the ocean + + + \ No newline at end of file diff --git a/Code - Published/chapter01/styledWebPage/ocean.jpg b/Code - Published/chapter01/styledWebPage/ocean.jpg new file mode 100644 index 0000000..cceff89 Binary files /dev/null and b/Code - Published/chapter01/styledWebPage/ocean.jpg differ diff --git a/Code - Published/chapter01/styledWebPage/styledWebpage.html b/Code - Published/chapter01/styledWebPage/styledWebpage.html new file mode 100644 index 0000000..8018ac7 --- /dev/null +++ b/Code - Published/chapter01/styledWebPage/styledWebpage.html @@ -0,0 +1,101 @@ + + + +A web page + + + + +

A simple web page

+

Everything you see on this page was made using basic HTML tags.

+ +

This is a sub-heading

+

You use HTML tags to structure information. This is a paragraph of text structured with a p tag.

+ +

Making lists

+

You can also use tags to make a list of things.

+ + + + +

Adding links

+

Its easy to create hyperlinks to other web pages, or to create a link to generate an email. Here's how:

+ + +

Add a photo with an img tag, like this:

+A photo of the ocean + + + \ No newline at end of file diff --git a/Code - Published/chapter02/.DS_Store b/Code - Published/chapter02/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter02/.DS_Store differ diff --git a/Code - Published/chapter02/01_displayConsoleOutput.html b/Code - Published/chapter02/01_displayConsoleOutput.html new file mode 100644 index 0000000..8716541 --- /dev/null +++ b/Code - Published/chapter02/01_displayConsoleOutput.html @@ -0,0 +1,8 @@ + +Display console output + + \ No newline at end of file diff --git a/Code - Published/chapter02/02_numberVariables.html b/Code - Published/chapter02/02_numberVariables.html new file mode 100644 index 0000000..6df6705 --- /dev/null +++ b/Code - Published/chapter02/02_numberVariables.html @@ -0,0 +1,10 @@ + +Number variables + + \ No newline at end of file diff --git a/Code - Published/chapter02/03_addingNumbers.html b/Code - Published/chapter02/03_addingNumbers.html new file mode 100644 index 0000000..023acf2 --- /dev/null +++ b/Code - Published/chapter02/03_addingNumbers.html @@ -0,0 +1,13 @@ + +Adding numbers + + \ No newline at end of file diff --git a/Code - Published/chapter02/04_mathmaticalOperations.html b/Code - Published/chapter02/04_mathmaticalOperations.html new file mode 100644 index 0000000..b722ff5 --- /dev/null +++ b/Code - Published/chapter02/04_mathmaticalOperations.html @@ -0,0 +1,27 @@ + +Math operations + + \ No newline at end of file diff --git a/Code - Published/chapter02/05_stringVariables.html b/Code - Published/chapter02/05_stringVariables.html new file mode 100644 index 0000000..80e928f --- /dev/null +++ b/Code - Published/chapter02/05_stringVariables.html @@ -0,0 +1,9 @@ + +String variables + + \ No newline at end of file diff --git a/Code - Published/chapter02/06_combiningStrings.html b/Code - Published/chapter02/06_combiningStrings.html new file mode 100644 index 0000000..4f2b309 --- /dev/null +++ b/Code - Published/chapter02/06_combiningStrings.html @@ -0,0 +1,12 @@ + +Combining strings + + \ No newline at end of file diff --git a/Code - Published/chapter02/07_trueAndFalse.html b/Code - Published/chapter02/07_trueAndFalse.html new file mode 100644 index 0000000..63f99f6 --- /dev/null +++ b/Code - Published/chapter02/07_trueAndFalse.html @@ -0,0 +1,15 @@ + +True and false variable + + \ No newline at end of file diff --git a/Code - Published/chapter02/08_comparingValues.html b/Code - Published/chapter02/08_comparingValues.html new file mode 100644 index 0000000..9bfb8fb --- /dev/null +++ b/Code - Published/chapter02/08_comparingValues.html @@ -0,0 +1,18 @@ + +Comparing values + + \ No newline at end of file diff --git a/Code - Published/chapter02/09_greaterOrLesser.html b/Code - Published/chapter02/09_greaterOrLesser.html new file mode 100644 index 0000000..d9c8c46 --- /dev/null +++ b/Code - Published/chapter02/09_greaterOrLesser.html @@ -0,0 +1,18 @@ + +Greater or lesser + + \ No newline at end of file diff --git a/Code - Published/chapter02/10_comparingStrings.html b/Code - Published/chapter02/10_comparingStrings.html new file mode 100644 index 0000000..1282b32 --- /dev/null +++ b/Code - Published/chapter02/10_comparingStrings.html @@ -0,0 +1,18 @@ + +Comparing strings + + \ No newline at end of file diff --git a/Code - Published/chapter02/11_compoundIfStatements.html b/Code - Published/chapter02/11_compoundIfStatements.html new file mode 100644 index 0000000..bcd48cb --- /dev/null +++ b/Code - Published/chapter02/11_compoundIfStatements.html @@ -0,0 +1,25 @@ + +Compound if statements + + \ No newline at end of file diff --git a/Code - Published/chapter02/12_switchStatement.html b/Code - Published/chapter02/12_switchStatement.html new file mode 100644 index 0000000..58b1086 --- /dev/null +++ b/Code - Published/chapter02/12_switchStatement.html @@ -0,0 +1,26 @@ + +Compound if statements + + \ No newline at end of file diff --git a/Code - Published/chapter02/13_usingAnd.html b/Code - Published/chapter02/13_usingAnd.html new file mode 100644 index 0000000..774f9b1 --- /dev/null +++ b/Code - Published/chapter02/13_usingAnd.html @@ -0,0 +1,18 @@ + +Switch statement + + \ No newline at end of file diff --git a/Code - Published/chapter02/14_usingOr.html b/Code - Published/chapter02/14_usingOr.html new file mode 100644 index 0000000..740be1e --- /dev/null +++ b/Code - Published/chapter02/14_usingOr.html @@ -0,0 +1,18 @@ + +Using and + + \ No newline at end of file diff --git a/Code - Published/chapter02/15_functions.html b/Code - Published/chapter02/15_functions.html new file mode 100644 index 0000000..ea73b41 --- /dev/null +++ b/Code - Published/chapter02/15_functions.html @@ -0,0 +1,17 @@ + +Functions with arguments + + \ No newline at end of file diff --git a/Code - Published/chapter02/16_functionsWithArguments.html b/Code - Published/chapter02/16_functionsWithArguments.html new file mode 100644 index 0000000..803601b --- /dev/null +++ b/Code - Published/chapter02/16_functionsWithArguments.html @@ -0,0 +1,13 @@ + +Functions with arguments + + \ No newline at end of file diff --git a/Code - Published/chapter02/17_functionsWithMultipleArguments.html b/Code - Published/chapter02/17_functionsWithMultipleArguments.html new file mode 100644 index 0000000..c6d44d4 --- /dev/null +++ b/Code - Published/chapter02/17_functionsWithMultipleArguments.html @@ -0,0 +1,14 @@ + +Functions with multiple arguments + + \ No newline at end of file diff --git a/Code - Published/chapter02/18_calculator.html b/Code - Published/chapter02/18_calculator.html new file mode 100644 index 0000000..e2eadcf --- /dev/null +++ b/Code - Published/chapter02/18_calculator.html @@ -0,0 +1,35 @@ + +Calculator + + \ No newline at end of file diff --git a/Code - Published/chapter02/19_returnFunctionCalculator.html b/Code - Published/chapter02/19_returnFunctionCalculator.html new file mode 100644 index 0000000..f17e3f7 --- /dev/null +++ b/Code - Published/chapter02/19_returnFunctionCalculator.html @@ -0,0 +1,40 @@ + +Return function calculator + + \ No newline at end of file diff --git a/Code - Published/chapter02/20_returningValues.html b/Code - Published/chapter02/20_returningValues.html new file mode 100644 index 0000000..b96d17b --- /dev/null +++ b/Code - Published/chapter02/20_returningValues.html @@ -0,0 +1,16 @@ + +Returning values + + \ No newline at end of file diff --git a/Code - Published/chapter02/21_functionExpressions.html b/Code - Published/chapter02/21_functionExpressions.html new file mode 100644 index 0000000..a4561ed --- /dev/null +++ b/Code - Published/chapter02/21_functionExpressions.html @@ -0,0 +1,14 @@ + +Function expressions + + \ No newline at end of file diff --git a/Code - Published/chapter02/22_displayHTMLText.html b/Code - Published/chapter02/22_displayHTMLText.html new file mode 100644 index 0000000..ab5ed6c --- /dev/null +++ b/Code - Published/chapter02/22_displayHTMLText.html @@ -0,0 +1,11 @@ + +Display HTML text + +

+ + \ No newline at end of file diff --git a/Code - Published/chapter02/23_changeCSS.html b/Code - Published/chapter02/23_changeCSS.html new file mode 100644 index 0000000..ae8ff14 --- /dev/null +++ b/Code - Published/chapter02/23_changeCSS.html @@ -0,0 +1,13 @@ + +Change CSS + +

Hello World!

+ + \ No newline at end of file diff --git a/Code - Published/chapter02/24_creatingHTMLElements.html b/Code - Published/chapter02/24_creatingHTMLElements.html new file mode 100644 index 0000000..c84adb0 --- /dev/null +++ b/Code - Published/chapter02/24_creatingHTMLElements.html @@ -0,0 +1,18 @@ + +Creating HTML elements + + + + \ No newline at end of file diff --git a/Code - Published/chapter02/25_eventListener.html b/Code - Published/chapter02/25_eventListener.html new file mode 100644 index 0000000..1e6dfdd --- /dev/null +++ b/Code - Published/chapter02/25_eventListener.html @@ -0,0 +1,27 @@ + +Event listener + + + + \ No newline at end of file diff --git a/Code - Published/chapter02/26_removeEventListener.html b/Code - Published/chapter02/26_removeEventListener.html new file mode 100644 index 0000000..e25139a --- /dev/null +++ b/Code - Published/chapter02/26_removeEventListener.html @@ -0,0 +1,21 @@ + +Remove an event listener + + + + \ No newline at end of file diff --git a/Code - Published/chapter02/27_counting.html b/Code - Published/chapter02/27_counting.html new file mode 100644 index 0000000..9b19414 --- /dev/null +++ b/Code - Published/chapter02/27_counting.html @@ -0,0 +1,23 @@ + +Event listener + + + + \ No newline at end of file diff --git a/Code - Published/chapter02/28_enterKey.html b/Code - Published/chapter02/28_enterKey.html new file mode 100644 index 0000000..27e669b --- /dev/null +++ b/Code - Published/chapter02/28_enterKey.html @@ -0,0 +1,16 @@ + +Enter key + + \ No newline at end of file diff --git a/Code - Published/chapter02/29_enteringText.html b/Code - Published/chapter02/29_enteringText.html new file mode 100644 index 0000000..adda847 --- /dev/null +++ b/Code - Published/chapter02/29_enteringText.html @@ -0,0 +1,21 @@ + +Entering and displaying text + + + +

+ + \ No newline at end of file diff --git a/Code - Published/chapter02/organizingFiles/.DS_Store b/Code - Published/chapter02/organizingFiles/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter02/organizingFiles/.DS_Store differ diff --git a/Code - Published/chapter02/organizingFiles/main.html b/Code - Published/chapter02/organizingFiles/main.html new file mode 100644 index 0000000..2ac4fae --- /dev/null +++ b/Code - Published/chapter02/organizingFiles/main.html @@ -0,0 +1,3 @@ + +Organizing files + \ No newline at end of file diff --git a/Code - Published/chapter02/organizingFiles/program.js b/Code - Published/chapter02/organizingFiles/program.js new file mode 100644 index 0000000..43d8875 --- /dev/null +++ b/Code - Published/chapter02/organizingFiles/program.js @@ -0,0 +1,5 @@ +(function(){ + +window.alert("The JavaScript program has loaded!"); + +}()); \ No newline at end of file diff --git a/Code - Published/chapter03/.DS_Store b/Code - Published/chapter03/.DS_Store new file mode 100644 index 0000000..20f60b7 Binary files /dev/null and b/Code - Published/chapter03/.DS_Store differ diff --git a/Code - Published/chapter03/alienAttack/.DS_Store b/Code - Published/chapter03/alienAttack/.DS_Store new file mode 100644 index 0000000..2a2a980 Binary files /dev/null and b/Code - Published/chapter03/alienAttack/.DS_Store differ diff --git a/Code - Published/chapter03/alienAttack/images/alien.png b/Code - Published/chapter03/alienAttack/images/alien.png new file mode 100644 index 0000000..417173f Binary files /dev/null and b/Code - Published/chapter03/alienAttack/images/alien.png differ diff --git a/Code - Published/chapter03/alienAttack/images/background.png b/Code - Published/chapter03/alienAttack/images/background.png new file mode 100644 index 0000000..72aba85 Binary files /dev/null and b/Code - Published/chapter03/alienAttack/images/background.png differ diff --git a/Code - Published/chapter03/alienAttack/images/cannon.png b/Code - Published/chapter03/alienAttack/images/cannon.png new file mode 100644 index 0000000..eee838c Binary files /dev/null and b/Code - Published/chapter03/alienAttack/images/cannon.png differ diff --git a/Code - Published/chapter03/alienAttack/images/missile.png b/Code - Published/chapter03/alienAttack/images/missile.png new file mode 100644 index 0000000..6951809 Binary files /dev/null and b/Code - Published/chapter03/alienAttack/images/missile.png differ diff --git a/Code - Published/chapter03/alienAttack/src/alienAttack.html b/Code - Published/chapter03/alienAttack/src/alienAttack.html new file mode 100644 index 0000000..806b0cb --- /dev/null +++ b/Code - Published/chapter03/alienAttack/src/alienAttack.html @@ -0,0 +1,186 @@ + + +Alien attack + + + +
+
+
+
+
+
+ +

Enter the X and Y position (0-300), then click fire.

+ + + + + \ No newline at end of file diff --git a/Code - Published/chapter03/alienAttackFinished/.DS_Store b/Code - Published/chapter03/alienAttackFinished/.DS_Store new file mode 100644 index 0000000..37e2d8f Binary files /dev/null and b/Code - Published/chapter03/alienAttackFinished/.DS_Store differ diff --git a/Code - Published/chapter03/alienAttackFinished/fonts/.DS_Store b/Code - Published/chapter03/alienAttackFinished/fonts/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter03/alienAttackFinished/fonts/.DS_Store differ diff --git a/Code - Published/chapter03/alienAttackFinished/fonts/emulogic.ttf b/Code - Published/chapter03/alienAttackFinished/fonts/emulogic.ttf new file mode 100644 index 0000000..fb32de8 Binary files /dev/null and b/Code - Published/chapter03/alienAttackFinished/fonts/emulogic.ttf differ diff --git a/Code - Published/chapter03/alienAttackFinished/images/alien.png b/Code - Published/chapter03/alienAttackFinished/images/alien.png new file mode 100644 index 0000000..417173f Binary files /dev/null and b/Code - Published/chapter03/alienAttackFinished/images/alien.png differ diff --git a/Code - Published/chapter03/alienAttackFinished/images/background.png b/Code - Published/chapter03/alienAttackFinished/images/background.png new file mode 100644 index 0000000..72aba85 Binary files /dev/null and b/Code - Published/chapter03/alienAttackFinished/images/background.png differ diff --git a/Code - Published/chapter03/alienAttackFinished/images/cannon.png b/Code - Published/chapter03/alienAttackFinished/images/cannon.png new file mode 100644 index 0000000..eee838c Binary files /dev/null and b/Code - Published/chapter03/alienAttackFinished/images/cannon.png differ diff --git a/Code - Published/chapter03/alienAttackFinished/images/explosion.png b/Code - Published/chapter03/alienAttackFinished/images/explosion.png new file mode 100644 index 0000000..6e1cef1 Binary files /dev/null and b/Code - Published/chapter03/alienAttackFinished/images/explosion.png differ diff --git a/Code - Published/chapter03/alienAttackFinished/images/missile.png b/Code - Published/chapter03/alienAttackFinished/images/missile.png new file mode 100644 index 0000000..6951809 Binary files /dev/null and b/Code - Published/chapter03/alienAttackFinished/images/missile.png differ diff --git a/Code - Published/chapter03/alienAttackFinished/src/alienAttack.css b/Code - Published/chapter03/alienAttackFinished/src/alienAttack.css new file mode 100644 index 0000000..610ac36 --- /dev/null +++ b/Code - Published/chapter03/alienAttackFinished/src/alienAttack.css @@ -0,0 +1,176 @@ +* +{ + font-family: emulogic; + padding: 0px; + margin: 0px; +} + +@font-face +{ + font-family: emulogic; + src: url("../fonts/emulogic.ttf"); + + /* + + Note: Firefox requires that the font file + be in the same folder as the CSS file. + If you are using Firefox, copy the emulogic.ttf font + into the src folder and use this src property: + + src: url("../fonts/emulogic.ttf"); + + */ + +} + + +h1 +{ + text-align: center; + font-size: 24px; + color: #FFBF00; + padding-bottom: 20px; + + text-shadow: 3px 3px lime; + + -webkit-text-stroke: 1px #000; + -moz-text-stroke: 1px #000; + text-stroke: 1px #000; +} + +p +{ + text-align: center; + font-size: 12px; + padding-bottom: 20px; + color: #FFBF00; +} + +input +{ + font-size: 15px; + background-color: black; + color: #FFBF00; + width: 75px; + padding: 5px 10px; + border: 1px solid lime; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} + +button +{ + font-size: 15px; + color: #FFBF00; + padding: 5px 10px; + border: 2px solid lime; + + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + background: black; + + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +button:hover +{ + background-color: #FFBF00; + color: #000; +} + +button:active +{ + background-color: #9e7606; + color: #000; +} + +#game +{ + margin: 0px auto; + width: 330px; + height: auto; + padding: 15px; + border: black; + + background:-webkit-linear-gradient(300deg, #588063, #000); + background:-moz-linear-gradient(top, #588063, #000); + background: linear-gradient(top, #588063, #000); + + -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} + +#stage +{ + margin: 0px auto; + width: 300px; + height: 300px; + position: relative; + + -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + + margin-bottom: 20px; + border: 1px solid lime; +} + +#background +{ + width: 300px; + height: 300px; + position: absolute; + top: 0px; + left: 0px; + background-image: url(../images/background.png); +} + +#cannon +{ + width: 20px; + height: 20px; + position: absolute; + top: 270px; + left: 140px; + background-image: url(../images/cannon.png); +} + +#alien +{ + width: 20px; + height: 20px; + position: absolute; + top: 20px; + left: 80px; + background-image: url(../images/alien.png); +} + +#missile +{ + width: 10px; + height: 10px; + position: absolute; + top: 240px; + left: 145px; + background-image: url(../images/missile.png); +} + +#explosion +{ + width: 20px; + height: 20px; + position: absolute; + top: 0px; + left: 0px; + background-image: url(../images/explosion.png); + display: none; +} diff --git a/Code - Published/chapter03/alienAttackFinished/src/alienAttackFinished.html b/Code - Published/chapter03/alienAttackFinished/src/alienAttackFinished.html new file mode 100644 index 0000000..155929a --- /dev/null +++ b/Code - Published/chapter03/alienAttackFinished/src/alienAttackFinished.html @@ -0,0 +1,198 @@ + + +Alien Attack + + +
+ +

Alien Attack!

+ +
+
+
+
+
+
+
+ +

Enter the X and Y position (0-300), then click fire.

+ + + + +
+ + \ No newline at end of file diff --git a/Code - Published/chapter03/alienAttackFinished/src/emulogic.ttf b/Code - Published/chapter03/alienAttackFinished/src/emulogic.ttf new file mode 100644 index 0000000..fb32de8 Binary files /dev/null and b/Code - Published/chapter03/alienAttackFinished/src/emulogic.ttf differ diff --git a/Code - Published/chapter03/alienExplosion/.DS_Store b/Code - Published/chapter03/alienExplosion/.DS_Store new file mode 100644 index 0000000..2a2a980 Binary files /dev/null and b/Code - Published/chapter03/alienExplosion/.DS_Store differ diff --git a/Code - Published/chapter03/alienExplosion/images/alien.png b/Code - Published/chapter03/alienExplosion/images/alien.png new file mode 100644 index 0000000..417173f Binary files /dev/null and b/Code - Published/chapter03/alienExplosion/images/alien.png differ diff --git a/Code - Published/chapter03/alienExplosion/images/background.png b/Code - Published/chapter03/alienExplosion/images/background.png new file mode 100644 index 0000000..72aba85 Binary files /dev/null and b/Code - Published/chapter03/alienExplosion/images/background.png differ diff --git a/Code - Published/chapter03/alienExplosion/images/cannon.png b/Code - Published/chapter03/alienExplosion/images/cannon.png new file mode 100644 index 0000000..eee838c Binary files /dev/null and b/Code - Published/chapter03/alienExplosion/images/cannon.png differ diff --git a/Code - Published/chapter03/alienExplosion/images/explosion.png b/Code - Published/chapter03/alienExplosion/images/explosion.png new file mode 100644 index 0000000..6e1cef1 Binary files /dev/null and b/Code - Published/chapter03/alienExplosion/images/explosion.png differ diff --git a/Code - Published/chapter03/alienExplosion/images/missile.png b/Code - Published/chapter03/alienExplosion/images/missile.png new file mode 100644 index 0000000..6951809 Binary files /dev/null and b/Code - Published/chapter03/alienExplosion/images/missile.png differ diff --git a/Code - Published/chapter03/alienExplosion/src/alienExplosion.html b/Code - Published/chapter03/alienExplosion/src/alienExplosion.html new file mode 100644 index 0000000..12d04a2 --- /dev/null +++ b/Code - Published/chapter03/alienExplosion/src/alienExplosion.html @@ -0,0 +1,215 @@ + + +Alien explosion + + + +
+
+
+
+
+
+
+ +

Enter the X and Y position (0-300), then click fire.

+ + + + + \ No newline at end of file diff --git a/Code - Published/chapter03/customButton.html b/Code - Published/chapter03/customButton.html new file mode 100644 index 0000000..a2a36ce --- /dev/null +++ b/Code - Published/chapter03/customButton.html @@ -0,0 +1,49 @@ + +Custom button + + + + + \ No newline at end of file diff --git a/Code - Published/chapter03/numberGameWithButton.html b/Code - Published/chapter03/numberGameWithButton.html new file mode 100644 index 0000000..45748e2 --- /dev/null +++ b/Code - Published/chapter03/numberGameWithButton.html @@ -0,0 +1,170 @@ + + +Number guessing game with button + + + +

I am thinking of a number between 0 and 99.

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter03/numberGameWithGraphics/.DS_Store b/Code - Published/chapter03/numberGameWithGraphics/.DS_Store new file mode 100644 index 0000000..2a2a980 Binary files /dev/null and b/Code - Published/chapter03/numberGameWithGraphics/.DS_Store differ diff --git a/Code - Published/chapter03/numberGameWithGraphics/images/arrow.png b/Code - Published/chapter03/numberGameWithGraphics/images/arrow.png new file mode 100644 index 0000000..3170c2f Binary files /dev/null and b/Code - Published/chapter03/numberGameWithGraphics/images/arrow.png differ diff --git a/Code - Published/chapter03/numberGameWithGraphics/images/scale.png b/Code - Published/chapter03/numberGameWithGraphics/images/scale.png new file mode 100644 index 0000000..63f3b5b Binary files /dev/null and b/Code - Published/chapter03/numberGameWithGraphics/images/scale.png differ diff --git a/Code - Published/chapter03/numberGameWithGraphics/src/numberGameWithGraphics.html b/Code - Published/chapter03/numberGameWithGraphics/src/numberGameWithGraphics.html new file mode 100644 index 0000000..3032415 --- /dev/null +++ b/Code - Published/chapter03/numberGameWithGraphics/src/numberGameWithGraphics.html @@ -0,0 +1,140 @@ + + +Number guessing game with graphics + + + +
+
+
+
+ +

I am thinking of a number between 0 and 99.

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter03/numberGame_1.html b/Code - Published/chapter03/numberGame_1.html new file mode 100644 index 0000000..b14736d --- /dev/null +++ b/Code - Published/chapter03/numberGame_1.html @@ -0,0 +1,46 @@ + +Number guessing game + +

I am thinking of a number between 0 and 99.

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter03/numberGame_2.html b/Code - Published/chapter03/numberGame_2.html new file mode 100644 index 0000000..e6722f6 --- /dev/null +++ b/Code - Published/chapter03/numberGame_2.html @@ -0,0 +1,53 @@ + +Number guessing game + +

I am thinking of a number between 0 and 99.

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter03/numberGame_3.html b/Code - Published/chapter03/numberGame_3.html new file mode 100644 index 0000000..1d80905 --- /dev/null +++ b/Code - Published/chapter03/numberGame_3.html @@ -0,0 +1,83 @@ + +Number guessing game + +

I am thinking of a number between 0 and 99.

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter03/numberGame_4.html b/Code - Published/chapter03/numberGame_4.html new file mode 100644 index 0000000..4d35313 --- /dev/null +++ b/Code - Published/chapter03/numberGame_4.html @@ -0,0 +1,127 @@ + + +Number guessing game + +

I am thinking of a number between 0 and 99.

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter03/randomNumbers.html b/Code - Published/chapter03/randomNumbers.html new file mode 100644 index 0000000..6118211 --- /dev/null +++ b/Code - Published/chapter03/randomNumbers.html @@ -0,0 +1,49 @@ + +Random numbers + + \ No newline at end of file diff --git a/Code - Published/chapter03/usingParseint.html b/Code - Published/chapter03/usingParseint.html new file mode 100644 index 0000000..6b1ddbf --- /dev/null +++ b/Code - Published/chapter03/usingParseint.html @@ -0,0 +1,18 @@ + +Comparing strings + + \ No newline at end of file diff --git a/Code - Published/chapter04/.DS_Store b/Code - Published/chapter04/.DS_Store new file mode 100644 index 0000000..6e80a08 Binary files /dev/null and b/Code - Published/chapter04/.DS_Store differ diff --git a/Code - Published/chapter04/Forest of Lyrica/.DS_Store b/Code - Published/chapter04/Forest of Lyrica/.DS_Store new file mode 100644 index 0000000..57223cc Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/.DS_Store differ diff --git a/Code - Published/chapter04/Forest of Lyrica/fonts/.DS_Store b/Code - Published/chapter04/Forest of Lyrica/fonts/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/fonts/.DS_Store differ diff --git a/Code - Published/chapter04/Forest of Lyrica/fonts/Ginga.ttf b/Code - Published/chapter04/Forest of Lyrica/fonts/Ginga.ttf new file mode 100644 index 0000000..59fbd6a Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/fonts/Ginga.ttf differ diff --git a/Code - Published/chapter04/Forest of Lyrica/fonts/Merriweather-Bold.ttf b/Code - Published/chapter04/Forest of Lyrica/fonts/Merriweather-Bold.ttf new file mode 100644 index 0000000..6f28204 Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/fonts/Merriweather-Bold.ttf differ diff --git a/Code - Published/chapter04/Forest of Lyrica/fonts/Merriweather.ttf b/Code - Published/chapter04/Forest of Lyrica/fonts/Merriweather.ttf new file mode 100644 index 0000000..19c2012 Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/fonts/Merriweather.ttf differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/.DS_Store b/Code - Published/chapter04/Forest of Lyrica/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/.DS_Store differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/bench.png b/Code - Published/chapter04/Forest of Lyrica/images/bench.png new file mode 100644 index 0000000..afe5588 Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/bench.png differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/cottage.png b/Code - Published/chapter04/Forest of Lyrica/images/cottage.png new file mode 100644 index 0000000..2c07560 Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/cottage.png differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/dragon.png b/Code - Published/chapter04/Forest of Lyrica/images/dragon.png new file mode 100644 index 0000000..1e593c1 Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/dragon.png differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/gate.png b/Code - Published/chapter04/Forest of Lyrica/images/gate.png new file mode 100644 index 0000000..e31e917 Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/gate.png differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/glade.png b/Code - Published/chapter04/Forest of Lyrica/images/glade.png new file mode 100644 index 0000000..1084c2f Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/glade.png differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/keep.png b/Code - Published/chapter04/Forest of Lyrica/images/keep.png new file mode 100644 index 0000000..dc27601 Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/keep.png differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/paper.png b/Code - Published/chapter04/Forest of Lyrica/images/paper.png new file mode 100644 index 0000000..eb0ad40 Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/paper.png differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/path.png b/Code - Published/chapter04/Forest of Lyrica/images/path.png new file mode 100644 index 0000000..c9e93d9 Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/path.png differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/river.png b/Code - Published/chapter04/Forest of Lyrica/images/river.png new file mode 100644 index 0000000..afd011f Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/river.png differ diff --git a/Code - Published/chapter04/Forest of Lyrica/images/well.png b/Code - Published/chapter04/Forest of Lyrica/images/well.png new file mode 100644 index 0000000..bcbd79d Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/images/well.png differ diff --git a/Code - Published/chapter04/Forest of Lyrica/src/.DS_Store b/Code - Published/chapter04/Forest of Lyrica/src/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter04/Forest of Lyrica/src/.DS_Store differ diff --git a/Code - Published/chapter04/Forest of Lyrica/src/forestOfLyrica.html b/Code - Published/chapter04/Forest of Lyrica/src/forestOfLyrica.html new file mode 100644 index 0000000..40a1e3e --- /dev/null +++ b/Code - Published/chapter04/Forest of Lyrica/src/forestOfLyrica.html @@ -0,0 +1,461 @@ + +The Forest of Lyrica - Finished + + +
+

The Forest of Lyrica

+ +

+ + +
+ + \ No newline at end of file diff --git a/Code - Published/chapter04/Forest of Lyrica/src/lyrica.css b/Code - Published/chapter04/Forest of Lyrica/src/lyrica.css new file mode 100644 index 0000000..2c5978d --- /dev/null +++ b/Code - Published/chapter04/Forest of Lyrica/src/lyrica.css @@ -0,0 +1,108 @@ +* +{ + font-family: Merriweather; + color: #000; + font-size: 16px; + padding: 0px; + margin: 0px; +} + +@font-face +{ + font-family: Merriweather; + src: url("../fonts/Merriweather.ttf"); +} + +@font-face +{ + font-family: Merriweather-Bold; + src: url("../fonts/Merriweather-Bold.ttf"); +} + +@font-face +{ + font-family: Ginga; + src: url("../fonts/Ginga.ttf"); +} + +h1 +{ + text-align: center; + font-family: Ginga; + font-size: 80px; + padding-bottom: 10px; + padding-top: 80px; + font-weight: normal; +} +em +{ + font-size: 14px; +} +p +{ + width: 300px; + margin: 0px auto; +} + +img +{ + margin: 0px auto; + display: block; + margin-bottom: 20px; +} + +input +{ + position: absolute; + bottom: 30px; + left: 135px; + width: 160px; + padding: 2px 2px 2px 5px; + border: 1px solid black; + background-color: rgba(255,255,255,0.3); + -webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5); + -moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5); + box-shadow: 3px 3px 5px rgba(0,0,0,0.4); +} + +button +{ + position: absolute; + bottom: 30px; + left: 310px; + height: 25px; + width: 50px; + + font-family: Merriweather; + font-size: 14px; + color: #000; + border: 1px solid #000; + + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + + background:-webkit-linear-gradient(top, rgba(255,255,255,0.6), rgba(0,0,0,0.2)); + background:-moz-linear-gradient(top, #a3a3a3, rgba(0,0,0,0.2)); + background: linear-gradient(top, #a3a3a3, rgba(0,0,0,0.2)); + + -webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5); + -moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5); + box-shadow: 3px 3px 5px rgba(0,0,0,0.4); + + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + + +#stage +{ + width: 500px; + height: 648px; + background-color: gray; + position: relative; + background-image: url("../images/paper.png"); +} + + diff --git a/Code - Published/chapter04/Forest of Lyrica/src/lyrica1.html b/Code - Published/chapter04/Forest of Lyrica/src/lyrica1.html new file mode 100644 index 0000000..8319ec3 --- /dev/null +++ b/Code - Published/chapter04/Forest of Lyrica/src/lyrica1.html @@ -0,0 +1,30 @@ + +The Forest of Lyrica - 1 + +

+ + \ No newline at end of file diff --git a/Code - Published/chapter04/Forest of Lyrica/src/lyrica2.html b/Code - Published/chapter04/Forest of Lyrica/src/lyrica2.html new file mode 100644 index 0000000..34cc644 --- /dev/null +++ b/Code - Published/chapter04/Forest of Lyrica/src/lyrica2.html @@ -0,0 +1,111 @@ + +The Forest of Lyrica - 2 + +

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter04/Forest of Lyrica/src/lyrica3.html b/Code - Published/chapter04/Forest of Lyrica/src/lyrica3.html new file mode 100644 index 0000000..3dcb855 --- /dev/null +++ b/Code - Published/chapter04/Forest of Lyrica/src/lyrica3.html @@ -0,0 +1,129 @@ + +The Forest of Lyrica - 3 + + +

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter04/Forest of Lyrica/src/lyrica4.html b/Code - Published/chapter04/Forest of Lyrica/src/lyrica4.html new file mode 100644 index 0000000..21a22aa --- /dev/null +++ b/Code - Published/chapter04/Forest of Lyrica/src/lyrica4.html @@ -0,0 +1,170 @@ + +The Forest of Lyrica - 4 + + +

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter04/Forest of Lyrica/src/lyrica5.html b/Code - Published/chapter04/Forest of Lyrica/src/lyrica5.html new file mode 100644 index 0000000..bdef9ef --- /dev/null +++ b/Code - Published/chapter04/Forest of Lyrica/src/lyrica5.html @@ -0,0 +1,356 @@ + +The Forest of Lyrica - 5 + + +

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter04/Forest of Lyrica/src/lyrica6.html b/Code - Published/chapter04/Forest of Lyrica/src/lyrica6.html new file mode 100644 index 0000000..6373d9d --- /dev/null +++ b/Code - Published/chapter04/Forest of Lyrica/src/lyrica6.html @@ -0,0 +1,376 @@ + +The Forest of Lyrica - 6 + + +

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter04/arrayLoop.html b/Code - Published/chapter04/arrayLoop.html new file mode 100644 index 0000000..fe43fea --- /dev/null +++ b/Code - Published/chapter04/arrayLoop.html @@ -0,0 +1,19 @@ + +For loop + + \ No newline at end of file diff --git a/Code - Published/chapter04/arraySearch.html b/Code - Published/chapter04/arraySearch.html new file mode 100644 index 0000000..9d9eb39 --- /dev/null +++ b/Code - Published/chapter04/arraySearch.html @@ -0,0 +1,23 @@ + +Array search + + \ No newline at end of file diff --git a/Code - Published/chapter04/artificialLife.html b/Code - Published/chapter04/artificialLife.html new file mode 100644 index 0000000..a862c57 --- /dev/null +++ b/Code - Published/chapter04/artificialLife.html @@ -0,0 +1,30 @@ + +Artificial life + +

Hi! How are you today?

+ + + + \ No newline at end of file diff --git a/Code - Published/chapter04/basicArray.html b/Code - Published/chapter04/basicArray.html new file mode 100644 index 0000000..574340c --- /dev/null +++ b/Code - Published/chapter04/basicArray.html @@ -0,0 +1,22 @@ + +For loop + + \ No newline at end of file diff --git a/Code - Published/chapter04/database.html b/Code - Published/chapter04/database.html new file mode 100644 index 0000000..ecfc70d --- /dev/null +++ b/Code - Published/chapter04/database.html @@ -0,0 +1,48 @@ + +Database + + \ No newline at end of file diff --git a/Code - Published/chapter04/forLoop.html b/Code - Published/chapter04/forLoop.html new file mode 100644 index 0000000..c4f731c --- /dev/null +++ b/Code - Published/chapter04/forLoop.html @@ -0,0 +1,33 @@ + +For loop + + \ No newline at end of file diff --git a/Code - Published/chapter04/usingIndexOf.html b/Code - Published/chapter04/usingIndexOf.html new file mode 100644 index 0000000..7c4a111 --- /dev/null +++ b/Code - Published/chapter04/usingIndexOf.html @@ -0,0 +1,17 @@ + +Using indexOf + + \ No newline at end of file diff --git a/Code - Published/chapter04/usingPop.html b/Code - Published/chapter04/usingPop.html new file mode 100644 index 0000000..ab11725 --- /dev/null +++ b/Code - Published/chapter04/usingPop.html @@ -0,0 +1,18 @@ + +Using pop + + \ No newline at end of file diff --git a/Code - Published/chapter04/usingPush.html b/Code - Published/chapter04/usingPush.html new file mode 100644 index 0000000..702f64f --- /dev/null +++ b/Code - Published/chapter04/usingPush.html @@ -0,0 +1,22 @@ + +Using push + + \ No newline at end of file diff --git a/Code - Published/chapter04/usingSplice.html b/Code - Published/chapter04/usingSplice.html new file mode 100644 index 0000000..ad9bceb --- /dev/null +++ b/Code - Published/chapter04/usingSplice.html @@ -0,0 +1,18 @@ + +Using splice + + \ No newline at end of file diff --git a/Code - Published/chapter05/.DS_Store b/Code - Published/chapter05/.DS_Store new file mode 100644 index 0000000..78e43fb Binary files /dev/null and b/Code - Published/chapter05/.DS_Store differ diff --git a/Code - Published/chapter05/islandAdventure/.DS_Store b/Code - Published/chapter05/islandAdventure/.DS_Store new file mode 100644 index 0000000..00776c1 Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/.DS_Store differ diff --git a/Code - Published/chapter05/islandAdventure/fonts/.DS_Store b/Code - Published/chapter05/islandAdventure/fonts/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/fonts/.DS_Store differ diff --git a/Code - Published/chapter05/islandAdventure/fonts/PiratesWriters.ttf b/Code - Published/chapter05/islandAdventure/fonts/PiratesWriters.ttf new file mode 100644 index 0000000..f68a457 Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/fonts/PiratesWriters.ttf differ diff --git a/Code - Published/chapter05/islandAdventure/images/.DS_Store b/Code - Published/chapter05/islandAdventure/images/.DS_Store new file mode 100644 index 0000000..c01a93d Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/images/.DS_Store differ diff --git a/Code - Published/chapter05/islandAdventure/images/background.png b/Code - Published/chapter05/islandAdventure/images/background.png new file mode 100644 index 0000000..c337a68 Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/images/background.png differ diff --git a/Code - Published/chapter05/islandAdventure/images/home.png b/Code - Published/chapter05/islandAdventure/images/home.png new file mode 100644 index 0000000..357836e Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/images/home.png differ diff --git a/Code - Published/chapter05/islandAdventure/images/island.png b/Code - Published/chapter05/islandAdventure/images/island.png new file mode 100644 index 0000000..cde12ed Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/images/island.png differ diff --git a/Code - Published/chapter05/islandAdventure/images/monster.png b/Code - Published/chapter05/islandAdventure/images/monster.png new file mode 100644 index 0000000..0aac0b8 Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/images/monster.png differ diff --git a/Code - Published/chapter05/islandAdventure/images/pirate.png b/Code - Published/chapter05/islandAdventure/images/pirate.png new file mode 100644 index 0000000..2f7f643 Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/images/pirate.png differ diff --git a/Code - Published/chapter05/islandAdventure/images/ship.png b/Code - Published/chapter05/islandAdventure/images/ship.png new file mode 100644 index 0000000..ec62924 Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/images/ship.png differ diff --git a/Code - Published/chapter05/islandAdventure/images/water.png b/Code - Published/chapter05/islandAdventure/images/water.png new file mode 100644 index 0000000..b10fadd Binary files /dev/null and b/Code - Published/chapter05/islandAdventure/images/water.png differ diff --git a/Code - Published/chapter05/islandAdventure/src/islandAdventure1.html b/Code - Published/chapter05/islandAdventure/src/islandAdventure1.html new file mode 100644 index 0000000..f825a2b --- /dev/null +++ b/Code - Published/chapter05/islandAdventure/src/islandAdventure1.html @@ -0,0 +1,119 @@ + +Island Adventure 1 + + + +
+

+ + + diff --git a/Code - Published/chapter05/islandAdventure/src/islandAdventure2.html b/Code - Published/chapter05/islandAdventure/src/islandAdventure2.html new file mode 100644 index 0000000..218e804 --- /dev/null +++ b/Code - Published/chapter05/islandAdventure/src/islandAdventure2.html @@ -0,0 +1,155 @@ + +Island Adventure 2 + + + +
+

+ + + diff --git a/Code - Published/chapter05/islandAdventure/src/islandAdventure3.html b/Code - Published/chapter05/islandAdventure/src/islandAdventure3.html new file mode 100644 index 0000000..6705ecf --- /dev/null +++ b/Code - Published/chapter05/islandAdventure/src/islandAdventure3.html @@ -0,0 +1,218 @@ + +Island Adventure 1 + + + +
+

+ + + diff --git a/Code - Published/chapter05/islandAdventure/src/islandAdventure4.html b/Code - Published/chapter05/islandAdventure/src/islandAdventure4.html new file mode 100644 index 0000000..3894a38 --- /dev/null +++ b/Code - Published/chapter05/islandAdventure/src/islandAdventure4.html @@ -0,0 +1,240 @@ + +Island Adventure 1 + + + + +
+

+ + + diff --git a/Code - Published/chapter05/islandAdventure/src/islandAdventure5.html b/Code - Published/chapter05/islandAdventure/src/islandAdventure5.html new file mode 100644 index 0000000..a6add47 --- /dev/null +++ b/Code - Published/chapter05/islandAdventure/src/islandAdventure5.html @@ -0,0 +1,361 @@ + +Island Adventure 1 + + + +
+

+ + + diff --git a/Code - Published/chapter05/islandAdventure/src/islandAdventure6.html b/Code - Published/chapter05/islandAdventure/src/islandAdventure6.html new file mode 100644 index 0000000..52ede0b --- /dev/null +++ b/Code - Published/chapter05/islandAdventure/src/islandAdventure6.html @@ -0,0 +1,481 @@ + +Island Adventure 1 + + + +
+

+ + + diff --git a/Code - Published/chapter05/islandAdventure/src/islandAdventureFinished.html b/Code - Published/chapter05/islandAdventure/src/islandAdventureFinished.html new file mode 100644 index 0000000..54f8483 --- /dev/null +++ b/Code - Published/chapter05/islandAdventure/src/islandAdventureFinished.html @@ -0,0 +1,511 @@ + + +Island Adventure + + + +
+

Island Adventure

+
+

+
+ + + diff --git a/Code - Published/chapter05/looping2DArrays.html b/Code - Published/chapter05/looping2DArrays.html new file mode 100644 index 0000000..846654d --- /dev/null +++ b/Code - Published/chapter05/looping2DArrays.html @@ -0,0 +1,51 @@ + +Looping through 2D arrays + + + diff --git a/Code - Published/chapter05/loopingThroughObjects.html b/Code - Published/chapter05/loopingThroughObjects.html new file mode 100644 index 0000000..c0d6583 --- /dev/null +++ b/Code - Published/chapter05/loopingThroughObjects.html @@ -0,0 +1,64 @@ + +Robot + + \ No newline at end of file diff --git a/Code - Published/chapter05/twoDimensionalArrays.html b/Code - Published/chapter05/twoDimensionalArrays.html new file mode 100644 index 0000000..81981db --- /dev/null +++ b/Code - Published/chapter05/twoDimensionalArrays.html @@ -0,0 +1,47 @@ + +2D arrays + + diff --git a/Code - Published/chapter05/visualizing2DArrays.html b/Code - Published/chapter05/visualizing2DArrays.html new file mode 100644 index 0000000..817b5ce --- /dev/null +++ b/Code - Published/chapter05/visualizing2DArrays.html @@ -0,0 +1,74 @@ + +Visualizing 2D arrays + + + +
+ + + diff --git a/Code - Published/chapter06/.DS_Store b/Code - Published/chapter06/.DS_Store new file mode 100644 index 0000000..3e22710 Binary files /dev/null and b/Code - Published/chapter06/.DS_Store differ diff --git a/Code - Published/chapter06/10_stateChangeTimer.html b/Code - Published/chapter06/10_stateChangeTimer.html new file mode 100644 index 0000000..db5fc94 --- /dev/null +++ b/Code - Published/chapter06/10_stateChangeTimer.html @@ -0,0 +1,66 @@ + +State change timer + + + + + diff --git a/Code - Published/chapter06/11_animationObject.html b/Code - Published/chapter06/11_animationObject.html new file mode 100644 index 0000000..4f39804 --- /dev/null +++ b/Code - Published/chapter06/11_animationObject.html @@ -0,0 +1,85 @@ + +Animation object + + + + + diff --git a/Code - Published/chapter06/12_tilesheetWithRows.html b/Code - Published/chapter06/12_tilesheetWithRows.html new file mode 100644 index 0000000..9eed2ac --- /dev/null +++ b/Code - Published/chapter06/12_tilesheetWithRows.html @@ -0,0 +1,87 @@ + +Tilesheet with rows + + + + + diff --git a/Code - Published/chapter06/13_animationLoop.html b/Code - Published/chapter06/13_animationLoop.html new file mode 100644 index 0000000..e025808 --- /dev/null +++ b/Code - Published/chapter06/13_animationLoop.html @@ -0,0 +1,104 @@ + +Animation loop + + + + + diff --git a/Code - Published/chapter06/14_randomAnimation.html b/Code - Published/chapter06/14_randomAnimation.html new file mode 100644 index 0000000..ac6aa61 --- /dev/null +++ b/Code - Published/chapter06/14_randomAnimation.html @@ -0,0 +1,147 @@ + +Random animation + + + + + diff --git a/Code - Published/chapter06/1_displayingWithCanvas.html b/Code - Published/chapter06/1_displayingWithCanvas.html new file mode 100644 index 0000000..a9258e3 --- /dev/null +++ b/Code - Published/chapter06/1_displayingWithCanvas.html @@ -0,0 +1,88 @@ + +Displaying an image with canvas + + + + + + + diff --git a/Code - Published/chapter06/2_robotObject.html b/Code - Published/chapter06/2_robotObject.html new file mode 100644 index 0000000..83fa28d --- /dev/null +++ b/Code - Published/chapter06/2_robotObject.html @@ -0,0 +1,57 @@ + +Robot + + \ No newline at end of file diff --git a/Code - Published/chapter06/3_loopingThroughObjects.html b/Code - Published/chapter06/3_loopingThroughObjects.html new file mode 100644 index 0000000..0eed054 --- /dev/null +++ b/Code - Published/chapter06/3_loopingThroughObjects.html @@ -0,0 +1,91 @@ + +Looping through objects + + \ No newline at end of file diff --git a/Code - Published/chapter06/4_changingStates.html b/Code - Published/chapter06/4_changingStates.html new file mode 100644 index 0000000..4bbb6be --- /dev/null +++ b/Code - Published/chapter06/4_changingStates.html @@ -0,0 +1,32 @@ + +Changing states + + + diff --git a/Code - Published/chapter06/5_renderingStates.html b/Code - Published/chapter06/5_renderingStates.html new file mode 100644 index 0000000..72295fa --- /dev/null +++ b/Code - Published/chapter06/5_renderingStates.html @@ -0,0 +1,85 @@ + +Rendering states + + + + + diff --git a/Code - Published/chapter06/6_usingSetTimeout.html b/Code - Published/chapter06/6_usingSetTimeout.html new file mode 100644 index 0000000..4fd2a8f --- /dev/null +++ b/Code - Published/chapter06/6_usingSetTimeout.html @@ -0,0 +1,13 @@ + +Using setTimeout + + \ No newline at end of file diff --git a/Code - Published/chapter06/7_usingSetInterval.html b/Code - Published/chapter06/7_usingSetInterval.html new file mode 100644 index 0000000..7d86c9b --- /dev/null +++ b/Code - Published/chapter06/7_usingSetInterval.html @@ -0,0 +1,13 @@ + +Using setInterval + + \ No newline at end of file diff --git a/Code - Published/chapter06/8_usingClearInterval.html b/Code - Published/chapter06/8_usingClearInterval.html new file mode 100644 index 0000000..f3955bc --- /dev/null +++ b/Code - Published/chapter06/8_usingClearInterval.html @@ -0,0 +1,23 @@ + +Using clearInterval + + \ No newline at end of file diff --git a/Code - Published/chapter06/9_timerObject.html b/Code - Published/chapter06/9_timerObject.html new file mode 100644 index 0000000..bc0b098 --- /dev/null +++ b/Code - Published/chapter06/9_timerObject.html @@ -0,0 +1,22 @@ + +Timer object + + + diff --git a/Code - Published/chapter06/frames.png b/Code - Published/chapter06/frames.png new file mode 100644 index 0000000..e581a0e Binary files /dev/null and b/Code - Published/chapter06/frames.png differ diff --git a/Code - Published/chapter06/monster.png b/Code - Published/chapter06/monster.png new file mode 100644 index 0000000..2f3256e Binary files /dev/null and b/Code - Published/chapter06/monster.png differ diff --git a/Code - Published/chapter06/monsterSmash/.DS_Store b/Code - Published/chapter06/monsterSmash/.DS_Store new file mode 100644 index 0000000..faf60ff Binary files /dev/null and b/Code - Published/chapter06/monsterSmash/.DS_Store differ diff --git a/Code - Published/chapter06/monsterSmash/fonts/Vanilla.ttf b/Code - Published/chapter06/monsterSmash/fonts/Vanilla.ttf new file mode 100644 index 0000000..3de7b85 Binary files /dev/null and b/Code - Published/chapter06/monsterSmash/fonts/Vanilla.ttf differ diff --git a/Code - Published/chapter06/monsterSmash/images/.DS_Store b/Code - Published/chapter06/monsterSmash/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter06/monsterSmash/images/.DS_Store differ diff --git a/Code - Published/chapter06/monsterSmash/images/monsterTileSheet.png b/Code - Published/chapter06/monsterSmash/images/monsterTileSheet.png new file mode 100644 index 0000000..24aa91f Binary files /dev/null and b/Code - Published/chapter06/monsterSmash/images/monsterTileSheet.png differ diff --git a/Code - Published/chapter06/monsterSmash/src/monsterSmash.css b/Code - Published/chapter06/monsterSmash/src/monsterSmash.css new file mode 100644 index 0000000..0341488 --- /dev/null +++ b/Code - Published/chapter06/monsterSmash/src/monsterSmash.css @@ -0,0 +1,46 @@ +* +{ + padding: 0px; + margin: 0px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +#stage +{ + position: relative; + width: 552px; + height: 414px; +} + +canvas +{ + display: block; + position: absolute; + width: 128px; + height: 128px; + + -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + + cursor: pointer; +} + +@font-face +{ + font-family: Vanilla; + src: url("../fonts/Vanilla.ttf"); +} + +p +{ + font-family: Vanilla; + font-size: 20px; + padding: 20px; +} \ No newline at end of file diff --git a/Code - Published/chapter06/monsterSmash/src/monsterSmash1.html b/Code - Published/chapter06/monsterSmash/src/monsterSmash1.html new file mode 100644 index 0000000..7160d11 --- /dev/null +++ b/Code - Published/chapter06/monsterSmash/src/monsterSmash1.html @@ -0,0 +1,186 @@ + +Monster Smash 1 + + + + + diff --git a/Code - Published/chapter06/monsterSmash/src/monsterSmash2.html b/Code - Published/chapter06/monsterSmash/src/monsterSmash2.html new file mode 100644 index 0000000..4871853 --- /dev/null +++ b/Code - Published/chapter06/monsterSmash/src/monsterSmash2.html @@ -0,0 +1,254 @@ + +Monster Smash 2 + + +
+ + \ No newline at end of file diff --git a/Code - Published/chapter06/monsterSmash/src/monsterSmashFinished.html b/Code - Published/chapter06/monsterSmash/src/monsterSmashFinished.html new file mode 100644 index 0000000..f83f413 --- /dev/null +++ b/Code - Published/chapter06/monsterSmash/src/monsterSmashFinished.html @@ -0,0 +1,320 @@ + +Monster Smash Finished + + +
+

+ + \ No newline at end of file diff --git a/Code - Published/chapter06/monsterStates.png b/Code - Published/chapter06/monsterStates.png new file mode 100644 index 0000000..6a584bd Binary files /dev/null and b/Code - Published/chapter06/monsterStates.png differ diff --git a/Code - Published/chapter06/monsterTileSheet.png b/Code - Published/chapter06/monsterTileSheet.png new file mode 100644 index 0000000..e56e18b Binary files /dev/null and b/Code - Published/chapter06/monsterTileSheet.png differ diff --git a/Code - Published/chapter07/.DS_Store b/Code - Published/chapter07/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter07/.DS_Store differ diff --git a/Code - Published/chapter07/10_screenBoundaries.html b/Code - Published/chapter07/10_screenBoundaries.html new file mode 100644 index 0000000..d5cf0ef --- /dev/null +++ b/Code - Published/chapter07/10_screenBoundaries.html @@ -0,0 +1,199 @@ + +Screen boundaries + + + + + diff --git a/Code - Published/chapter07/11_screenWrapping.html b/Code - Published/chapter07/11_screenWrapping.html new file mode 100644 index 0000000..ff55194 --- /dev/null +++ b/Code - Published/chapter07/11_screenWrapping.html @@ -0,0 +1,193 @@ + +Screen wrapping + + + + + diff --git a/Code - Published/chapter07/12_basicScrolling.html b/Code - Published/chapter07/12_basicScrolling.html new file mode 100644 index 0000000..3f93fac --- /dev/null +++ b/Code - Published/chapter07/12_basicScrolling.html @@ -0,0 +1,247 @@ + +Basic scrolling + + + + + diff --git a/Code - Published/chapter07/13_betterScrolling.html b/Code - Published/chapter07/13_betterScrolling.html new file mode 100644 index 0000000..7af1f87 --- /dev/null +++ b/Code - Published/chapter07/13_betterScrolling.html @@ -0,0 +1,298 @@ + +Better scrolling + + + + + diff --git a/Code - Published/chapter07/14_parallaxScrolling.html b/Code - Published/chapter07/14_parallaxScrolling.html new file mode 100644 index 0000000..2c6fa1d --- /dev/null +++ b/Code - Published/chapter07/14_parallaxScrolling.html @@ -0,0 +1,243 @@ + +Parallax scrolling + + + + + diff --git a/Code - Published/chapter07/15_mouseControl.html b/Code - Published/chapter07/15_mouseControl.html new file mode 100644 index 0000000..2b68c91 --- /dev/null +++ b/Code - Published/chapter07/15_mouseControl.html @@ -0,0 +1,162 @@ + +Mouse control + + + + + + + diff --git a/Code - Published/chapter07/16_touchControl.html b/Code - Published/chapter07/16_touchControl.html new file mode 100644 index 0000000..de8366e --- /dev/null +++ b/Code - Published/chapter07/16_touchControl.html @@ -0,0 +1,174 @@ + +Touch control + + + + +

+ + + diff --git a/Code - Published/chapter07/1_basicSprite.html b/Code - Published/chapter07/1_basicSprite.html new file mode 100644 index 0000000..e8b65e8 --- /dev/null +++ b/Code - Published/chapter07/1_basicSprite.html @@ -0,0 +1,94 @@ + +Basic sprite + + + + + diff --git a/Code - Published/chapter07/2_manySprites.html b/Code - Published/chapter07/2_manySprites.html new file mode 100644 index 0000000..2eb781e --- /dev/null +++ b/Code - Published/chapter07/2_manySprites.html @@ -0,0 +1,115 @@ + +Many sprites + + + + + diff --git a/Code - Published/chapter07/3_manyImageFiles.html b/Code - Published/chapter07/3_manyImageFiles.html new file mode 100644 index 0000000..1a51ab1 --- /dev/null +++ b/Code - Published/chapter07/3_manyImageFiles.html @@ -0,0 +1,147 @@ + +Many Image files + + + + + diff --git a/Code - Published/chapter07/4_interactiveSprite.html b/Code - Published/chapter07/4_interactiveSprite.html new file mode 100644 index 0000000..7123e39 --- /dev/null +++ b/Code - Published/chapter07/4_interactiveSprite.html @@ -0,0 +1,192 @@ + +Interactive sprite + + + + + + + + + + + + + + diff --git a/Code - Published/chapter07/5_interactiveSpriteWithRotation.html b/Code - Published/chapter07/5_interactiveSpriteWithRotation.html new file mode 100644 index 0000000..541116e --- /dev/null +++ b/Code - Published/chapter07/5_interactiveSpriteWithRotation.html @@ -0,0 +1,233 @@ + +Interactive sprite + + + + + + + + + + + + + + + + diff --git a/Code - Published/chapter07/6_interactiveSpriteWithTransparency.html b/Code - Published/chapter07/6_interactiveSpriteWithTransparency.html new file mode 100644 index 0000000..05bf194 --- /dev/null +++ b/Code - Published/chapter07/6_interactiveSpriteWithTransparency.html @@ -0,0 +1,267 @@ + +Interactive sprite + + + + + + + + + + + + + + + + + + diff --git a/Code - Published/chapter07/7_interactiveSpriteWithShadows.html b/Code - Published/chapter07/7_interactiveSpriteWithShadows.html new file mode 100644 index 0000000..73a69c7 --- /dev/null +++ b/Code - Published/chapter07/7_interactiveSpriteWithShadows.html @@ -0,0 +1,301 @@ + +Interactive sprite + + + + + + + + + + + + + + + + + + + + diff --git a/Code - Published/chapter07/8_interactiveSpriteHTML.html b/Code - Published/chapter07/8_interactiveSpriteHTML.html new file mode 100644 index 0000000..40e6264 --- /dev/null +++ b/Code - Published/chapter07/8_interactiveSpriteHTML.html @@ -0,0 +1,337 @@ + +Interactive HTML sprite + + + + + + + + + + + + + + + + + + +
+
+
+ + + diff --git a/Code - Published/chapter07/9_keyboardControl.html b/Code - Published/chapter07/9_keyboardControl.html new file mode 100644 index 0000000..528a59b --- /dev/null +++ b/Code - Published/chapter07/9_keyboardControl.html @@ -0,0 +1,175 @@ + +Keyboard control + + + + + diff --git a/Code - Published/chapter07/background.png b/Code - Published/chapter07/background.png new file mode 100644 index 0000000..c59a5ed Binary files /dev/null and b/Code - Published/chapter07/background.png differ diff --git a/Code - Published/chapter07/basicScrolling_Old.html b/Code - Published/chapter07/basicScrolling_Old.html new file mode 100644 index 0000000..cefb2bd --- /dev/null +++ b/Code - Published/chapter07/basicScrolling_Old.html @@ -0,0 +1,157 @@ + +Basic scrolling + + + + diff --git a/Code - Published/chapter07/betterScrolling_Old.html b/Code - Published/chapter07/betterScrolling_Old.html new file mode 100644 index 0000000..826665b --- /dev/null +++ b/Code - Published/chapter07/betterScrolling_Old.html @@ -0,0 +1,190 @@ + +Better scrolling + + + + diff --git a/Code - Published/chapter07/cat.png b/Code - Published/chapter07/cat.png new file mode 100644 index 0000000..cd25b26 Binary files /dev/null and b/Code - Published/chapter07/cat.png differ diff --git a/Code - Published/chapter07/keyboardControl_KeyArray.html b/Code - Published/chapter07/keyboardControl_KeyArray.html new file mode 100644 index 0000000..1d38cee --- /dev/null +++ b/Code - Published/chapter07/keyboardControl_KeyArray.html @@ -0,0 +1,182 @@ + +Keyboard control with an array + + + + + diff --git a/Code - Published/chapter07/parallaxScrollingTileSheet.png b/Code - Published/chapter07/parallaxScrollingTileSheet.png new file mode 100644 index 0000000..ad7333a Binary files /dev/null and b/Code - Published/chapter07/parallaxScrollingTileSheet.png differ diff --git a/Code - Published/chapter07/phobosTileSheet.png b/Code - Published/chapter07/phobosTileSheet.png new file mode 100644 index 0000000..73d5904 Binary files /dev/null and b/Code - Published/chapter07/phobosTileSheet.png differ diff --git a/Code - Published/chapter07/requestAnimationFramePolyfill.js b/Code - Published/chapter07/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter07/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter07/tiger.png b/Code - Published/chapter07/tiger.png new file mode 100644 index 0000000..582768d Binary files /dev/null and b/Code - Published/chapter07/tiger.png differ diff --git a/Code - Published/chapter07/tileSheetWithBackground.png b/Code - Published/chapter07/tileSheetWithBackground.png new file mode 100644 index 0000000..6f2eabc Binary files /dev/null and b/Code - Published/chapter07/tileSheetWithBackground.png differ diff --git a/Code - Published/chapter08/.DS_Store b/Code - Published/chapter08/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter08/.DS_Store differ diff --git a/Code - Published/chapter08/1_pointCollision.html b/Code - Published/chapter08/1_pointCollision.html new file mode 100644 index 0000000..f3700c1 --- /dev/null +++ b/Code - Published/chapter08/1_pointCollision.html @@ -0,0 +1,164 @@ + +Point collision + + + + + + diff --git a/Code - Published/chapter08/2_canvasText.html b/Code - Published/chapter08/2_canvasText.html new file mode 100644 index 0000000..31e5129 --- /dev/null +++ b/Code - Published/chapter08/2_canvasText.html @@ -0,0 +1,21 @@ + +Canvas text + + + + + \ No newline at end of file diff --git a/Code - Published/chapter08/3_circleCollision.html b/Code - Published/chapter08/3_circleCollision.html new file mode 100644 index 0000000..f33053c --- /dev/null +++ b/Code - Published/chapter08/3_circleCollision.html @@ -0,0 +1,244 @@ + +Circle collision + + + + + + diff --git a/Code - Published/chapter08/4_blockingCircles.html b/Code - Published/chapter08/4_blockingCircles.html new file mode 100644 index 0000000..bcc8bca --- /dev/null +++ b/Code - Published/chapter08/4_blockingCircles.html @@ -0,0 +1,237 @@ + + +Blocking circles + + + + + diff --git a/Code - Published/chapter08/5_rectangleCollision.html b/Code - Published/chapter08/5_rectangleCollision.html new file mode 100644 index 0000000..a300c93 --- /dev/null +++ b/Code - Published/chapter08/5_rectangleCollision.html @@ -0,0 +1,271 @@ + + +Rectangle collision + + + + + diff --git a/Code - Published/chapter08/6_changingStates.html b/Code - Published/chapter08/6_changingStates.html new file mode 100644 index 0000000..dd7b5fa --- /dev/null +++ b/Code - Published/chapter08/6_changingStates.html @@ -0,0 +1,259 @@ + +Changing states + + + + + diff --git a/Code - Published/chapter08/7_healthMeter.html b/Code - Published/chapter08/7_healthMeter.html new file mode 100644 index 0000000..7f88fdc --- /dev/null +++ b/Code - Published/chapter08/7_healthMeter.html @@ -0,0 +1,286 @@ + + +Health meter + + + + + diff --git a/Code - Published/chapter08/8_updateScore.html b/Code - Published/chapter08/8_updateScore.html new file mode 100644 index 0000000..304d565 --- /dev/null +++ b/Code - Published/chapter08/8_updateScore.html @@ -0,0 +1,270 @@ + + +Update score + + + + + diff --git a/Code - Published/chapter08/9_blockingRectangles.html b/Code - Published/chapter08/9_blockingRectangles.html new file mode 100644 index 0000000..0b675e4 --- /dev/null +++ b/Code - Published/chapter08/9_blockingRectangles.html @@ -0,0 +1,306 @@ + + +Blocking rectangles + + + + + diff --git a/Code - Published/chapter08/catAndBox.png b/Code - Published/chapter08/catAndBox.png new file mode 100644 index 0000000..9bc717c Binary files /dev/null and b/Code - Published/chapter08/catAndBox.png differ diff --git a/Code - Published/chapter08/catAndMonster.png b/Code - Published/chapter08/catAndMonster.png new file mode 100644 index 0000000..c7a2c96 Binary files /dev/null and b/Code - Published/chapter08/catAndMonster.png differ diff --git a/Code - Published/chapter08/circles.png b/Code - Published/chapter08/circles.png new file mode 100644 index 0000000..2c88585 Binary files /dev/null and b/Code - Published/chapter08/circles.png differ diff --git a/Code - Published/chapter08/collision.js b/Code - Published/chapter08/collision.js new file mode 100644 index 0000000..9e6dfdb --- /dev/null +++ b/Code - Published/chapter08/collision.js @@ -0,0 +1,255 @@ +/* +This JavaScript file contains five collision functions + +- hitTestPoint +- hitTestCircle +- blockCircle +- hitTestRectangle +- blockRectangle + +To use them you'll need a sprite object with these minimum properties: + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, + left: function() + { + return this.x; + }, + right: function() + { + return this.x + this.width; + }, + top: function() + { + return this.y; + }, + bottom: function() + { + return this.y + this.height; + } +}; + + +*/ + + +//hitTestPoint + +function hitTestPoint(pointX, pointY, sprite) +{ + var hit + = pointX > sprite.left() && pointX < sprite.right() + && pointY > sprite.top() && pointY < sprite.bottom(); + + return hit; +} + +//hitTestCircle + +function hitTestCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' total radii + var totalRadii = c1.halfWidth() + c2.halfWidth(); + + //Set hit to true if the distance between the circles is + //less than their totalRadii + var hit = magnitude < totalRadii; + + return hit; +} + +//blockCircle + +function blockCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + } +} + +//hitTestRectangle + +function hitTestRectangle(r1, r2) +{ + //A variable to determine whether there's a collision + var hit = false; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check for a collision on the x axis + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occuring. Check for a collision on the y axis + if(Math.abs(vy) < combinedHalfHeights) + { + //There's definitely a collision happening + hit = true; + } + else + { + //There's no collision on the y axis + hit = false; + } + } + else + { + //There's no collision on the x axis + hit = false; + } + + return hit; +} + +//blockRectangle + +function blockRectangle(r1, r2) +{ + //A variable to tell us which side the + //collision is occurring on + var collisionSide = ""; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check whether vx is less than the combined half widths + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occurring! + //Check whether vy is less than the combined half heights + if(Math.abs(vy) < combinedHalfHeights) + { + //A collision has occurred! This is good! + //Find out the size of the overlap on both the X and Y axes + var overlapX = combinedHalfWidths - Math.abs(vx); + var overlapY = combinedHalfHeights - Math.abs(vy); + + //The collision has occurred on the axis with the + //*smallest* amount of overlap. Let's figure out which + //axis that is + + if(overlapX >= overlapY) + { + //The collision is happening on the X axis + //But on which side? vy can tell us + if(vy > 0) + { + collisionSide = "top"; + + //Move the rectangle out of the collision + r1.y = r1.y + overlapY; + } + else + { + collisionSide = "bottom"; + + //Move the rectangle out of the collision + r1.y = r1.y - overlapY; + } + } + else + { + //The collision is happening on the Y axis + //But on which side? vx can tell us + if(vx > 0) + { + collisionSide = "left"; + + //Move the rectangle out of the collision + r1.x = r1.x + overlapX; + } + else + { + collisionSide = "right"; + + //Move the rectangle out of the collision + r1.x = r1.x - overlapX; + } + } + } + else + { + //No collision + collisionSide = "none"; + } + } + else + { + //No collision + collisionSide = "none"; + } + + return collisionSide; +} \ No newline at end of file diff --git a/Code - Published/chapter08/collisionTileSheet.png b/Code - Published/chapter08/collisionTileSheet.png new file mode 100644 index 0000000..4afb117 Binary files /dev/null and b/Code - Published/chapter08/collisionTileSheet.png differ diff --git a/Code - Published/chapter08/requestAnimationFramePolyfill.js b/Code - Published/chapter08/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter08/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter08/squares.png b/Code - Published/chapter08/squares.png new file mode 100644 index 0000000..0bc4d08 Binary files /dev/null and b/Code - Published/chapter08/squares.png differ diff --git a/Code - Published/chapter09/.DS_Store b/Code - Published/chapter09/.DS_Store new file mode 100644 index 0000000..ee61be7 Binary files /dev/null and b/Code - Published/chapter09/.DS_Store differ diff --git a/Code - Published/chapter09/alienArmada/.DS_Store b/Code - Published/chapter09/alienArmada/.DS_Store new file mode 100644 index 0000000..36a305e Binary files /dev/null and b/Code - Published/chapter09/alienArmada/.DS_Store differ diff --git a/Code - Published/chapter09/alienArmada/fonts/emulogic.ttf b/Code - Published/chapter09/alienArmada/fonts/emulogic.ttf new file mode 100644 index 0000000..99b620c Binary files /dev/null and b/Code - Published/chapter09/alienArmada/fonts/emulogic.ttf differ diff --git a/Code - Published/chapter09/alienArmada/images/alienArmada.png b/Code - Published/chapter09/alienArmada/images/alienArmada.png new file mode 100644 index 0000000..c44108d Binary files /dev/null and b/Code - Published/chapter09/alienArmada/images/alienArmada.png differ diff --git a/Code - Published/chapter09/alienArmada/sounds/explosion.mp3 b/Code - Published/chapter09/alienArmada/sounds/explosion.mp3 new file mode 100644 index 0000000..e697d7d Binary files /dev/null and b/Code - Published/chapter09/alienArmada/sounds/explosion.mp3 differ diff --git a/Code - Published/chapter09/alienArmada/sounds/explosion.ogg b/Code - Published/chapter09/alienArmada/sounds/explosion.ogg new file mode 100644 index 0000000..a6d7f6b Binary files /dev/null and b/Code - Published/chapter09/alienArmada/sounds/explosion.ogg differ diff --git a/Code - Published/chapter09/alienArmada/sounds/music.mp3 b/Code - Published/chapter09/alienArmada/sounds/music.mp3 new file mode 100644 index 0000000..5b1d083 Binary files /dev/null and b/Code - Published/chapter09/alienArmada/sounds/music.mp3 differ diff --git a/Code - Published/chapter09/alienArmada/sounds/music.ogg b/Code - Published/chapter09/alienArmada/sounds/music.ogg new file mode 100644 index 0000000..af1ae87 Binary files /dev/null and b/Code - Published/chapter09/alienArmada/sounds/music.ogg differ diff --git a/Code - Published/chapter09/alienArmada/sounds/shoot.mp3 b/Code - Published/chapter09/alienArmada/sounds/shoot.mp3 new file mode 100644 index 0000000..95de367 Binary files /dev/null and b/Code - Published/chapter09/alienArmada/sounds/shoot.mp3 differ diff --git a/Code - Published/chapter09/alienArmada/sounds/shoot.ogg b/Code - Published/chapter09/alienArmada/sounds/shoot.ogg new file mode 100644 index 0000000..45f0012 Binary files /dev/null and b/Code - Published/chapter09/alienArmada/sounds/shoot.ogg differ diff --git a/Code - Published/chapter09/alienArmada/src/.DS_Store b/Code - Published/chapter09/alienArmada/src/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter09/alienArmada/src/.DS_Store differ diff --git a/Code - Published/chapter09/alienArmada/src/alienArmada.css b/Code - Published/chapter09/alienArmada/src/alienArmada.css new file mode 100644 index 0000000..5344308 --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/alienArmada.css @@ -0,0 +1,5 @@ +@font-face +{ + font-family: emulogic; + src: url("../fonts/emulogic.ttf"); +} \ No newline at end of file diff --git a/Code - Published/chapter09/alienArmada/src/alienArmada.html b/Code - Published/chapter09/alienArmada/src/alienArmada.html new file mode 100644 index 0000000..8cccf25 --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/alienArmada.html @@ -0,0 +1,31 @@ + + +Alien Armada! + + + + + + + + + + + + + + + + + + + diff --git a/Code - Published/chapter09/alienArmada/src/alienArmada1.js b/Code - Published/chapter09/alienArmada/src/alienArmada1.js new file mode 100644 index 0000000..2d680d9 --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/alienArmada1.js @@ -0,0 +1,171 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); + +//Create the drawing surface +var drawingSurface = canvas.getContext("2d"); + +//Arrays to store the game objects and assets to load +var sprites = []; +var assetsToLoad = []; + +//Create the background +var background = Object.create(spriteObject); +background.x = 0; +background.y = 0; +background.sourceY = 32; +background.sourceWidth = 480; +background.sourceHeight = 320; +background.width = 480; +background.height = 320; +sprites.push(background); + +//Create the cannon and center it +var cannon = Object.create(spriteObject); +cannon.x = canvas.width / 2 - cannon.width / 2; +cannon.y = 280; +sprites.push(cannon); + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/alienArmada.png"; +assetsToLoad.push(image); + +//Variable to count the number of assets the game needs to load +var assetsLoaded = 0; + +//Game states +var LOADING = 0 +var PLAYING = 1; +var OVER = 2; +var gameState = LOADING; + +//Arrow key codes +var RIGHT = 39; +var LEFT = 37; + +//Directions +var moveRight = false; +var moveLeft = false; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + } +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading…"); + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load event listener + image.removeEventListener("load", loadHandler, false); + + //Start the game + gameState = PLAYING; + } +} + +function playGame() +{ + //Left + if(moveLeft && !moveRight) + { + cannon.vx = -8; + } + //Right + if(moveRight && !moveLeft) + { + cannon.vx = 8; + } + + //Set the cannon's velocity to zero if none of the keys are being pressed + if(!moveLeft && !moveRight) + { + cannon.vx = 0; + } + + //Move the cannon and keep it within the screen boundaries + cannon.x = Math.max(0, Math.min(cannon.x + cannon.vx, canvas.width - cannon.width)); +} + +function endGame() +{ + //Empty for now +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } +} + +}()); diff --git a/Code - Published/chapter09/alienArmada/src/alienArmada2.js b/Code - Published/chapter09/alienArmada/src/alienArmada2.js new file mode 100644 index 0000000..5da18a5 --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/alienArmada2.js @@ -0,0 +1,251 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); + +//Create the drawing surface +var drawingSurface = canvas.getContext("2d"); + +//Arrays to store the game objects and assets to load +var sprites = []; +var assetsToLoad = []; +var missiles = []; + +//Create the background +var background = Object.create(spriteObject); +background.x = 0; +background.y = 0; +background.sourceY = 32; +background.sourceWidth = 480; +background.sourceHeight = 320; +background.width = 480; +background.height = 320; +sprites.push(background); + +//Create the cannon and center it +var cannon = Object.create(spriteObject); +cannon.x = canvas.width / 2 - cannon.width / 2; +cannon.y = 280; +sprites.push(cannon); + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/alienArmada.png"; +assetsToLoad.push(image); + +//Variable to count the number of assets the game needs to load +var assetsLoaded = 0; + +//Game states +var LOADING = 0 +var PLAYING = 1; +var OVER = 2; +var gameState = LOADING; + +//Arrow key codes +var RIGHT = 39; +var LEFT = 37; +var SPACE = 32; + +//Directions +var moveRight = false; +var moveLeft = false; + +//Variables to help fire missiles +var shoot = false; +var spaceKeyIsDown = false; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + + case SPACE: + if(!spaceKeyIsDown) + { + shoot = true; + spaceKeyIsDown = true; + } + } + +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + + case SPACE: + spaceKeyIsDown = false; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading…"); + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load event listener + image.removeEventListener("load", loadHandler, false); + + //Start the game + gameState = PLAYING; + } +} + +function playGame() +{ + //Left + if(moveLeft && !moveRight) + { + cannon.vx = -8; + } + //Right + if(moveRight && !moveLeft) + { + cannon.vx = 8; + } + + //Set the cannon's velocity to zero if none of the keys are being pressed + if(!moveLeft && !moveRight) + { + cannon.vx = 0; + } + + //Fire a missile if shoot is true + if(shoot) + { + fireMissile(); + shoot = false; + } + + //Move the cannon and keep it within the screen boundaries + cannon.x = Math.max(0, Math.min(cannon.x + cannon.vx, canvas.width - cannon.width)); + + //Move the missiles + for(var i = 0; i < missiles.length; i++) + { + var missile = missiles[i]; + + //Move it up the screen + missile.y += missile.vy; + + //Remove the missile if it crosses the top of the screen + if(missile.y < 0 - missile.height) + { + //Remove the missile from the missiles array + removeObject(missile, missiles); + + //Remove the missile from the sprites array + removeObject(missile, sprites); + + //Reduce the loop counter by 1 to compensate + //for the removed element + i--; + } + } +} + +function fireMissile() +{ + //Create a missile sprite + var missile = Object.create(spriteObject); + missile.sourceX = 96; + missile.sourceWidth = 16; + missile.sourceHeight = 16; + missile.width = 16; + missile.height = 16; + + //Center it over the cannon + missile.x = cannon.centerX() - missile.halfWidth(); + missile.y = cannon.y - missile.height; + + //Set its speed + missile.vy = -8; + + //Push the missile into both the sprites and missiles arrays + sprites.push(missile); + missiles.push(missile); +} + +function removeObject(objectToRemove, array) +{ + var i = array.indexOf(objectToRemove); + if (i !== -1) + { + array.splice(i, 1); + } +} + +function endGame() +{ + //Empty for now +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } +} + +}()); diff --git a/Code - Published/chapter09/alienArmada/src/alienArmada3.js b/Code - Published/chapter09/alienArmada/src/alienArmada3.js new file mode 100644 index 0000000..a31c1d7 --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/alienArmada3.js @@ -0,0 +1,318 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); + +//Create the drawing surface +var drawingSurface = canvas.getContext("2d"); + +//Arrays to store the game objects and assets to load +var sprites = []; +var assetsToLoad = []; +var missiles = []; +var aliens = []; + +//Create the background +var background = Object.create(spriteObject); +background.x = 0; +background.y = 0; +background.sourceY = 32; +background.sourceWidth = 480; +background.sourceHeight = 320; +background.width = 480; +background.height = 320; +sprites.push(background); + +//Create the cannon and center it +var cannon = Object.create(spriteObject); +cannon.x = canvas.width / 2 - cannon.width / 2; +cannon.y = 280; +sprites.push(cannon); + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/alienArmada.png"; +assetsToLoad.push(image); + +//Variable to count the number of assets the game needs to load +var assetsLoaded = 0; + +//Game states +var LOADING = 0 +var PLAYING = 1; +var OVER = 2; +var gameState = LOADING; + +//Arrow key codes +var RIGHT = 39; +var LEFT = 37; +var SPACE = 32; + +//Directions +var moveRight = false; +var moveLeft = false; + +//Variables to help fire missiles +var shoot = false; +var spaceKeyIsDown = false; + +//Game variables +//var score = 0; +//var scoreNeededToWin = 60; +var alienFrequency = 100; +var alienTimer = 0; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + + case SPACE: + if(!spaceKeyIsDown) + { + shoot = true; + spaceKeyIsDown = true; + } + } + +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + + case SPACE: + spaceKeyIsDown = false; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading…"); + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load event listener + image.removeEventListener("load", loadHandler, false); + + //Start the game + gameState = PLAYING; + } +} + +function playGame() +{ + //Left + if(moveLeft && !moveRight) + { + cannon.vx = -8; + } + //Right + if(moveRight && !moveLeft) + { + cannon.vx = 8; + } + + //Set the cannon's velocity to zero if none of the keys are being pressed + if(!moveLeft && !moveRight) + { + cannon.vx = 0; + } + + //Fire a missile if shoot is true + if(shoot) + { + fireMissile(); + shoot = false; + } + + //Move the cannon and keep it within the screen boundaries + cannon.x = Math.max(0, Math.min(cannon.x + cannon.vx, canvas.width - cannon.width)); + + //Move the missiles + for(var i = 0; i < missiles.length; i++) + { + var missile = missiles[i]; + + //Move it up the screen + missile.y += missile.vy; + + //Remove the missile if it crosses the top of the screen + if(missile.y < 0 - missile.height) + { + //Remove the missile from the missiles array + removeObject(missile, missiles); + + //Remove the missile from the sprites array + removeObject(missile, sprites); + + //Reduce the loop counter by 1 to compensate + //for the removed element + i--; + } + } + + //Make the aliens + + //Add one to the alienTimer + alienTimer++; + + //Make a new alien if alienTimer equals the alienFrequency + if(alienTimer === alienFrequency) + { + makeAlien(); + alienTimer = 0; + + //Reduce alienFrequency by one to gradually increase + //the frequency that aliens are created + if(alienFrequency > 2) + { + alienFrequency--; + } + } + + //Loop through the aliens + for(var i = 0; i < aliens.length; i++) + { + var alien = aliens[i]; + + if(alien.state === alien.NORMAL) + { + //Move the current alien if its state is NORMAL + alien.y += alien.vy; + } + + //Check if the alien has crossed the bottom of the screen + if(alien.y > canvas.height + alien.height) + { + //End the game if an alien has reached Earth + gameState = OVER; + } + } +} + +function makeAlien() +{ + //Create the alien + var alien = Object.create(alienObject); + alien.sourceX = 32; + + //Set its y position above the screen boundary + alien.y = 0 - alien.height; + + //Assign the alien a random x position + var randomPosition = Math.floor(Math.random() * 15); + //var randomPosition = Math.floor(Math.random() * (canvas.width / alien.width)); + alien.x = randomPosition * alien.width; + + //Set its speed + alien.vy = 1; + + //Push the alien into both the sprites and aliens arrays + sprites.push(alien); + aliens.push(alien); +} + +function fireMissile() +{ + //Create a missile sprite + var missile = Object.create(spriteObject); + missile.sourceX = 96; + missile.sourceWidth = 16; + missile.sourceHeight = 16; + missile.width = 16; + missile.height = 16; + + //Center it over the cannon + missile.x = cannon.centerX() - missile.halfWidth(); + missile.y = cannon.y - missile.height; + + //Set its speed + missile.vy = -8; + + //Push the missile into both the sprites and missiles arrays + sprites.push(missile); + missiles.push(missile); +} + +function removeObject(objectToRemove, array) +{ + var i = array.indexOf(objectToRemove); + if (i !== -1) + { + array.splice(i, 1); + } +} + +function endGame() +{ + console.log("Game Over!"); +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } +} + +}()); diff --git a/Code - Published/chapter09/alienArmada/src/alienArmada4.js b/Code - Published/chapter09/alienArmada/src/alienArmada4.js new file mode 100644 index 0000000..8d25632 --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/alienArmada4.js @@ -0,0 +1,365 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); + +//Create the drawing surface +var drawingSurface = canvas.getContext("2d"); + +//Arrays to store the game objects and assets to load +var sprites = []; +var assetsToLoad = []; +var missiles = []; +var aliens = []; + +//Create the background +var background = Object.create(spriteObject); +background.x = 0; +background.y = 0; +background.sourceY = 32; +background.sourceWidth = 480; +background.sourceHeight = 320; +background.width = 480; +background.height = 320; +sprites.push(background); + +//Create the cannon and center it +var cannon = Object.create(spriteObject); +cannon.x = canvas.width / 2 - cannon.width / 2; +cannon.y = 280; +sprites.push(cannon); + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/alienArmada.png"; +assetsToLoad.push(image); + +//Variable to count the number of assets the game needs to load +var assetsLoaded = 0; + +//Game states +var LOADING = 0 +var PLAYING = 1; +var OVER = 2; +var gameState = LOADING; + +//Arrow key codes +var RIGHT = 39; +var LEFT = 37; +var SPACE = 32; + +//Directions +var moveRight = false; +var moveLeft = false; + +//Variables to help fire missiles +var shoot = false; +var spaceKeyIsDown = false; + +//Game variables +var score = 0; +var scoreNeededToWin = 60; +var alienFrequency = 100; +var alienTimer = 0; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + + case SPACE: + if(!spaceKeyIsDown) + { + shoot = true; + spaceKeyIsDown = true; + } + } + +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + + case SPACE: + spaceKeyIsDown = false; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading…"); + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load event listener + image.removeEventListener("load", loadHandler, false); + + //Start the game + gameState = PLAYING; + } +} + +function playGame() +{ + //Left + if(moveLeft && !moveRight) + { + cannon.vx = -8; + } + //Right + if(moveRight && !moveLeft) + { + cannon.vx = 8; + } + + //Set the cannon's velocity to zero if none of the keys are being pressed + if(!moveLeft && !moveRight) + { + cannon.vx = 0; + } + + //Fire a missile if shoot is true + if(shoot) + { + fireMissile(); + shoot = false; + } + + //Move the cannon and keep it within the screen boundaries + cannon.x = Math.max(0, Math.min(cannon.x + cannon.vx, canvas.width - cannon.width)); + + //Move the missiles + for(var i = 0; i < missiles.length; i++) + { + var missile = missiles[i]; + + //Move it up the screen + missile.y += missile.vy; + + //Remove the missile if it crosses the top of the screen + if(missile.y < 0 - missile.height) + { + //Remove the missile from the missiles array + removeObject(missile, missiles); + + //Remove the missile from the sprites array + removeObject(missile, sprites); + + //Reduce the loop counter by 1 to compensate + //for the removed element + i--; + } + } + + //Make the aliens + + //Add one to the alienTimer + alienTimer++; + + //Make a new alien if alienTimer equals the alienFrequency + if(alienTimer === alienFrequency) + { + makeAlien(); + alienTimer = 0; + + //Reduce alienFrequency by one to gradually increase + //the frequency that aliens are created + if(alienFrequency > 2) + { + alienFrequency--; + } + } + + //Loop through the aliens + for(var i = 0; i < aliens.length; i++) + { + var alien = aliens[i]; + + if(alien.state === alien.NORMAL) + { + //Move the current alien if its state is NORMAL + alien.y += alien.vy; + } + + //Check if the alien has crossed the bottom of the screen + if(alien.y > canvas.height + alien.height) + { + //End the game if an alien has reached Earth + gameState = OVER; + } + } + + //--- The collisions + + //Check for a collision between the aliens and missiles + for(var i = 0; i < aliens.length; i++) + { + var alien = aliens[i]; + + for(var j = 0; j < missiles.length; j++) + { + var missile = missiles[j]; + + if(hitTestRectangle(missile, alien) + && alien.state === alien.NORMAL) + { + //Destroy the alien + destroyAlien(alien); + + //Update the score + score++; + + //Remove the missile + removeObject(missile, missiles); + removeObject(missile, sprites); + + //Subtract 1 from the loop counter to compensate + //for the removed missle + j--; + } + } + } +} + +function destroyAlien(alien) +{ + //Change the alien's state and update the object + alien.state = alien.EXPLODED; + alien.update(); + + //Remove the alien after 1 second + setTimeout(removeAlien, 1000); + + function removeAlien() + { + removeObject(alien, aliens); + removeObject(alien, sprites); + } +} + +function makeAlien() +{ + //Create the alien + var alien = Object.create(alienObject); + alien.sourceX = 32; + + //Set its y position above the screen boundary + alien.y = 0 - alien.height; + + //Assign the alien a random x position + var randomPosition = Math.floor(Math.random() * 15); + //var randomPosition = Math.floor(Math.random() * (canvas.width / alien.width)); + alien.x = randomPosition * alien.width; + + //Set its speed + alien.vy = 1; + + //Push the alien into both the sprites and aliens arrays + sprites.push(alien); + aliens.push(alien); +} + +function fireMissile() +{ + //Create a missile sprite + var missile = Object.create(spriteObject); + missile.sourceX = 96; + missile.sourceWidth = 16; + missile.sourceHeight = 16; + missile.width = 16; + missile.height = 16; + + //Center it over the cannon + missile.x = cannon.centerX() - missile.halfWidth(); + missile.y = cannon.y - missile.height; + + //Set its speed + missile.vy = -8; + + //Push the missile into both the sprites and missiles arrays + sprites.push(missile); + missiles.push(missile); +} + +function removeObject(objectToRemove, array) +{ + var i = array.indexOf(objectToRemove); + if (i !== -1) + { + array.splice(i, 1); + } +} + +function endGame() +{ + console.log("Game Over!"); +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } +} + +}()); diff --git a/Code - Published/chapter09/alienArmada/src/alienArmada5.js b/Code - Published/chapter09/alienArmada/src/alienArmada5.js new file mode 100644 index 0000000..7111469 --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/alienArmada5.js @@ -0,0 +1,433 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); + +//Create the drawing surface +var drawingSurface = canvas.getContext("2d"); + +//Arrays to store the game objects and assets to load +var sprites = []; +var assetsToLoad = []; +var missiles = []; +var aliens = []; +var messages = []; + +//Create the background +var background = Object.create(spriteObject); +background.x = 0; +background.y = 0; +background.sourceY = 32; +background.sourceWidth = 480; +background.sourceHeight = 320; +background.width = 480; +background.height = 320; +sprites.push(background); + +//Create the cannon and center it +var cannon = Object.create(spriteObject); +cannon.x = canvas.width / 2 - cannon.width / 2; +cannon.y = 280; +sprites.push(cannon); + +//Create the score message +var scoreDisplay = Object.create(messageObject); +scoreDisplay.font = "normal bold 30px emulogic"; +scoreDisplay.fillStyle = "#00FF00"; +scoreDisplay.x = 400; +scoreDisplay.y = 10; +messages.push(scoreDisplay); + +//The game over message +var gameOverMessage = Object.create(messageObject); +gameOverMessage.font = "normal bold 20px emulogic"; +gameOverMessage.fillStyle = "#00FF00"; +gameOverMessage.x = 70; +gameOverMessage.y = 120; +gameOverMessage.visible = false; +messages.push(gameOverMessage); + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/alienArmada.png"; +assetsToLoad.push(image); + +//Variable to count the number of assets the game needs to load +var assetsLoaded = 0; + +//Game states +var LOADING = 0 +var PLAYING = 1; +var OVER = 2; +var gameState = LOADING; + +//Arrow key codes +var RIGHT = 39; +var LEFT = 37; +var SPACE = 32; + +//Directions +var moveRight = false; +var moveLeft = false; + +//Variables to help fire missiles +var shoot = false; +var spaceKeyIsDown = false; + +//Game variables +var score = 0; +var scoreNeededToWin = 60; +var alienFrequency = 100; +var alienTimer = 0; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + + case SPACE: + if(!spaceKeyIsDown) + { + shoot = true; + spaceKeyIsDown = true; + } + } + +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + + case SPACE: + spaceKeyIsDown = false; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading…"); + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load event listener + image.removeEventListener("load", loadHandler, false); + + //Start the game + gameState = PLAYING; + } +} + +function playGame() +{ + //Left + if(moveLeft && !moveRight) + { + cannon.vx = -8; + } + //Right + if(moveRight && !moveLeft) + { + cannon.vx = 8; + } + + //Set the cannon's velocity to zero if none of the keys are being pressed + if(!moveLeft && !moveRight) + { + cannon.vx = 0; + } + + //Fire a missile if shoot is true + if(shoot) + { + fireMissile(); + shoot = false; + } + + //Move the cannon and keep it within the screen boundaries + cannon.x = Math.max(0, Math.min(cannon.x + cannon.vx, canvas.width - cannon.width)); + + //Move the missiles + for(var i = 0; i < missiles.length; i++) + { + var missile = missiles[i]; + + //Move it up the screen + missile.y += missile.vy; + + //Remove the missile if it crosses the top of the screen + if(missile.y < 0 - missile.height) + { + //Remove the missile from the missiles array + removeObject(missile, missiles); + + //Remove the missile from the sprites array + removeObject(missile, sprites); + + //Reduce the loop counter by 1 to compensate + //for the removed element + i--; + } + } + + //Make the aliens + + //Add one to the alienTimer + alienTimer++; + + //Make a new alien if alienTimer equals the alienFrequency + if(alienTimer === alienFrequency) + { + makeAlien(); + alienTimer = 0; + + //Reduce alienFrequency by one to gradually increase + //the frequency that aliens are created + if(alienFrequency > 2) + { + alienFrequency--; + } + } + + //Loop through the aliens + for(var i = 0; i < aliens.length; i++) + { + var alien = aliens[i]; + + if(alien.state === alien.NORMAL) + { + //Move the current alien if its state is NORMAL + alien.y += alien.vy; + } + + //Check if the alien has crossed the bottom of the screen + if(alien.y > canvas.height + alien.height) + { + //End the game if an alien has reached Earth + gameState = OVER; + } + } + + //--- The collisions + + //Check for a collision between the aliens and missiles + for(var i = 0; i < aliens.length; i++) + { + var alien = aliens[i]; + + for(var j = 0; j < missiles.length; j++) + { + var missile = missiles[j]; + + if(hitTestRectangle(missile, alien) + && alien.state === alien.NORMAL) + { + //Destroy the alien + destroyAlien(alien); + + //Update the score + score++; + + //Remove the missile + removeObject(missile, missiles); + removeObject(missile, sprites); + + //Subtract 1 from the loop counter to compensate + //for the removed missle + j--; + } + } + } + + //--- The score + + //Display the score + scoreDisplay.text = score; + + //Check for the end of the game + if(score === scoreNeededToWin) + { + gameState = OVER; + } +} + +function destroyAlien(alien) +{ + //Change the alien's state and update the object + alien.state = alien.EXPLODED; + alien.update(); + + //Remove the alien after 1 second + setTimeout(removeAlien, 1000); + + function removeAlien() + { + removeObject(alien, aliens); + removeObject(alien, sprites); + } +} + +function endGame() +{ + gameOverMessage.visible = true; + if(score < scoreNeededToWin) + { + gameOverMessage.text = "EARTH DESTROYED!"; + } + else + { + gameOverMessage.x = 120; + gameOverMessage.text = "EARTH SAVED!"; + } +} + +function makeAlien() +{ + //Create the alien + var alien = Object.create(alienObject); + alien.sourceX = 32; + + //Set its y position above the screen boundary + alien.y = 0 - alien.height; + + //Assign the alien a random x position + var randomPosition = Math.floor(Math.random() * 15); + //var randomPosition = Math.floor(Math.random() * (canvas.width / alien.width)); + alien.x = randomPosition * alien.width; + + //Set its speed + alien.vy = 1; + + //Push the alien into both the sprites and aliens arrays + sprites.push(alien); + aliens.push(alien); +} + +function fireMissile() +{ + //Create a missile sprite + var missile = Object.create(spriteObject); + missile.sourceX = 96; + missile.sourceWidth = 16; + missile.sourceHeight = 16; + missile.width = 16; + missile.height = 16; + + //Center it over the cannon + missile.x = cannon.centerX() - missile.halfWidth(); + missile.y = cannon.y - missile.height; + + //Set its speed + missile.vy = -8; + + //Push the missile into both the sprites and missiles arrays + sprites.push(missile); + missiles.push(missile); +} + +function removeObject(objectToRemove, array) +{ + var i = array.indexOf(objectToRemove); + if (i !== -1) + { + array.splice(i, 1); + } +} + +function endGame() +{ + gameOverMessage.visible = true; + if(score < scoreNeededToWin) + { + gameOverMessage.text = "EARTH DESTROYED!"; + } + else + { + gameOverMessage.x = 120; + gameOverMessage.text = "EARTH SAVED!"; + } +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } + + //Display game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); diff --git a/Code - Published/chapter09/alienArmada/src/alienArmada6.js b/Code - Published/chapter09/alienArmada/src/alienArmada6.js new file mode 100644 index 0000000..ebbb088 --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/alienArmada6.js @@ -0,0 +1,464 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); + +//Create the drawing surface +var drawingSurface = canvas.getContext("2d"); + +//Arrays to store the game objects and assets to load +var sprites = []; +var assetsToLoad = []; +var missiles = []; +var aliens = []; +var messages = []; + +//Create the background +var background = Object.create(spriteObject); +background.x = 0; +background.y = 0; +background.sourceY = 32; +background.sourceWidth = 480; +background.sourceHeight = 320; +background.width = 480; +background.height = 320; +sprites.push(background); + +//Create the cannon and center it +var cannon = Object.create(spriteObject); +cannon.x = canvas.width / 2 - cannon.width / 2; +cannon.y = 280; +sprites.push(cannon); + +//Create the score message +var scoreDisplay = Object.create(messageObject); +scoreDisplay.font = "normal bold 30px emulogic"; +scoreDisplay.fillStyle = "#00FF00"; +scoreDisplay.x = 400; +scoreDisplay.y = 10; +messages.push(scoreDisplay); + +//The game over message +var gameOverMessage = Object.create(messageObject); +gameOverMessage.font = "normal bold 20px emulogic"; +gameOverMessage.fillStyle = "#00FF00"; +gameOverMessage.x = 70; +gameOverMessage.y = 120; +gameOverMessage.visible = false; +messages.push(gameOverMessage); + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/alienArmada.png"; +assetsToLoad.push(image); + +//Load the sounds +var music = document.querySelector("#music"); +music.addEventListener("canplaythrough", loadHandler, false); +music.load(); +assetsToLoad.push(music); + +var shootSound = document.querySelector("#shootSound"); +shootSound.addEventListener("canplaythrough", loadHandler, false); +shootSound.load(); +assetsToLoad.push(shootSound); + +var explosionSound = document.querySelector("#explosionSound"); +explosionSound.addEventListener("canplaythrough", loadHandler, false); +explosionSound.load(); +assetsToLoad.push(explosionSound); + +//Variable to count the number of assets the game needs to load +var assetsLoaded = 0; + +//Game states +var LOADING = 0 +var PLAYING = 1; +var OVER = 2; +var gameState = LOADING; + +//Arrow key codes +var RIGHT = 39; +var LEFT = 37; +var SPACE = 32; + +//Directions +var moveRight = false; +var moveLeft = false; + +//Variables to help fire missiles +var shoot = false; +var spaceKeyIsDown = false; + +//Game variables +var score = 0; +var scoreNeededToWin = 60; +var alienFrequency = 100; +var alienTimer = 0; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + + case SPACE: + if(!spaceKeyIsDown) + { + shoot = true; + spaceKeyIsDown = true; + } + } + +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + + case SPACE: + spaceKeyIsDown = false; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading…"); + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load event listener from the image and sounds + image.removeEventListener("load", loadHandler, false); + music.removeEventListener("canplaythrough", loadHandler, false); + shootSound.removeEventListener("canplaythrough", loadHandler, false); + explosionSound.removeEventListener("canplaythrough", loadHandler, false); + console.log(assetsLoaded); + //Play the music + music.play(); + music.volume = 0.3; + + //Start the game + gameState = PLAYING; + } +} + +function playGame() +{ + //Left + if(moveLeft && !moveRight) + { + cannon.vx = -8; + } + //Right + if(moveRight && !moveLeft) + { + cannon.vx = 8; + } + + //Set the cannon's velocity to zero if none of the keys are being pressed + if(!moveLeft && !moveRight) + { + cannon.vx = 0; + } + + //Fire a missile if shoot is true + if(shoot) + { + fireMissile(); + shoot = false; + } + + //Move the cannon and keep it within the screen boundaries + cannon.x = Math.max(0, Math.min(cannon.x + cannon.vx, canvas.width - cannon.width)); + + //Move the missiles + for(var i = 0; i < missiles.length; i++) + { + var missile = missiles[i]; + + //Move it up the screen + missile.y += missile.vy; + + //Remove the missile if it crosses the top of the screen + if(missile.y < 0 - missile.height) + { + //Remove the missile from the missiles array + removeObject(missile, missiles); + + //Remove the missile from the sprites array + removeObject(missile, sprites); + + //Reduce the loop counter by 1 to compensate + //for the removed element + i--; + } + } + + //Make the aliens + + //Add one to the alienTimer + alienTimer++; + + //Make a new alien if alienTimer equals the alienFrequency + if(alienTimer === alienFrequency) + { + makeAlien(); + alienTimer = 0; + + //Reduce alienFrequency by one to gradually increase + //the frequency that aliens are created + if(alienFrequency > 2) + { + alienFrequency--; + } + } + + //Loop through the aliens + for(var i = 0; i < aliens.length; i++) + { + var alien = aliens[i]; + + if(alien.state === alien.NORMAL) + { + //Move the current alien if its state is NORMAL + alien.y += alien.vy; + } + + //Check if the alien has crossed the bottom of the screen + if(alien.y > canvas.height + alien.height) + { + //End the game if an alien has reached Earth + gameState = OVER; + } + } + + //--- The collisions + + //Check for a collision between the aliens and missiles + for(var i = 0; i < aliens.length; i++) + { + var alien = aliens[i]; + + for(var j = 0; j < missiles.length; j++) + { + var missile = missiles[j]; + + if(hitTestRectangle(missile, alien) + && alien.state === alien.NORMAL) + { + //Destroy the alien + destroyAlien(alien); + + //Update the score + score++; + + //Remove the missile + removeObject(missile, missiles); + removeObject(missile, sprites); + + //Subtract 1 from the loop counter to compensate + //for the removed missile + j--; + } + } + } + + //--- The score + + //Display the score + scoreDisplay.text = score; + + //Check for the end of the game + if(score === scoreNeededToWin) + { + gameState = OVER; + } +} + +function destroyAlien(alien) +{ + //Change the alien's state and update the object + alien.state = alien.EXPLODED; + alien.update(); + + //Remove the alien after 1 second + setTimeout(removeAlien, 1000); + + //Play the explosion sound + explosionSound.currentTime = 0; + explosionSound.play(); + + function removeAlien() + { + removeObject(alien, aliens); + removeObject(alien, sprites); + } +} + +function endGame() +{ + gameOverMessage.visible = true; + if(score < scoreNeededToWin) + { + gameOverMessage.text = "EARTH DESTROYED!"; + } + else + { + gameOverMessage.x = 120; + gameOverMessage.text = "EARTH SAVED!"; + } +} + +function makeAlien() +{ + //Create the alien + var alien = Object.create(alienObject); + alien.sourceX = 32; + + //Set its y position above the screen boundary + alien.y = 0 - alien.height; + + //Assign the alien a random x position + var randomPosition = Math.floor(Math.random() * 15); + //var randomPosition = Math.floor(Math.random() * (canvas.width / alien.width)); + alien.x = randomPosition * alien.width; + + //Set its speed + alien.vy = 1; + + //Push the alien into both the sprites and aliens arrays + sprites.push(alien); + aliens.push(alien); +} + +function fireMissile() +{ + //Create a missile sprite + var missile = Object.create(spriteObject); + missile.sourceX = 96; + missile.sourceWidth = 16; + missile.sourceHeight = 16; + missile.width = 16; + missile.height = 16; + + //Center it over the cannon + missile.x = cannon.centerX() - missile.halfWidth(); + missile.y = cannon.y - missile.height; + + //Set its speed + missile.vy = -8; + + //Push the missile into both the sprites and missiles arrays + sprites.push(missile); + missiles.push(missile); + + //Play the firing sound + shootSound.currentTime = 0; + shootSound.play(); +} + +function removeObject(objectToRemove, array) +{ + var i = array.indexOf(objectToRemove); + if (i !== -1) + { + array.splice(i, 1); + } +} + +function endGame() +{ + gameOverMessage.visible = true; + if(score < scoreNeededToWin) + { + gameOverMessage.text = "EARTH DESTROYED!"; + } + else + { + gameOverMessage.x = 120; + gameOverMessage.text = "EARTH SAVED!"; + } +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } + + //Display game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); diff --git a/Code - Published/chapter09/alienArmada/src/alienArmadaFinished.js b/Code - Published/chapter09/alienArmada/src/alienArmadaFinished.js new file mode 100644 index 0000000..ebbb088 --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/alienArmadaFinished.js @@ -0,0 +1,464 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); + +//Create the drawing surface +var drawingSurface = canvas.getContext("2d"); + +//Arrays to store the game objects and assets to load +var sprites = []; +var assetsToLoad = []; +var missiles = []; +var aliens = []; +var messages = []; + +//Create the background +var background = Object.create(spriteObject); +background.x = 0; +background.y = 0; +background.sourceY = 32; +background.sourceWidth = 480; +background.sourceHeight = 320; +background.width = 480; +background.height = 320; +sprites.push(background); + +//Create the cannon and center it +var cannon = Object.create(spriteObject); +cannon.x = canvas.width / 2 - cannon.width / 2; +cannon.y = 280; +sprites.push(cannon); + +//Create the score message +var scoreDisplay = Object.create(messageObject); +scoreDisplay.font = "normal bold 30px emulogic"; +scoreDisplay.fillStyle = "#00FF00"; +scoreDisplay.x = 400; +scoreDisplay.y = 10; +messages.push(scoreDisplay); + +//The game over message +var gameOverMessage = Object.create(messageObject); +gameOverMessage.font = "normal bold 20px emulogic"; +gameOverMessage.fillStyle = "#00FF00"; +gameOverMessage.x = 70; +gameOverMessage.y = 120; +gameOverMessage.visible = false; +messages.push(gameOverMessage); + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/alienArmada.png"; +assetsToLoad.push(image); + +//Load the sounds +var music = document.querySelector("#music"); +music.addEventListener("canplaythrough", loadHandler, false); +music.load(); +assetsToLoad.push(music); + +var shootSound = document.querySelector("#shootSound"); +shootSound.addEventListener("canplaythrough", loadHandler, false); +shootSound.load(); +assetsToLoad.push(shootSound); + +var explosionSound = document.querySelector("#explosionSound"); +explosionSound.addEventListener("canplaythrough", loadHandler, false); +explosionSound.load(); +assetsToLoad.push(explosionSound); + +//Variable to count the number of assets the game needs to load +var assetsLoaded = 0; + +//Game states +var LOADING = 0 +var PLAYING = 1; +var OVER = 2; +var gameState = LOADING; + +//Arrow key codes +var RIGHT = 39; +var LEFT = 37; +var SPACE = 32; + +//Directions +var moveRight = false; +var moveLeft = false; + +//Variables to help fire missiles +var shoot = false; +var spaceKeyIsDown = false; + +//Game variables +var score = 0; +var scoreNeededToWin = 60; +var alienFrequency = 100; +var alienTimer = 0; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + + case SPACE: + if(!spaceKeyIsDown) + { + shoot = true; + spaceKeyIsDown = true; + } + } + +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + + case SPACE: + spaceKeyIsDown = false; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading…"); + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load event listener from the image and sounds + image.removeEventListener("load", loadHandler, false); + music.removeEventListener("canplaythrough", loadHandler, false); + shootSound.removeEventListener("canplaythrough", loadHandler, false); + explosionSound.removeEventListener("canplaythrough", loadHandler, false); + console.log(assetsLoaded); + //Play the music + music.play(); + music.volume = 0.3; + + //Start the game + gameState = PLAYING; + } +} + +function playGame() +{ + //Left + if(moveLeft && !moveRight) + { + cannon.vx = -8; + } + //Right + if(moveRight && !moveLeft) + { + cannon.vx = 8; + } + + //Set the cannon's velocity to zero if none of the keys are being pressed + if(!moveLeft && !moveRight) + { + cannon.vx = 0; + } + + //Fire a missile if shoot is true + if(shoot) + { + fireMissile(); + shoot = false; + } + + //Move the cannon and keep it within the screen boundaries + cannon.x = Math.max(0, Math.min(cannon.x + cannon.vx, canvas.width - cannon.width)); + + //Move the missiles + for(var i = 0; i < missiles.length; i++) + { + var missile = missiles[i]; + + //Move it up the screen + missile.y += missile.vy; + + //Remove the missile if it crosses the top of the screen + if(missile.y < 0 - missile.height) + { + //Remove the missile from the missiles array + removeObject(missile, missiles); + + //Remove the missile from the sprites array + removeObject(missile, sprites); + + //Reduce the loop counter by 1 to compensate + //for the removed element + i--; + } + } + + //Make the aliens + + //Add one to the alienTimer + alienTimer++; + + //Make a new alien if alienTimer equals the alienFrequency + if(alienTimer === alienFrequency) + { + makeAlien(); + alienTimer = 0; + + //Reduce alienFrequency by one to gradually increase + //the frequency that aliens are created + if(alienFrequency > 2) + { + alienFrequency--; + } + } + + //Loop through the aliens + for(var i = 0; i < aliens.length; i++) + { + var alien = aliens[i]; + + if(alien.state === alien.NORMAL) + { + //Move the current alien if its state is NORMAL + alien.y += alien.vy; + } + + //Check if the alien has crossed the bottom of the screen + if(alien.y > canvas.height + alien.height) + { + //End the game if an alien has reached Earth + gameState = OVER; + } + } + + //--- The collisions + + //Check for a collision between the aliens and missiles + for(var i = 0; i < aliens.length; i++) + { + var alien = aliens[i]; + + for(var j = 0; j < missiles.length; j++) + { + var missile = missiles[j]; + + if(hitTestRectangle(missile, alien) + && alien.state === alien.NORMAL) + { + //Destroy the alien + destroyAlien(alien); + + //Update the score + score++; + + //Remove the missile + removeObject(missile, missiles); + removeObject(missile, sprites); + + //Subtract 1 from the loop counter to compensate + //for the removed missile + j--; + } + } + } + + //--- The score + + //Display the score + scoreDisplay.text = score; + + //Check for the end of the game + if(score === scoreNeededToWin) + { + gameState = OVER; + } +} + +function destroyAlien(alien) +{ + //Change the alien's state and update the object + alien.state = alien.EXPLODED; + alien.update(); + + //Remove the alien after 1 second + setTimeout(removeAlien, 1000); + + //Play the explosion sound + explosionSound.currentTime = 0; + explosionSound.play(); + + function removeAlien() + { + removeObject(alien, aliens); + removeObject(alien, sprites); + } +} + +function endGame() +{ + gameOverMessage.visible = true; + if(score < scoreNeededToWin) + { + gameOverMessage.text = "EARTH DESTROYED!"; + } + else + { + gameOverMessage.x = 120; + gameOverMessage.text = "EARTH SAVED!"; + } +} + +function makeAlien() +{ + //Create the alien + var alien = Object.create(alienObject); + alien.sourceX = 32; + + //Set its y position above the screen boundary + alien.y = 0 - alien.height; + + //Assign the alien a random x position + var randomPosition = Math.floor(Math.random() * 15); + //var randomPosition = Math.floor(Math.random() * (canvas.width / alien.width)); + alien.x = randomPosition * alien.width; + + //Set its speed + alien.vy = 1; + + //Push the alien into both the sprites and aliens arrays + sprites.push(alien); + aliens.push(alien); +} + +function fireMissile() +{ + //Create a missile sprite + var missile = Object.create(spriteObject); + missile.sourceX = 96; + missile.sourceWidth = 16; + missile.sourceHeight = 16; + missile.width = 16; + missile.height = 16; + + //Center it over the cannon + missile.x = cannon.centerX() - missile.halfWidth(); + missile.y = cannon.y - missile.height; + + //Set its speed + missile.vy = -8; + + //Push the missile into both the sprites and missiles arrays + sprites.push(missile); + missiles.push(missile); + + //Play the firing sound + shootSound.currentTime = 0; + shootSound.play(); +} + +function removeObject(objectToRemove, array) +{ + var i = array.indexOf(objectToRemove); + if (i !== -1) + { + array.splice(i, 1); + } +} + +function endGame() +{ + gameOverMessage.visible = true; + if(score < scoreNeededToWin) + { + gameOverMessage.text = "EARTH DESTROYED!"; + } + else + { + gameOverMessage.x = 120; + gameOverMessage.text = "EARTH SAVED!"; + } +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } + + //Display game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); diff --git a/Code - Published/chapter09/alienArmada/src/collision.js b/Code - Published/chapter09/alienArmada/src/collision.js new file mode 100644 index 0000000..9e6dfdb --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/collision.js @@ -0,0 +1,255 @@ +/* +This JavaScript file contains five collision functions + +- hitTestPoint +- hitTestCircle +- blockCircle +- hitTestRectangle +- blockRectangle + +To use them you'll need a sprite object with these minimum properties: + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, + left: function() + { + return this.x; + }, + right: function() + { + return this.x + this.width; + }, + top: function() + { + return this.y; + }, + bottom: function() + { + return this.y + this.height; + } +}; + + +*/ + + +//hitTestPoint + +function hitTestPoint(pointX, pointY, sprite) +{ + var hit + = pointX > sprite.left() && pointX < sprite.right() + && pointY > sprite.top() && pointY < sprite.bottom(); + + return hit; +} + +//hitTestCircle + +function hitTestCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' total radii + var totalRadii = c1.halfWidth() + c2.halfWidth(); + + //Set hit to true if the distance between the circles is + //less than their totalRadii + var hit = magnitude < totalRadii; + + return hit; +} + +//blockCircle + +function blockCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + } +} + +//hitTestRectangle + +function hitTestRectangle(r1, r2) +{ + //A variable to determine whether there's a collision + var hit = false; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check for a collision on the x axis + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occuring. Check for a collision on the y axis + if(Math.abs(vy) < combinedHalfHeights) + { + //There's definitely a collision happening + hit = true; + } + else + { + //There's no collision on the y axis + hit = false; + } + } + else + { + //There's no collision on the x axis + hit = false; + } + + return hit; +} + +//blockRectangle + +function blockRectangle(r1, r2) +{ + //A variable to tell us which side the + //collision is occurring on + var collisionSide = ""; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check whether vx is less than the combined half widths + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occurring! + //Check whether vy is less than the combined half heights + if(Math.abs(vy) < combinedHalfHeights) + { + //A collision has occurred! This is good! + //Find out the size of the overlap on both the X and Y axes + var overlapX = combinedHalfWidths - Math.abs(vx); + var overlapY = combinedHalfHeights - Math.abs(vy); + + //The collision has occurred on the axis with the + //*smallest* amount of overlap. Let's figure out which + //axis that is + + if(overlapX >= overlapY) + { + //The collision is happening on the X axis + //But on which side? vy can tell us + if(vy > 0) + { + collisionSide = "top"; + + //Move the rectangle out of the collision + r1.y = r1.y + overlapY; + } + else + { + collisionSide = "bottom"; + + //Move the rectangle out of the collision + r1.y = r1.y - overlapY; + } + } + else + { + //The collision is happening on the Y axis + //But on which side? vx can tell us + if(vx > 0) + { + collisionSide = "left"; + + //Move the rectangle out of the collision + r1.x = r1.x + overlapX; + } + else + { + collisionSide = "right"; + + //Move the rectangle out of the collision + r1.x = r1.x - overlapX; + } + } + } + else + { + //No collision + collisionSide = "none"; + } + } + else + { + //No collision + collisionSide = "none"; + } + + return collisionSide; +} \ No newline at end of file diff --git a/Code - Published/chapter09/alienArmada/src/objects.js b/Code - Published/chapter09/alienArmada/src/objects.js new file mode 100644 index 0000000..e2cb47a --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/objects.js @@ -0,0 +1,59 @@ +//--- The sprite object + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 32, + sourceHeight: 32, + width: 32, + height: 32, + x: 0, + y: 0, + vx: 0, + vy: 0, + visible: true, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + } +}; + +//--- The alien object + +var alienObject = Object.create(spriteObject); +alienObject.NORMAL = 1; +alienObject.EXPLODED = 2; +alienObject.state = alienObject.NORMAL; +alienObject.update = function() +{ + this.sourceX = this.state * this.width; +}; + +//--- The message object + +var messageObject = +{ + x: 0, + y: 0, + visible: true, + text: "Message", + font: "normal bold 20px Helvetica", + fillStyle: "red", + textBaseline: "top" +}; + diff --git a/Code - Published/chapter09/alienArmada/src/requestAnimationFramePolyfill.js b/Code - Published/chapter09/alienArmada/src/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter09/alienArmada/src/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter10/.DS_Store b/Code - Published/chapter10/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter10/.DS_Store differ diff --git a/Code - Published/chapter10/monsterMayhem/.DS_Store b/Code - Published/chapter10/monsterMayhem/.DS_Store new file mode 100644 index 0000000..001db3d Binary files /dev/null and b/Code - Published/chapter10/monsterMayhem/.DS_Store differ diff --git a/Code - Published/chapter10/monsterMayhem/images/.DS_Store b/Code - Published/chapter10/monsterMayhem/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter10/monsterMayhem/images/.DS_Store differ diff --git a/Code - Published/chapter10/monsterMayhem/images/monsterMayhem.png b/Code - Published/chapter10/monsterMayhem/images/monsterMayhem.png new file mode 100644 index 0000000..7e455a8 Binary files /dev/null and b/Code - Published/chapter10/monsterMayhem/images/monsterMayhem.png differ diff --git a/Code - Published/chapter10/monsterMayhem/src/.DS_Store b/Code - Published/chapter10/monsterMayhem/src/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter10/monsterMayhem/src/.DS_Store differ diff --git a/Code - Published/chapter10/monsterMayhem/src/collision.js b/Code - Published/chapter10/monsterMayhem/src/collision.js new file mode 100644 index 0000000..9e6dfdb --- /dev/null +++ b/Code - Published/chapter10/monsterMayhem/src/collision.js @@ -0,0 +1,255 @@ +/* +This JavaScript file contains five collision functions + +- hitTestPoint +- hitTestCircle +- blockCircle +- hitTestRectangle +- blockRectangle + +To use them you'll need a sprite object with these minimum properties: + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, + left: function() + { + return this.x; + }, + right: function() + { + return this.x + this.width; + }, + top: function() + { + return this.y; + }, + bottom: function() + { + return this.y + this.height; + } +}; + + +*/ + + +//hitTestPoint + +function hitTestPoint(pointX, pointY, sprite) +{ + var hit + = pointX > sprite.left() && pointX < sprite.right() + && pointY > sprite.top() && pointY < sprite.bottom(); + + return hit; +} + +//hitTestCircle + +function hitTestCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' total radii + var totalRadii = c1.halfWidth() + c2.halfWidth(); + + //Set hit to true if the distance between the circles is + //less than their totalRadii + var hit = magnitude < totalRadii; + + return hit; +} + +//blockCircle + +function blockCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + } +} + +//hitTestRectangle + +function hitTestRectangle(r1, r2) +{ + //A variable to determine whether there's a collision + var hit = false; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check for a collision on the x axis + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occuring. Check for a collision on the y axis + if(Math.abs(vy) < combinedHalfHeights) + { + //There's definitely a collision happening + hit = true; + } + else + { + //There's no collision on the y axis + hit = false; + } + } + else + { + //There's no collision on the x axis + hit = false; + } + + return hit; +} + +//blockRectangle + +function blockRectangle(r1, r2) +{ + //A variable to tell us which side the + //collision is occurring on + var collisionSide = ""; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check whether vx is less than the combined half widths + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occurring! + //Check whether vy is less than the combined half heights + if(Math.abs(vy) < combinedHalfHeights) + { + //A collision has occurred! This is good! + //Find out the size of the overlap on both the X and Y axes + var overlapX = combinedHalfWidths - Math.abs(vx); + var overlapY = combinedHalfHeights - Math.abs(vy); + + //The collision has occurred on the axis with the + //*smallest* amount of overlap. Let's figure out which + //axis that is + + if(overlapX >= overlapY) + { + //The collision is happening on the X axis + //But on which side? vy can tell us + if(vy > 0) + { + collisionSide = "top"; + + //Move the rectangle out of the collision + r1.y = r1.y + overlapY; + } + else + { + collisionSide = "bottom"; + + //Move the rectangle out of the collision + r1.y = r1.y - overlapY; + } + } + else + { + //The collision is happening on the Y axis + //But on which side? vx can tell us + if(vx > 0) + { + collisionSide = "left"; + + //Move the rectangle out of the collision + r1.x = r1.x + overlapX; + } + else + { + collisionSide = "right"; + + //Move the rectangle out of the collision + r1.x = r1.x - overlapX; + } + } + } + else + { + //No collision + collisionSide = "none"; + } + } + else + { + //No collision + collisionSide = "none"; + } + + return collisionSide; +} \ No newline at end of file diff --git a/Code - Published/chapter10/monsterMayhem/src/monsterMayhem.html b/Code - Published/chapter10/monsterMayhem/src/monsterMayhem.html new file mode 100644 index 0000000..6822d3c --- /dev/null +++ b/Code - Published/chapter10/monsterMayhem/src/monsterMayhem.html @@ -0,0 +1,12 @@ + + +Monster Mayhem + + + + + + + + + \ No newline at end of file diff --git a/Code - Published/chapter10/monsterMayhem/src/monsterMayhem.js b/Code - Published/chapter10/monsterMayhem/src/monsterMayhem.js new file mode 100644 index 0000000..3836ccf --- /dev/null +++ b/Code - Published/chapter10/monsterMayhem/src/monsterMayhem.js @@ -0,0 +1,900 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); +var drawingSurface = canvas.getContext("2d"); + +//Game Level Maps +//Arrays to store the level maps +var levelMaps = []; +var levelGameObjects = []; + +//A level counter +var levelCounter = 0; + +//A timer to help delay the change time between levels +var levelChangeTimer = 0; + +//Level 0 +var map0 = +[ + [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6], + [6,1,2,1,1,2,1,1,1,1,2,2,1,1,1,6], + [6,1,1,1,1,1,2,1,2,1,1,1,1,2,1,6], + [6,2,1,1,1,1,1,1,1,1,1,2,1,1,1,6], + [6,1,2,1,2,2,1,1,1,1,2,1,1,1,1,6], + [6,1,2,1,1,1,1,1,1,1,1,2,2,1,1,6], + [6,1,1,1,2,1,2,2,1,1,1,1,1,1,2,6], + [6,1,1,2,1,1,2,1,1,1,2,1,2,1,1,6], + [6,1,2,1,1,1,2,1,2,1,1,1,1,2,1,6], + [6,1,2,2,1,1,2,2,2,1,2,2,1,1,2,6], + [6,2,1,1,1,2,1,1,1,1,1,1,1,1,1,6], + [6,1,2,2,1,1,2,1,1,2,1,2,1,2,2,6], + [6,1,1,1,2,1,1,1,2,1,1,1,1,1,1,6], + [6,1,1,1,1,1,2,1,1,1,1,2,1,2,1,6], + [6,1,2,1,2,1,1,1,1,2,1,1,1,1,1,6], + [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6] +]; + +//Push map0 into the leveMaps array +levelMaps.push(map0); +/* +var gameObjects0 = +[ + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0], + [0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,4,0,0,0,0,0,0,3,0,0,4,0,0,3,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,3,0,0,0,5,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,4,0,0,0,0,0,0,0,0,0,0,0,4,0], + [0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,3,0,0,0,3,0,0,0,0,3,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,4,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] +]; +*/ + +var gameObjects0 = +[ + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,3,0,0,4,0,0,3,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,3,0,0,0,5,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,3,0,0,0,3,0,0,0,0,3,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] +]; + +//Push gameObjects0 into the levelGameObjects array +levelGameObjects.push(gameObjects0); + +//Level 1 + +var map1 = +[ + [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6], + [6,1,1,1,1,1,1,1,1,1,1,1,1,1,1,6], + [6,1,2,2,1,1,1,1,2,2,1,1,1,2,2,6], + [6,1,1,2,2,2,1,1,2,1,1,1,1,2,1,6], + [6,1,1,1,2,1,1,1,2,2,1,2,1,2,1,6], + [6,1,1,1,1,1,2,1,1,1,1,2,1,1,1,6], + [6,2,2,1,2,2,2,2,2,2,1,2,1,2,1,6], + [6,1,1,1,1,1,1,1,1,2,2,2,2,1,1,6], + [6,1,1,2,1,1,2,2,1,2,1,1,1,1,1,6], + [6,2,1,2,1,1,1,2,1,1,1,2,2,2,1,6], + [6,1,1,2,2,1,1,2,2,1,1,1,1,2,1,6], + [6,1,1,1,1,1,1,1,2,1,1,1,2,2,2,6], + [6,2,1,1,2,1,1,1,2,2,1,1,1,2,1,6], + [6,1,1,2,2,2,2,1,1,1,1,2,1,2,1,6], + [6,1,1,1,1,1,2,1,1,1,1,2,1,1,1,6], + [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6] +]; + +//Push map1 into the leveMaps array +levelMaps.push(map1); + +//The game objects maps +var gameObjects1 = +[ + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,4,0,0,0,0,0,0,0,0,3,0,0,0,4,0], + [0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,3,0,0,0,0,0,0,5,0,0,0,0,0,0,0], + [0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0], + [0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,4,0,0,0,0,0,0,0,0,4,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,4,0,0,3,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] +]; + +//Push gameObjects1 into the levelGameObjects array +levelGameObjects.push(gameObjects1); + +//Map code +var EMPTY = 0; +var FLOOR = 1; +var BOX = 2; +var MONSTER = 3; +var STAR = 4; +var ALIEN = 5; +var WALL = 6; + +//The size of each tile cell +var SIZE = 64; + +//Sprites we need to access by name +var alien = null; +var levelCompleteDisplay = null; + +//The number of rows and columns +var ROWS = map0.length; +var COLUMNS = map0[0].length; + +//Arrays to store the game objects +var sprites = []; +var monsters = []; +var boxes = []; +var messages = []; +var stars = []; + +var assetsToLoad = []; +var assetsLoaded = 0; + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/monsterMayhem.png"; +assetsToLoad.push(image); + +//The number of columns on the tilesheet +var tilesheetColumns = 4; + +//Game variables +//Any game variables you need +var starsCollected = 0; + +//Game states +var LOADING = 0; +var BUILD_MAP = 1; +var PLAYING = 2; +var OVER = 3; +var LEVEL_COMPLETE = 4; +var gameState = LOADING; + +//--- The gameWorld object +var gameWorld = +{ + x: 0, + y: 0, + width: map0[0].length * SIZE, + height: map0.length * SIZE, +}; + +//--- The camera object +var camera = +{ + x: 0, + y: 0, + width: canvas.width, + height: canvas.height, + + //The camera's inner scroll boundaries + rightInnerBoundary: function() + { + return this.x + (this.width / 2) + (this.width / 4); + }, + leftInnerBoundary: function() + { + return this.x + (this.width / 2) - (this.width / 4); + }, + topInnerBoundary: function() + { + return this.y + (this.height / 2) - (this.height / 4); + }, + bottomInnerBoundary: function() + { + return this.y + (this.height / 2) + (this.height / 4); + } +}; + +//Center the camera over the gameWorld +camera.x = (gameWorld.x + gameWorld.width / 2) - camera.width / 2; +camera.y = (gameWorld.y + gameWorld.height / 2) - camera.height / 2; + +//Arrow key codes +var UP = 38; +var DOWN = 40; +var RIGHT = 39; +var LEFT = 37; + +//Directions +var moveUp = false; +var moveDown = false; +var moveRight = false; +var moveLeft = false; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case UP: + moveUp = true; + break; + + case DOWN: + moveDown = true; + break; + + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + } +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case UP: + moveUp = false; + break; + + case DOWN: + moveDown = false; + break; + + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading..."); + break; + + case BUILD_MAP: + buildMap(levelMaps[levelCounter]); + buildMap(levelGameObjects[levelCounter]); + createOtherSprites(); + gameState = PLAYING; + break; + + case PLAYING: + playGame(); + break; + + case LEVEL_COMPLETE: + levelComplete(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function levelComplete() +{ + //Make the leveCompleteDisplay visible + levelCompleteDisplay.visible = true; + + //Update the timer that changes the level by one + levelChangeTimer++; + + //Load the next level after 60 frames + if(levelChangeTimer === 60) + { + loadNextLevel(); + } + + function loadNextLevel() + { + //Reset the timer that changes the level + levelChangeTimer = 0; + + //Update the levelCounter by 1 + levelCounter++; + + //Load the next level if there is one or end the game if there isn't + if(levelCounter < levelMaps.length) + { + //Clear the arrays of objects + + sprites = []; + monsters = []; + boxes = []; + stars = []; + + //Reset any gameVariables + starsCollected = 0; + + //Make sure the gameWorld size matches the size of the next level + gameWorld.width = levelMaps[levelCounter][0].length * SIZE; + gameWorld.height = levelMaps[levelCounter].length * SIZE; + + //Re-center the camera + camera.x = (gameWorld.x + gameWorld.width / 2) - camera.width / 2; + camera.y = (gameWorld.y + gameWorld.height / 2) - camera.height / 2; + + //Build the maps for the next level + gameState = BUILD_MAP; + } + else + { + gameState = OVER; + } + } +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load handlers + image.removeEventListener("load", loadHandler, false); + + //Build the map + gameState = BUILD_MAP; + } +} + +function buildMap(levelMap) +{ + for(var row = 0; row < ROWS; row++) + { + for(var column = 0; column < COLUMNS; column++) + { + var currentTile = levelMap[row][column]; + + if(currentTile != EMPTY) + { + //Find the tile's x and y position on the tile sheet + var tilesheetX = Math.floor((currentTile - 1) % tilesheetColumns) * SIZE; + var tilesheetY = Math.floor((currentTile - 1) / tilesheetColumns) * SIZE; + + switch (currentTile) + { + case FLOOR: + var floor = Object.create(spriteObject); + floor.sourceX = tilesheetX; + floor.sourceY = tilesheetY; + floor.x = column * SIZE; + floor.y = row * SIZE; + sprites.push(floor); + break; + + case BOX: + var box = Object.create(spriteObject); + box.sourceX = tilesheetX; + box.sourceY = tilesheetY; + box.x = column * SIZE; + box.y = row * SIZE; + sprites.push(box); + boxes.push(box); + break; + + case WALL: + var wall = Object.create(spriteObject); + wall.sourceX = tilesheetX; + wall.sourceY = tilesheetY; + wall.x = column * SIZE; + wall.y = row * SIZE; + sprites.push(wall); + break; + + case MONSTER: + var monster = Object.create(monsterObject); + monster.sourceX = tilesheetX; + monster.sourceY = tilesheetY; + monster.x = column * SIZE; + monster.y = row * SIZE; + //Make the monster choose a random start direction + changeDirection(monster) + monsters.push(monster); + sprites.push(monster); + break; + + case STAR: + var star = Object.create(spriteObject); + star.sourceX = tilesheetX; + star.sourceY = tilesheetY; + star.sourceWidth = 48; + star.sourceHeight = 48; + star.width = 48; + star.height = 48; + star.x = column * SIZE + 8; + star.y = row * SIZE + 8; + stars.push(star); + sprites.push(star); + break; + + case ALIEN: + alien = Object.create(spriteObject); + alien.sourceX = tilesheetX; + alien.sourceY = tilesheetY; + alien.x = column * SIZE; + alien.y = row * SIZE; + sprites.push(alien); + break; + } + } + } + } +} + +function createOtherSprites() +{ + levelCompleteDisplay = Object.create(spriteObject); + levelCompleteDisplay.sourceX = 0; + levelCompleteDisplay.sourceY = 384; + levelCompleteDisplay.sourceWidth = 256; + levelCompleteDisplay.sourceHeight = 128; + levelCompleteDisplay.width = 256; + levelCompleteDisplay.height = 128; + levelCompleteDisplay.x = canvas.width / 2 - levelCompleteDisplay.width / 2; + levelCompleteDisplay.y = canvas.height / 2 - levelCompleteDisplay.height / 2; + levelCompleteDisplay.visible = false; + levelCompleteDisplay.scrollable = false; + sprites.push(levelCompleteDisplay); + + youLostDisplay = Object.create(spriteObject); + youLostDisplay.sourceX = 0; + youLostDisplay.sourceY = 128; + youLostDisplay.sourceWidth = 256; + youLostDisplay.sourceHeight = 128; + youLostDisplay.width = 256; + youLostDisplay.height = 128; + youLostDisplay.x = canvas.width / 2 - youLostDisplay.width / 2; + youLostDisplay.y = canvas.height / 2 - youLostDisplay.height / 2; + youLostDisplay.visible = false; + youLostDisplay.scrollable = false; + sprites.push(youLostDisplay); + + youWonDisplay = Object.create(spriteObject); + youWonDisplay.sourceX = 0; + youWonDisplay.sourceY = 256; + youWonDisplay.sourceWidth = 256; + youWonDisplay.sourceHeight = 128; + youWonDisplay.width = 256; + youWonDisplay.height = 128; + youWonDisplay.x = canvas.width / 2 - youWonDisplay.width / 2; + youWonDisplay.y = canvas.height / 2 - youWonDisplay.height / 2; + youWonDisplay.visible = false; + youWonDisplay.scrollable = false; + sprites.push(youWonDisplay); +} + +function playGame() +{ + //Up + if(moveUp && !moveDown) + { + alien.vy = -4; + } + //Down + if(moveDown && !moveUp) + { + alien.vy = 4; + } + //Left + if(moveLeft && !moveRight) + { + alien.vx = -4; + } + //Right + if(moveRight && !moveLeft) + { + alien.vx = 4; + } + + //Set the alien's velocity to zero if none of the keys are being pressed + if(!moveUp && !moveDown) + { + alien.vy = 0; + } + if(!moveLeft && !moveRight) + { + alien.vx = 0; + } + + //Move the alien and set its screen boundaries + alien.x = Math.max(64, Math.min(alien.x + alien.vx, gameWorld.width - alien.width - 64)); + alien.y = Math.max(64, Math.min(alien.y + alien.vy, gameWorld.height - alien.height - 64)); + + //Check collision between the alien and the boxes + for(var i = 0; i < boxes.length; i++) + { + blockRectangle(alien, boxes[i]); + } + + //Check for collisions with stars + for(var i = 0; i < stars.length; i++) + { + var star = stars[i]; + if(hitTestRectangle(alien, star) && star.visible) + { + star.visible = false; + starsCollected++; + + //Check whether the level is over + //by checking if the starsCollected matches + //the total number in the stars array + if(starsCollected === stars.length) + { + gameState = LEVEL_COMPLETE; + } + } + } + + //Check for collisions with monsters + for(var i = 0; i < monsters.length; i++) + { + var monster = monsters[i]; + if(hitTestCircle(alien, monster)) + { + gameState = OVER; + } + } + + //The monsters + for(var i = 0; i < monsters.length; i++) + { + var monster = monsters[i]; + + //Move the monsters + monster.x += monster.vx; + monster.y += monster.vy; + + //Check whether the monster is at a tile corner + if(Math.floor(monster.x) % SIZE === 0 + && Math.floor(monster.y) % SIZE === 0) + { + //Change the monster's direction + changeDirection(monster); + } + + //Change the monster's state to SCARED if + //it's 128 pixels from the alien + var vx = alien.centerX() - monster.centerX(); + var vy = alien.centerY() - monster.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + if(magnitude < 192) + { + monster.state = monster.SCARED; + } + else + { + monster.state = monster.NORMAL; + } + + //Update the monster to reflect state changes + monster.update(); + } + + //Scroll the camera + if(alien.x < camera.leftInnerBoundary()) + { + camera.x = Math.floor(alien.x - (camera.width / 4)); + } + if(alien.y < camera.topInnerBoundary()) + { + camera.y = Math.floor(alien.y - (camera.height / 4)); + } + if(alien.x + alien.width > camera.rightInnerBoundary()) + { + camera.x = Math.floor(alien.x + alien.width - (camera.width / 4 * 3)); + } + if(alien.y + alien.height > camera.bottomInnerBoundary()) + { + camera.y = Math.floor(alien.y + alien.height - (camera.height / 4 * 3)); + } + + //The camera's gameWorld boundaries + if(camera.x < gameWorld.x) + { + camera.x = gameWorld.x; + } + if(camera.y < gameWorld.y) + { + camera.y = gameWorld.y; + } + if(camera.x + camera.width > gameWorld.x + gameWorld.width) + { + camera.x = gameWorld.x + gameWorld.width - camera.width; + } + if(camera.y + camera.height > gameWorld.height) + { + camera.y = gameWorld.height - camera.height; + } +} + +function changeDirection(monster) +{ + //Clear any previous direction the monster has chosen + monster.validDirections = []; + monster.direction = monster.NONE; + + //Find the monster's column and row in the array + var monsterColumn = Math.floor(monster.x / SIZE); + var monsterRow = Math.floor(monster.y / SIZE); + + //Get a reference to the current level map + var currentMap = levelMaps[levelCounter]; + + //Find out what kinds of things are in the map cells + //that surround the monster. If the cells contain a FLOOR cell, + //push the corresponding direction into the validDirections array + if(monsterRow > 0) + { + var thingAbove = currentMap[monsterRow - 1][monsterColumn]; + if(thingAbove === FLOOR) + { + monster.validDirections.push(monster.UP); + } + } + if(monsterRow < ROWS - 1) + { + var thingBelow = currentMap[monsterRow + 1][monsterColumn]; + if(thingBelow === FLOOR) + { + monster.validDirections.push(monster.DOWN); + } + } + if(monsterColumn > 0) + { + var thingToTheLeft = currentMap[monsterRow][monsterColumn - 1]; + if(thingToTheLeft === FLOOR) + { + monster.validDirections.push(monster.LEFT); + } + } + if(monsterColumn < COLUMNS - 1) + { + var thingToTheRight = currentMap[monsterRow][monsterColumn + 1]; + if(thingToTheRight === FLOOR) + { + monster.validDirections.push(monster.RIGHT); + } + } + + //The monster's validDirections array now contains 0 to 4 directions that the + //contain FLOOR cells. Which of those directions will the monster + //choose to move in? + + //If a valid direction was found, Figure out if the monster is at an + //maze passage intersection. + if(monster.validDirections.length !== 0) + { + //Find out if the monster is at an intersection + var upOrDownPassage + = (monster.validDirections.indexOf(monster.UP) !== -1 + || monster.validDirections.indexOf(monster.DOWN) !== -1); + + var leftOrRightPassage + = (monster.validDirections.indexOf(monster.LEFT) !== -1 + || monster.validDirections.indexOf(monster.RIGHT) !== -1); + + //Change the monster's direction if it's at an intersection or + //in a cul-de-sac (dead-end) + if(upOrDownPassage && leftOrRightPassage + || monster.validDirections.length === 1) + { + //Optionally find the closest distance to the alien + if(alien !== null && monster.hunt === true) + { + findClosestDirection(monster); + } + + //Assign a random validDirection if the alien object doesn't exist in the game + //or a validDirection wasn't found that brings the monster closer to the alien + if(alien === null || monster.direction === monster.NONE) + { + var randomNumber = Math.floor(Math.random() * monster.validDirections.length); + monster.direction = monster.validDirections[randomNumber]; + } + + //Choose the monster's final direction + switch(monster.direction) + { + case monster.RIGHT: + monster.vx = monster.speed; + monster.vy = 0; + break; + + case monster.LEFT: + monster.vx = -monster.speed; + monster.vy = 0; + break; + + case monster.UP: + monster.vx = 0; + monster.vy = -monster.speed; + break; + + case monster.DOWN: + monster.vx = 0; + monster.vy = monster.speed; + } + } + } +} + +function findClosestDirection(monster) +{ + var closestDirection = undefined; + + //Find the distance between the monster and the alien + var vx = alien.centerX() - monster.centerX(); + var vy = alien.centerY() - monster.centerY(); + + //If the distance is greater on the x axis... + if(Math.abs(vx) >= Math.abs(vy)) + { + //Try left and right + if(vx <= 0) + { + closestDirection = monsterObject.LEFT; + } + else + { + closestDirection = monsterObject.RIGHT; + } + } + //If the distance is greater on the y axis... + else + { + //Try up and down + if(vy <= 0) + { + closestDirection = monsterObject.UP; + } + else + { + closestDirection = monsterObject.DOWN; + } + } + + //Find out if the closestDirection is one of the validDirections + for(var i = 0; i < monster.validDirections.length; i++) + { + if(closestDirection === monster.validDirections[i]) + { + //If it, assign the closestDirection to the monster's direction + monster.direction = closestDirection; + } + } +} + +function endGame() +{ + //Make the levelCompleteDisplay invisible + levelCompleteDisplay.visible = false; + + //You win if you're on the last level and + //you've collected all the stars + if(levelCounter === levelMaps.length + && starsCollected === stars.length) + { + youWonDisplay.visible = true; + } + else + { + youLostDisplay.visible = true; + } +} + +function render() +{ + //Render the gameWorld + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Position the gameWorld inside the camera + drawingSurface.save(); + drawingSurface.translate(-camera.x, -camera.y); + + //Display the sprites on the gameWorld + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + + //display the scrolling sprites + if(sprite.visible && sprite.scrollable) + { + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + + //display the non-scrolling sprites + if(sprite.visible && !sprite.scrollable) + { + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(camera.x + sprite.x), Math.floor(camera.y + sprite.y), + sprite.width, sprite.height + ); + } + } + } + + drawingSurface.restore(); + + //Display any game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); diff --git a/Code - Published/chapter10/monsterMayhem/src/objects.js b/Code - Published/chapter10/monsterMayhem/src/objects.js new file mode 100644 index 0000000..f077253 --- /dev/null +++ b/Code - Published/chapter10/monsterMayhem/src/objects.js @@ -0,0 +1,64 @@ +//--- The sprite object + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + visible: true, + scrollable: true, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, +}; + +//--- The monster object + +monsterObject = Object.create(spriteObject); +monsterObject.sourceX = 128; + +//The monster's states +monsterObject.NORMAL = [2,0]; +monsterObject.SCARED = [2,1]; +monsterObject.state = monsterObject.NORMAL; + +monsterObject.update = function() +{ + this.sourceX = this.state[0] * this.width; + this.sourceY = this.state[1] * this.height; +}; + +//The monster's allowed speed +monsterObject.speed = 1; + +//Properties to help the monster change direction +monsterObject.NONE = 0; +monsterObject.UP = 1; +monsterObject.DOWN = 2; +monsterObject.LEFT = 3; +monsterObject.RIGHT = 4; +monsterObject.validDirections = []; +monsterObject.direction = monsterObject.NONE; +monsterObject.hunt = false; \ No newline at end of file diff --git a/Code - Published/chapter10/monsterMayhem/src/requestAnimationFramePolyfill.js b/Code - Published/chapter10/monsterMayhem/src/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter10/monsterMayhem/src/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter10/monsterMaze/.DS_Store b/Code - Published/chapter10/monsterMaze/.DS_Store new file mode 100644 index 0000000..001db3d Binary files /dev/null and b/Code - Published/chapter10/monsterMaze/.DS_Store differ diff --git a/Code - Published/chapter10/monsterMaze/images/.DS_Store b/Code - Published/chapter10/monsterMaze/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter10/monsterMaze/images/.DS_Store differ diff --git a/Code - Published/chapter10/monsterMaze/images/monsterMaze.png b/Code - Published/chapter10/monsterMaze/images/monsterMaze.png new file mode 100644 index 0000000..c8e7312 Binary files /dev/null and b/Code - Published/chapter10/monsterMaze/images/monsterMaze.png differ diff --git a/Code - Published/chapter10/monsterMaze/src/.DS_Store b/Code - Published/chapter10/monsterMaze/src/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter10/monsterMaze/src/.DS_Store differ diff --git a/Code - Published/chapter10/monsterMaze/src/collision.js b/Code - Published/chapter10/monsterMaze/src/collision.js new file mode 100644 index 0000000..9e6dfdb --- /dev/null +++ b/Code - Published/chapter10/monsterMaze/src/collision.js @@ -0,0 +1,255 @@ +/* +This JavaScript file contains five collision functions + +- hitTestPoint +- hitTestCircle +- blockCircle +- hitTestRectangle +- blockRectangle + +To use them you'll need a sprite object with these minimum properties: + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, + left: function() + { + return this.x; + }, + right: function() + { + return this.x + this.width; + }, + top: function() + { + return this.y; + }, + bottom: function() + { + return this.y + this.height; + } +}; + + +*/ + + +//hitTestPoint + +function hitTestPoint(pointX, pointY, sprite) +{ + var hit + = pointX > sprite.left() && pointX < sprite.right() + && pointY > sprite.top() && pointY < sprite.bottom(); + + return hit; +} + +//hitTestCircle + +function hitTestCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' total radii + var totalRadii = c1.halfWidth() + c2.halfWidth(); + + //Set hit to true if the distance between the circles is + //less than their totalRadii + var hit = magnitude < totalRadii; + + return hit; +} + +//blockCircle + +function blockCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + } +} + +//hitTestRectangle + +function hitTestRectangle(r1, r2) +{ + //A variable to determine whether there's a collision + var hit = false; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check for a collision on the x axis + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occuring. Check for a collision on the y axis + if(Math.abs(vy) < combinedHalfHeights) + { + //There's definitely a collision happening + hit = true; + } + else + { + //There's no collision on the y axis + hit = false; + } + } + else + { + //There's no collision on the x axis + hit = false; + } + + return hit; +} + +//blockRectangle + +function blockRectangle(r1, r2) +{ + //A variable to tell us which side the + //collision is occurring on + var collisionSide = ""; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check whether vx is less than the combined half widths + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occurring! + //Check whether vy is less than the combined half heights + if(Math.abs(vy) < combinedHalfHeights) + { + //A collision has occurred! This is good! + //Find out the size of the overlap on both the X and Y axes + var overlapX = combinedHalfWidths - Math.abs(vx); + var overlapY = combinedHalfHeights - Math.abs(vy); + + //The collision has occurred on the axis with the + //*smallest* amount of overlap. Let's figure out which + //axis that is + + if(overlapX >= overlapY) + { + //The collision is happening on the X axis + //But on which side? vy can tell us + if(vy > 0) + { + collisionSide = "top"; + + //Move the rectangle out of the collision + r1.y = r1.y + overlapY; + } + else + { + collisionSide = "bottom"; + + //Move the rectangle out of the collision + r1.y = r1.y - overlapY; + } + } + else + { + //The collision is happening on the Y axis + //But on which side? vx can tell us + if(vx > 0) + { + collisionSide = "left"; + + //Move the rectangle out of the collision + r1.x = r1.x + overlapX; + } + else + { + collisionSide = "right"; + + //Move the rectangle out of the collision + r1.x = r1.x - overlapX; + } + } + } + else + { + //No collision + collisionSide = "none"; + } + } + else + { + //No collision + collisionSide = "none"; + } + + return collisionSide; +} \ No newline at end of file diff --git a/Code - Published/chapter10/monsterMaze/src/monsterMaze.html b/Code - Published/chapter10/monsterMaze/src/monsterMaze.html new file mode 100644 index 0000000..6aacacc --- /dev/null +++ b/Code - Published/chapter10/monsterMaze/src/monsterMaze.html @@ -0,0 +1,12 @@ + + +Monster Maze + + + + + + + + + \ No newline at end of file diff --git a/Code - Published/chapter10/monsterMaze/src/monsterMaze.js b/Code - Published/chapter10/monsterMaze/src/monsterMaze.js new file mode 100644 index 0000000..db7eea8 --- /dev/null +++ b/Code - Published/chapter10/monsterMaze/src/monsterMaze.js @@ -0,0 +1,560 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); +var drawingSurface = canvas.getContext("2d"); + +//The game map +var map = +[ + [5,5,5,5,5,5,5,5,5,5,5], + [5,1,1,1,1,1,1,1,1,1,5], + [5,1,2,2,2,1,2,1,2,1,5], + [5,1,1,2,1,1,1,1,1,1,5], + [5,1,1,1,1,2,1,1,2,1,5], + [5,1,2,1,2,2,1,2,2,1,5], + [5,1,1,1,1,1,2,1,1,1,5], + [5,5,5,5,5,5,5,5,5,5,5] +]; + +//The game objects map +//Note: make sure monsters are at an intersection so that +//changeDirection will assign them their starting velocity + +var gameObjects = +[ + [0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,3,0], + [0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,4,0,0,0,0,0], + [0,0,3,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,3,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0] +]; + +//Map code +var EMPTY = 0; +var FLOOR = 1; +var BOX = 2; +var MONSTER = 3; +var ALIEN = 4; +var WALL = 5; + +//The size of each tile cell +var SIZE = 64; + +//Sprites we need to access by name +var alien = null; + +//The number of rows and columns +var ROWS = map.length; +var COLUMNS = map[0].length; + +//The number of columns on the tilesheet +var tilesheetColumns = 3; + +//Arrays to store the game objects +var sprites = []; +var monsters = []; +var boxes = []; +var messages = []; + +var assetsToLoad = []; +var assetsLoaded = 0; + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/monsterMaze.png"; +assetsToLoad.push(image); + +//Game variables +//... Any game variables you need go here... + +//Game states +var LOADING = 0; +var BUILD_MAP = 1; +var PLAYING = 2; +var OVER = 3; +var gameState = LOADING; + +//Arrow key codes +var UP = 38; +var DOWN = 40; +var RIGHT = 39; +var LEFT = 37; + +//Directions +var moveUp = false; +var moveDown = false; +var moveRight = false; +var moveLeft = false; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case UP: + moveUp = true; + break; + + case DOWN: + moveDown = true; + break; + + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + } +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case UP: + moveUp = false; + break; + + case DOWN: + moveDown = false; + break; + + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading..."); + break; + + case BUILD_MAP: + buildMap(map); + buildMap(gameObjects); + //createOtherObjects(); + gameState = PLAYING; + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load handlers + image.removeEventListener("load", loadHandler, false); + + //Build the map + gameState = BUILD_MAP; + } +} + +function buildMap(levelMap) +{ + for(var row = 0; row < ROWS; row++) + { + for(var column = 0; column < COLUMNS; column++) + { + var currentTile = levelMap[row][column]; + + if(currentTile !== EMPTY) + { + //Find the tile's x and y position on the tile sheet + var tilesheetX = Math.floor((currentTile - 1) % tilesheetColumns) * SIZE; + var tilesheetY = Math.floor((currentTile - 1) / tilesheetColumns) * SIZE; + + switch (currentTile) + { + case FLOOR: + var floor = Object.create(spriteObject); + floor.sourceX = tilesheetX; + floor.sourceY = tilesheetY; + floor.x = column * SIZE; + floor.y = row * SIZE; + sprites.push(floor); + break; + + case BOX: + var box = Object.create(spriteObject); + box.sourceX = tilesheetX; + box.sourceY = tilesheetY; + box.x = column * SIZE; + box.y = row * SIZE; + sprites.push(box); + boxes.push(box); + break; + + case WALL: + var wall = Object.create(spriteObject); + wall.sourceX = tilesheetX; + wall.sourceY = tilesheetY; + wall.x = column * SIZE; + wall.y = row * SIZE; + sprites.push(wall); + break; + + case ALIEN: + alien = Object.create(spriteObject); + alien.sourceX = tilesheetX; + alien.sourceY = tilesheetY; + alien.x = column * SIZE; + alien.y = row * SIZE; + sprites.push(alien); + break; + + case MONSTER: + var monster = Object.create(monsterObject); + monster.sourceX = tilesheetX; + monster.sourceY = tilesheetY; + monster.x = column * SIZE; + monster.y = row * SIZE; + //Make the monster choose a random start direction + changeDirection(monster) + monsters.push(monster); + sprites.push(monster); + break; + } + } + } + } +} + +function createOtherObjects() +{ + console.log("createOtherObjects"); +} + +function changeDirection(monster) +{ + //Clear any previous direction the monster has chosen + monster.validDirections = []; + //Alternative way of clearing an array: + //monster.validDirections.length = 0; + monster.direction = monster.NONE; + + //Find the monster's column and row in the array + var monsterColumn = Math.floor(monster.x / SIZE); + var monsterRow = Math.floor(monster.y / SIZE); + + //Find out what kinds of things are in the map cells + //that surround the monster. If the cells contain a FLOOR cell, + //push the corresponding direction into the validDirections array + if(monsterRow > 0) + { + var thingAbove = map[monsterRow - 1][monsterColumn]; + if(thingAbove === FLOOR) + { + monster.validDirections.push(monster.UP); + } + } + if(monsterRow < ROWS - 1) + { + var thingBelow = map[monsterRow + 1][monsterColumn]; + if(thingBelow === FLOOR) + { + monster.validDirections.push(monster.DOWN); + } + } + if(monsterColumn > 0) + { + var thingToTheLeft = map[monsterRow][monsterColumn - 1]; + if(thingToTheLeft === FLOOR) + { + monster.validDirections.push(monster.LEFT); + } + } + if(monsterColumn < COLUMNS - 1) + { + var thingToTheRight = map[monsterRow][monsterColumn + 1]; + if(thingToTheRight === FLOOR) + { + monster.validDirections.push(monster.RIGHT); + } + } + + //The monster's validDirections array now contains 0 to 4 directions that the + //contain FLOOR cells. Which of those directions will the monster + //choose to move in? + + //If a valid direction was found, Figure out if the monster is at an + //maze passage intersection. + if(monster.validDirections.length !== 0) + { + //Find out if the monster is at an intersection + var upOrDownPassage + = (monster.validDirections.indexOf(monster.UP) !== -1 + || monster.validDirections.indexOf(monster.DOWN) !== -1); + + var leftOrRightPassage + = (monster.validDirections.indexOf(monster.LEFT) !== -1 + || monster.validDirections.indexOf(monster.RIGHT) !== -1); + + //Change the monster's direction if it's at an intersection or + //in a cul-de-sac (dead-end) + if(upOrDownPassage && leftOrRightPassage + || monster.validDirections.length === 1) + { + //Optionally find the closest distance to the alien + if(alien !== null && monster.hunt === true) + { + findClosestDirection(monster); + } + + //Assign a random validDirection if the alien object doesn't exist in the game + //or a validDirection wasn't found that brings the monster closer to the alien + if(alien === null || monster.direction === monster.NONE) + { + var randomNumber = Math.floor(Math.random() * monster.validDirections.length); + monster.direction = monster.validDirections[randomNumber]; + } + + //Choose the monster's final direction + switch(monster.direction) + { + case monster.RIGHT: + monster.vx = monster.speed; + monster.vy = 0; + break; + + case monster.LEFT: + monster.vx = -monster.speed; + monster.vy = 0; + break; + + case monster.UP: + monster.vx = 0; + monster.vy = -monster.speed; + break; + + case monster.DOWN: + monster.vx = 0; + monster.vy = monster.speed; + } + + //You can use this code below as an alternative to the switch statement + /* + var moveByDirection = + [ + [0, -1], + [0, 1], + [-1, 0], + [1, 0] + ] + + monster.vx = monster.speed * moveByDirection[monster.direction - 1][0]; + monster.vy = monster.speed * moveByDirection[monster.direction - 1][1]; + */ + } + } +} + +function findClosestDirection(monster) +{ + var closestDirection = undefined; + + //Find the distance between the monster and the alien + var vx = alien.centerX() - monster.centerX(); + var vy = alien.centerY() - monster.centerY(); + + //If the distance is greater on the x axis... + if(Math.abs(vx) >= Math.abs(vy)) + { + //Try left and right + if(vx <= 0) + { + closestDirection = monsterObject.LEFT; + } + else + { + closestDirection = monsterObject.RIGHT; + } + } + //If the distance is greater on the y axis... + else + { + //Try up and down + if(vy <= 0) + { + closestDirection = monsterObject.UP; + } + else + { + closestDirection = monsterObject.DOWN; + } + } + + //Find out if the closestDirection is one of the validDirections + for(var i = 0; i < monster.validDirections.length; i++) + { + if(closestDirection === monster.validDirections[i]) + { + //If it, assign the closestDirection to the monster's direction + monster.direction = closestDirection; + } + } +} + +function playGame() +{ + //Up + if(moveUp && !moveDown) + { + alien.vy = -4; + } + //Down + if(moveDown && !moveUp) + { + alien.vy = 4; + } + //Left + if(moveLeft && !moveRight) + { + alien.vx = -4; + } + //Right + if(moveRight && !moveLeft) + { + alien.vx = 4; + } + + //Set the alien's velocity to zero if none of the keys are being pressed + if(!moveUp && !moveDown) + { + alien.vy = 0; + } + if(!moveLeft && !moveRight) + { + alien.vx = 0; + } + + //Move the alien and keep it inside the screen boundaries + alien.x = Math.max(64, Math.min(alien.x + alien.vx, canvas.width - alien.width - 64)); + alien.y = Math.max(64, Math.min(alien.y + alien.vy, canvas.height - alien.height - 64)); + + //Check for collisions between the alien and the boxes + for(var i = 0; i < boxes.length; i++) + { + blockRectangle(alien, boxes[i]); + } + + //The monsters + for(var i = 0; i < monsters.length; i++) + { + var monster = monsters[i]; + + //Move the monsters + monster.x += monster.vx; + monster.y += monster.vy; + + //Check whether the monster is at a tile corner + if(Math.floor(monster.x) % SIZE === 0 + && Math.floor(monster.y) % SIZE === 0) + { + //Change the monster's direction + changeDirection(monster); + } + + //Change the monster's state to SCARED if it's 128 pixels from the alien + var vx = alien.centerX() - monster.centerX(); + var vy = alien.centerY() - monster.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + if(magnitude < 192) + { + monster.state = monster.SCARED; + } + else + { + monster.state = monster.NORMAL; + } + + //Update the monster to reflect state changes + monster.update(); + } +} + +function endGame() +{ + console.log("endGame"); +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + if(sprite.visible) + { + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } + } + + //Display the game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); diff --git a/Code - Published/chapter10/monsterMaze/src/objects.js b/Code - Published/chapter10/monsterMaze/src/objects.js new file mode 100644 index 0000000..39b6817 --- /dev/null +++ b/Code - Published/chapter10/monsterMaze/src/objects.js @@ -0,0 +1,63 @@ +//--- The sprite object + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + visible: true, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, +}; + +//--- The monster object + +monsterObject = Object.create(spriteObject); +monsterObject.sourceX = 128; + +//The monster's states +monsterObject.NORMAL = [2,0]; +monsterObject.SCARED = [2,1]; +monsterObject.state = monsterObject.NORMAL; + +monsterObject.update = function() +{ + this.sourceX = this.state[0] * this.width; + this.sourceY = this.state[1] * this.height; +}; + +//The monster's allowed speed +monsterObject.speed = 1; + +//Properties to help the monster change direction +monsterObject.NONE = 0; +monsterObject.UP = 1; +monsterObject.DOWN = 2; +monsterObject.LEFT = 3; +monsterObject.RIGHT = 4; +monsterObject.validDirections = []; +monsterObject.direction = monsterObject.NONE; +monsterObject.hunt = true; \ No newline at end of file diff --git a/Code - Published/chapter10/monsterMaze/src/requestAnimationFramePolyfill.js b/Code - Published/chapter10/monsterMaze/src/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter10/monsterMaze/src/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter10/movingMonster/.DS_Store b/Code - Published/chapter10/movingMonster/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter10/movingMonster/.DS_Store differ diff --git a/Code - Published/chapter10/movingMonster/movingMonster.html b/Code - Published/chapter10/movingMonster/movingMonster.html new file mode 100644 index 0000000..f25ddea --- /dev/null +++ b/Code - Published/chapter10/movingMonster/movingMonster.html @@ -0,0 +1,228 @@ + + +Moving Monster + + + + + \ No newline at end of file diff --git a/Code - Published/chapter10/movingMonster/movingMonster.png b/Code - Published/chapter10/movingMonster/movingMonster.png new file mode 100644 index 0000000..d460570 Binary files /dev/null and b/Code - Published/chapter10/movingMonster/movingMonster.png differ diff --git a/Code - Published/chapter10/movingMonster/requestAnimationFramePolyfill.js b/Code - Published/chapter10/movingMonster/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter10/movingMonster/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter10/timeBombPanic/.DS_Store b/Code - Published/chapter10/timeBombPanic/.DS_Store new file mode 100644 index 0000000..001db3d Binary files /dev/null and b/Code - Published/chapter10/timeBombPanic/.DS_Store differ diff --git a/Code - Published/chapter10/timeBombPanic/images/.DS_Store b/Code - Published/chapter10/timeBombPanic/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter10/timeBombPanic/images/.DS_Store differ diff --git a/Code - Published/chapter10/timeBombPanic/images/timeBombPanic.png b/Code - Published/chapter10/timeBombPanic/images/timeBombPanic.png new file mode 100644 index 0000000..a99a661 Binary files /dev/null and b/Code - Published/chapter10/timeBombPanic/images/timeBombPanic.png differ diff --git a/Code - Published/chapter10/timeBombPanic/src/.DS_Store b/Code - Published/chapter10/timeBombPanic/src/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter10/timeBombPanic/src/.DS_Store differ diff --git a/Code - Published/chapter10/timeBombPanic/src/collision.js b/Code - Published/chapter10/timeBombPanic/src/collision.js new file mode 100644 index 0000000..9e6dfdb --- /dev/null +++ b/Code - Published/chapter10/timeBombPanic/src/collision.js @@ -0,0 +1,255 @@ +/* +This JavaScript file contains five collision functions + +- hitTestPoint +- hitTestCircle +- blockCircle +- hitTestRectangle +- blockRectangle + +To use them you'll need a sprite object with these minimum properties: + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, + left: function() + { + return this.x; + }, + right: function() + { + return this.x + this.width; + }, + top: function() + { + return this.y; + }, + bottom: function() + { + return this.y + this.height; + } +}; + + +*/ + + +//hitTestPoint + +function hitTestPoint(pointX, pointY, sprite) +{ + var hit + = pointX > sprite.left() && pointX < sprite.right() + && pointY > sprite.top() && pointY < sprite.bottom(); + + return hit; +} + +//hitTestCircle + +function hitTestCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' total radii + var totalRadii = c1.halfWidth() + c2.halfWidth(); + + //Set hit to true if the distance between the circles is + //less than their totalRadii + var hit = magnitude < totalRadii; + + return hit; +} + +//blockCircle + +function blockCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + } +} + +//hitTestRectangle + +function hitTestRectangle(r1, r2) +{ + //A variable to determine whether there's a collision + var hit = false; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check for a collision on the x axis + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occuring. Check for a collision on the y axis + if(Math.abs(vy) < combinedHalfHeights) + { + //There's definitely a collision happening + hit = true; + } + else + { + //There's no collision on the y axis + hit = false; + } + } + else + { + //There's no collision on the x axis + hit = false; + } + + return hit; +} + +//blockRectangle + +function blockRectangle(r1, r2) +{ + //A variable to tell us which side the + //collision is occurring on + var collisionSide = ""; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check whether vx is less than the combined half widths + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occurring! + //Check whether vy is less than the combined half heights + if(Math.abs(vy) < combinedHalfHeights) + { + //A collision has occurred! This is good! + //Find out the size of the overlap on both the X and Y axes + var overlapX = combinedHalfWidths - Math.abs(vx); + var overlapY = combinedHalfHeights - Math.abs(vy); + + //The collision has occurred on the axis with the + //*smallest* amount of overlap. Let's figure out which + //axis that is + + if(overlapX >= overlapY) + { + //The collision is happening on the X axis + //But on which side? vy can tell us + if(vy > 0) + { + collisionSide = "top"; + + //Move the rectangle out of the collision + r1.y = r1.y + overlapY; + } + else + { + collisionSide = "bottom"; + + //Move the rectangle out of the collision + r1.y = r1.y - overlapY; + } + } + else + { + //The collision is happening on the Y axis + //But on which side? vx can tell us + if(vx > 0) + { + collisionSide = "left"; + + //Move the rectangle out of the collision + r1.x = r1.x + overlapX; + } + else + { + collisionSide = "right"; + + //Move the rectangle out of the collision + r1.x = r1.x - overlapX; + } + } + } + else + { + //No collision + collisionSide = "none"; + } + } + else + { + //No collision + collisionSide = "none"; + } + + return collisionSide; +} \ No newline at end of file diff --git a/Code - Published/chapter10/timeBombPanic/src/objects.js b/Code - Published/chapter10/timeBombPanic/src/objects.js new file mode 100644 index 0000000..baeb11e --- /dev/null +++ b/Code - Published/chapter10/timeBombPanic/src/objects.js @@ -0,0 +1,74 @@ +//--- The sprite object + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + visible: true, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, +}; + +//--- The message object + +var messageObject = +{ + x: 0, + y: 0, + visible: true, + text: "Message", + font: "normal bold 20px Helvetica", + fillStyle: "red", + textBaseline: "top" +}; + +//--- The gameTimer object + +var gameTimer = +{ + time: 0, + interval: undefined, + + start: function() + { + var self = this; + this.interval = setInterval(function(){self.tick();}, 1000); + }, + tick: function() + { + this.time--; + }, + stop: function() + { + clearInterval(this.interval); + }, + reset: function() + { + this.time = 0; + } +}; + diff --git a/Code - Published/chapter10/timeBombPanic/src/requestAnimationFramePolyfill.js b/Code - Published/chapter10/timeBombPanic/src/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter10/timeBombPanic/src/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter10/timeBombPanic/src/timeBombPanic.html b/Code - Published/chapter10/timeBombPanic/src/timeBombPanic.html new file mode 100644 index 0000000..f4ca525 --- /dev/null +++ b/Code - Published/chapter10/timeBombPanic/src/timeBombPanic.html @@ -0,0 +1,12 @@ + + +Time Bomb Panic + + + + + + + + + \ No newline at end of file diff --git a/Code - Published/chapter10/timeBombPanic/src/timeBombPanic.js b/Code - Published/chapter10/timeBombPanic/src/timeBombPanic.js new file mode 100644 index 0000000..04e2e6a --- /dev/null +++ b/Code - Published/chapter10/timeBombPanic/src/timeBombPanic.js @@ -0,0 +1,469 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); +var drawingSurface = canvas.getContext("2d"); + +//The game map +var map = +[ + [3,3,3,3,3,3,3,3,3,3,3], + [3,1,1,1,1,1,1,1,1,1,3], + [3,1,2,2,2,1,2,1,2,1,3], + [3,1,1,2,1,1,1,1,1,1,3], + [3,1,1,1,1,2,1,1,2,1,3], + [3,1,2,1,2,2,1,2,2,1,3], + [3,1,1,1,1,1,2,1,1,1,3], + [3,3,3,3,3,3,3,3,3,3,3] +]; + +//The game objects map +var gameObjects = +[ + [0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,5,0], + [0,0,0,0,0,4,0,0,0,0,0], + [0,0,5,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,5,0,0,0,0], + [0,0,0,0,5,0,0,5,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0] +]; + +//Map code +var EMPTY = 0; +var FLOOR = 1; +var BOX = 2; +var WALL = 3; +var ALIEN = 4; +var BOMB = 5; + +//The size of each tile cell +var SIZE = 64; + +//The number of rows and columns +var ROWS = map.length; +var COLUMNS = map[0].length; + +//The number of columns on the tilesheet +var tilesheetColumns = 5; + +//Sprites we need to access by name +var alien = null; +var timeDisplay = null; +var gameOverDisplay = null; +var gameOverMessage = null; +var timerMessage = null; + +//Arrays to store the game objects +var sprites = []; +var messages = []; +var boxes = []; +var bombs = []; + +var assetsToLoad = []; +var assetsLoaded = 0; + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/timeBombPanic.png"; +assetsToLoad.push(image); + +//Game variables +var bombsDefused = 0; + +//The game timer +gameTimer.time = 20; +gameTimer.start(); + +//Game states +var LOADING = 0; +var BUILD_MAP = 1; +var PLAYING = 2; +var OVER = 3; +var gameState = LOADING; + +//Arrow key codes +var UP = 38; +var DOWN = 40; +var RIGHT = 39; +var LEFT = 37; + +//Directions +var moveUp = false; +var moveDown = false; +var moveRight = false; +var moveLeft = false; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case UP: + moveUp = true; + break; + + case DOWN: + moveDown = true; + break; + + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + } +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case UP: + moveUp = false; + break; + + case DOWN: + moveDown = false; + break; + + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading..."); + break; + + case BUILD_MAP: + buildMap(map); + buildMap(gameObjects); + createOtherObjects(); + gameState = PLAYING; + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load handler + image.removeEventListener("load", loadHandler, false); + + //Build the level + gameState = BUILD_MAP; + } +} + +function buildMap(levelMap) +{ + for(var row = 0; row < ROWS; row++) + { + for(var column = 0; column < COLUMNS; column++) + { + var currentTile = levelMap[row][column]; + + if(currentTile !== EMPTY) + { + //Find the tile's x and y position on the tile sheet + var tilesheetX = Math.floor((currentTile - 1) % tilesheetColumns) * SIZE; + var tilesheetY = Math.floor((currentTile - 1) / tilesheetColumns) * SIZE; + + switch (currentTile) + { + case FLOOR: + var floor = Object.create(spriteObject); + floor.sourceX = tilesheetX; + floor.sourceY = tilesheetY; + floor.x = column * SIZE; + floor.y = row * SIZE; + sprites.push(floor); + break; + + case BOX: + var box = Object.create(spriteObject); + box.sourceX = tilesheetX; + box.sourceY = tilesheetY; + box.x = column * SIZE; + box.y = row * SIZE; + sprites.push(box); + boxes.push(box); + break; + + case WALL: + var wall = Object.create(spriteObject); + wall.sourceX = tilesheetX; + wall.sourceY = tilesheetY; + wall.x = column * SIZE; + wall.y = row * SIZE; + sprites.push(wall); + break; + + case BOMB: + var bomb = Object.create(spriteObject); + bomb.sourceX = tilesheetX; + bomb.sourceY = tilesheetY; + bomb.sourceWidth = 48; + bomb.sourceHeight = 36; + bomb.width = 48; + bomb.height = 36; + bomb.x = column * SIZE + 10; + bomb.y = row * SIZE + 16; + bombs.push(bomb); + sprites.push(bomb); + break; + + case ALIEN: + //Note: "alien" has already been defined in the main + //program so you don't neeed to preceed it with "var" + alien = Object.create(spriteObject); + alien.sourceX = tilesheetX; + alien.sourceY = tilesheetY; + alien.x = column * SIZE; + alien.y = row * SIZE; + sprites.push(alien); + break; + } + } + } + } +} + +function createOtherObjects() +{ + timeDisplay = Object.create(spriteObject); + timeDisplay.sourceX = 0; + timeDisplay.sourceY = 64; + timeDisplay.sourceWidth = 128; + timeDisplay.sourceHeight = 48; + timeDisplay.width = 128; + timeDisplay.height = 48; + timeDisplay.x = canvas.width / 2 - timeDisplay.width / 2; + timeDisplay.y = 8; + sprites.push(timeDisplay); + + gameOverDisplay = Object.create(spriteObject); + gameOverDisplay.sourceX = 0; + gameOverDisplay.sourceY = 129; + gameOverDisplay.sourceWidth = 316; + gameOverDisplay.sourceHeight = 290; + gameOverDisplay.width = 316; + gameOverDisplay.height = 290; + gameOverDisplay.x = canvas.width / 2 - gameOverDisplay.width / 2; + gameOverDisplay.y = canvas.height / 2 - gameOverDisplay.height / 2; + gameOverDisplay.visible = false; + sprites.push(gameOverDisplay); + + gameOverMessage = Object.create(messageObject); + gameOverMessage.x = 275; + gameOverMessage.y = 270; + gameOverMessage.font = "bold 30px Helvetica"; + gameOverMessage.fillStyle = "black"; + gameOverMessage.text = ""; + gameOverMessage.visible = false; + messages.push(gameOverMessage); + + timerMessage = Object.create(messageObject); + timerMessage.x = 330; + timerMessage.y = 10; + timerMessage.font = "bold 40px Helvetica"; + timerMessage.fillStyle = "white"; + timerMessage.text = ""; + messages.push(timerMessage); +} + +function playGame() +{ + //Up + if(moveUp && !moveDown) + { + alien.vy = -4; + } + //Down + if(moveDown && !moveUp) + { + alien.vy = 4; + } + //Left + if(moveLeft && !moveRight) + { + alien.vx = -4; + } + //Right + if(moveRight && !moveLeft) + { + alien.vx = 4; + } + + //Set the alien's velocity to zero if none of the keys are being pressed + if(!moveUp && !moveDown) + { + alien.vy = 0; + } + if(!moveLeft && !moveRight) + { + alien.vx = 0; + } + + alien.x += alien.vx; + alien.y += alien.vy; + + //Alien's screen boundaries with 64 pixel padding + //to compensate for the screen border + if(alien.x < 64) + { + alien.x = 64; + } + if(alien.y < 64) + { + alien.y = 64; + } + if(alien.x + alien.width > canvas.width - 64) + { + alien.x = canvas.width - alien.width - 64; + } + if(alien.y + alien.height > canvas.height - 64) + { + alien.y = canvas.height - alien.height - 64; + } + + //Alternatively, move the alien and set its screen boundaries at the same time with this code: + //alien.x = Math.max(64, Math.min(alien.x + alien.vx, canvas.width - alien.width - 64)); + //alien.y = Math.max(64, Math.min(alien.y + alien.vy, canvas.height - alien.height - 64)); + + //Collisions with boxes + for(var i = 0; i < boxes.length; i++) + { + blockRectangle(alien, boxes[i]); + } + + //Collisions with bombs + for(var i = 0; i < bombs.length; i++) + { + var bomb = bombs[i]; + + //If there's a collision, make the bombs invisible, + //reduce bombsDefused by 1, and check whether + //the player has won the game + if(hitTestCircle(alien, bomb) && bomb.visible) + { + bomb.visible = false; + bombsDefused++; + if(bombsDefused === bombs.length) + { + //Change the game state to OVER if + //the player has defused all the bombs + gameState = OVER; + } + } + } + + //Display the gameTimer + timerMessage.text = gameTimer.time; + + //This modification adds an extra "0" to the time + //if the time is less than 10 + if(gameTimer.time < 10) + { + timerMessage.text = "0" + gameTimer.time; + } + + //Check whether the time is over + if(gameTimer.time === 0) + { + gameState = OVER; + } +} + +function endGame() +{ + gameTimer.stop(); + gameOverDisplay.visible = true; + gameOverMessage.visible = true; + + if(bombsDefused === bombs.length) + { + gameOverMessage.text = "You Won!"; + } + else + { + gameOverMessage.text = "You Lost!"; + } +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + if(sprite.visible) + { + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } + } + + //Display the game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); diff --git a/Code - Published/chapter10/timeBombScroll/.DS_Store b/Code - Published/chapter10/timeBombScroll/.DS_Store new file mode 100644 index 0000000..001db3d Binary files /dev/null and b/Code - Published/chapter10/timeBombScroll/.DS_Store differ diff --git a/Code - Published/chapter10/timeBombScroll/images/.DS_Store b/Code - Published/chapter10/timeBombScroll/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter10/timeBombScroll/images/.DS_Store differ diff --git a/Code - Published/chapter10/timeBombScroll/images/timeBombPanic.png b/Code - Published/chapter10/timeBombScroll/images/timeBombPanic.png new file mode 100644 index 0000000..a99a661 Binary files /dev/null and b/Code - Published/chapter10/timeBombScroll/images/timeBombPanic.png differ diff --git a/Code - Published/chapter10/timeBombScroll/src/.DS_Store b/Code - Published/chapter10/timeBombScroll/src/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter10/timeBombScroll/src/.DS_Store differ diff --git a/Code - Published/chapter10/timeBombScroll/src/collision.js b/Code - Published/chapter10/timeBombScroll/src/collision.js new file mode 100644 index 0000000..9e6dfdb --- /dev/null +++ b/Code - Published/chapter10/timeBombScroll/src/collision.js @@ -0,0 +1,255 @@ +/* +This JavaScript file contains five collision functions + +- hitTestPoint +- hitTestCircle +- blockCircle +- hitTestRectangle +- blockRectangle + +To use them you'll need a sprite object with these minimum properties: + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, + left: function() + { + return this.x; + }, + right: function() + { + return this.x + this.width; + }, + top: function() + { + return this.y; + }, + bottom: function() + { + return this.y + this.height; + } +}; + + +*/ + + +//hitTestPoint + +function hitTestPoint(pointX, pointY, sprite) +{ + var hit + = pointX > sprite.left() && pointX < sprite.right() + && pointY > sprite.top() && pointY < sprite.bottom(); + + return hit; +} + +//hitTestCircle + +function hitTestCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' total radii + var totalRadii = c1.halfWidth() + c2.halfWidth(); + + //Set hit to true if the distance between the circles is + //less than their totalRadii + var hit = magnitude < totalRadii; + + return hit; +} + +//blockCircle + +function blockCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + } +} + +//hitTestRectangle + +function hitTestRectangle(r1, r2) +{ + //A variable to determine whether there's a collision + var hit = false; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check for a collision on the x axis + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occuring. Check for a collision on the y axis + if(Math.abs(vy) < combinedHalfHeights) + { + //There's definitely a collision happening + hit = true; + } + else + { + //There's no collision on the y axis + hit = false; + } + } + else + { + //There's no collision on the x axis + hit = false; + } + + return hit; +} + +//blockRectangle + +function blockRectangle(r1, r2) +{ + //A variable to tell us which side the + //collision is occurring on + var collisionSide = ""; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check whether vx is less than the combined half widths + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occurring! + //Check whether vy is less than the combined half heights + if(Math.abs(vy) < combinedHalfHeights) + { + //A collision has occurred! This is good! + //Find out the size of the overlap on both the X and Y axes + var overlapX = combinedHalfWidths - Math.abs(vx); + var overlapY = combinedHalfHeights - Math.abs(vy); + + //The collision has occurred on the axis with the + //*smallest* amount of overlap. Let's figure out which + //axis that is + + if(overlapX >= overlapY) + { + //The collision is happening on the X axis + //But on which side? vy can tell us + if(vy > 0) + { + collisionSide = "top"; + + //Move the rectangle out of the collision + r1.y = r1.y + overlapY; + } + else + { + collisionSide = "bottom"; + + //Move the rectangle out of the collision + r1.y = r1.y - overlapY; + } + } + else + { + //The collision is happening on the Y axis + //But on which side? vx can tell us + if(vx > 0) + { + collisionSide = "left"; + + //Move the rectangle out of the collision + r1.x = r1.x + overlapX; + } + else + { + collisionSide = "right"; + + //Move the rectangle out of the collision + r1.x = r1.x - overlapX; + } + } + } + else + { + //No collision + collisionSide = "none"; + } + } + else + { + //No collision + collisionSide = "none"; + } + + return collisionSide; +} \ No newline at end of file diff --git a/Code - Published/chapter10/timeBombScroll/src/objects.js b/Code - Published/chapter10/timeBombScroll/src/objects.js new file mode 100644 index 0000000..eab3479 --- /dev/null +++ b/Code - Published/chapter10/timeBombScroll/src/objects.js @@ -0,0 +1,75 @@ +//--- The sprite object + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + visible: true, + scrollable: true, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, +}; + +//--- The message object + +var messageObject = +{ + x: 0, + y: 0, + visible: true, + text: "Message", + font: "normal bold 20px Helvetica", + fillStyle: "red", + textBaseline: "top" +}; + +//--- The gameTimer object + +var gameTimer = +{ + time: 0, + interval: undefined, + + start: function() + { + var self = this; + this.interval = setInterval(function(){self.tick();}, 1000); + }, + tick: function() + { + this.time--; + }, + stop: function() + { + clearInterval(this.interval); + }, + reset: function() + { + this.time = 0; + } +}; + diff --git a/Code - Published/chapter10/timeBombScroll/src/requestAnimationFramePolyfill.js b/Code - Published/chapter10/timeBombScroll/src/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter10/timeBombScroll/src/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter10/timeBombScroll/src/timeBombScroll.html b/Code - Published/chapter10/timeBombScroll/src/timeBombScroll.html new file mode 100644 index 0000000..336d4fa --- /dev/null +++ b/Code - Published/chapter10/timeBombScroll/src/timeBombScroll.html @@ -0,0 +1,12 @@ + +Time Bomb Scroll + + + + + + + + + + \ No newline at end of file diff --git a/Code - Published/chapter10/timeBombScroll/src/timeBombScroll.js b/Code - Published/chapter10/timeBombScroll/src/timeBombScroll.js new file mode 100644 index 0000000..67459fa --- /dev/null +++ b/Code - Published/chapter10/timeBombScroll/src/timeBombScroll.js @@ -0,0 +1,563 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); +var drawingSurface = canvas.getContext("2d"); + +//The game map +var map = +[ + [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3], + [3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,1,1,1,3], + [3,1,2,1,1,2,1,1,1,1,1,1,1,1,1,1,1,2,1,1,1,3], + [3,1,1,1,1,2,1,1,1,2,2,2,1,1,1,1,1,2,1,1,1,3], + [3,1,1,1,1,2,1,1,1,1,1,1,1,1,2,1,1,1,1,1,2,3], + [3,1,1,2,2,2,1,1,1,1,1,1,2,2,2,1,1,1,1,1,1,3], + [3,1,1,1,1,1,1,1,2,2,1,1,2,1,1,1,2,2,2,1,1,3], + [3,1,1,1,1,1,1,1,2,1,1,1,1,1,1,2,1,1,1,1,1,3], + [3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,1,1,1,1,1,3], + [3,1,1,1,1,1,1,1,1,1,1,1,2,1,1,2,2,2,1,1,1,3], + [3,1,1,2,2,2,2,1,1,1,1,1,2,1,1,1,1,1,1,1,1,3], + [3,1,1,1,1,1,2,1,1,2,1,1,2,2,2,2,2,1,1,1,1,3], + [3,1,1,1,1,1,1,1,1,2,1,1,1,1,1,1,2,2,2,2,1,3], + [3,1,1,2,1,1,1,1,1,2,2,1,1,2,2,1,2,1,1,1,1,3], + [3,1,1,2,1,1,2,1,1,1,1,1,1,1,2,1,1,1,1,1,1,3], + [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3] +]; + +//The game objects map +var gameObjects = +[ + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,0], + [0,0,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,4,0,0,0,0,0,0,5,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] +]; + +//Map code +var EMPTY = 0; +var FLOOR = 1; +var BOX = 2; +var WALL = 3; +var ALIEN = 4; +var BOMB = 5; + +//The size of each tile cell +var SIZE = 64; + +//Sprites we need to access by name +var alien = null; +var timeDisplay = null; +var gameOverDisplay = null; +var gameOverMessage = null; +var timerMessage = null; + +//The number of rows and columns +var ROWS = map.length; +var COLUMNS = map[0].length; + +//The number of columns on the tilesheet +var tilesheetColumns = 5; + +//Arrays to store the game objects +var sprites = []; +var messages = []; +var boxes = []; +var bombs = []; + +var assetsToLoad = []; +var assetsLoaded = 0; + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/timeBombPanic.png"; +assetsToLoad.push(image); + +//Game variables +var bombsDefused = 0; + +//The game timer +gameTimer.time = 30; +gameTimer.start(); + +//Game states +var LOADING = 0; +var BUILD_MAP = 1; +var PLAYING = 2; +var OVER = 3; +var gameState = LOADING; + +//--- The gameWorld object +var gameWorld = +{ + x: 0, + y: 0, + width: map[0].length * SIZE, + height: map.length * SIZE, +}; + +//--- The camera object +var camera = +{ + x: 0, + y: 0, + width: canvas.width, + height: canvas.height, + + //The camera's inner scroll boundaries + rightInnerBoundary: function() + { + return this.x + (this.width / 2) + (this.width / 4); + }, + leftInnerBoundary: function() + { + return this.x + (this.width / 2) - (this.width / 4); + }, + topInnerBoundary: function() + { + return this.y + (this.height / 2) - (this.height / 4); + }, + bottomInnerBoundary: function() + { + return this.y + (this.height / 2) + (this.height / 4); + } +}; + +//Center the camera over the gameWorld +camera.x = (gameWorld.x + gameWorld.width / 2) - camera.width / 2; +camera.y = (gameWorld.y + gameWorld.height / 2) - camera.height / 2; + +//Arrow key codes +var UP = 38; +var DOWN = 40; +var RIGHT = 39; +var LEFT = 37; + +//Directions +var moveUp = false; +var moveDown = false; +var moveRight = false; +var moveLeft = false; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case UP: + moveUp = true; + break; + + case DOWN: + moveDown = true; + break; + + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + } +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case UP: + moveUp = false; + break; + + case DOWN: + moveDown = false; + break; + + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading..."); + break; + + case BUILD_MAP: + buildMap(map); + buildMap(gameObjects); + createOtherObjects(); + gameState = PLAYING; + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load handlers + image.removeEventListener("load", loadHandler, false); + + //Build the map + gameState = BUILD_MAP; + } +} + +function buildMap(levelMap) +{ + for(var row = 0; row < ROWS; row++) + { + for(var column = 0; column < COLUMNS; column++) + { + var currentTile = levelMap[row][column]; + + if(currentTile !== EMPTY) + { + //Find the tile's x and y position on the tile sheet + var tileSheetX = Math.floor((currentTile - 1) % tilesheetColumns) * SIZE; + var tileSheetY = Math.floor((currentTile - 1) / tilesheetColumns) * SIZE; + + switch (currentTile) + { + case FLOOR: + var floor = Object.create(spriteObject); + floor.sourceX = tileSheetX; + floor.sourceY = tileSheetY; + floor.x = column * SIZE; + floor.y = row * SIZE; + sprites.push(floor); + break; + + case BOX: + var box = Object.create(spriteObject); + box.sourceX = tileSheetX; + box.sourceY = tileSheetY; + box.x = column * SIZE; + box.y = row * SIZE; + sprites.push(box); + boxes.push(box); + break; + + case WALL: + var wall = Object.create(spriteObject); + wall.sourceX = tileSheetX; + wall.sourceY = tileSheetY; + wall.x = column * SIZE; + wall.y = row * SIZE; + sprites.push(wall); + break; + + case BOMB: + var bomb = Object.create(spriteObject); + bomb.sourceX = tileSheetX; + bomb.sourceY = tileSheetY; + bomb.sourceWidth = 48; + bomb.sourceHeight = 36; + bomb.width = 48; + bomb.height = 36; + bomb.x = column * SIZE + 10; + bomb.y = row * SIZE + 16; + bombs.push(bomb); + sprites.push(bomb); + break; + + case ALIEN: + //Note: "alien" has already been defined in the main + //program so you don't neeed to preceed it with "var" + alien = Object.create(spriteObject); + alien.sourceX = tileSheetX; + alien.sourceY = tileSheetY; + alien.x = column * SIZE; + alien.y = row * SIZE; + sprites.push(alien); + break; + } + } + } + } +} + + +function createOtherObjects() +{ + timeDisplay = Object.create(spriteObject); + timeDisplay.sourceX = 0; + timeDisplay.sourceY = 64; + timeDisplay.sourceWidth = 128; + timeDisplay.sourceHeight = 48; + timeDisplay.width = 128; + timeDisplay.height = 48; + timeDisplay.x = canvas.width / 2 - timeDisplay.width / 2; + timeDisplay.y = 8; + timeDisplay.scrollable = false; + sprites.push(timeDisplay); + + gameOverDisplay = Object.create(spriteObject); + gameOverDisplay.sourceX = 0; + gameOverDisplay.sourceY = 129; + gameOverDisplay.sourceWidth = 316; + gameOverDisplay.sourceHeight = 290; + gameOverDisplay.width = 316; + gameOverDisplay.height = 290; + gameOverDisplay.x = canvas.width / 2 - gameOverDisplay.width / 2; + gameOverDisplay.y = canvas.height / 2 - gameOverDisplay.height / 2; + gameOverDisplay.visible = false; + gameOverDisplay.scrollable = false; + sprites.push(gameOverDisplay); + + gameOverMessage = Object.create(messageObject); + gameOverMessage.x = 275; + gameOverMessage.y = 270; + gameOverMessage.font = "bold 30px Helvetica"; + gameOverMessage.fillStyle = "black"; + gameOverMessage.text = ""; + gameOverMessage.visible = false; + messages.push(gameOverMessage); + + timerMessage = Object.create(messageObject); + timerMessage.x = 330; + timerMessage.y = 10; + timerMessage.font = "bold 40px Helvetica"; + timerMessage.fillStyle = "white"; + timerMessage.text = ""; + messages.push(timerMessage); +} + +function playGame() +{ + //Up + if(moveUp && !moveDown) + { + alien.vy = -4; + } + //Down + if(moveDown && !moveUp) + { + alien.vy = 4; + } + //Left + if(moveLeft && !moveRight) + { + alien.vx = -4; + } + //Right + if(moveRight && !moveLeft) + { + alien.vx = 4; + } + + //Set the alien's velocity to zero if none of the keys are being pressed + if(!moveUp && !moveDown) + { + alien.vy = 0; + } + if(!moveLeft && !moveRight) + { + alien.vx = 0; + } + + //Move the alien and set its screen boundaries + alien.x = Math.max(64, Math.min(alien.x + alien.vx, gameWorld.width - alien.width - 64)); + alien.y = Math.max(64, Math.min(alien.y + alien.vy, gameWorld.height - alien.height - 64)); + + //Collisions with boxes + for(var i = 0; i < boxes.length; i++) + { + blockRectangle(alien, boxes[i]); + } + + //Collisions with bombs + for(var i = 0; i < bombs.length; i++) + { + var bomb = bombs[i]; + + //If there's a collision, make the bombs invisible, + //reduce bombsDefused by 1, and check whether + //the player has won the game + if(hitTestCircle(alien, bomb) && bomb.visible) + { + bomb.visible = false; + bombsDefused++; + if(bombsDefused === bombs.length) + { + //Change the game state to OVER if the player has defused all the bombs + gameState = OVER; + } + } + } + + //Display the gameTimer. + //This modification adds an extra "0" to the time + //if the time is less than 10 + timerMessage.text = gameTimer.time; + if(gameTimer.time < 10) + { + timerMessage.text = "0" + gameTimer.time; + } + + //Check whether the time is over + if(gameTimer.time === 0) + { + gameState = OVER; + } + + //Scroll the camera + if(alien.x < camera.leftInnerBoundary()) + { + camera.x = Math.floor(alien.x - (camera.width / 4)); + } + if(alien.y < camera.topInnerBoundary()) + { + camera.y = Math.floor(alien.y - (camera.height / 4)); + } + if(alien.x + alien.width > camera.rightInnerBoundary()) + { + camera.x = Math.floor(alien.x + alien.width - (camera.width / 4 * 3)); + } + if(alien.y + alien.height > camera.bottomInnerBoundary()) + { + camera.y = Math.floor(alien.y + alien.height - (camera.height / 4 * 3)); + } + + //The camera's gameWorld boundaries + if(camera.x < gameWorld.x) + { + camera.x = gameWorld.x; + } + if(camera.y < gameWorld.y) + { + camera.y = gameWorld.y; + } + if(camera.x + camera.width > gameWorld.x + gameWorld.width) + { + camera.x = gameWorld.x + gameWorld.width - camera.width; + } + if(camera.y + camera.height > gameWorld.height) + { + camera.y = gameWorld.height - camera.height; + } +} + +function endGame() +{ + gameTimer.stop(); + gameOverDisplay.visible = true; + gameOverMessage.visible = true; + + if(bombsDefused === bombs.length) + { + gameOverMessage.text = "You Won!"; + } + else + { + gameOverMessage.text = "You Lost!"; + } +} + +function render() +{ + + //Clear the drawing surface + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Position the gameWorld inside the camera + drawingSurface.save(); + drawingSurface.translate(-camera.x, -camera.y); + + //Display the sprites in the gameWorld + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + + //display the scrolling sprites + if(sprite.visible && sprite.scrollable) + { + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + + //display the non-scrolling sprites + if(sprite.visible && !sprite.scrollable) + { + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(camera.x + sprite.x), Math.floor(camera.y + sprite.y), + sprite.width, sprite.height + ); + } + } + } + + drawingSurface.restore(); + + //Display the game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); diff --git a/Code - Published/chapter11/.DS_Store b/Code - Published/chapter11/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter11/.DS_Store differ diff --git a/Code - Published/chapter11/1_acceleration.html b/Code - Published/chapter11/1_acceleration.html new file mode 100644 index 0000000..a1eb942 --- /dev/null +++ b/Code - Published/chapter11/1_acceleration.html @@ -0,0 +1,285 @@ + + +Acceleration + + + + + \ No newline at end of file diff --git a/Code - Published/chapter11/2_friction.html b/Code - Published/chapter11/2_friction.html new file mode 100644 index 0000000..842b2ae --- /dev/null +++ b/Code - Published/chapter11/2_friction.html @@ -0,0 +1,276 @@ + + +Friction + + + + + \ No newline at end of file diff --git a/Code - Published/chapter11/3_bounce.html b/Code - Published/chapter11/3_bounce.html new file mode 100644 index 0000000..f266925 --- /dev/null +++ b/Code - Published/chapter11/3_bounce.html @@ -0,0 +1,284 @@ + + +Bounce + + + + + \ No newline at end of file diff --git a/Code - Published/chapter11/4_rectangleBounce.html b/Code - Published/chapter11/4_rectangleBounce.html new file mode 100644 index 0000000..c5ce8c2 --- /dev/null +++ b/Code - Published/chapter11/4_rectangleBounce.html @@ -0,0 +1,459 @@ + + +Rectangle bounce + + + + + \ No newline at end of file diff --git a/Code - Published/chapter11/5_circleBounce.html b/Code - Published/chapter11/5_circleBounce.html new file mode 100644 index 0000000..3c16b30 --- /dev/null +++ b/Code - Published/chapter11/5_circleBounce.html @@ -0,0 +1,391 @@ + + +Circle bounce + + + + + \ No newline at end of file diff --git a/Code - Published/chapter11/6_gravity.html b/Code - Published/chapter11/6_gravity.html new file mode 100644 index 0000000..1f66180 --- /dev/null +++ b/Code - Published/chapter11/6_gravity.html @@ -0,0 +1,304 @@ + + +Gravity + + + + + \ No newline at end of file diff --git a/Code - Published/chapter11/7_jumping.html b/Code - Published/chapter11/7_jumping.html new file mode 100644 index 0000000..53f550f --- /dev/null +++ b/Code - Published/chapter11/7_jumping.html @@ -0,0 +1,280 @@ + + +Jumping + + + + + \ No newline at end of file diff --git a/Code - Published/chapter11/8_platforms.html b/Code - Published/chapter11/8_platforms.html new file mode 100644 index 0000000..1af3b7a --- /dev/null +++ b/Code - Published/chapter11/8_platforms.html @@ -0,0 +1,421 @@ + + +Platforms + + + + + \ No newline at end of file diff --git a/Code - Published/chapter11/cat.png b/Code - Published/chapter11/cat.png new file mode 100644 index 0000000..cd25b26 Binary files /dev/null and b/Code - Published/chapter11/cat.png differ diff --git a/Code - Published/chapter11/catAndBox.png b/Code - Published/chapter11/catAndBox.png new file mode 100644 index 0000000..9bc717c Binary files /dev/null and b/Code - Published/chapter11/catAndBox.png differ diff --git a/Code - Published/chapter11/circles.png b/Code - Published/chapter11/circles.png new file mode 100644 index 0000000..2c88585 Binary files /dev/null and b/Code - Published/chapter11/circles.png differ diff --git a/Code - Published/chapter11/collision.js b/Code - Published/chapter11/collision.js new file mode 100644 index 0000000..0a73da0 --- /dev/null +++ b/Code - Published/chapter11/collision.js @@ -0,0 +1,413 @@ +/* +This JavaScript file contains five collision functions + +- hitTestPoint +- hitTestCircle +- blockCircle +- hitTestRectangle +- blockRectangle + +To use them you'll need a sprite object with these minimum properties: + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, + left: function() + { + return this.x; + }, + right: function() + { + return this.x + this.width; + }, + top: function() + { + return this.y; + }, + bottom: function() + { + return this.y + this.height; + } +}; + + +*/ + + +//hitTestPoint + +function hitTestPoint(pointX, pointY, sprite) +{ + var hit + = pointX > sprite.left() && pointX < sprite.right() + && pointY > sprite.top() && pointY < sprite.bottom(); + + return hit; +} + +//hitTestCircle + +function hitTestCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' total radii + var totalRadii = c1.halfWidth() + c2.halfWidth(); + + //Set hit to true if the distance between the circles is + //less than their totalRadii + var hit = magnitude < totalRadii; + + return hit; +} + +//blockCircle + +function blockCircle(c1, c2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + + //Bounce + if(bounce) + { + //Create a collision vector object to represent the bounce surface + var s = {}; + + //Find the bounce surface's vx and vy properties + //(This represents the normal of the distance vector between the circles) + s.vx = vy; + s.vy = -vx; + + //Bounce c1 off the surface + bounceOffSurface(c1, s); + } + } +} + +//hitTestRectangle + +function hitTestRectangle(r1, r2) +{ + //A variable to determine whether there's a collision + var hit = false; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check for a collision on the x axis + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occuring. Check for a collision on the y axis + if(Math.abs(vy) < combinedHalfHeights) + { + //There's definitely a collision happening + hit = true; + } + else + { + //There's no collision on the y axis + hit = false; + } + } + else + { + //There's no collision on the x axis + hit = false; + } + + return hit; +} + +//blockRectangle + +function blockRectangle(r1, r2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //A variable to tell us which side the + //collision is occurring on + var collisionSide = ""; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check whether vx is less than the combined half widths + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occurring! + //Check whether vy is less than the combined half heights + if(Math.abs(vy) < combinedHalfHeights) + { + //A collision has occurred! This is good! + //Find out the size of the overlap on both the X and Y axes + var overlapX = combinedHalfWidths - Math.abs(vx); + var overlapY = combinedHalfHeights - Math.abs(vy); + + //The collision has occurred on the axis with the + //*smallest* amount of overlap. Let's figure out which + //axis that is + + if(overlapX >= overlapY) + { + //The collision is happening on the X axis + //But on which side? vy can tell us + if(vy > 0) + { + collisionSide = "top"; + + //Move the rectangle out of the collision + r1.y = r1.y + overlapY; + } + else + { + collisionSide = "bottom"; + + //Move the rectangle out of the collision + r1.y = r1.y - overlapY; + } + + //Bounce + if(bounce) + { + r1.vy *= -1; + + /*Alternative + //Find the bounce surface's vx and vy properties + var s = {}; + s.vx = r2.x - r2.x + r2.width; + s.vy = 0; + + //Bounce r1 off the surface + //bounceOffSurface(r1, s); + */ + } + } + else + { + //The collision is happening on the Y axis + //But on which side? vx can tell us + if(vx > 0) + { + collisionSide = "left"; + + //Move the rectangle out of the collision + r1.x = r1.x + overlapX; + } + else + { + collisionSide = "right"; + + //Move the rectangle out of the collision + r1.x = r1.x - overlapX; + } + + //Bounce + if(bounce) + { + r1.vx *= -1; + + /*Alternative + //Find the bounce surface's vx and vy properties + var s = {}; + s.vx = 0; + s.vy = r2.y - r2.y + r2.height; + + //Bounce r1 off the surface + bounceOffSurface(r1, s); + */ + } + } + } + else + { + //No collision + collisionSide = "none"; + } + } + else + { + //No collision + collisionSide = "none"; + } + + return collisionSide; +} + +function blockCircle(c1, c2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + + //Bounce + if(bounce) + { + //Create a collision vector object to represent the bounce surface + var s = {}; + + //Find the bounce surface's vx and vy properties + //(This represents the normal of the distance vector between the circles) + s.vx = vy; + s.vy = -vx; + + //Bounce c1 off the surface + bounceOffSurface(c1, s); + } + } +} + +//Use this to bounce an object off another object +function bounceOffSurface(o, s) +{ + //1. Calculate the collision surface's properties + + //Find the surface vector's left normal + s.lx = s.vy; + s.ly = -s.vx; + + //Find its magnitude + s.magnitude = Math.sqrt(s.vx * s.vx + s.vy * s.vy); + + //Find its normalized values + s.dx = s.vx / s.magnitude; + s.dy = s.vy / s.magnitude; + + //2. Bounce the object (o) off the surface (s) + + //Find the dot product between the object and the surface + var dp1 = o.vx * s.dx + o.vy * s.dy; + + //Project the object's velocity onto the collision surface + var p1Vx = dp1 * s.dx; + var p1Vy = dp1 * s.dy; + + //Find the dot product of the object and the surface's left normal (s.lx and s.ly) + var dp2 = o.vx * (s.lx / s.magnitude) + o.vy * (s.ly / s.magnitude); + + //Project the object's velocity onto the surface's left normal + var p2Vx = dp2 * (s.lx / s.magnitude); + var p2Vy = dp2 * (s.ly / s.magnitude); + + //Reverse the projection on the surface's left normal + p2Vx *= -1; + p2Vy *= -1; + + //Add up the projections to create a new bounce vector + var bounceVx = p1Vx + p2Vx; + var bounceVy = p1Vy + p2Vy; + + //Assign the bounce vector to the object's velocity + o.vx = bounceVx; + o.vy = bounceVy; +} \ No newline at end of file diff --git a/Code - Published/chapter11/hedgehogApocalypse/images/hedgehogApocalypse.png b/Code - Published/chapter11/hedgehogApocalypse/images/hedgehogApocalypse.png new file mode 100644 index 0000000..c2eeb8c Binary files /dev/null and b/Code - Published/chapter11/hedgehogApocalypse/images/hedgehogApocalypse.png differ diff --git a/Code - Published/chapter11/hedgehogApocalypse/src/collision.js b/Code - Published/chapter11/hedgehogApocalypse/src/collision.js new file mode 100644 index 0000000..0a73da0 --- /dev/null +++ b/Code - Published/chapter11/hedgehogApocalypse/src/collision.js @@ -0,0 +1,413 @@ +/* +This JavaScript file contains five collision functions + +- hitTestPoint +- hitTestCircle +- blockCircle +- hitTestRectangle +- blockRectangle + +To use them you'll need a sprite object with these minimum properties: + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, + left: function() + { + return this.x; + }, + right: function() + { + return this.x + this.width; + }, + top: function() + { + return this.y; + }, + bottom: function() + { + return this.y + this.height; + } +}; + + +*/ + + +//hitTestPoint + +function hitTestPoint(pointX, pointY, sprite) +{ + var hit + = pointX > sprite.left() && pointX < sprite.right() + && pointY > sprite.top() && pointY < sprite.bottom(); + + return hit; +} + +//hitTestCircle + +function hitTestCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' total radii + var totalRadii = c1.halfWidth() + c2.halfWidth(); + + //Set hit to true if the distance between the circles is + //less than their totalRadii + var hit = magnitude < totalRadii; + + return hit; +} + +//blockCircle + +function blockCircle(c1, c2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + + //Bounce + if(bounce) + { + //Create a collision vector object to represent the bounce surface + var s = {}; + + //Find the bounce surface's vx and vy properties + //(This represents the normal of the distance vector between the circles) + s.vx = vy; + s.vy = -vx; + + //Bounce c1 off the surface + bounceOffSurface(c1, s); + } + } +} + +//hitTestRectangle + +function hitTestRectangle(r1, r2) +{ + //A variable to determine whether there's a collision + var hit = false; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check for a collision on the x axis + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occuring. Check for a collision on the y axis + if(Math.abs(vy) < combinedHalfHeights) + { + //There's definitely a collision happening + hit = true; + } + else + { + //There's no collision on the y axis + hit = false; + } + } + else + { + //There's no collision on the x axis + hit = false; + } + + return hit; +} + +//blockRectangle + +function blockRectangle(r1, r2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //A variable to tell us which side the + //collision is occurring on + var collisionSide = ""; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check whether vx is less than the combined half widths + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occurring! + //Check whether vy is less than the combined half heights + if(Math.abs(vy) < combinedHalfHeights) + { + //A collision has occurred! This is good! + //Find out the size of the overlap on both the X and Y axes + var overlapX = combinedHalfWidths - Math.abs(vx); + var overlapY = combinedHalfHeights - Math.abs(vy); + + //The collision has occurred on the axis with the + //*smallest* amount of overlap. Let's figure out which + //axis that is + + if(overlapX >= overlapY) + { + //The collision is happening on the X axis + //But on which side? vy can tell us + if(vy > 0) + { + collisionSide = "top"; + + //Move the rectangle out of the collision + r1.y = r1.y + overlapY; + } + else + { + collisionSide = "bottom"; + + //Move the rectangle out of the collision + r1.y = r1.y - overlapY; + } + + //Bounce + if(bounce) + { + r1.vy *= -1; + + /*Alternative + //Find the bounce surface's vx and vy properties + var s = {}; + s.vx = r2.x - r2.x + r2.width; + s.vy = 0; + + //Bounce r1 off the surface + //bounceOffSurface(r1, s); + */ + } + } + else + { + //The collision is happening on the Y axis + //But on which side? vx can tell us + if(vx > 0) + { + collisionSide = "left"; + + //Move the rectangle out of the collision + r1.x = r1.x + overlapX; + } + else + { + collisionSide = "right"; + + //Move the rectangle out of the collision + r1.x = r1.x - overlapX; + } + + //Bounce + if(bounce) + { + r1.vx *= -1; + + /*Alternative + //Find the bounce surface's vx and vy properties + var s = {}; + s.vx = 0; + s.vy = r2.y - r2.y + r2.height; + + //Bounce r1 off the surface + bounceOffSurface(r1, s); + */ + } + } + } + else + { + //No collision + collisionSide = "none"; + } + } + else + { + //No collision + collisionSide = "none"; + } + + return collisionSide; +} + +function blockCircle(c1, c2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + + //Bounce + if(bounce) + { + //Create a collision vector object to represent the bounce surface + var s = {}; + + //Find the bounce surface's vx and vy properties + //(This represents the normal of the distance vector between the circles) + s.vx = vy; + s.vy = -vx; + + //Bounce c1 off the surface + bounceOffSurface(c1, s); + } + } +} + +//Use this to bounce an object off another object +function bounceOffSurface(o, s) +{ + //1. Calculate the collision surface's properties + + //Find the surface vector's left normal + s.lx = s.vy; + s.ly = -s.vx; + + //Find its magnitude + s.magnitude = Math.sqrt(s.vx * s.vx + s.vy * s.vy); + + //Find its normalized values + s.dx = s.vx / s.magnitude; + s.dy = s.vy / s.magnitude; + + //2. Bounce the object (o) off the surface (s) + + //Find the dot product between the object and the surface + var dp1 = o.vx * s.dx + o.vy * s.dy; + + //Project the object's velocity onto the collision surface + var p1Vx = dp1 * s.dx; + var p1Vy = dp1 * s.dy; + + //Find the dot product of the object and the surface's left normal (s.lx and s.ly) + var dp2 = o.vx * (s.lx / s.magnitude) + o.vy * (s.ly / s.magnitude); + + //Project the object's velocity onto the surface's left normal + var p2Vx = dp2 * (s.lx / s.magnitude); + var p2Vy = dp2 * (s.ly / s.magnitude); + + //Reverse the projection on the surface's left normal + p2Vx *= -1; + p2Vy *= -1; + + //Add up the projections to create a new bounce vector + var bounceVx = p1Vx + p2Vx; + var bounceVy = p1Vy + p2Vy; + + //Assign the bounce vector to the object's velocity + o.vx = bounceVx; + o.vy = bounceVy; +} \ No newline at end of file diff --git a/Code - Published/chapter11/hedgehogApocalypse/src/hedgehogAplocalypse.html b/Code - Published/chapter11/hedgehogApocalypse/src/hedgehogAplocalypse.html new file mode 100644 index 0000000..6870896 --- /dev/null +++ b/Code - Published/chapter11/hedgehogApocalypse/src/hedgehogAplocalypse.html @@ -0,0 +1,12 @@ + + +Hedgehog Apocalypse + + + + + + + + + \ No newline at end of file diff --git a/Code - Published/chapter11/hedgehogApocalypse/src/hedgehogApocalypse.js b/Code - Published/chapter11/hedgehogApocalypse/src/hedgehogApocalypse.js new file mode 100644 index 0000000..318b8d1 --- /dev/null +++ b/Code - Published/chapter11/hedgehogApocalypse/src/hedgehogApocalypse.js @@ -0,0 +1,561 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); +var drawingSurface = canvas.getContext("2d"); + +//The game map +var map = +[ + [7,7,8,9,7,7,7,8,9,7,7,7,8,9,7,7], + [8,9,7,7,4,9,7,7,7,8,9,7,7,7,8,5], + [4,7,7,7,7,7,8,9,7,7,7,8,9,7,4,4], + [7,7,4,7,7,4,4,4,4,7,7,7,7,7,7,7], + [8,9,4,7,7,7,7,8,9,7,7,4,8,9,7,7], + [7,4,4,4,7,8,9,7,7,7,4,4,7,7,4,8], + [9,7,8,9,7,7,7,8,9,4,7,4,9,7,7,7], + [7,7,7,7,7,4,4,7,7,7,7,4,4,4,4,7], + [8,9,7,7,7,7,7,7,7,8,9,7,7,8,9,7], + [7,7,4,4,4,4,7,7,4,7,7,7,7,7,7,7], + [7,7,7,7,7,7,7,7,7,4,7,7,7,7,7,7], + [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6] +] + +//The game objects map + +var gameObjects = +[ + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0] +]; + +//Map code +var EMPTY = 0; +var CAT = 1; +var HEDGEHOG = 2; +var BOX = 4; +var DOOR = 5; + +//The size of each tile cell +var SIZE = 64; + +//Sprites we need to access by name +var cat = null; +var door = null; +var gameOverDisplay = null; +var gameOverMessage = null; + +//The number of rows and columns +var ROWS = map.length; +var COLUMNS = map[0].length; + +//The number of columns on the tilesheet +var tilesheetColumns = 3; + +//Arrays to store the game objects +var sprites = []; +var hedgehogs = []; +var boxes = []; +var messages = []; + +var assetsToLoad = []; +var assetsLoaded = 0; + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/hedgehogApocalypse.png"; +assetsToLoad.push(image); + +//Game variables +var hedgehogsSquashed = 0; + +//Game states +var LOADING = 0; +var BUILD_MAP = 1; +var PLAYING = 2; +var OVER = 3; +var gameState = LOADING; + +//Key codes +var RIGHT = 39; +var LEFT = 37; +var SPACE = 32; + +//Directions +var moveRight = false; +var moveLeft = false; +var jump = false; + +//Add keyboard listeners +window.addEventListener("keydown", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = true; + break; + + case RIGHT: + moveRight = true; + break; + + case SPACE: + jump = true; + break; + } + + event.preventDefault(); +}, false); + +window.addEventListener("keyup", function(event) +{ + switch(event.keyCode) + { + case LEFT: + moveLeft = false; + break; + + case RIGHT: + moveRight = false; + break; + + case SPACE: + jump = false; + break; + } +}, false); + +//Start the game animation loop +update(); + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading..."); + break; + + case BUILD_MAP: + buildMap(map); + buildMap(gameObjects); + createOtherObjects(); + gameState = PLAYING; + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load handlers + image.removeEventListener("load", loadHandler, false); + + //Build the map + gameState = BUILD_MAP; + } +} + +function buildMap(levelMap) +{ + for(var row = 0; row < ROWS; row++) + { + for(var column = 0; column < COLUMNS; column++) + { + var currentTile = levelMap[row][column]; + + if(currentTile != EMPTY) + { + //Find the tile's x and y position on the tile sheet + var tilesheetX = Math.floor((currentTile - 1) % tilesheetColumns) * SIZE; + var tilesheetY = Math.floor((currentTile - 1) / tilesheetColumns) * SIZE; + + switch (currentTile) + { + case CAT: + cat = Object.create(spriteObject); + cat.sourceX = tilesheetX; + cat.sourceY = tilesheetY; + cat.x = column * SIZE; + cat.y = row * SIZE; + sprites.push(cat); + break; + + case HEDGEHOG: + var hedgehog = Object.create(hedgehogObject); + hedgehog.sourceX = tilesheetX; + hedgehog.sourceY = tilesheetY; + hedgehog.x = column * SIZE; + hedgehog.y = row * SIZE; + hedgehog.vx = hedgehog.speed; + sprites.push(hedgehog); + hedgehogs.push(hedgehog); + break; + + case BOX: + var box = Object.create(spriteObject); + box.sourceX = tilesheetX; + box.sourceY = tilesheetY; + box.x = column * SIZE; + box.y = row * SIZE; + sprites.push(box); + boxes.push(box); + break; + + case DOOR: + door = Object.create(spriteObject); + door.sourceX = tilesheetX; + door.sourceY = tilesheetY; + door.x = column * SIZE; + door.y = row * SIZE; + sprites.push(door); + break; + + default: + var sprite = Object.create(spriteObject); + sprite.sourceX = tilesheetX; + sprite.sourceY = tilesheetY; + sprite.x = column * SIZE; + sprite.y = row * SIZE; + sprites.push(sprite); + } + } + } + } +} + +function createOtherObjects() +{ + gameOverDisplay = Object.create(spriteObject); + gameOverDisplay.sourceX = 0; + gameOverDisplay.sourceY = 192; + gameOverDisplay.sourceWidth = 192; + gameOverDisplay.sourceHeight = 128; + gameOverDisplay.width = 192; + gameOverDisplay.height = 128; + gameOverDisplay.x = canvas.width / 2 - gameOverDisplay.width / 2; + gameOverDisplay.y = canvas.height / 2 - gameOverDisplay.height / 2; + gameOverDisplay.visible = false; + sprites.push(gameOverDisplay); + + gameOverMessage = Object.create(messageObject); + gameOverMessage.x = gameOverDisplay.x + 20; + gameOverMessage.y = gameOverDisplay.y + 34; + gameOverMessage.font = "bold 30px Helvetica"; + gameOverMessage.fillStyle = "black"; + gameOverMessage.text = ""; + gameOverMessage.visible = false; + messages.push(gameOverMessage); +} + +function playGame() +{ + + //--- The cat + //Left + if(moveLeft && !moveRight) + { + cat.accelerationX = -0.2; + cat.friction = 1; + } + //Right + if(moveRight && !moveLeft) + { + cat.accelerationX = 0.2; + cat.friction = 1; + } + //Space + if(jump && cat.isOnGround) + { + cat.vy += cat.jumpForce; + cat.isOnGround = false; + cat.friction = 1; + } + + //Set the cat's acceleration, friction and gravity + //to zero if none of the arrow keys are being pressed + if(!moveLeft && !moveRight) + { + cat.accelerationX = 0; + cat.friction = 0.96; + cat.gravity = 0.3; + } + + //Apply the acceleration + cat.vx += cat.accelerationX; + cat.vy += cat.accelerationY; + + //Apply friction + if(cat.isOnGround) + { + cat.vx *= cat.friction; + } + + //Apply gravity + cat.vy += cat.gravity; + + //Limit the speed + //Don't limit the upward speed because it will choke the jump effect + + if (cat.vx > cat.speedLimit) + { + cat.vx = cat.speedLimit; + } + if (cat.vx < -cat.speedLimit) + { + cat.vx = -cat.speedLimit; + } + if (cat.vy > cat.speedLimit * 2) + { + cat.vy = cat.speedLimit * 2; + } + + //Move the cat + cat.x += cat.vx; + cat.y += cat.vy; + + //Check for a collision between the cat and the boxes + for(var i = 0; i < boxes.length; i++) + { + var collisionSide = blockRectangle(cat, boxes[i], false); + + if(collisionSide === "bottom" && cat.vy >= 0) + { + //Tell the game that the cat is on the ground if + //it's standing on top of a platform + cat.isOnGround = true; + + //Neutralize gravity by applying its + //exact opposite force to the character's vy + cat.vy = -cat.gravity; + } + else if(collisionSide === "top" && cat.vy <= 0) + { + cat.vy = 0; + } + else if(collisionSide === "right" && cat.vx >= 0) + { + cat.vx = 0; + } + else if(collisionSide === "left" && cat.vx <= 0) + { + cat.vx = 0; + } + if(collisionSide !== "bottom" && cat.vy > 0) + { + cat.isOnGround = false; + } + } + + //-- The heddgehogs + for(var i = 0; i < hedgehogs.length; i++) + { + var hedgehog = hedgehogs[i]; + + //Move the hedgehog if its state is NORMAL + if(hedgehog.state === hedgehog.NORMAL) + { + hedgehog.x += hedgehog.vx; + hedgehog.y += hedgehog.vy; + } + + //Check whether the hedgehog is at a cell corner + if(Math.floor(hedgehog.x) % SIZE === 0 + && Math.floor(hedgehog.y) % SIZE === 0) + { + //Change the hedgehog's direction if there's no BOX under it + + //Find the hedgehog's column and row in the array + var hedgehogColumn = Math.floor(hedgehog.x / SIZE); + var hedgehogRow = Math.floor(hedgehog.y / SIZE); + + if(hedgehogRow < ROWS - 1) + { + var thingBelowLeft = map[hedgehogRow + 1][hedgehogColumn - 1]; + var thingBelowRight = map[hedgehogRow + 1][hedgehogColumn + 1]; + + if(thingBelowLeft !== BOX || thingBelowRight !== BOX) + { + hedgehog.vx *= -1; + } + } + + if(hedgehogColumn > 0) + { + var thingToTheLeft = map[hedgehogRow][hedgehogColumn - 1]; + if(thingToTheLeft === BOX) + { + hedgehog.vx *= -1; + } + } + + if(hedgehogColumn < COLUMNS - 1) + { + var thingToTheRight = map[hedgehogRow][hedgehogColumn + 1]; + if(thingToTheRight === BOX) + { + hedgehog.vx *= -1; + } + } + } + } + + //Collision between the cat and the hedgehogs + for(var i = 0; i < hedgehogs.length; i++) + { + var hedgehog = hedgehogs[i]; + + if(hedgehog.visible && hitTestCircle(cat, hedgehog) + && hedgehog.state === hedgehog.NORMAL) + { + if(cat.vy > 0) + { + blockCircle(cat, hedgehog, true); + hedgehogsSquashed++; + squashHedgehog(hedgehog); + } + else + { + gameState = OVER; + } + } + } + + //Collision between the cat and the door + if(hitTestRectangle(cat, door)) + { + //Check if all the hedgehogs have been squashed + if(hedgehogsSquashed === 3) + { + gameState = OVER; + } + } + + //Screen boundaries + //Left + if (cat.x < 0) + { + cat.vx = 0; + cat.x = 0; + } + //Up + if (cat.y < 0) + { + cat.vy = 0; + cat.y = 0; + } + //Right + if (cat.x + cat.width > canvas.width) + { + cat.vx = 0; + cat.x = canvas.width - cat.width; + } + //Down + if (cat.y + cat.height > canvas.height) + { + cat.vy = 0; + cat.y = canvas.height - cat.height; + cat.isOnGround = true; + cat.vy = -cat.gravity; + } +} + +function squashHedgehog(hedgehog) +{ + //Change the hedgehog's state and update the object + hedgehog.state = hedgehog.SQUASHED; + hedgehog.update(); + + //Remove the hedgehog after 1 second + setTimeout(removeHedgehog, 1000); + + function removeHedgehog() + { + hedgehog.visible = false; + } +} + +function endGame() +{ + gameOverDisplay.visible = true; + gameOverMessage.visible = true; + + if(hedgehogsSquashed === 3) + { + gameOverMessage.text = "You Won!"; + } + else + { + gameOverMessage.text = "You Lost!"; + } +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + if(sprite.visible) + { + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } + } + + //Display the game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); diff --git a/Code - Published/chapter11/hedgehogApocalypse/src/objects.js b/Code - Published/chapter11/hedgehogApocalypse/src/objects.js new file mode 100644 index 0000000..d2879ef --- /dev/null +++ b/Code - Published/chapter11/hedgehogApocalypse/src/objects.js @@ -0,0 +1,76 @@ +//--- The sprite object + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + visible: true, + + //Physics properties + accelerationX: 0, + accelerationY: 0, + speedLimit: 5, + friction: 0.96, + bounce: -0.7, + gravity: 0.3, + + //Platform game properties + isOnGround: undefined, + jumpForce: -10, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + } +}; + +//--- The hedgehog object +hedgehogObject = Object.create(spriteObject); + +//The hedgehog's states +hedgehogObject.NORMAL = [1,0]; +hedgehogObject.SQUASHED = [2,0]; +hedgehogObject.state = hedgehogObject.NORMAL; + +hedgehogObject.update = function() +{ + this.sourceX = this.state[0] * this.sourceWidth; + this.sourceY = this.state[1] * this.sourceHeight; +}; + +//The hedgehog's allowed speed +hedgehogObject.speed = 1; + +//--- The message object + +var messageObject = +{ + x: 0, + y: 0, + visible: true, + text: "Message", + font: "normal bold 20px Helvetica", + fillStyle: "red", + textBaseline: "top" +}; \ No newline at end of file diff --git a/Code - Published/chapter11/hedgehogApocalypse/src/requestAnimationFramePolyfill.js b/Code - Published/chapter11/hedgehogApocalypse/src/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter11/hedgehogApocalypse/src/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter11/requestAnimationFramePolyfill.js b/Code - Published/chapter11/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter11/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter12/.DS_Store b/Code - Published/chapter12/.DS_Store new file mode 100644 index 0000000..4ef1227 Binary files /dev/null and b/Code - Published/chapter12/.DS_Store differ diff --git a/Code - Published/chapter12/constructorFunction.html b/Code - Published/chapter12/constructorFunction.html new file mode 100644 index 0000000..d392111 --- /dev/null +++ b/Code - Published/chapter12/constructorFunction.html @@ -0,0 +1,26 @@ + + +Constructor function + + \ No newline at end of file diff --git a/Code - Published/chapter12/dragAndDrop/.DS_Store b/Code - Published/chapter12/dragAndDrop/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter12/dragAndDrop/.DS_Store differ diff --git a/Code - Published/chapter12/dragAndDrop/dragAndDrop.png b/Code - Published/chapter12/dragAndDrop/dragAndDrop.png new file mode 100644 index 0000000..367f3bb Binary files /dev/null and b/Code - Published/chapter12/dragAndDrop/dragAndDrop.png differ diff --git a/Code - Published/chapter12/dragAndDrop/dragAndDropMouse.html b/Code - Published/chapter12/dragAndDrop/dragAndDropMouse.html new file mode 100644 index 0000000..bb7b0c9 --- /dev/null +++ b/Code - Published/chapter12/dragAndDrop/dragAndDropMouse.html @@ -0,0 +1,269 @@ + + +Canvas drag and drop + + + + + + + diff --git a/Code - Published/chapter12/dragAndDrop/dragAndDropTouch.html b/Code - Published/chapter12/dragAndDrop/dragAndDropTouch.html new file mode 100644 index 0000000..87b60e4 --- /dev/null +++ b/Code - Published/chapter12/dragAndDrop/dragAndDropTouch.html @@ -0,0 +1,267 @@ + + + +Canvas drag and drop + + + + + + + diff --git a/Code - Published/chapter12/dragAndDrop/requestAnimationFramePolyfill.js b/Code - Published/chapter12/dragAndDrop/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter12/dragAndDrop/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter12/hedgehogMouse/images/hedgehogApocalypse.png b/Code - Published/chapter12/hedgehogMouse/images/hedgehogApocalypse.png new file mode 100644 index 0000000..c2eeb8c Binary files /dev/null and b/Code - Published/chapter12/hedgehogMouse/images/hedgehogApocalypse.png differ diff --git a/Code - Published/chapter12/hedgehogMouse/src/collision.js b/Code - Published/chapter12/hedgehogMouse/src/collision.js new file mode 100644 index 0000000..0a73da0 --- /dev/null +++ b/Code - Published/chapter12/hedgehogMouse/src/collision.js @@ -0,0 +1,413 @@ +/* +This JavaScript file contains five collision functions + +- hitTestPoint +- hitTestCircle +- blockCircle +- hitTestRectangle +- blockRectangle + +To use them you'll need a sprite object with these minimum properties: + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, + left: function() + { + return this.x; + }, + right: function() + { + return this.x + this.width; + }, + top: function() + { + return this.y; + }, + bottom: function() + { + return this.y + this.height; + } +}; + + +*/ + + +//hitTestPoint + +function hitTestPoint(pointX, pointY, sprite) +{ + var hit + = pointX > sprite.left() && pointX < sprite.right() + && pointY > sprite.top() && pointY < sprite.bottom(); + + return hit; +} + +//hitTestCircle + +function hitTestCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' total radii + var totalRadii = c1.halfWidth() + c2.halfWidth(); + + //Set hit to true if the distance between the circles is + //less than their totalRadii + var hit = magnitude < totalRadii; + + return hit; +} + +//blockCircle + +function blockCircle(c1, c2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + + //Bounce + if(bounce) + { + //Create a collision vector object to represent the bounce surface + var s = {}; + + //Find the bounce surface's vx and vy properties + //(This represents the normal of the distance vector between the circles) + s.vx = vy; + s.vy = -vx; + + //Bounce c1 off the surface + bounceOffSurface(c1, s); + } + } +} + +//hitTestRectangle + +function hitTestRectangle(r1, r2) +{ + //A variable to determine whether there's a collision + var hit = false; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check for a collision on the x axis + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occuring. Check for a collision on the y axis + if(Math.abs(vy) < combinedHalfHeights) + { + //There's definitely a collision happening + hit = true; + } + else + { + //There's no collision on the y axis + hit = false; + } + } + else + { + //There's no collision on the x axis + hit = false; + } + + return hit; +} + +//blockRectangle + +function blockRectangle(r1, r2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //A variable to tell us which side the + //collision is occurring on + var collisionSide = ""; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check whether vx is less than the combined half widths + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occurring! + //Check whether vy is less than the combined half heights + if(Math.abs(vy) < combinedHalfHeights) + { + //A collision has occurred! This is good! + //Find out the size of the overlap on both the X and Y axes + var overlapX = combinedHalfWidths - Math.abs(vx); + var overlapY = combinedHalfHeights - Math.abs(vy); + + //The collision has occurred on the axis with the + //*smallest* amount of overlap. Let's figure out which + //axis that is + + if(overlapX >= overlapY) + { + //The collision is happening on the X axis + //But on which side? vy can tell us + if(vy > 0) + { + collisionSide = "top"; + + //Move the rectangle out of the collision + r1.y = r1.y + overlapY; + } + else + { + collisionSide = "bottom"; + + //Move the rectangle out of the collision + r1.y = r1.y - overlapY; + } + + //Bounce + if(bounce) + { + r1.vy *= -1; + + /*Alternative + //Find the bounce surface's vx and vy properties + var s = {}; + s.vx = r2.x - r2.x + r2.width; + s.vy = 0; + + //Bounce r1 off the surface + //bounceOffSurface(r1, s); + */ + } + } + else + { + //The collision is happening on the Y axis + //But on which side? vx can tell us + if(vx > 0) + { + collisionSide = "left"; + + //Move the rectangle out of the collision + r1.x = r1.x + overlapX; + } + else + { + collisionSide = "right"; + + //Move the rectangle out of the collision + r1.x = r1.x - overlapX; + } + + //Bounce + if(bounce) + { + r1.vx *= -1; + + /*Alternative + //Find the bounce surface's vx and vy properties + var s = {}; + s.vx = 0; + s.vy = r2.y - r2.y + r2.height; + + //Bounce r1 off the surface + bounceOffSurface(r1, s); + */ + } + } + } + else + { + //No collision + collisionSide = "none"; + } + } + else + { + //No collision + collisionSide = "none"; + } + + return collisionSide; +} + +function blockCircle(c1, c2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + + //Bounce + if(bounce) + { + //Create a collision vector object to represent the bounce surface + var s = {}; + + //Find the bounce surface's vx and vy properties + //(This represents the normal of the distance vector between the circles) + s.vx = vy; + s.vy = -vx; + + //Bounce c1 off the surface + bounceOffSurface(c1, s); + } + } +} + +//Use this to bounce an object off another object +function bounceOffSurface(o, s) +{ + //1. Calculate the collision surface's properties + + //Find the surface vector's left normal + s.lx = s.vy; + s.ly = -s.vx; + + //Find its magnitude + s.magnitude = Math.sqrt(s.vx * s.vx + s.vy * s.vy); + + //Find its normalized values + s.dx = s.vx / s.magnitude; + s.dy = s.vy / s.magnitude; + + //2. Bounce the object (o) off the surface (s) + + //Find the dot product between the object and the surface + var dp1 = o.vx * s.dx + o.vy * s.dy; + + //Project the object's velocity onto the collision surface + var p1Vx = dp1 * s.dx; + var p1Vy = dp1 * s.dy; + + //Find the dot product of the object and the surface's left normal (s.lx and s.ly) + var dp2 = o.vx * (s.lx / s.magnitude) + o.vy * (s.ly / s.magnitude); + + //Project the object's velocity onto the surface's left normal + var p2Vx = dp2 * (s.lx / s.magnitude); + var p2Vy = dp2 * (s.ly / s.magnitude); + + //Reverse the projection on the surface's left normal + p2Vx *= -1; + p2Vy *= -1; + + //Add up the projections to create a new bounce vector + var bounceVx = p1Vx + p2Vx; + var bounceVy = p1Vy + p2Vy; + + //Assign the bounce vector to the object's velocity + o.vx = bounceVx; + o.vy = bounceVy; +} \ No newline at end of file diff --git a/Code - Published/chapter12/hedgehogMouse/src/hedgehogAplocalypse.html b/Code - Published/chapter12/hedgehogMouse/src/hedgehogAplocalypse.html new file mode 100644 index 0000000..857a106 --- /dev/null +++ b/Code - Published/chapter12/hedgehogMouse/src/hedgehogAplocalypse.html @@ -0,0 +1,12 @@ + + +Hedgehog Apocalypse + + + + + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/hedgehogMouse/src/hedgehogApocalypse.js b/Code - Published/chapter12/hedgehogMouse/src/hedgehogApocalypse.js new file mode 100644 index 0000000..e489acd --- /dev/null +++ b/Code - Published/chapter12/hedgehogMouse/src/hedgehogApocalypse.js @@ -0,0 +1,508 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); +var drawingSurface = canvas.getContext("2d"); + +//The game map +var map = +[ + [7,7,8,9,7,7,7,8,9,7,7,7,8,9,7,7], + [8,9,7,7,4,9,7,7,7,8,9,7,7,7,8,5], + [4,7,7,7,7,7,8,9,7,7,7,8,9,7,4,4], + [7,7,4,7,7,4,4,4,4,7,7,7,7,7,7,7], + [8,9,4,7,7,7,7,8,9,7,7,4,8,9,7,7], + [7,4,4,4,7,8,9,7,7,7,4,4,7,7,4,8], + [9,7,8,9,7,7,7,8,9,4,7,4,9,7,7,7], + [7,7,7,7,7,4,4,7,7,7,7,4,4,4,4,7], + [8,9,7,7,7,7,7,7,7,8,9,7,7,8,9,7], + [7,7,4,4,4,4,7,7,4,7,7,7,7,7,7,7], + [7,7,7,7,7,7,7,7,7,4,7,7,7,7,7,7], + [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6] +] + +//The game objects map + +var gameObjects = +[ + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0] +]; + +//Map code +var EMPTY = 0; +var CAT = 1; +var HEDGEHOG = 2; +var BOX = 4; +var DOOR = 5; + +//The size of each tile cell +var SIZE = 64; + +//Sprites we need to access by name +var cat = null; +var door = null; +var gameOverDisplay = null; +var gameOverMessage = null; + +//The number of rows and columns +var ROWS = map.length; +var COLUMNS = map[0].length; + +//The number of columns on the tilesheet +var tilesheetColumns = 3; + +//Arrays to store the game objects +var sprites = []; +var hedgehogs = []; +var boxes = []; +var messages = []; + +var assetsToLoad = []; +var assetsLoaded = 0; + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/hedgehogApocalypse.png"; +assetsToLoad.push(image); + +//Add mouse listeners +canvas.addEventListener("mousemove", mousemoveHandler, false); +canvas.addEventListener("mousedown", mousedownHandler, false); + +//The mouse +var mouseX = 0; +var mouseY = 0; + +//Game variables +var hedgehogsSquashed = 0; + +//Game states +var LOADING = 0; +var BUILD_MAP = 1; +var PLAYING = 2; +var OVER = 3; +var gameState = LOADING; + +//Start the game animation loop +update(); + +function update() +{ + //Start the animation loop + setTimeout(update, 16); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading..."); + break; + + case BUILD_MAP: + buildMap(map); + buildMap(gameObjects); + createOtherObjects(); + gameState = PLAYING; + break; + + case PLAYING: + playGame(); + break; + + case OVER: + endGame(); + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + //Remove the load handlers + image.removeEventListener("load", loadHandler, false); + + //Build the map + gameState = BUILD_MAP; + } +} + +function buildMap(levelMap) +{ + for(var row = 0; row < ROWS; row++) + { + for(var column = 0; column < COLUMNS; column++) + { + var currentTile = levelMap[row][column]; + + if(currentTile != EMPTY) + { + //Find the tile's x and y position on the tile sheet + var tilesheetX = Math.floor((currentTile - 1) % tilesheetColumns) * SIZE; + var tilesheetY = Math.floor((currentTile - 1) / tilesheetColumns) * SIZE; + + switch (currentTile) + { + case CAT: + cat = Object.create(spriteObject); + cat.sourceX = tilesheetX; + cat.sourceY = tilesheetY; + cat.x = column * SIZE; + cat.y = row * SIZE; + //Set the initial mouse position to the cat's position + mouseX = cat.x + cat.halfWidth(); + mouseY = cat.y + cat.halfHeight(); + sprites.push(cat); + break; + + case HEDGEHOG: + var hedgehog = Object.create(hedgehogObject); + hedgehog.sourceX = tilesheetX; + hedgehog.sourceY = tilesheetY; + hedgehog.x = column * SIZE; + hedgehog.y = row * SIZE; + hedgehog.vx = hedgehog.speed; + sprites.push(hedgehog); + hedgehogs.push(hedgehog); + break; + + case BOX: + var box = Object.create(spriteObject); + box.sourceX = tilesheetX; + box.sourceY = tilesheetY; + box.x = column * SIZE; + box.y = row * SIZE; + sprites.push(box); + boxes.push(box); + break; + + case DOOR: + door = Object.create(spriteObject); + door.sourceX = tilesheetX; + door.sourceY = tilesheetY; + door.x = column * SIZE; + door.y = row * SIZE; + sprites.push(door); + break; + + default: + var sprite = Object.create(spriteObject); + sprite.sourceX = tilesheetX; + sprite.sourceY = tilesheetY; + sprite.x = column * SIZE; + sprite.y = row * SIZE; + sprites.push(sprite); + } + } + } + } +} + +function createOtherObjects() +{ + gameOverDisplay = Object.create(spriteObject); + gameOverDisplay.sourceX = 0; + gameOverDisplay.sourceY = 192; + gameOverDisplay.sourceWidth = 192; + gameOverDisplay.sourceHeight = 128; + gameOverDisplay.width = 192; + gameOverDisplay.height = 128; + gameOverDisplay.x = canvas.width / 2 - gameOverDisplay.width / 2; + gameOverDisplay.y = canvas.height / 2 - gameOverDisplay.height / 2; + gameOverDisplay.visible = false; + sprites.push(gameOverDisplay); + + gameOverMessage = Object.create(messageObject); + gameOverMessage.x = gameOverDisplay.x + 20; + gameOverMessage.y = gameOverDisplay.y + 34; + gameOverMessage.font = "bold 30px Helvetica"; + gameOverMessage.fillStyle = "black"; + gameOverMessage.text = ""; + gameOverMessage.visible = false; + messages.push(gameOverMessage); +} + +function playGame() +{ + + //--- The cat + cat.vx = (mouseX - (cat.x + cat.halfWidth())) * 0.2; + + //Apply gravity + cat.vy += cat.gravity; + + //Limit the speed + //Don't limit the upward speed because it will choke the jump effect + + if (cat.vx > cat.speedLimit) + { + cat.vx = cat.speedLimit; + } + if (cat.vx < -cat.speedLimit) + { + cat.vx = -cat.speedLimit; + } + if (cat.vy > cat.speedLimit * 2) + { + cat.vy = cat.speedLimit * 2; + } + + //Move the cat + cat.x += cat.vx; + cat.y += cat.vy; + + //Check for a collision between the cat and the boxes + for(var i = 0; i < boxes.length; i++) + { + var collisionSide = blockRectangle(cat, boxes[i], false); + + if(collisionSide === "bottom" && cat.vy >= 0) + { + //Tell the game that the cat is on the ground if + //it's standing on top of a platform + cat.isOnGround = true; + + //Neutralize gravity by applying its + //exact opposite force to the character's vy + cat.vy = -cat.gravity; + } + else if(collisionSide === "top" && cat.vy <= 0) + { + cat.vy = 0; + } + else if(collisionSide === "right" && cat.vx >= 0) + { + cat.vx = 0; + } + else if(collisionSide === "left" && cat.vx <= 0) + { + cat.vx = 0; + } + if(collisionSide !== "bottom" && cat.vy > 0) + { + cat.isOnGround = false; + } + } + + //Reset isOnGround to false if the cat slides off a platform without jumping + if(cat.vy > 0) + { + cat.isOnGround = false; + } + + //-- The heddgehogs + for(var i = 0; i < hedgehogs.length; i++) + { + var hedgehog = hedgehogs[i]; + + //Move the hedgehog if its state is NORMAL + if(hedgehog.state === hedgehog.NORMAL) + { + hedgehog.x += hedgehog.vx; + hedgehog.y += hedgehog.vy; + } + + //Check whether the hedgehog is at a cell corner + if(Math.floor(hedgehog.x) % SIZE === 0 + && Math.floor(hedgehog.y) % SIZE === 0) + { + //Change the hedgehog's direction if there's no BOX under it + + //Find the hedgehog's column and row in the array + var hedgehogColumn = Math.floor(hedgehog.x / SIZE); + var hedgehogRow = Math.floor(hedgehog.y / SIZE); + + if(hedgehogRow < ROWS - 1) + { + var thingBelowLeft = map[hedgehogRow + 1][hedgehogColumn - 1]; + var thingBelowRight = map[hedgehogRow + 1][hedgehogColumn + 1]; + + if(thingBelowLeft !== BOX || thingBelowRight !== BOX) + { + hedgehog.vx *= -1; + } + } + + if(hedgehogColumn > 0) + { + var thingToTheLeft = map[hedgehogRow][hedgehogColumn - 1]; + if(thingToTheLeft === BOX) + { + hedgehog.vx *= -1; + } + } + + if(hedgehogColumn < COLUMNS - 1) + { + var thingToTheRight = map[hedgehogRow][hedgehogColumn + 1]; + if(thingToTheRight === BOX) + { + hedgehog.vx *= -1; + } + } + } + } + + //Collision between the cat and the hedgehogs + for(var i = 0; i < hedgehogs.length; i++) + { + var hedgehog = hedgehogs[i]; + + if(hedgehog.visible && hitTestCircle(cat, hedgehog) + && hedgehog.state === hedgehog.NORMAL) + { + if(cat.vy > 0) + { + blockCircle(cat, hedgehog, true); + hedgehogsSquashed++; + squashHedgehog(hedgehog); + } + else + { + gameState = OVER; + } + } + } + + //Collision between the cat and the door + if(hitTestRectangle(cat, door)) + { + //Check if all the hedgehogs have been squashed + if(hedgehogsSquashed === 3) + { + gameState = OVER; + } + } + + //Screen boundaries + //Left + if (cat.x < 0) + { + cat.vx = 0; + cat.x = 0; + } + //Up + if (cat.y < 0) + { + cat.vy = 0; + cat.y = 0; + } + //Right + if (cat.x + cat.width > canvas.width) + { + cat.vx = 0; + cat.x = canvas.width - cat.width; + } + //Down + if (cat.y + cat.height > canvas.height) + { + cat.vy = 0; + cat.y = canvas.height - cat.height; + cat.isOnGround = true; + } +} + +function squashHedgehog(hedgehog) +{ + //Change the hedgehog's state and update the object + hedgehog.state = hedgehog.SQUASHED; + hedgehog.update(); + + //Remove the hedgehog after 1 second + setTimeout(removeHedgehog, 1000); + + function removeHedgehog() + { + hedgehog.visible = false; + } +} + +function endGame() +{ + gameOverDisplay.visible = true; + gameOverMessage.visible = true; + + if(hedgehogsSquashed === 3) + { + gameOverMessage.text = "You Won!"; + } + else + { + gameOverMessage.text = "You Lost!"; + } +} + +function mousemoveHandler(event) +{ + //Find the mouse's x and y position. + //Subtract the canvas's top and left offset + mouseX = event.pageX - canvas.offsetLeft; + mouseY = event.pageY - canvas.offsetTop; +} + +function mousedownHandler(event) +{ + if(cat.isOnGround) + { + cat.vy += cat.jumpForce; + cat.isOnGround = false; + } +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + if(sprite.visible) + { + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(sprite.x), Math.floor(sprite.y), + sprite.width, sprite.height + ); + } + } + } + + //Display the game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); diff --git a/Code - Published/chapter12/hedgehogMouse/src/objects.js b/Code - Published/chapter12/hedgehogMouse/src/objects.js new file mode 100644 index 0000000..d366c4b --- /dev/null +++ b/Code - Published/chapter12/hedgehogMouse/src/objects.js @@ -0,0 +1,76 @@ +//--- The sprite object + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + height: 64, + width: 64, + visible: true, + + //Physics properties + accelerationX: 0, + accelerationY: 0, + speedLimit: 5, + friction: 0.96, + bounce: -0.7, + gravity: 0.3, + + //Platform game properties + isOnGround: undefined, + jumpForce: -10, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + } +}; + +//--- The hedgehog object +hedgehogObject = Object.create(spriteObject); + +//The hedgehog's states +hedgehogObject.NORMAL = [1,0]; +hedgehogObject.SQUASHED = [2,0]; +hedgehogObject.state = hedgehogObject.NORMAL; + +hedgehogObject.update = function() +{ + this.sourceX = this.state[0] * this.sourceWidth; + this.sourceY = this.state[1] * this.sourceHeight; +}; + +//The hedgehog's allowed speed +hedgehogObject.speed = 1; + +//--- The message object + +var messageObject = +{ + x: 0, + y: 0, + visible: true, + text: "Message", + font: "normal bold 20px Helvetica", + fillStyle: "red", + textBaseline: "top" +}; \ No newline at end of file diff --git a/Code - Published/chapter12/hedgehogMouse/src/requestAnimationFramePolyfill.js b/Code - Published/chapter12/hedgehogMouse/src/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter12/hedgehogMouse/src/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter12/images/.DS_Store b/Code - Published/chapter12/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter12/images/.DS_Store differ diff --git a/Code - Published/chapter12/images/bee.png b/Code - Published/chapter12/images/bee.png new file mode 100644 index 0000000..19f3829 Binary files /dev/null and b/Code - Published/chapter12/images/bee.png differ diff --git a/Code - Published/chapter12/images/buttonFairy.png b/Code - Published/chapter12/images/buttonFairy.png new file mode 100644 index 0000000..4d7d23e Binary files /dev/null and b/Code - Published/chapter12/images/buttonFairy.png differ diff --git a/Code - Published/chapter12/images/catAndBox.png b/Code - Published/chapter12/images/catAndBox.png new file mode 100644 index 0000000..9bc717c Binary files /dev/null and b/Code - Published/chapter12/images/catAndBox.png differ diff --git a/Code - Published/chapter12/images/vehicles.png b/Code - Published/chapter12/images/vehicles.png new file mode 100644 index 0000000..dc2e1ed Binary files /dev/null and b/Code - Published/chapter12/images/vehicles.png differ diff --git a/Code - Published/chapter12/keyboard/carKeyboard.html b/Code - Published/chapter12/keyboard/carKeyboard.html new file mode 100644 index 0000000..ff4c0a2 --- /dev/null +++ b/Code - Published/chapter12/keyboard/carKeyboard.html @@ -0,0 +1,263 @@ + + +Car + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/keyboard/requestAnimationFramePolyfill.js b/Code - Published/chapter12/keyboard/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter12/keyboard/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter12/keyboard/rocketKeyboard.html b/Code - Published/chapter12/keyboard/rocketKeyboard.html new file mode 100644 index 0000000..171d078 --- /dev/null +++ b/Code - Published/chapter12/keyboard/rocketKeyboard.html @@ -0,0 +1,354 @@ + + +Rocket + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/keyboard/tank.html b/Code - Published/chapter12/keyboard/tank.html new file mode 100644 index 0000000..973b359 --- /dev/null +++ b/Code - Published/chapter12/keyboard/tank.html @@ -0,0 +1,367 @@ + + +Tank + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/killerBeePandemonium/images/killerBeePandemonium.png b/Code - Published/chapter12/killerBeePandemonium/images/killerBeePandemonium.png new file mode 100644 index 0000000..f02afea Binary files /dev/null and b/Code - Published/chapter12/killerBeePandemonium/images/killerBeePandemonium.png differ diff --git a/Code - Published/chapter12/killerBeePandemonium/src/collision.js b/Code - Published/chapter12/killerBeePandemonium/src/collision.js new file mode 100644 index 0000000..0a73da0 --- /dev/null +++ b/Code - Published/chapter12/killerBeePandemonium/src/collision.js @@ -0,0 +1,413 @@ +/* +This JavaScript file contains five collision functions + +- hitTestPoint +- hitTestCircle +- blockCircle +- hitTestRectangle +- blockRectangle + +To use them you'll need a sprite object with these minimum properties: + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + }, + left: function() + { + return this.x; + }, + right: function() + { + return this.x + this.width; + }, + top: function() + { + return this.y; + }, + bottom: function() + { + return this.y + this.height; + } +}; + + +*/ + + +//hitTestPoint + +function hitTestPoint(pointX, pointY, sprite) +{ + var hit + = pointX > sprite.left() && pointX < sprite.right() + && pointY > sprite.top() && pointY < sprite.bottom(); + + return hit; +} + +//hitTestCircle + +function hitTestCircle(c1, c2) +{ + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' total radii + var totalRadii = c1.halfWidth() + c2.halfWidth(); + + //Set hit to true if the distance between the circles is + //less than their totalRadii + var hit = magnitude < totalRadii; + + return hit; +} + +//blockCircle + +function blockCircle(c1, c2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + + //Bounce + if(bounce) + { + //Create a collision vector object to represent the bounce surface + var s = {}; + + //Find the bounce surface's vx and vy properties + //(This represents the normal of the distance vector between the circles) + s.vx = vy; + s.vy = -vx; + + //Bounce c1 off the surface + bounceOffSurface(c1, s); + } + } +} + +//hitTestRectangle + +function hitTestRectangle(r1, r2) +{ + //A variable to determine whether there's a collision + var hit = false; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check for a collision on the x axis + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occuring. Check for a collision on the y axis + if(Math.abs(vy) < combinedHalfHeights) + { + //There's definitely a collision happening + hit = true; + } + else + { + //There's no collision on the y axis + hit = false; + } + } + else + { + //There's no collision on the x axis + hit = false; + } + + return hit; +} + +//blockRectangle + +function blockRectangle(r1, r2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //A variable to tell us which side the + //collision is occurring on + var collisionSide = ""; + + //Calculate the distance vector + var vx = r1.centerX() - r2.centerX(); + var vy = r1.centerY() - r2.centerY(); + + //Figure out the combined half-widths and half-heights + var combinedHalfWidths = r1.halfWidth() + r2.halfWidth(); + var combinedHalfHeights = r1.halfHeight() + r2.halfHeight(); + + //Check whether vx is less than the combined half widths + if(Math.abs(vx) < combinedHalfWidths) + { + //A collision might be occurring! + //Check whether vy is less than the combined half heights + if(Math.abs(vy) < combinedHalfHeights) + { + //A collision has occurred! This is good! + //Find out the size of the overlap on both the X and Y axes + var overlapX = combinedHalfWidths - Math.abs(vx); + var overlapY = combinedHalfHeights - Math.abs(vy); + + //The collision has occurred on the axis with the + //*smallest* amount of overlap. Let's figure out which + //axis that is + + if(overlapX >= overlapY) + { + //The collision is happening on the X axis + //But on which side? vy can tell us + if(vy > 0) + { + collisionSide = "top"; + + //Move the rectangle out of the collision + r1.y = r1.y + overlapY; + } + else + { + collisionSide = "bottom"; + + //Move the rectangle out of the collision + r1.y = r1.y - overlapY; + } + + //Bounce + if(bounce) + { + r1.vy *= -1; + + /*Alternative + //Find the bounce surface's vx and vy properties + var s = {}; + s.vx = r2.x - r2.x + r2.width; + s.vy = 0; + + //Bounce r1 off the surface + //bounceOffSurface(r1, s); + */ + } + } + else + { + //The collision is happening on the Y axis + //But on which side? vx can tell us + if(vx > 0) + { + collisionSide = "left"; + + //Move the rectangle out of the collision + r1.x = r1.x + overlapX; + } + else + { + collisionSide = "right"; + + //Move the rectangle out of the collision + r1.x = r1.x - overlapX; + } + + //Bounce + if(bounce) + { + r1.vx *= -1; + + /*Alternative + //Find the bounce surface's vx and vy properties + var s = {}; + s.vx = 0; + s.vy = r2.y - r2.y + r2.height; + + //Bounce r1 off the surface + bounceOffSurface(r1, s); + */ + } + } + } + else + { + //No collision + collisionSide = "none"; + } + } + else + { + //No collision + collisionSide = "none"; + } + + return collisionSide; +} + +function blockCircle(c1, c2, bounce) +{ + //Set bounce to a default value of false if it's not specified + if(typeof bounce === "undefined") + { + bounce = false; + } + + //Calculate the vector between the circles’ center points + var vx = c1.centerX() - c2.centerX(); + var vy = c1.centerY() - c2.centerY(); + + //Find the distance between the circles by calculating + //the vector's magnitude (how long the vector is) + var magnitude = Math.sqrt(vx * vx + vy * vy); + + //Add together the circles' combined half-widths + var combinedHalfWidths = c1.halfWidth() + c2.halfWidth(); + + //Figure out if there's a collision + if(magnitude < combinedHalfWidths) + { + //Yes, a collision is happening. + //Find the amount of overlap between the circles + var overlap = combinedHalfWidths - magnitude; + + //Normalize the vector. + //These numbers tell us the direction of the collision + dx = vx / magnitude; + dy = vy / magnitude; + + //Move circle 1 out of the collision by multiplying + //the overlap with the normalized vector and add it to + //circle 1's position + c1.x += overlap * dx; + c1.y += overlap * dy; + + //Bounce + if(bounce) + { + //Create a collision vector object to represent the bounce surface + var s = {}; + + //Find the bounce surface's vx and vy properties + //(This represents the normal of the distance vector between the circles) + s.vx = vy; + s.vy = -vx; + + //Bounce c1 off the surface + bounceOffSurface(c1, s); + } + } +} + +//Use this to bounce an object off another object +function bounceOffSurface(o, s) +{ + //1. Calculate the collision surface's properties + + //Find the surface vector's left normal + s.lx = s.vy; + s.ly = -s.vx; + + //Find its magnitude + s.magnitude = Math.sqrt(s.vx * s.vx + s.vy * s.vy); + + //Find its normalized values + s.dx = s.vx / s.magnitude; + s.dy = s.vy / s.magnitude; + + //2. Bounce the object (o) off the surface (s) + + //Find the dot product between the object and the surface + var dp1 = o.vx * s.dx + o.vy * s.dy; + + //Project the object's velocity onto the collision surface + var p1Vx = dp1 * s.dx; + var p1Vy = dp1 * s.dy; + + //Find the dot product of the object and the surface's left normal (s.lx and s.ly) + var dp2 = o.vx * (s.lx / s.magnitude) + o.vy * (s.ly / s.magnitude); + + //Project the object's velocity onto the surface's left normal + var p2Vx = dp2 * (s.lx / s.magnitude); + var p2Vy = dp2 * (s.ly / s.magnitude); + + //Reverse the projection on the surface's left normal + p2Vx *= -1; + p2Vy *= -1; + + //Add up the projections to create a new bounce vector + var bounceVx = p1Vx + p2Vx; + var bounceVy = p1Vy + p2Vy; + + //Assign the bounce vector to the object's velocity + o.vx = bounceVx; + o.vy = bounceVy; +} \ No newline at end of file diff --git a/Code - Published/chapter12/killerBeePandemonium/src/killerBeeMouse.html b/Code - Published/chapter12/killerBeePandemonium/src/killerBeeMouse.html new file mode 100644 index 0000000..759da63 --- /dev/null +++ b/Code - Published/chapter12/killerBeePandemonium/src/killerBeeMouse.html @@ -0,0 +1,12 @@ + + +Killer Bee Pandemonium - Mouse Controlled + + + + + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/killerBeePandemonium/src/killerBeeMouse.js b/Code - Published/chapter12/killerBeePandemonium/src/killerBeeMouse.js new file mode 100644 index 0000000..b09e6ff --- /dev/null +++ b/Code - Published/chapter12/killerBeePandemonium/src/killerBeeMouse.js @@ -0,0 +1,426 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); +var drawingSurface = canvas.getContext("2d"); + +//Object arrays +var sprites = []; +var bullets = []; +var stars = []; +var messages = []; +var assetsToLoad = []; +var assetsLoaded = 0; + +//The mouse +var mouseX = 0; +var mouseY = 0; + +//Hide the mouse +//canvas.style.cursor = "none"; + +//The background +var background = Object.create(spriteObject); +background.sourceY = 64; +background.sourceWidth = 1024; +background.sourceHeight = 764; +background.width = 1024; +background.height = 764; +sprites.push(background); + +//The score messages +var fairyScoreMessage = Object.create(messageObject); +fairyScoreMessage.x = 250; +fairyScoreMessage.y = 13; +fairyScoreMessage.font = "bold 70px Helvetica"; +fairyScoreMessage.fillStyle = "black"; +fairyScoreMessage.text = "00"; +messages.push(fairyScoreMessage); + +var beeScoreMessage = Object.create(messageObject); +beeScoreMessage.x = 720; +beeScoreMessage.y = 13; +beeScoreMessage.font = "bold 70px Helvetica"; +beeScoreMessage.fillStyle = "black"; +beeScoreMessage.text = "00"; +messages.push(beeScoreMessage); + +//The bee +var bee = Object.create(spriteObject); +bee.sourceWidth = 77; +bee.width = 77; +bee.x = 100; +bee.y = canvas.height / 2 - bee.halfHeight(); +sprites.push(bee); + +//The fairy +var fairy = Object.create(spriteObject); +fairy.sourceX = 128; +fairy.sourceWidth = 77; +fairy.width = 77; +fairy.x = canvas.width - 177; +fairy.y = canvas.height / 2 - fairy.halfHeight(); +sprites.push(fairy); + +//The wand +var wand = Object.create(spriteObject); +wand.sourceX = 256; +wand.sourceWidth = 20; +wand.sourceHeight = 20; +wand.width = 20; +wand.height = 20; +wand.x = canvas.width / 2 - fairy.halfWidth(); +wand.y = canvas.height / 2 - fairy.halfHeight(); +sprites.push(wand); + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/killerBeePandemonium.png"; +assetsToLoad.push(image); + +//Add listeners +canvas.addEventListener("mousemove", mousemoveHandler, false); +canvas.addEventListener("mousedown", mousedownHandler, false); + +//The angles needed to rotate the bee and the fairy's wand +var beeAngle = 0; +var fairyAngle = 0; + +//Variables needed for the bullet timer +var bulletTimer = 0; +var timeToFire = 30; +var fairyScore = 0; +var beeScore = 0; + +//The easing constant +EASING = 0.1; + +//Game states +var LOADING = 0; +var PLAYING = 1; +var gameState = LOADING; + +update(); + +function mousemoveHandler(event) +{ + //Find the mouse's x and y position. + //Subtract the canvas's top and left offset + mouseX = event.pageX - canvas.offsetLeft; + mouseY = event.pageY - canvas.offsetTop; +} + +function mousedownHandler(event) +{ + //Create a star sprite + var star = Object.create(spriteObject); + star.sourceX = 320; + star.sourceWidth = 38; + star.sourceHeight = 38; + star.width = 38; + star.height = 38; + + //Center it over the wand + star.x = wand.centerX() - star.halfWidth(); + star.y = wand.centerY() - star.halfHeight(); + + //Set its speed + star.vx = Math.cos(fairyAngle) * 7; + star.vy = Math.sin(fairyAngle) * 7; + + //Push the star into both the sprites and stars arrays + sprites.push(star); + stars.push(star); +} + +function playGame() +{ + //--- The bee + + //Find the angle between the center of the bee and the fairy + var vx = fairy.centerX() - bee.centerX(); + var vy = fairy.centerY() - bee.centerY(); + + //The distance between the fairy and the bee + var distance = Math.sqrt(vx * vx + vy * vy); + + //The range, in pixels, to which the bee should be sensitive + var range = 500; + + if (distance <= range) + { + //Find out how much to move + var moveX = bee.rotationSpeed * vx / distance; + var moveY = bee.rotationSpeed * vy / distance; + + //Increase the bee's velocity + bee.vx += moveX; + bee.vy += moveY; + + //Find the total distance to move + var moveDistance = Math.sqrt(bee.vx * bee.vx + bee.vy * bee.vy); + + //Apply easing + bee.vx = bee.speed * bee.vx / moveDistance; + bee.vy = bee.speed * bee.vy / moveDistance; + + //Rotate the bee towards the target + //Find the angle in radians + beeAngle = Math.atan2(bee.vy, bee.vx); + + //Convert the radians to degrees to rotate + //the bee correctly + bee.rotation = beeAngle * 180 / Math.PI + 90; + + //Fire bullets + bulletTimer++; + + if(bulletTimer === timeToFire) + { + fireBullet(); + bulletTimer = 0; + } + } + + //Apply friction + bee.vx *= bee.friction; + bee.vy *= bee.friction; + + //Move the bee + bee.x += bee.vx; + bee.y += bee.vy; + + //--- The bullets + + //Move the bullets + for(var i = 0; i < bullets.length; i++) + { + var bullet = bullets[i]; + + //Move it + bullet.x += bullet.vx; + bullet.y += bullet.vy; + + //Check for collisions with the fairy + if(hitTestCircle(bullet, fairy)) + { + //Update the score + beeScore++; + beeScoreMessage.text = beeScore; + + //Remove the bullets from the arrays + removeObject(bullet, bullets); + removeObject(bullet, sprites); + i--; + //break the loop so that the rest of this code won't continue + break; + } + + //Remove the bullet if it crosses the screen boundaries + if (bullet.centerY() < 0 + || bullet.centerX() < 0 + || bullet.centerX() > canvas.width + || bullet.centerY() > canvas.height) + { + //Remove the bullet from the bullets array + removeObject(bullet, bullets); + + //Remove the bullet from the sprites array + removeObject(bullet, sprites); + + //Reduce the loop counter by 1 to compensate + //for the removed element + i--; + } + } + + //--- The fairy + + //Find the angle between the center of the fairy and the mouse + fairyAngle = Math.atan2(mouseY - fairy.centerY(), mouseX - fairy.centerX()); + + //Move the wand around the fairy + var radius = 64; + wand.x = fairy.centerX() + (radius * Math.cos(fairyAngle)) - wand.halfWidth(); + wand.y = fairy.centerY() + (radius * Math.sin(fairyAngle)) - wand.halfHeight(); + + //Figure out the distance between the mouse and the center of the fairy + vx = mouseX - fairy.centerX(); + vy = mouseY - fairy.centerY(); + distance = Math.sqrt(vx * vx + vy * vy); + + //Move the fairy if it's more than 1 pixel away from the mouse + if (distance >= 1) + { + fairy.x += vx * EASING; + fairy.y += vy * EASING; + } + + //--- The stars + + //Move the stars + for(var i = 0; i < stars.length; i++) + { + var star = stars[i]; + + //Move it + star.x += star.vx; + star.y += star.vy; + + //Check for collisions with the bee + if(hitTestCircle(star, bee)) + { + //Update the score + fairyScore++; + fairyScoreMessage.text = fairyScore; + + //Remove the stars from the arrays + removeObject(star, stars); + removeObject(star, sprites); + i--; + //Break the loop so that the rest of this code won't continue + break; + } + + //Remove the star if it crosses the screen boundaries + if (star.centerY() < 0 + || star.centerX() < 0 + || star.centerX() > canvas.width + || star.centerY() > canvas.height + && star) + { + //Remove the star from the stars array + removeObject(star, stars); + + //Remove the star from the sprites array + removeObject(star, sprites); + + //Reduce the loop counter by 1 to compensate + //for the removed element + i--; + } + } +} + +function fireBullet() +{ + //Create a bullet sprite + var bullet = Object.create(spriteObject); + bullet.sourceX = 384; + bullet.sourceWidth = 20; + bullet.sourceHeight = 20; + bullet.width = 20; + bullet.height = 20; + + //Center it over the bee + var radius = 32; + bullet.x = bee.x + radius + (radius * Math.cos(beeAngle)); + bullet.y = bee.y + radius + (radius * Math.sin(beeAngle)); + + //Set its speed + bullet.vx = Math.cos(beeAngle) * 7; + bullet.vy = Math.sin(beeAngle) * 7; + + //Push the bullet into both the sprites and bullets arrays + sprites.push(bullet); + bullets.push(bullet); +} + +function removeObject(objectToRemove, array) +{ + var i = array.indexOf(objectToRemove); + if (i !== -1) + { + array.splice(i, 1); + } +} + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading..."); + break; + + case PLAYING: + playGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + gameState = PLAYING; + } +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + + //Save the current state of the drawing surface before it's rotated + drawingSurface.save(); + + //Rotate the canvas + drawingSurface.translate + ( + Math.floor(sprite.x + sprite.halfWidth()), + Math.floor(sprite.y + sprite.halfHeight()) + ); + drawingSurface.rotate(sprite.rotation * Math.PI / 180); + + if(sprite.visible) + { + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(-sprite.halfWidth()), Math.floor(-sprite.halfHeight()), + sprite.width, sprite.height + ); + } + + //Restore the drawing surface to its + //state before it was rotated + drawingSurface.restore(); + } + } + + //Display the game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter12/killerBeePandemonium/src/killerBeeTouch.html b/Code - Published/chapter12/killerBeePandemonium/src/killerBeeTouch.html new file mode 100644 index 0000000..304a975 --- /dev/null +++ b/Code - Published/chapter12/killerBeePandemonium/src/killerBeeTouch.html @@ -0,0 +1,13 @@ + + + +Killer Bee Pandemonium - Touch Controlled + + + + + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/killerBeePandemonium/src/killerBeeTouch.js b/Code - Published/chapter12/killerBeePandemonium/src/killerBeeTouch.js new file mode 100644 index 0000000..eb0100c --- /dev/null +++ b/Code - Published/chapter12/killerBeePandemonium/src/killerBeeTouch.js @@ -0,0 +1,425 @@ +(function(){ + +//The canvas +var canvas = document.querySelector("canvas"); +var drawingSurface = canvas.getContext("2d"); + +//Object arrays +var sprites = []; +var bullets = []; +var stars = []; +var messages = []; +var assetsToLoad = []; +var assetsLoaded = 0; + +//The background +var background = Object.create(spriteObject); +background.sourceY = 64; +background.sourceWidth = 1024; +background.sourceHeight = 764; +background.width = 1024; +background.height = 764; +sprites.push(background); + +//The score messages +var fairyScoreMessage = Object.create(messageObject); +fairyScoreMessage.x = 250; +fairyScoreMessage.y = 13; +fairyScoreMessage.font = "bold 70px Helvetica"; +fairyScoreMessage.fillStyle = "black"; +fairyScoreMessage.text = "00"; +messages.push(fairyScoreMessage); + +var beeScoreMessage = Object.create(messageObject); +beeScoreMessage.x = 720; +beeScoreMessage.y = 13; +beeScoreMessage.font = "bold 70px Helvetica"; +beeScoreMessage.fillStyle = "black"; +beeScoreMessage.text = "00"; +messages.push(beeScoreMessage); + +//The bee +var bee = Object.create(spriteObject); +bee.sourceWidth = 77; +bee.width = 77; +bee.x = 100; +bee.y = canvas.height / 2 - bee.halfHeight(); +sprites.push(bee); + +//The fairy +var fairy = Object.create(spriteObject); +fairy.sourceX = 128; +fairy.sourceWidth = 77; +fairy.width = 77; +fairy.x = canvas.width - 177; +fairy.y = canvas.height / 2 - fairy.halfHeight(); +sprites.push(fairy); + +//The touch point +var touchX = fairy.x + fairy.halfWidth(); +var touchY = fairy.y + fairy.halfHeight(); + +//The wand +var wand = Object.create(spriteObject); +wand.sourceX = 256; +wand.sourceWidth = 20; +wand.sourceHeight = 20; +wand.width = 20; +wand.height = 20; +wand.x = canvas.width / 2 - fairy.halfWidth(); +wand.y = canvas.height / 2 - fairy.halfHeight(); +sprites.push(wand); + +//Load the tilesheet image +var image = new Image(); +image.addEventListener("load", loadHandler, false); +image.src = "../images/killerBeePandemonium.png"; +assetsToLoad.push(image); + +//Add listeners +canvas.addEventListener("touchmove", touchmoveHandler, false); +canvas.addEventListener("touchstart", touchstartHandler, false); + +//The angles needed to rotate the bee and the fairy's wand +var beeAngle = 0; +var fairyAngle = 0; + +//Variables needed for the bullet timer +var bulletTimer = 0; +var timeToFire = 30; +var fairyScore = 0; +var beeScore = 0; + +//The easing constant +EASING = 0.1; + +//Game states +var LOADING = 0; +var PLAYING = 1; +var gameState = LOADING; + +update(); + +function touchmoveHandler(event) +{ + //Find the touch point's x and y position. + //Subtract the canvas's top and left offset + touchX = event.targetTouches[0].pageX - canvas.offsetLeft; + touchY = event.targetTouches[0].pageY - canvas.offsetTop; + event.preventDefault(); +} + +function touchstartHandler(event) +{ + //Create a star sprite + var star = Object.create(spriteObject); + star.sourceX = 320; + star.sourceWidth = 38; + star.sourceHeight = 38; + star.width = 38; + star.height = 38; + + //Center it over the wand + star.x = wand.centerX() - star.halfWidth(); + star.y = wand.centerY() - star.halfHeight(); + + //Set its speed + star.vx = Math.cos(fairyAngle) * 7; + star.vy = Math.sin(fairyAngle) * 7; + + //Push the star into both the sprites and stars arrays + sprites.push(star); + stars.push(star); + + event.preventDefault(); +} + +function playGame() +{ + //--- The bee + + //Find the angle between the center of the bee and the fairy + var vx = fairy.centerX() - bee.centerX(); + var vy = fairy.centerY() - bee.centerY(); + + //The distance between the fairy and the bee + var distance = Math.sqrt(vx * vx + vy * vy); + + //The range, in pixels, to which the bee should be sensitive + var range = 500; + + if (distance <= range) + { + //Find out how much to move + var moveX = bee.rotationSpeed * vx / distance; + var moveY = bee.rotationSpeed * vy / distance; + + //Increase the bee's velocity + bee.vx += moveX; + bee.vy += moveY; + + //Find the total distance to move + var moveDistance = Math.sqrt(bee.vx * bee.vx + bee.vy * bee.vy); + + //Apply easing + bee.vx = bee.speed * bee.vx / moveDistance; + bee.vy = bee.speed * bee.vy / moveDistance; + + //Rotate the bee towards the target + //Find the angle in radians + beeAngle = Math.atan2(bee.vy, bee.vx); + + //Convert the radians to degrees to rotate + //the bee correctly + bee.rotation = beeAngle * 180 / Math.PI + 90; + + //Fire bullets + bulletTimer++; + + if(bulletTimer === timeToFire) + { + fireBullet(); + bulletTimer = 0; + } + } + + //Apply friction + bee.vx *= bee.friction; + bee.vy *= bee.friction; + + //Move the bee + bee.x += bee.vx; + bee.y += bee.vy; + + //--- The bullets + + //Move the bullets + for(var i = 0; i < bullets.length; i++) + { + var bullet = bullets[i]; + + //Move it + bullet.x += bullet.vx; + bullet.y += bullet.vy; + + //Check for collisions with the fairy + if(hitTestCircle(bullet, fairy)) + { + //Update the score + beeScore++; + beeScoreMessage.text = beeScore; + + //Remove the bullets from the arrays + removeObject(bullet, bullets); + removeObject(bullet, sprites); + i--; + //break the loop so that the rest of this code won't continue + break; + } + + //Remove the bullet if it crosses the screen boundaries + if (bullet.centerY() < 0 + || bullet.centerX() < 0 + || bullet.centerX() > canvas.width + || bullet.centerY() > canvas.height) + { + //Remove the bullet from the bullets array + removeObject(bullet, bullets); + + //Remove the bullet from the sprites array + removeObject(bullet, sprites); + + //Reduce the loop counter by 1 to compensate + //for the removed element + i--; + } + } + + //--- The fairy + + //Find the angle between the center of the fairy and the touch point + fairyAngle = Math.atan2(touchY - fairy.centerY(), touchX - fairy.centerX()); + + //Move the wand around the fairy + var radius = 64; + wand.x = fairy.centerX() + (radius * Math.cos(fairyAngle)) - wand.halfWidth(); + wand.y = fairy.centerY() + (radius * Math.sin(fairyAngle)) - wand.halfHeight(); + + //Figure out the distance between the touch point and the center of the fairy + vx = touchX - fairy.centerX(); + vy = touchY - fairy.centerY(); + distance = Math.sqrt(vx * vx + vy * vy); + + //Move the fairy if it's more than 1 pixel away from the touch point + if (distance >= 1) + { + fairy.x += vx * EASING; + fairy.y += vy * EASING; + } + + //--- The stars + + //Move the stars + for(var i = 0; i < stars.length; i++) + { + var star = stars[i]; + + //Move it + star.x += star.vx; + star.y += star.vy; + + //Check for collisions with the bee + if(hitTestCircle(star, bee)) + { + //Update the score + fairyScore++; + fairyScoreMessage.text = fairyScore; + + //Remove the stars from the arrays + removeObject(star, stars); + removeObject(star, sprites); + i--; + //break the loop so that the rest of this code won't continue + break; + } + + //Remove the star if it crosses the screen boundaries + if (star.centerY() < 0 + || star.centerX() < 0 + || star.centerX() > canvas.width + || star.centerY() > canvas.height) + { + //Remove the star from the stars array + removeObject(star, stars); + + //Remove the star from the sprites array + removeObject(star, sprites); + + //Reduce the loop counter by 1 to compensate + //for the removed element + i--; + } + } +} + +function fireBullet() +{ + //Create a bullet sprite + var bullet = Object.create(spriteObject); + bullet.sourceX = 384; + bullet.sourceWidth = 20; + bullet.sourceHeight = 20; + bullet.width = 20; + bullet.height = 20; + + //Center it over the bee + var radius = 32; + bullet.x = bee.x + radius + (radius * Math.cos(beeAngle)); + bullet.y = bee.y + radius + (radius * Math.sin(beeAngle)); + + //Set its speed + bullet.vx = Math.cos(beeAngle) * 7; + bullet.vy = Math.sin(beeAngle) * 7; + + //Push the bullet into both the sprites and bullets arrays + sprites.push(bullet); + bullets.push(bullet); +} + +function removeObject(objectToRemove, array) +{ + var i = array.indexOf(objectToRemove); + if (i !== -1) + { + array.splice(i, 1); + } +} + +function update() +{ + //The animation loop + requestAnimationFrame(update, canvas); + + //Change what the game is doing based on the game state + switch(gameState) + { + case LOADING: + console.log("loading..."); + break; + + case PLAYING: + playGame(); + break; + } + + //Render the game + render(); +} + +function loadHandler() +{ + assetsLoaded++; + if(assetsLoaded === assetsToLoad.length) + { + gameState = PLAYING; + } +} + +function render() +{ + drawingSurface.clearRect(0, 0, canvas.width, canvas.height); + + //Display the sprites + if(sprites.length !== 0) + { + for(var i = 0; i < sprites.length; i++) + { + var sprite = sprites[i]; + + //Save the current state of the drawing surface before it's rotated + drawingSurface.save(); + + //Rotate the canvas + drawingSurface.translate + ( + Math.floor(sprite.x + sprite.halfWidth()), + Math.floor(sprite.y + sprite.halfHeight()) + ); + drawingSurface.rotate(sprite.rotation * Math.PI / 180); + + if(sprite.visible) + { + drawingSurface.drawImage + ( + image, + sprite.sourceX, sprite.sourceY, + sprite.sourceWidth, sprite.sourceHeight, + Math.floor(-sprite.halfWidth()), Math.floor(-sprite.halfHeight()), + sprite.width, sprite.height + ); + } + + //Restore the drawing surface to its + //state before it was rotated + drawingSurface.restore(); + } + } + + //Display the game messages + if(messages.length !== 0) + { + for(var i = 0; i < messages.length; i++) + { + var message = messages[i]; + if(message.visible) + { + drawingSurface.font = message.font; + drawingSurface.fillStyle = message.fillStyle; + drawingSurface.textBaseline = message.textBaseline; + drawingSurface.fillText(message.text, message.x, message.y); + } + } + } +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter12/killerBeePandemonium/src/objects.js b/Code - Published/chapter12/killerBeePandemonium/src/objects.js new file mode 100644 index 0000000..0376953 --- /dev/null +++ b/Code - Published/chapter12/killerBeePandemonium/src/objects.js @@ -0,0 +1,56 @@ +//--- The sprite object + +var spriteObject = +{ + sourceX: 0, + sourceY: 0, + sourceWidth: 64, + sourceHeight: 64, + width: 64, + height: 64, + x: 0, + y: 0, + vx: 0, + vy: 0, + visible: true, + rotation: 0, + + //Physics properties + accelerationX: 0, + accelerationY: 0, + speed: 3, + rotationSpeed: 0.3, + speedLimit: 5, + friction: 0.96, + + //Getters + centerX: function() + { + return this.x + (this.width / 2); + }, + centerY: function() + { + return this.y + (this.height / 2); + }, + halfWidth: function() + { + return this.width / 2; + }, + halfHeight: function() + { + return this.height / 2; + } +}; + +//--- The message object + +var messageObject = +{ + x: 0, + y: 0, + visible: true, + text: "Message", + font: "normal bold 20px Helvetica", + fillStyle: "red", + textBaseline: "top" +}; \ No newline at end of file diff --git a/Code - Published/chapter12/killerBeePandemonium/src/requestAnimationFramePolyfill.js b/Code - Published/chapter12/killerBeePandemonium/src/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter12/killerBeePandemonium/src/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter12/mouse/beeFollowMouse.html b/Code - Published/chapter12/mouse/beeFollowMouse.html new file mode 100644 index 0000000..e6371eb --- /dev/null +++ b/Code - Published/chapter12/mouse/beeFollowMouse.html @@ -0,0 +1,229 @@ + + +Bee Follow + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/mouse/beeRotateAndShootMouse.html b/Code - Published/chapter12/mouse/beeRotateAndShootMouse.html new file mode 100644 index 0000000..447b743 --- /dev/null +++ b/Code - Published/chapter12/mouse/beeRotateAndShootMouse.html @@ -0,0 +1,297 @@ + + +Bee Rotate and Shoot + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/mouse/buttonFairyMouse.html b/Code - Published/chapter12/mouse/buttonFairyMouse.html new file mode 100644 index 0000000..5211dfe --- /dev/null +++ b/Code - Published/chapter12/mouse/buttonFairyMouse.html @@ -0,0 +1,258 @@ + + +Button Fairy + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/mouse/carMouse.html b/Code - Published/chapter12/mouse/carMouse.html new file mode 100644 index 0000000..3020d2a --- /dev/null +++ b/Code - Published/chapter12/mouse/carMouse.html @@ -0,0 +1,239 @@ + + +Car + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/mouse/clickToMove.html b/Code - Published/chapter12/mouse/clickToMove.html new file mode 100644 index 0000000..ac5ac33 --- /dev/null +++ b/Code - Published/chapter12/mouse/clickToMove.html @@ -0,0 +1,174 @@ + + +Click to move + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/mouse/easingMouse.html b/Code - Published/chapter12/mouse/easingMouse.html new file mode 100644 index 0000000..29c3cb3 --- /dev/null +++ b/Code - Published/chapter12/mouse/easingMouse.html @@ -0,0 +1,175 @@ + + +Easing + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/mouse/followMouse.html b/Code - Published/chapter12/mouse/followMouse.html new file mode 100644 index 0000000..5bd894d --- /dev/null +++ b/Code - Published/chapter12/mouse/followMouse.html @@ -0,0 +1,163 @@ + + +Follow + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/mouse/platformsMouse.html b/Code - Published/chapter12/mouse/platformsMouse.html new file mode 100644 index 0000000..590553d --- /dev/null +++ b/Code - Published/chapter12/mouse/platformsMouse.html @@ -0,0 +1,357 @@ + + +Platforms + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/mouse/requestAnimationFramePolyfill.js b/Code - Published/chapter12/mouse/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter12/mouse/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter12/mouse/rocketMouse.html b/Code - Published/chapter12/mouse/rocketMouse.html new file mode 100644 index 0000000..b112c85 --- /dev/null +++ b/Code - Published/chapter12/mouse/rocketMouse.html @@ -0,0 +1,301 @@ + + +Rocket + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/touch/.DS_Store b/Code - Published/chapter12/touch/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/Code - Published/chapter12/touch/.DS_Store differ diff --git a/Code - Published/chapter12/touch/beeFollowTouch.html b/Code - Published/chapter12/touch/beeFollowTouch.html new file mode 100644 index 0000000..462018b --- /dev/null +++ b/Code - Published/chapter12/touch/beeFollowTouch.html @@ -0,0 +1,231 @@ + + + +Bee Follow + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/touch/beeRotateAndShootTouch.html b/Code - Published/chapter12/touch/beeRotateAndShootTouch.html new file mode 100644 index 0000000..6cb16dd --- /dev/null +++ b/Code - Published/chapter12/touch/beeRotateAndShootTouch.html @@ -0,0 +1,299 @@ + + + +Bee Rotate and Shoot + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/touch/buttonFairyTouch.html b/Code - Published/chapter12/touch/buttonFairyTouch.html new file mode 100644 index 0000000..cf206b3 --- /dev/null +++ b/Code - Published/chapter12/touch/buttonFairyTouch.html @@ -0,0 +1,329 @@ + + + +Button Fairy + + + +
+ + +
+ + + \ No newline at end of file diff --git a/Code - Published/chapter12/touch/carTouch.html b/Code - Published/chapter12/touch/carTouch.html new file mode 100644 index 0000000..75961d0 --- /dev/null +++ b/Code - Published/chapter12/touch/carTouch.html @@ -0,0 +1,252 @@ + + + +Car + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/touch/easingTouch.html b/Code - Published/chapter12/touch/easingTouch.html new file mode 100644 index 0000000..0c0cc26 --- /dev/null +++ b/Code - Published/chapter12/touch/easingTouch.html @@ -0,0 +1,175 @@ + + + +Easing + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/touch/followTouch.html b/Code - Published/chapter12/touch/followTouch.html new file mode 100644 index 0000000..f4f4b56 --- /dev/null +++ b/Code - Published/chapter12/touch/followTouch.html @@ -0,0 +1,163 @@ + + + +Follow + + + + + \ No newline at end of file diff --git a/Code - Published/chapter12/touch/platformsTouch.html b/Code - Published/chapter12/touch/platformsTouch.html new file mode 100644 index 0000000..b5e08ab --- /dev/null +++ b/Code - Published/chapter12/touch/platformsTouch.html @@ -0,0 +1,418 @@ + + + +Platforms + + + +
+ + +
+ + + \ No newline at end of file diff --git a/Code - Published/chapter12/touch/requestAnimationFramePolyfill.js b/Code - Published/chapter12/touch/requestAnimationFramePolyfill.js new file mode 100644 index 0000000..c01d857 --- /dev/null +++ b/Code - Published/chapter12/touch/requestAnimationFramePolyfill.js @@ -0,0 +1,36 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller +// fixes from Paul Irish and Tino Zijdel + +(function() { + +var lastTime = 0; +var vendors = ['ms', 'moz', 'webkit', 'o']; + +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) +{ + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + window[vendors[x]+'CancelRequestAnimationFrame']; +} + +if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +{ + window.cancelAnimationFrame = function(id) + { + clearTimeout(id); + }; +} + +}()); \ No newline at end of file diff --git a/Code - Published/chapter12/touch/rocketTouch.html b/Code - Published/chapter12/touch/rocketTouch.html new file mode 100644 index 0000000..2c2b6aa --- /dev/null +++ b/Code - Published/chapter12/touch/rocketTouch.html @@ -0,0 +1,362 @@ + + + +Rocket + +
+ + + +
+ + + \ No newline at end of file diff --git a/Code - Published/chapter12/touch/tapToMove.html b/Code - Published/chapter12/touch/tapToMove.html new file mode 100644 index 0000000..31d7dce --- /dev/null +++ b/Code - Published/chapter12/touch/tapToMove.html @@ -0,0 +1,174 @@ + + + +Tap to move + + + + + \ No newline at end of file diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..36c2df9 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,27 @@ +Freeware License, some rights reserved + +Copyright (c) 2012 Rex van der Spuy + +Permission is hereby granted, free of charge, to anyone obtaining a copy +of this software and associated documentation files (the "Software"), +to work with the Software within the limits of freeware distribution and fair use. +This includes the rights to use, copy, and modify the Software for personal use. +Users are also allowed and encouraged to submit corrections and modifications +to the Software for the benefit of other users. + +It is not allowed to reuse, modify, or redistribute the Software for +commercial use in any way, or for a users educational materials such as books +or blog articles without prior permission from the copyright holder. + +The above copyright notice and this permission notice need to be included +in all copies or substantial portions of the software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS OR APRESS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..6183935 --- /dev/null +++ b/README.md @@ -0,0 +1,15 @@ +#Apress Source Code + +This repository accompanies [*Foundation Game Design with HTML5 and JavaScript*](http://www.apress.com/9781430247166) by Rex van der Spuy (Apress, 2012). + +![Cover image](9781430247166.jpg) + +Download the files as a zip using the green button, or clone the repository to your machine using Git. + +##Releases + +Release v1.0 corresponds to the code in the published book, without corrections or updates. + +##Contributions + +See the file Contributing.md for more information on how you can contribute to this repository. diff --git a/__MACOSX/Code - Published/._.DS_Store b/__MACOSX/Code - Published/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter01/._.DS_Store b/__MACOSX/Code - Published/chapter01/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter01/absolutePositioning/._absolutePositioning.html b/__MACOSX/Code - Published/chapter01/absolutePositioning/._absolutePositioning.html new file mode 100644 index 0000000..0c86c0e Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/absolutePositioning/._absolutePositioning.html differ diff --git a/__MACOSX/Code - Published/chapter01/backgroundImages/._backgroundImages.html b/__MACOSX/Code - Published/chapter01/backgroundImages/._backgroundImages.html new file mode 100644 index 0000000..d101244 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/backgroundImages/._backgroundImages.html differ diff --git a/__MACOSX/Code - Published/chapter01/backgroundImages/._cat.png b/__MACOSX/Code - Published/chapter01/backgroundImages/._cat.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/backgroundImages/._cat.png differ diff --git a/__MACOSX/Code - Published/chapter01/class/._class.html b/__MACOSX/Code - Published/chapter01/class/._class.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/class/._class.html differ diff --git a/__MACOSX/Code - Published/chapter01/classAndId/._classAndId.html b/__MACOSX/Code - Published/chapter01/classAndId/._classAndId.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/classAndId/._classAndId.html differ diff --git a/__MACOSX/Code - Published/chapter01/floatingElements/._cat.png b/__MACOSX/Code - Published/chapter01/floatingElements/._cat.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/floatingElements/._cat.png differ diff --git a/__MACOSX/Code - Published/chapter01/floatingElements/._floatingElements.html b/__MACOSX/Code - Published/chapter01/floatingElements/._floatingElements.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/floatingElements/._floatingElements.html differ diff --git a/__MACOSX/Code - Published/chapter01/floatingElements/._hedgehog.png b/__MACOSX/Code - Published/chapter01/floatingElements/._hedgehog.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/floatingElements/._hedgehog.png differ diff --git a/__MACOSX/Code - Published/chapter01/floatingElements/._tiger.png b/__MACOSX/Code - Published/chapter01/floatingElements/._tiger.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/floatingElements/._tiger.png differ diff --git a/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._.DS_Store b/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._cat.png b/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._cat.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._cat.png differ diff --git a/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._floatingElementsFinished.html b/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._floatingElementsFinished.html new file mode 100644 index 0000000..0c86c0e Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._floatingElementsFinished.html differ diff --git a/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._hedgehog.png b/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._hedgehog.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._hedgehog.png differ diff --git a/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._tiger.png b/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._tiger.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/floatingElementsFinished/._tiger.png differ diff --git a/__MACOSX/Code - Published/chapter01/id/._id.html b/__MACOSX/Code - Published/chapter01/id/._id.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/id/._id.html differ diff --git a/__MACOSX/Code - Published/chapter01/organizingFiles/._newStyle.css b/__MACOSX/Code - Published/chapter01/organizingFiles/._newStyle.css new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/organizingFiles/._newStyle.css differ diff --git a/__MACOSX/Code - Published/chapter01/organizingFiles/._simpleDocument.html b/__MACOSX/Code - Published/chapter01/organizingFiles/._simpleDocument.html new file mode 100644 index 0000000..16c9f84 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/organizingFiles/._simpleDocument.html differ diff --git a/__MACOSX/Code - Published/chapter01/projectFolder/._.DS_Store b/__MACOSX/Code - Published/chapter01/projectFolder/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/projectFolder/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter01/projectFolder/images/._.DS_Store b/__MACOSX/Code - Published/chapter01/projectFolder/images/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/projectFolder/images/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter01/projectFolder/images/._photo.jpg b/__MACOSX/Code - Published/chapter01/projectFolder/images/._photo.jpg new file mode 100644 index 0000000..5d67066 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/projectFolder/images/._photo.jpg differ diff --git a/__MACOSX/Code - Published/chapter01/projectFolder/src/._.DS_Store b/__MACOSX/Code - Published/chapter01/projectFolder/src/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/projectFolder/src/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter01/projectFolder/src/._main.html b/__MACOSX/Code - Published/chapter01/projectFolder/src/._main.html new file mode 100644 index 0000000..f7eee03 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/projectFolder/src/._main.html differ diff --git a/__MACOSX/Code - Published/chapter01/projectFolder/src/._style.css b/__MACOSX/Code - Published/chapter01/projectFolder/src/._style.css new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/projectFolder/src/._style.css differ diff --git a/__MACOSX/Code - Published/chapter01/simpleWebPage/._ocean.jpg b/__MACOSX/Code - Published/chapter01/simpleWebPage/._ocean.jpg new file mode 100644 index 0000000..5d67066 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/simpleWebPage/._ocean.jpg differ diff --git a/__MACOSX/Code - Published/chapter01/simpleWebPage/._simpleWebpage.html b/__MACOSX/Code - Published/chapter01/simpleWebPage/._simpleWebpage.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/simpleWebPage/._simpleWebpage.html differ diff --git a/__MACOSX/Code - Published/chapter01/styledWebPage/._ocean.jpg b/__MACOSX/Code - Published/chapter01/styledWebPage/._ocean.jpg new file mode 100644 index 0000000..5d67066 Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/styledWebPage/._ocean.jpg differ diff --git a/__MACOSX/Code - Published/chapter01/styledWebPage/._styledWebpage.html b/__MACOSX/Code - Published/chapter01/styledWebPage/._styledWebpage.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter01/styledWebPage/._styledWebpage.html differ diff --git a/__MACOSX/Code - Published/chapter02/._.DS_Store b/__MACOSX/Code - Published/chapter02/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter02/._01_displayConsoleOutput.html b/__MACOSX/Code - Published/chapter02/._01_displayConsoleOutput.html new file mode 100644 index 0000000..14f037e Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._01_displayConsoleOutput.html differ diff --git a/__MACOSX/Code - Published/chapter02/._02_numberVariables.html b/__MACOSX/Code - Published/chapter02/._02_numberVariables.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._02_numberVariables.html differ diff --git a/__MACOSX/Code - Published/chapter02/._03_addingNumbers.html b/__MACOSX/Code - Published/chapter02/._03_addingNumbers.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._03_addingNumbers.html differ diff --git a/__MACOSX/Code - Published/chapter02/._04_mathmaticalOperations.html b/__MACOSX/Code - Published/chapter02/._04_mathmaticalOperations.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._04_mathmaticalOperations.html differ diff --git a/__MACOSX/Code - Published/chapter02/._05_stringVariables.html b/__MACOSX/Code - Published/chapter02/._05_stringVariables.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._05_stringVariables.html differ diff --git a/__MACOSX/Code - Published/chapter02/._06_combiningStrings.html b/__MACOSX/Code - Published/chapter02/._06_combiningStrings.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._06_combiningStrings.html differ diff --git a/__MACOSX/Code - Published/chapter02/._07_trueAndFalse.html b/__MACOSX/Code - Published/chapter02/._07_trueAndFalse.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._07_trueAndFalse.html differ diff --git a/__MACOSX/Code - Published/chapter02/._08_comparingValues.html b/__MACOSX/Code - Published/chapter02/._08_comparingValues.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._08_comparingValues.html differ diff --git a/__MACOSX/Code - Published/chapter02/._09_greaterOrLesser.html b/__MACOSX/Code - Published/chapter02/._09_greaterOrLesser.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._09_greaterOrLesser.html differ diff --git a/__MACOSX/Code - Published/chapter02/._10_comparingStrings.html b/__MACOSX/Code - Published/chapter02/._10_comparingStrings.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._10_comparingStrings.html differ diff --git a/__MACOSX/Code - Published/chapter02/._11_compoundIfStatements.html b/__MACOSX/Code - Published/chapter02/._11_compoundIfStatements.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._11_compoundIfStatements.html differ diff --git a/__MACOSX/Code - Published/chapter02/._12_switchStatement.html b/__MACOSX/Code - Published/chapter02/._12_switchStatement.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._12_switchStatement.html differ diff --git a/__MACOSX/Code - Published/chapter02/._13_usingAnd.html b/__MACOSX/Code - Published/chapter02/._13_usingAnd.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._13_usingAnd.html differ diff --git a/__MACOSX/Code - Published/chapter02/._14_usingOr.html b/__MACOSX/Code - Published/chapter02/._14_usingOr.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._14_usingOr.html differ diff --git a/__MACOSX/Code - Published/chapter02/._15_functions.html b/__MACOSX/Code - Published/chapter02/._15_functions.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._15_functions.html differ diff --git a/__MACOSX/Code - Published/chapter02/._16_functionsWithArguments.html b/__MACOSX/Code - Published/chapter02/._16_functionsWithArguments.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._16_functionsWithArguments.html differ diff --git a/__MACOSX/Code - Published/chapter02/._17_functionsWithMultipleArguments.html b/__MACOSX/Code - Published/chapter02/._17_functionsWithMultipleArguments.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._17_functionsWithMultipleArguments.html differ diff --git a/__MACOSX/Code - Published/chapter02/._18_calculator.html b/__MACOSX/Code - Published/chapter02/._18_calculator.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._18_calculator.html differ diff --git a/__MACOSX/Code - Published/chapter02/._19_returnFunctionCalculator.html b/__MACOSX/Code - Published/chapter02/._19_returnFunctionCalculator.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._19_returnFunctionCalculator.html differ diff --git a/__MACOSX/Code - Published/chapter02/._20_returningValues.html b/__MACOSX/Code - Published/chapter02/._20_returningValues.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._20_returningValues.html differ diff --git a/__MACOSX/Code - Published/chapter02/._21_functionExpressions.html b/__MACOSX/Code - Published/chapter02/._21_functionExpressions.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._21_functionExpressions.html differ diff --git a/__MACOSX/Code - Published/chapter02/._22_displayHTMLText.html b/__MACOSX/Code - Published/chapter02/._22_displayHTMLText.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._22_displayHTMLText.html differ diff --git a/__MACOSX/Code - Published/chapter02/._23_changeCSS.html b/__MACOSX/Code - Published/chapter02/._23_changeCSS.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._23_changeCSS.html differ diff --git a/__MACOSX/Code - Published/chapter02/._24_creatingHTMLElements.html b/__MACOSX/Code - Published/chapter02/._24_creatingHTMLElements.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._24_creatingHTMLElements.html differ diff --git a/__MACOSX/Code - Published/chapter02/._25_eventListener.html b/__MACOSX/Code - Published/chapter02/._25_eventListener.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._25_eventListener.html differ diff --git a/__MACOSX/Code - Published/chapter02/._26_removeEventListener.html b/__MACOSX/Code - Published/chapter02/._26_removeEventListener.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._26_removeEventListener.html differ diff --git a/__MACOSX/Code - Published/chapter02/._27_counting.html b/__MACOSX/Code - Published/chapter02/._27_counting.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._27_counting.html differ diff --git a/__MACOSX/Code - Published/chapter02/._28_enterKey.html b/__MACOSX/Code - Published/chapter02/._28_enterKey.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._28_enterKey.html differ diff --git a/__MACOSX/Code - Published/chapter02/._29_enteringText.html b/__MACOSX/Code - Published/chapter02/._29_enteringText.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/._29_enteringText.html differ diff --git a/__MACOSX/Code - Published/chapter02/organizingFiles/._.DS_Store b/__MACOSX/Code - Published/chapter02/organizingFiles/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/organizingFiles/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter02/organizingFiles/._main.html b/__MACOSX/Code - Published/chapter02/organizingFiles/._main.html new file mode 100644 index 0000000..14f037e Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/organizingFiles/._main.html differ diff --git a/__MACOSX/Code - Published/chapter02/organizingFiles/._program.js b/__MACOSX/Code - Published/chapter02/organizingFiles/._program.js new file mode 100644 index 0000000..14f037e Binary files /dev/null and b/__MACOSX/Code - Published/chapter02/organizingFiles/._program.js differ diff --git a/__MACOSX/Code - Published/chapter03/._.DS_Store b/__MACOSX/Code - Published/chapter03/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter03/._customButton.html b/__MACOSX/Code - Published/chapter03/._customButton.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/._customButton.html differ diff --git a/__MACOSX/Code - Published/chapter03/._numberGameWithButton.html b/__MACOSX/Code - Published/chapter03/._numberGameWithButton.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/._numberGameWithButton.html differ diff --git a/__MACOSX/Code - Published/chapter03/._numberGame_1.html b/__MACOSX/Code - Published/chapter03/._numberGame_1.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/._numberGame_1.html differ diff --git a/__MACOSX/Code - Published/chapter03/._numberGame_2.html b/__MACOSX/Code - Published/chapter03/._numberGame_2.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/._numberGame_2.html differ diff --git a/__MACOSX/Code - Published/chapter03/._numberGame_3.html b/__MACOSX/Code - Published/chapter03/._numberGame_3.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/._numberGame_3.html differ diff --git a/__MACOSX/Code - Published/chapter03/._numberGame_4.html b/__MACOSX/Code - Published/chapter03/._numberGame_4.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/._numberGame_4.html differ diff --git a/__MACOSX/Code - Published/chapter03/._randomNumbers.html b/__MACOSX/Code - Published/chapter03/._randomNumbers.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/._randomNumbers.html differ diff --git a/__MACOSX/Code - Published/chapter03/._usingParseint.html b/__MACOSX/Code - Published/chapter03/._usingParseint.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/._usingParseint.html differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttack/._.DS_Store b/__MACOSX/Code - Published/chapter03/alienAttack/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttack/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttack/images/._alien.png b/__MACOSX/Code - Published/chapter03/alienAttack/images/._alien.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttack/images/._alien.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttack/images/._background.png b/__MACOSX/Code - Published/chapter03/alienAttack/images/._background.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttack/images/._background.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttack/images/._cannon.png b/__MACOSX/Code - Published/chapter03/alienAttack/images/._cannon.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttack/images/._cannon.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttack/images/._missile.png b/__MACOSX/Code - Published/chapter03/alienAttack/images/._missile.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttack/images/._missile.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttack/src/._alienAttack.html b/__MACOSX/Code - Published/chapter03/alienAttack/src/._alienAttack.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttack/src/._alienAttack.html differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/._.DS_Store b/__MACOSX/Code - Published/chapter03/alienAttackFinished/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/fonts/._.DS_Store b/__MACOSX/Code - Published/chapter03/alienAttackFinished/fonts/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/fonts/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/fonts/._emulogic.ttf b/__MACOSX/Code - Published/chapter03/alienAttackFinished/fonts/._emulogic.ttf new file mode 100644 index 0000000..4832eca Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/fonts/._emulogic.ttf differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._alien.png b/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._alien.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._alien.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._background.png b/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._background.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._background.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._cannon.png b/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._cannon.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._cannon.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._explosion.png b/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._explosion.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._explosion.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._missile.png b/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._missile.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/images/._missile.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/src/._alienAttack.css b/__MACOSX/Code - Published/chapter03/alienAttackFinished/src/._alienAttack.css new file mode 100644 index 0000000..05c013d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/src/._alienAttack.css differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/src/._alienAttackFinished.html b/__MACOSX/Code - Published/chapter03/alienAttackFinished/src/._alienAttackFinished.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/src/._alienAttackFinished.html differ diff --git a/__MACOSX/Code - Published/chapter03/alienAttackFinished/src/._emulogic.ttf b/__MACOSX/Code - Published/chapter03/alienAttackFinished/src/._emulogic.ttf new file mode 100644 index 0000000..4832eca Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienAttackFinished/src/._emulogic.ttf differ diff --git a/__MACOSX/Code - Published/chapter03/alienExplosion/._.DS_Store b/__MACOSX/Code - Published/chapter03/alienExplosion/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienExplosion/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter03/alienExplosion/images/._alien.png b/__MACOSX/Code - Published/chapter03/alienExplosion/images/._alien.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienExplosion/images/._alien.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienExplosion/images/._background.png b/__MACOSX/Code - Published/chapter03/alienExplosion/images/._background.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienExplosion/images/._background.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienExplosion/images/._cannon.png b/__MACOSX/Code - Published/chapter03/alienExplosion/images/._cannon.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienExplosion/images/._cannon.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienExplosion/images/._explosion.png b/__MACOSX/Code - Published/chapter03/alienExplosion/images/._explosion.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienExplosion/images/._explosion.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienExplosion/images/._missile.png b/__MACOSX/Code - Published/chapter03/alienExplosion/images/._missile.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienExplosion/images/._missile.png differ diff --git a/__MACOSX/Code - Published/chapter03/alienExplosion/src/._alienExplosion.html b/__MACOSX/Code - Published/chapter03/alienExplosion/src/._alienExplosion.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/alienExplosion/src/._alienExplosion.html differ diff --git a/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/._.DS_Store b/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/images/._arrow.png b/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/images/._arrow.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/images/._arrow.png differ diff --git a/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/images/._scale.png b/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/images/._scale.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/images/._scale.png differ diff --git a/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/src/._numberGameWithGraphics.html b/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/src/._numberGameWithGraphics.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter03/numberGameWithGraphics/src/._numberGameWithGraphics.html differ diff --git a/__MACOSX/Code - Published/chapter04/._.DS_Store b/__MACOSX/Code - Published/chapter04/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter04/._arrayLoop.html b/__MACOSX/Code - Published/chapter04/._arrayLoop.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._arrayLoop.html differ diff --git a/__MACOSX/Code - Published/chapter04/._arraySearch.html b/__MACOSX/Code - Published/chapter04/._arraySearch.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._arraySearch.html differ diff --git a/__MACOSX/Code - Published/chapter04/._artificialLife.html b/__MACOSX/Code - Published/chapter04/._artificialLife.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._artificialLife.html differ diff --git a/__MACOSX/Code - Published/chapter04/._basicArray.html b/__MACOSX/Code - Published/chapter04/._basicArray.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._basicArray.html differ diff --git a/__MACOSX/Code - Published/chapter04/._database.html b/__MACOSX/Code - Published/chapter04/._database.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._database.html differ diff --git a/__MACOSX/Code - Published/chapter04/._forLoop.html b/__MACOSX/Code - Published/chapter04/._forLoop.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._forLoop.html differ diff --git a/__MACOSX/Code - Published/chapter04/._usingIndexOf.html b/__MACOSX/Code - Published/chapter04/._usingIndexOf.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._usingIndexOf.html differ diff --git a/__MACOSX/Code - Published/chapter04/._usingPop.html b/__MACOSX/Code - Published/chapter04/._usingPop.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._usingPop.html differ diff --git a/__MACOSX/Code - Published/chapter04/._usingPush.html b/__MACOSX/Code - Published/chapter04/._usingPush.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._usingPush.html differ diff --git a/__MACOSX/Code - Published/chapter04/._usingSplice.html b/__MACOSX/Code - Published/chapter04/._usingSplice.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/._usingSplice.html differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/._.DS_Store b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/fonts/._.DS_Store b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/fonts/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/fonts/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/fonts/._Merriweather-Bold.ttf b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/fonts/._Merriweather-Bold.ttf new file mode 100644 index 0000000..0b301c0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/fonts/._Merriweather-Bold.ttf differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/fonts/._Merriweather.ttf b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/fonts/._Merriweather.ttf new file mode 100644 index 0000000..0b301c0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/fonts/._Merriweather.ttf differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._.DS_Store b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._bench.png b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._bench.png new file mode 100644 index 0000000..1073ea4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._bench.png differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._cottage.png b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._cottage.png new file mode 100644 index 0000000..1073ea4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._cottage.png differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._dragon.png b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._dragon.png new file mode 100644 index 0000000..1073ea4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._dragon.png differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._gate.png b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._gate.png new file mode 100644 index 0000000..1073ea4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._gate.png differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._glade.png b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._glade.png new file mode 100644 index 0000000..1073ea4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._glade.png differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._keep.png b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._keep.png new file mode 100644 index 0000000..1073ea4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._keep.png differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._paper.png b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._paper.png new file mode 100644 index 0000000..67b08cf Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._paper.png differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._path.png b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._path.png new file mode 100644 index 0000000..1073ea4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._path.png differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._river.png b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._river.png new file mode 100644 index 0000000..1073ea4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._river.png differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._well.png b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._well.png new file mode 100644 index 0000000..1073ea4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/images/._well.png differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._.DS_Store b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._forestOfLyrica.html b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._forestOfLyrica.html new file mode 100644 index 0000000..7114b8d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._forestOfLyrica.html differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica.css b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica.css new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica.css differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica1.html b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica1.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica1.html differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica2.html b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica2.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica2.html differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica3.html b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica3.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica3.html differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica4.html b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica4.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica4.html differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica5.html b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica5.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica5.html differ diff --git a/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica6.html b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica6.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter04/Forest of Lyrica/src/._lyrica6.html differ diff --git a/__MACOSX/Code - Published/chapter05/._.DS_Store b/__MACOSX/Code - Published/chapter05/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter05/._looping2DArrays.html b/__MACOSX/Code - Published/chapter05/._looping2DArrays.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/._looping2DArrays.html differ diff --git a/__MACOSX/Code - Published/chapter05/._loopingThroughObjects.html b/__MACOSX/Code - Published/chapter05/._loopingThroughObjects.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/._loopingThroughObjects.html differ diff --git a/__MACOSX/Code - Published/chapter05/._twoDimensionalArrays.html b/__MACOSX/Code - Published/chapter05/._twoDimensionalArrays.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/._twoDimensionalArrays.html differ diff --git a/__MACOSX/Code - Published/chapter05/._visualizing2DArrays.html b/__MACOSX/Code - Published/chapter05/._visualizing2DArrays.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/._visualizing2DArrays.html differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/._.DS_Store b/__MACOSX/Code - Published/chapter05/islandAdventure/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/fonts/._.DS_Store b/__MACOSX/Code - Published/chapter05/islandAdventure/fonts/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/fonts/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/fonts/._PiratesWriters.ttf b/__MACOSX/Code - Published/chapter05/islandAdventure/fonts/._PiratesWriters.ttf new file mode 100644 index 0000000..e9396b4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/fonts/._PiratesWriters.ttf differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/images/._.DS_Store b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/images/._background.png b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._background.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._background.png differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/images/._home.png b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._home.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._home.png differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/images/._island.png b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._island.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._island.png differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/images/._monster.png b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._monster.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._monster.png differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/images/._pirate.png b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._pirate.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._pirate.png differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/images/._ship.png b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._ship.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._ship.png differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/images/._water.png b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._water.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/images/._water.png differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure1.html b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure1.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure1.html differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure2.html b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure2.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure2.html differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure3.html b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure3.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure3.html differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure4.html b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure4.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure4.html differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure5.html b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure5.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure5.html differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure6.html b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure6.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventure6.html differ diff --git a/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventureFinished.html b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventureFinished.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter05/islandAdventure/src/._islandAdventureFinished.html differ diff --git a/__MACOSX/Code - Published/chapter06/._.DS_Store b/__MACOSX/Code - Published/chapter06/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter06/._10_stateChangeTimer.html b/__MACOSX/Code - Published/chapter06/._10_stateChangeTimer.html new file mode 100644 index 0000000..60f1adf Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._10_stateChangeTimer.html differ diff --git a/__MACOSX/Code - Published/chapter06/._11_animationObject.html b/__MACOSX/Code - Published/chapter06/._11_animationObject.html new file mode 100644 index 0000000..dc2cebf Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._11_animationObject.html differ diff --git a/__MACOSX/Code - Published/chapter06/._12_tilesheetWithRows.html b/__MACOSX/Code - Published/chapter06/._12_tilesheetWithRows.html new file mode 100644 index 0000000..d6441f9 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._12_tilesheetWithRows.html differ diff --git a/__MACOSX/Code - Published/chapter06/._13_animationLoop.html b/__MACOSX/Code - Published/chapter06/._13_animationLoop.html new file mode 100644 index 0000000..ea9f11e Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._13_animationLoop.html differ diff --git a/__MACOSX/Code - Published/chapter06/._14_randomAnimation.html b/__MACOSX/Code - Published/chapter06/._14_randomAnimation.html new file mode 100644 index 0000000..733808e Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._14_randomAnimation.html differ diff --git a/__MACOSX/Code - Published/chapter06/._1_displayingWithCanvas.html b/__MACOSX/Code - Published/chapter06/._1_displayingWithCanvas.html new file mode 100644 index 0000000..85198b4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._1_displayingWithCanvas.html differ diff --git a/__MACOSX/Code - Published/chapter06/._2_robotObject.html b/__MACOSX/Code - Published/chapter06/._2_robotObject.html new file mode 100644 index 0000000..96e15ad Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._2_robotObject.html differ diff --git a/__MACOSX/Code - Published/chapter06/._3_loopingThroughObjects.html b/__MACOSX/Code - Published/chapter06/._3_loopingThroughObjects.html new file mode 100644 index 0000000..381030a Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._3_loopingThroughObjects.html differ diff --git a/__MACOSX/Code - Published/chapter06/._4_changingStates.html b/__MACOSX/Code - Published/chapter06/._4_changingStates.html new file mode 100644 index 0000000..0b6e6af Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._4_changingStates.html differ diff --git a/__MACOSX/Code - Published/chapter06/._5_renderingStates.html b/__MACOSX/Code - Published/chapter06/._5_renderingStates.html new file mode 100644 index 0000000..5f88aa4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._5_renderingStates.html differ diff --git a/__MACOSX/Code - Published/chapter06/._6_usingSetTimeout.html b/__MACOSX/Code - Published/chapter06/._6_usingSetTimeout.html new file mode 100644 index 0000000..41a6c4f Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._6_usingSetTimeout.html differ diff --git a/__MACOSX/Code - Published/chapter06/._7_usingSetInterval.html b/__MACOSX/Code - Published/chapter06/._7_usingSetInterval.html new file mode 100644 index 0000000..6ae1464 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._7_usingSetInterval.html differ diff --git a/__MACOSX/Code - Published/chapter06/._8_usingClearInterval.html b/__MACOSX/Code - Published/chapter06/._8_usingClearInterval.html new file mode 100644 index 0000000..f3d8d74 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._8_usingClearInterval.html differ diff --git a/__MACOSX/Code - Published/chapter06/._9_timerObject.html b/__MACOSX/Code - Published/chapter06/._9_timerObject.html new file mode 100644 index 0000000..428596a Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._9_timerObject.html differ diff --git a/__MACOSX/Code - Published/chapter06/._frames.png b/__MACOSX/Code - Published/chapter06/._frames.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._frames.png differ diff --git a/__MACOSX/Code - Published/chapter06/._monster.png b/__MACOSX/Code - Published/chapter06/._monster.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._monster.png differ diff --git a/__MACOSX/Code - Published/chapter06/._monsterStates.png b/__MACOSX/Code - Published/chapter06/._monsterStates.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._monsterStates.png differ diff --git a/__MACOSX/Code - Published/chapter06/._monsterTileSheet.png b/__MACOSX/Code - Published/chapter06/._monsterTileSheet.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/._monsterTileSheet.png differ diff --git a/__MACOSX/Code - Published/chapter06/monsterSmash/._.DS_Store b/__MACOSX/Code - Published/chapter06/monsterSmash/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/monsterSmash/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter06/monsterSmash/images/._.DS_Store b/__MACOSX/Code - Published/chapter06/monsterSmash/images/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/monsterSmash/images/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter06/monsterSmash/images/._monsterTileSheet.png b/__MACOSX/Code - Published/chapter06/monsterSmash/images/._monsterTileSheet.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/monsterSmash/images/._monsterTileSheet.png differ diff --git a/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmash.css b/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmash.css new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmash.css differ diff --git a/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmash1.html b/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmash1.html new file mode 100644 index 0000000..a9d75be Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmash1.html differ diff --git a/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmash2.html b/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmash2.html new file mode 100644 index 0000000..bdc9d5c Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmash2.html differ diff --git a/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmashFinished.html b/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmashFinished.html new file mode 100644 index 0000000..cab9a07 Binary files /dev/null and b/__MACOSX/Code - Published/chapter06/monsterSmash/src/._monsterSmashFinished.html differ diff --git a/__MACOSX/Code - Published/chapter07/._.DS_Store b/__MACOSX/Code - Published/chapter07/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter07/._10_screenBoundaries.html b/__MACOSX/Code - Published/chapter07/._10_screenBoundaries.html new file mode 100644 index 0000000..41a6c4f Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._10_screenBoundaries.html differ diff --git a/__MACOSX/Code - Published/chapter07/._11_screenWrapping.html b/__MACOSX/Code - Published/chapter07/._11_screenWrapping.html new file mode 100644 index 0000000..cce546e Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._11_screenWrapping.html differ diff --git a/__MACOSX/Code - Published/chapter07/._12_basicScrolling.html b/__MACOSX/Code - Published/chapter07/._12_basicScrolling.html new file mode 100644 index 0000000..fb4fbc2 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._12_basicScrolling.html differ diff --git a/__MACOSX/Code - Published/chapter07/._13_betterScrolling.html b/__MACOSX/Code - Published/chapter07/._13_betterScrolling.html new file mode 100644 index 0000000..f1dd60e Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._13_betterScrolling.html differ diff --git a/__MACOSX/Code - Published/chapter07/._14_parallaxScrolling.html b/__MACOSX/Code - Published/chapter07/._14_parallaxScrolling.html new file mode 100644 index 0000000..eaaed3a Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._14_parallaxScrolling.html differ diff --git a/__MACOSX/Code - Published/chapter07/._15_mouseControl.html b/__MACOSX/Code - Published/chapter07/._15_mouseControl.html new file mode 100644 index 0000000..308abe1 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._15_mouseControl.html differ diff --git a/__MACOSX/Code - Published/chapter07/._16_touchControl.html b/__MACOSX/Code - Published/chapter07/._16_touchControl.html new file mode 100644 index 0000000..66b9750 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._16_touchControl.html differ diff --git a/__MACOSX/Code - Published/chapter07/._1_basicSprite.html b/__MACOSX/Code - Published/chapter07/._1_basicSprite.html new file mode 100644 index 0000000..3bbb091 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._1_basicSprite.html differ diff --git a/__MACOSX/Code - Published/chapter07/._2_manySprites.html b/__MACOSX/Code - Published/chapter07/._2_manySprites.html new file mode 100644 index 0000000..cc28e94 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._2_manySprites.html differ diff --git a/__MACOSX/Code - Published/chapter07/._3_manyImageFiles.html b/__MACOSX/Code - Published/chapter07/._3_manyImageFiles.html new file mode 100644 index 0000000..e1bf828 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._3_manyImageFiles.html differ diff --git a/__MACOSX/Code - Published/chapter07/._4_interactiveSprite.html b/__MACOSX/Code - Published/chapter07/._4_interactiveSprite.html new file mode 100644 index 0000000..6db8216 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._4_interactiveSprite.html differ diff --git a/__MACOSX/Code - Published/chapter07/._5_interactiveSpriteWithRotation.html b/__MACOSX/Code - Published/chapter07/._5_interactiveSpriteWithRotation.html new file mode 100644 index 0000000..9b0231c Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._5_interactiveSpriteWithRotation.html differ diff --git a/__MACOSX/Code - Published/chapter07/._6_interactiveSpriteWithTransparency.html b/__MACOSX/Code - Published/chapter07/._6_interactiveSpriteWithTransparency.html new file mode 100644 index 0000000..4f94b83 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._6_interactiveSpriteWithTransparency.html differ diff --git a/__MACOSX/Code - Published/chapter07/._7_interactiveSpriteWithShadows.html b/__MACOSX/Code - Published/chapter07/._7_interactiveSpriteWithShadows.html new file mode 100644 index 0000000..504f477 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._7_interactiveSpriteWithShadows.html differ diff --git a/__MACOSX/Code - Published/chapter07/._8_interactiveSpriteHTML.html b/__MACOSX/Code - Published/chapter07/._8_interactiveSpriteHTML.html new file mode 100644 index 0000000..49e02a2 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._8_interactiveSpriteHTML.html differ diff --git a/__MACOSX/Code - Published/chapter07/._9_keyboardControl.html b/__MACOSX/Code - Published/chapter07/._9_keyboardControl.html new file mode 100644 index 0000000..f2b94ea Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._9_keyboardControl.html differ diff --git a/__MACOSX/Code - Published/chapter07/._background.png b/__MACOSX/Code - Published/chapter07/._background.png new file mode 100644 index 0000000..d92617d Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._background.png differ diff --git a/__MACOSX/Code - Published/chapter07/._basicScrolling_Old.html b/__MACOSX/Code - Published/chapter07/._basicScrolling_Old.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._basicScrolling_Old.html differ diff --git a/__MACOSX/Code - Published/chapter07/._betterScrolling_Old.html b/__MACOSX/Code - Published/chapter07/._betterScrolling_Old.html new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._betterScrolling_Old.html differ diff --git a/__MACOSX/Code - Published/chapter07/._cat.png b/__MACOSX/Code - Published/chapter07/._cat.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._cat.png differ diff --git a/__MACOSX/Code - Published/chapter07/._keyboardControl_KeyArray.html b/__MACOSX/Code - Published/chapter07/._keyboardControl_KeyArray.html new file mode 100644 index 0000000..ebbcc79 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._keyboardControl_KeyArray.html differ diff --git a/__MACOSX/Code - Published/chapter07/._parallaxScrollingTileSheet.png b/__MACOSX/Code - Published/chapter07/._parallaxScrollingTileSheet.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._parallaxScrollingTileSheet.png differ diff --git a/__MACOSX/Code - Published/chapter07/._phobosTileSheet.png b/__MACOSX/Code - Published/chapter07/._phobosTileSheet.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._phobosTileSheet.png differ diff --git a/__MACOSX/Code - Published/chapter07/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter07/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter07/._tiger.png b/__MACOSX/Code - Published/chapter07/._tiger.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._tiger.png differ diff --git a/__MACOSX/Code - Published/chapter07/._tileSheetWithBackground.png b/__MACOSX/Code - Published/chapter07/._tileSheetWithBackground.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter07/._tileSheetWithBackground.png differ diff --git a/__MACOSX/Code - Published/chapter08/._.DS_Store b/__MACOSX/Code - Published/chapter08/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter08/._1_pointCollision.html b/__MACOSX/Code - Published/chapter08/._1_pointCollision.html new file mode 100644 index 0000000..a82c5cb Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._1_pointCollision.html differ diff --git a/__MACOSX/Code - Published/chapter08/._2_canvasText.html b/__MACOSX/Code - Published/chapter08/._2_canvasText.html new file mode 100644 index 0000000..7a54013 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._2_canvasText.html differ diff --git a/__MACOSX/Code - Published/chapter08/._3_circleCollision.html b/__MACOSX/Code - Published/chapter08/._3_circleCollision.html new file mode 100644 index 0000000..456b634 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._3_circleCollision.html differ diff --git a/__MACOSX/Code - Published/chapter08/._4_blockingCircles.html b/__MACOSX/Code - Published/chapter08/._4_blockingCircles.html new file mode 100644 index 0000000..c4c5334 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._4_blockingCircles.html differ diff --git a/__MACOSX/Code - Published/chapter08/._5_rectangleCollision.html b/__MACOSX/Code - Published/chapter08/._5_rectangleCollision.html new file mode 100644 index 0000000..483bee2 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._5_rectangleCollision.html differ diff --git a/__MACOSX/Code - Published/chapter08/._6_changingStates.html b/__MACOSX/Code - Published/chapter08/._6_changingStates.html new file mode 100644 index 0000000..609df1a Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._6_changingStates.html differ diff --git a/__MACOSX/Code - Published/chapter08/._7_healthMeter.html b/__MACOSX/Code - Published/chapter08/._7_healthMeter.html new file mode 100644 index 0000000..c970325 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._7_healthMeter.html differ diff --git a/__MACOSX/Code - Published/chapter08/._8_updateScore.html b/__MACOSX/Code - Published/chapter08/._8_updateScore.html new file mode 100644 index 0000000..baa5d1d Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._8_updateScore.html differ diff --git a/__MACOSX/Code - Published/chapter08/._9_blockingRectangles.html b/__MACOSX/Code - Published/chapter08/._9_blockingRectangles.html new file mode 100644 index 0000000..2e70e91 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._9_blockingRectangles.html differ diff --git a/__MACOSX/Code - Published/chapter08/._catAndBox.png b/__MACOSX/Code - Published/chapter08/._catAndBox.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._catAndBox.png differ diff --git a/__MACOSX/Code - Published/chapter08/._catAndMonster.png b/__MACOSX/Code - Published/chapter08/._catAndMonster.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._catAndMonster.png differ diff --git a/__MACOSX/Code - Published/chapter08/._circles.png b/__MACOSX/Code - Published/chapter08/._circles.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._circles.png differ diff --git a/__MACOSX/Code - Published/chapter08/._collision.js b/__MACOSX/Code - Published/chapter08/._collision.js new file mode 100644 index 0000000..2571c30 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._collision.js differ diff --git a/__MACOSX/Code - Published/chapter08/._collisionTileSheet.png b/__MACOSX/Code - Published/chapter08/._collisionTileSheet.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._collisionTileSheet.png differ diff --git a/__MACOSX/Code - Published/chapter08/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter08/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter08/._squares.png b/__MACOSX/Code - Published/chapter08/._squares.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter08/._squares.png differ diff --git a/__MACOSX/Code - Published/chapter09/._.DS_Store b/__MACOSX/Code - Published/chapter09/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/._.DS_Store b/__MACOSX/Code - Published/chapter09/alienArmada/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/images/._alienArmada.png b/__MACOSX/Code - Published/chapter09/alienArmada/images/._alienArmada.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/images/._alienArmada.png differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/sounds/._explosion.ogg b/__MACOSX/Code - Published/chapter09/alienArmada/sounds/._explosion.ogg new file mode 100644 index 0000000..2bc5f83 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/sounds/._explosion.ogg differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/sounds/._music.ogg b/__MACOSX/Code - Published/chapter09/alienArmada/sounds/._music.ogg new file mode 100644 index 0000000..2bc5f83 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/sounds/._music.ogg differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/sounds/._shoot.ogg b/__MACOSX/Code - Published/chapter09/alienArmada/sounds/._shoot.ogg new file mode 100644 index 0000000..2bc5f83 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/sounds/._shoot.ogg differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._.DS_Store b/__MACOSX/Code - Published/chapter09/alienArmada/src/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada.css b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada.css new file mode 100644 index 0000000..eed1b0d Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada.css differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada.html b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada.html new file mode 100644 index 0000000..819467b Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada.html differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada1.js b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada1.js new file mode 100644 index 0000000..5234026 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada1.js differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada2.js b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada2.js new file mode 100644 index 0000000..4f36e09 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada2.js differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada3.js b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada3.js new file mode 100644 index 0000000..d068d2e Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada3.js differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada4.js b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada4.js new file mode 100644 index 0000000..9f9564a Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada4.js differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada5.js b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada5.js new file mode 100644 index 0000000..8e72e5b Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada5.js differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada6.js b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada6.js new file mode 100644 index 0000000..a9465be Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmada6.js differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmadaFinished.js b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmadaFinished.js new file mode 100644 index 0000000..95aa63f Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._alienArmadaFinished.js differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._collision.js b/__MACOSX/Code - Published/chapter09/alienArmada/src/._collision.js new file mode 100644 index 0000000..49ac4f6 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._collision.js differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._objects.js b/__MACOSX/Code - Published/chapter09/alienArmada/src/._objects.js new file mode 100644 index 0000000..a9cc064 Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._objects.js differ diff --git a/__MACOSX/Code - Published/chapter09/alienArmada/src/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter09/alienArmada/src/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter09/alienArmada/src/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter10/._.DS_Store b/__MACOSX/Code - Published/chapter10/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMayhem/._.DS_Store b/__MACOSX/Code - Published/chapter10/monsterMayhem/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMayhem/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMayhem/images/._.DS_Store b/__MACOSX/Code - Published/chapter10/monsterMayhem/images/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMayhem/images/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMayhem/images/._monsterMayhem.png b/__MACOSX/Code - Published/chapter10/monsterMayhem/images/._monsterMayhem.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMayhem/images/._monsterMayhem.png differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._.DS_Store b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._collision.js b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._collision.js new file mode 100644 index 0000000..49ac4f6 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._collision.js differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._monsterMayhem.html b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._monsterMayhem.html new file mode 100644 index 0000000..f9348ff Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._monsterMayhem.html differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._monsterMayhem.js b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._monsterMayhem.js new file mode 100644 index 0000000..ff0b049 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._monsterMayhem.js differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._objects.js b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._objects.js new file mode 100644 index 0000000..5a85180 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._objects.js differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMayhem/src/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMaze/._.DS_Store b/__MACOSX/Code - Published/chapter10/monsterMaze/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMaze/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMaze/images/._.DS_Store b/__MACOSX/Code - Published/chapter10/monsterMaze/images/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMaze/images/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMaze/images/._monsterMaze.png b/__MACOSX/Code - Published/chapter10/monsterMaze/images/._monsterMaze.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMaze/images/._monsterMaze.png differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMaze/src/._.DS_Store b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMaze/src/._collision.js b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._collision.js new file mode 100644 index 0000000..49ac4f6 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._collision.js differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMaze/src/._monsterMaze.html b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._monsterMaze.html new file mode 100644 index 0000000..f9348ff Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._monsterMaze.html differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMaze/src/._monsterMaze.js b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._monsterMaze.js new file mode 100644 index 0000000..e96c923 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._monsterMaze.js differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMaze/src/._objects.js b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._objects.js new file mode 100644 index 0000000..9f3dc33 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._objects.js differ diff --git a/__MACOSX/Code - Published/chapter10/monsterMaze/src/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/monsterMaze/src/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter10/movingMonster/._.DS_Store b/__MACOSX/Code - Published/chapter10/movingMonster/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/movingMonster/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/movingMonster/._movingMonster.html b/__MACOSX/Code - Published/chapter10/movingMonster/._movingMonster.html new file mode 100644 index 0000000..483bee2 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/movingMonster/._movingMonster.html differ diff --git a/__MACOSX/Code - Published/chapter10/movingMonster/._movingMonster.png b/__MACOSX/Code - Published/chapter10/movingMonster/._movingMonster.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/movingMonster/._movingMonster.png differ diff --git a/__MACOSX/Code - Published/chapter10/movingMonster/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter10/movingMonster/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/movingMonster/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombPanic/._.DS_Store b/__MACOSX/Code - Published/chapter10/timeBombPanic/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombPanic/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombPanic/images/._.DS_Store b/__MACOSX/Code - Published/chapter10/timeBombPanic/images/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombPanic/images/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombPanic/images/._timeBombPanic.png b/__MACOSX/Code - Published/chapter10/timeBombPanic/images/._timeBombPanic.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombPanic/images/._timeBombPanic.png differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._.DS_Store b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._collision.js b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._collision.js new file mode 100644 index 0000000..49ac4f6 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._collision.js differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._objects.js b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._objects.js new file mode 100644 index 0000000..775f3e0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._objects.js differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._timeBombPanic.html b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._timeBombPanic.html new file mode 100644 index 0000000..eafb565 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._timeBombPanic.html differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._timeBombPanic.js b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._timeBombPanic.js new file mode 100644 index 0000000..f84b596 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombPanic/src/._timeBombPanic.js differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombScroll/._.DS_Store b/__MACOSX/Code - Published/chapter10/timeBombScroll/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombScroll/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombScroll/images/._.DS_Store b/__MACOSX/Code - Published/chapter10/timeBombScroll/images/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombScroll/images/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombScroll/images/._timeBombPanic.png b/__MACOSX/Code - Published/chapter10/timeBombScroll/images/._timeBombPanic.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombScroll/images/._timeBombPanic.png differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._.DS_Store b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._.DS_Store new file mode 100644 index 0000000..321346b Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._collision.js b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._collision.js new file mode 100644 index 0000000..49ac4f6 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._collision.js differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._objects.js b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._objects.js new file mode 100644 index 0000000..9f3dc33 Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._objects.js differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._timeBombScroll.html b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._timeBombScroll.html new file mode 100644 index 0000000..f9348ff Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._timeBombScroll.html differ diff --git a/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._timeBombScroll.js b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._timeBombScroll.js new file mode 100644 index 0000000..055171a Binary files /dev/null and b/__MACOSX/Code - Published/chapter10/timeBombScroll/src/._timeBombScroll.js differ diff --git a/__MACOSX/Code - Published/chapter11/._.DS_Store b/__MACOSX/Code - Published/chapter11/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter11/._1_acceleration.html b/__MACOSX/Code - Published/chapter11/._1_acceleration.html new file mode 100644 index 0000000..4ba9718 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._1_acceleration.html differ diff --git a/__MACOSX/Code - Published/chapter11/._2_friction.html b/__MACOSX/Code - Published/chapter11/._2_friction.html new file mode 100644 index 0000000..dc24feb Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._2_friction.html differ diff --git a/__MACOSX/Code - Published/chapter11/._3_bounce.html b/__MACOSX/Code - Published/chapter11/._3_bounce.html new file mode 100644 index 0000000..5a8d010 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._3_bounce.html differ diff --git a/__MACOSX/Code - Published/chapter11/._4_rectangleBounce.html b/__MACOSX/Code - Published/chapter11/._4_rectangleBounce.html new file mode 100644 index 0000000..162eeb0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._4_rectangleBounce.html differ diff --git a/__MACOSX/Code - Published/chapter11/._5_circleBounce.html b/__MACOSX/Code - Published/chapter11/._5_circleBounce.html new file mode 100644 index 0000000..d6ee903 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._5_circleBounce.html differ diff --git a/__MACOSX/Code - Published/chapter11/._6_gravity.html b/__MACOSX/Code - Published/chapter11/._6_gravity.html new file mode 100644 index 0000000..a838d7a Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._6_gravity.html differ diff --git a/__MACOSX/Code - Published/chapter11/._7_jumping.html b/__MACOSX/Code - Published/chapter11/._7_jumping.html new file mode 100644 index 0000000..05f04d8 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._7_jumping.html differ diff --git a/__MACOSX/Code - Published/chapter11/._8_platforms.html b/__MACOSX/Code - Published/chapter11/._8_platforms.html new file mode 100644 index 0000000..820c44b Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._8_platforms.html differ diff --git a/__MACOSX/Code - Published/chapter11/._cat.png b/__MACOSX/Code - Published/chapter11/._cat.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._cat.png differ diff --git a/__MACOSX/Code - Published/chapter11/._catAndBox.png b/__MACOSX/Code - Published/chapter11/._catAndBox.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._catAndBox.png differ diff --git a/__MACOSX/Code - Published/chapter11/._circles.png b/__MACOSX/Code - Published/chapter11/._circles.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._circles.png differ diff --git a/__MACOSX/Code - Published/chapter11/._collision.js b/__MACOSX/Code - Published/chapter11/._collision.js new file mode 100644 index 0000000..4fc7656 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._collision.js differ diff --git a/__MACOSX/Code - Published/chapter11/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter11/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/images/._hedgehogApocalypse.png b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/images/._hedgehogApocalypse.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/images/._hedgehogApocalypse.png differ diff --git a/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._collision.js b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._collision.js new file mode 100644 index 0000000..4fc7656 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._collision.js differ diff --git a/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._hedgehogAplocalypse.html b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._hedgehogAplocalypse.html new file mode 100644 index 0000000..9669a8c Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._hedgehogAplocalypse.html differ diff --git a/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._hedgehogApocalypse.js b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._hedgehogApocalypse.js new file mode 100644 index 0000000..e07080f Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._hedgehogApocalypse.js differ diff --git a/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._objects.js b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._objects.js new file mode 100644 index 0000000..c289807 Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._objects.js differ diff --git a/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter11/hedgehogApocalypse/src/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter12/._.DS_Store b/__MACOSX/Code - Published/chapter12/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter12/._constructorFunction.html b/__MACOSX/Code - Published/chapter12/._constructorFunction.html new file mode 100644 index 0000000..a5aff8f Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/._constructorFunction.html differ diff --git a/__MACOSX/Code - Published/chapter12/dragAndDrop/._.DS_Store b/__MACOSX/Code - Published/chapter12/dragAndDrop/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/dragAndDrop/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter12/dragAndDrop/._dragAndDrop.png b/__MACOSX/Code - Published/chapter12/dragAndDrop/._dragAndDrop.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/dragAndDrop/._dragAndDrop.png differ diff --git a/__MACOSX/Code - Published/chapter12/dragAndDrop/._dragAndDropMouse.html b/__MACOSX/Code - Published/chapter12/dragAndDrop/._dragAndDropMouse.html new file mode 100644 index 0000000..7cef2fd Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/dragAndDrop/._dragAndDropMouse.html differ diff --git a/__MACOSX/Code - Published/chapter12/dragAndDrop/._dragAndDropTouch.html b/__MACOSX/Code - Published/chapter12/dragAndDrop/._dragAndDropTouch.html new file mode 100644 index 0000000..6c8eec2 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/dragAndDrop/._dragAndDropTouch.html differ diff --git a/__MACOSX/Code - Published/chapter12/dragAndDrop/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter12/dragAndDrop/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/dragAndDrop/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter12/hedgehogMouse/images/._hedgehogApocalypse.png b/__MACOSX/Code - Published/chapter12/hedgehogMouse/images/._hedgehogApocalypse.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/hedgehogMouse/images/._hedgehogApocalypse.png differ diff --git a/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._collision.js b/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._collision.js new file mode 100644 index 0000000..4fc7656 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._collision.js differ diff --git a/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._hedgehogAplocalypse.html b/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._hedgehogAplocalypse.html new file mode 100644 index 0000000..9f464c2 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._hedgehogAplocalypse.html differ diff --git a/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._hedgehogApocalypse.js b/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._hedgehogApocalypse.js new file mode 100644 index 0000000..eede647 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._hedgehogApocalypse.js differ diff --git a/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._objects.js b/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._objects.js new file mode 100644 index 0000000..14f037e Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._objects.js differ diff --git a/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/hedgehogMouse/src/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter12/images/._.DS_Store b/__MACOSX/Code - Published/chapter12/images/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/images/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter12/images/._bee.png b/__MACOSX/Code - Published/chapter12/images/._bee.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/images/._bee.png differ diff --git a/__MACOSX/Code - Published/chapter12/images/._buttonFairy.png b/__MACOSX/Code - Published/chapter12/images/._buttonFairy.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/images/._buttonFairy.png differ diff --git a/__MACOSX/Code - Published/chapter12/images/._catAndBox.png b/__MACOSX/Code - Published/chapter12/images/._catAndBox.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/images/._catAndBox.png differ diff --git a/__MACOSX/Code - Published/chapter12/images/._vehicles.png b/__MACOSX/Code - Published/chapter12/images/._vehicles.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/images/._vehicles.png differ diff --git a/__MACOSX/Code - Published/chapter12/keyboard/._carKeyboard.html b/__MACOSX/Code - Published/chapter12/keyboard/._carKeyboard.html new file mode 100644 index 0000000..ba47e67 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/keyboard/._carKeyboard.html differ diff --git a/__MACOSX/Code - Published/chapter12/keyboard/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter12/keyboard/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/keyboard/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter12/keyboard/._rocketKeyboard.html b/__MACOSX/Code - Published/chapter12/keyboard/._rocketKeyboard.html new file mode 100644 index 0000000..da2e20a Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/keyboard/._rocketKeyboard.html differ diff --git a/__MACOSX/Code - Published/chapter12/keyboard/._tank.html b/__MACOSX/Code - Published/chapter12/keyboard/._tank.html new file mode 100644 index 0000000..c178e91 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/keyboard/._tank.html differ diff --git a/__MACOSX/Code - Published/chapter12/killerBeePandemonium/images/._killerBeePandemonium.png b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/images/._killerBeePandemonium.png new file mode 100644 index 0000000..0dd73a4 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/images/._killerBeePandemonium.png differ diff --git a/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._collision.js b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._collision.js new file mode 100644 index 0000000..9b68e70 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._collision.js differ diff --git a/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeMouse.html b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeMouse.html new file mode 100644 index 0000000..b3c55e3 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeMouse.html differ diff --git a/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeMouse.js b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeMouse.js new file mode 100644 index 0000000..5218d14 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeMouse.js differ diff --git a/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeTouch.html b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeTouch.html new file mode 100644 index 0000000..000c430 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeTouch.html differ diff --git a/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeTouch.js b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeTouch.js new file mode 100644 index 0000000..d76d5dd Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._killerBeeTouch.js differ diff --git a/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._objects.js b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._objects.js new file mode 100644 index 0000000..1eb941c Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._objects.js differ diff --git a/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/killerBeePandemonium/src/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter12/mouse/._beeFollowMouse.html b/__MACOSX/Code - Published/chapter12/mouse/._beeFollowMouse.html new file mode 100644 index 0000000..32cf5f5 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/mouse/._beeFollowMouse.html differ diff --git a/__MACOSX/Code - Published/chapter12/mouse/._beeRotateAndShootMouse.html b/__MACOSX/Code - Published/chapter12/mouse/._beeRotateAndShootMouse.html new file mode 100644 index 0000000..f40e903 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/mouse/._beeRotateAndShootMouse.html differ diff --git a/__MACOSX/Code - Published/chapter12/mouse/._buttonFairyMouse.html b/__MACOSX/Code - Published/chapter12/mouse/._buttonFairyMouse.html new file mode 100644 index 0000000..25f0cde Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/mouse/._buttonFairyMouse.html differ diff --git a/__MACOSX/Code - Published/chapter12/mouse/._carMouse.html b/__MACOSX/Code - Published/chapter12/mouse/._carMouse.html new file mode 100644 index 0000000..2147ca8 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/mouse/._carMouse.html differ diff --git a/__MACOSX/Code - Published/chapter12/mouse/._clickToMove.html b/__MACOSX/Code - Published/chapter12/mouse/._clickToMove.html new file mode 100644 index 0000000..6f37946 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/mouse/._clickToMove.html differ diff --git a/__MACOSX/Code - Published/chapter12/mouse/._easingMouse.html b/__MACOSX/Code - Published/chapter12/mouse/._easingMouse.html new file mode 100644 index 0000000..0669d84 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/mouse/._easingMouse.html differ diff --git a/__MACOSX/Code - Published/chapter12/mouse/._followMouse.html b/__MACOSX/Code - Published/chapter12/mouse/._followMouse.html new file mode 100644 index 0000000..82f7c27 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/mouse/._followMouse.html differ diff --git a/__MACOSX/Code - Published/chapter12/mouse/._platformsMouse.html b/__MACOSX/Code - Published/chapter12/mouse/._platformsMouse.html new file mode 100644 index 0000000..d190ead Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/mouse/._platformsMouse.html differ diff --git a/__MACOSX/Code - Published/chapter12/mouse/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter12/mouse/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/mouse/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter12/mouse/._rocketMouse.html b/__MACOSX/Code - Published/chapter12/mouse/._rocketMouse.html new file mode 100644 index 0000000..236e4c9 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/mouse/._rocketMouse.html differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._.DS_Store b/__MACOSX/Code - Published/chapter12/touch/._.DS_Store new file mode 100644 index 0000000..a9dcab0 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._.DS_Store differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._beeFollowTouch.html b/__MACOSX/Code - Published/chapter12/touch/._beeFollowTouch.html new file mode 100644 index 0000000..eabe5fb Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._beeFollowTouch.html differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._beeRotateAndShootTouch.html b/__MACOSX/Code - Published/chapter12/touch/._beeRotateAndShootTouch.html new file mode 100644 index 0000000..67099ef Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._beeRotateAndShootTouch.html differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._buttonFairyTouch.html b/__MACOSX/Code - Published/chapter12/touch/._buttonFairyTouch.html new file mode 100644 index 0000000..a1c0fdd Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._buttonFairyTouch.html differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._carTouch.html b/__MACOSX/Code - Published/chapter12/touch/._carTouch.html new file mode 100644 index 0000000..4820ac7 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._carTouch.html differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._easingTouch.html b/__MACOSX/Code - Published/chapter12/touch/._easingTouch.html new file mode 100644 index 0000000..267735c Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._easingTouch.html differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._followTouch.html b/__MACOSX/Code - Published/chapter12/touch/._followTouch.html new file mode 100644 index 0000000..c6a7c49 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._followTouch.html differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._platformsTouch.html b/__MACOSX/Code - Published/chapter12/touch/._platformsTouch.html new file mode 100644 index 0000000..120e480 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._platformsTouch.html differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._requestAnimationFramePolyfill.js b/__MACOSX/Code - Published/chapter12/touch/._requestAnimationFramePolyfill.js new file mode 100644 index 0000000..922fd2a Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._requestAnimationFramePolyfill.js differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._rocketTouch.html b/__MACOSX/Code - Published/chapter12/touch/._rocketTouch.html new file mode 100644 index 0000000..e46d147 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._rocketTouch.html differ diff --git a/__MACOSX/Code - Published/chapter12/touch/._tapToMove.html b/__MACOSX/Code - Published/chapter12/touch/._tapToMove.html new file mode 100644 index 0000000..3ebc287 Binary files /dev/null and b/__MACOSX/Code - Published/chapter12/touch/._tapToMove.html differ diff --git a/contributing.md b/contributing.md new file mode 100644 index 0000000..f6005ad --- /dev/null +++ b/contributing.md @@ -0,0 +1,14 @@ +# Contributing to Apress Source Code + +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. + +## How to Contribute + +1. Make sure you have a GitHub account. +2. Fork the repository for the relevant book. +3. Create a new branch on which to make your change, e.g. +`git checkout -b my_code_contribution` +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. +5. Submit a pull request. + +Thank you for your contribution! \ No newline at end of file