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.
+
+ First item
+ Second item
+ Third item
+
+
+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:
+
+
+
+
\ 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.
+
+ First item
+ Second item
+ Third item
+
+
+
+
+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:
+
+
+
+
\ 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
+
+click me
+
+
\ 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
+
+click me
+
+
\ 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
+
+click me
+
+
\ 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
+
+
+enter
+
+
+
\ 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.
+
+
+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
+
+
+
+
+
\ 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.
+
+
+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
+
+
+
+guess
+
\ 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.
+
+guess
+
+
\ 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.
+
+guess
+
+
\ 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.
+
+guess
+
+
\ 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.
+
+guess
+
+
\ 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.
+
+guess
+
+
\ 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.
+
+guess
+
+
\ 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
+
+
+
+
enter
+
+
+
\ 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
+
+
+
+enter
+
+
\ 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
+
+
+
+
+enter
+
+
\ 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
+
+
+
+
+enter
+
+
\ 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
+
+
+
+
+enter
+
+
\ 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
+
+
+
+
+enter
+
+
\ 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?
+
+enter
+
+
\ 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
+
+
+
+
+
+
+
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
+
+up
+down
+right
+left
+hide
+show
+bigger
+smaller
+
+
+
+
+
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
+
+up
+down
+right
+left
+hide
+show
+bigger
+smaller
+rotate right
+rotate left
+
+
+
+
+
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
+
+up
+down
+right
+left
+hide
+show
+bigger
+smaller
+rotate right
+rotate left
+more transparent
+less transparent
+
+
+
+
+
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
+
+up
+down
+right
+left
+hide
+show
+bigger
+smaller
+rotate right
+rotate left
+more transparent
+less transparent
+shadow on
+shadow off
+
+
+
+
+
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
+
+
+
+up
+down
+right
+left
+hide
+show
+bigger
+smaller
+rotate right
+rotate left
+more transparent
+less transparent
+shadow on
+shadow off
+
+
+
+
+
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
+
+
+
+
+
+Shoot!
+
+
+
+
\ 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
+
+
+
+
+
+Jump!
+
+
+
+
\ 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
+
+
+
+Go!
+Shoot!
+
+
+
+
\ 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