Flesh out the lesson

Author: kneath

lessons/3-objects/README.md

@@ -2,7 +2,10 @@
 
 ## Goals
 
-- Add a new spirte to the map
+- Change the location of an existing sprite
+- Reset the game when your character runs into the pit
+- Make an object appear based on user interaction
+- Add a new sprite to the map
 
 ## Getting set up
 
@@ -12,14 +15,97 @@
 
 - Open up `index.html`
 
+
 ## objects.js
 
-## What's a spirte? What's part of the map?
+We're going to put all of our objects into this file. Right now it has a bunch of objects all set up using Sprites. Here's what one of them looks like:
+
+``` javascript
+// A pit of dispair
+pit = new Sprite(16, 16)
+pit.image = game.assets['images/map.png']
+pit.frame = 9
+pit.x = 16 * 5
+pit.y = 16 * 5
+game.rootScene.addChild(pit)
+```
+
+This is the basic format for adding sprites. We tell it which image to use for sprites, which frame to use (just like the map), and then we tell it where to put the object with `x` and `y` coordinates. Since our tiles are 16 pixels, we can multiply single numbers by 16 to move it one tile at a time.
+
+After we put the sprite on the page, we set up a function to interact with the object. Right now this function is empty with a placeholder for when your character runs into the pit.
+
+``` javascript
+function pitframe() {
+
+  if ( character.intersect(pit) ) {
+
+  }
 
-- Layers things
+}
+pit.addEventListener("enterframe", pitframe)
+```
+
+Anytime you want to create a new sprite, you can copy and paste this sample and rename the variables.
 
 ## Your assignment
 
+### Reset the game when you fall into the pit
+
+The first thing we want to to is make the game reset when you fall into the pit. I've already coded up a function called `resetGame` which will reset the game. But we need to call it when your character intersects with the pit.
+
+To do this, we'll call `resetGame()` inside of the function.
+
+``` javascript
+function pitframe() {
+
+  if ( character.intersect(pit) ) {
+    resetGame()
+  }
+
+}
+```
+
+### Move the flowers somewhere else
+
+The `x` and `y` properties of the sprite tell it where on the map the sprite should be. Let's move the flowers down to the corner by changing the `y` value.
+
+``` javascript
+flowers.x = 16 * 2
+flowers.y = 16 * 14
+```
+
+### Make the pot appear when you walk over the flowers
+
+You might notice that we have a sprite called `pot` that isn't visible. I want this pot to appear when you walk over the flowers. There's already some logic in place, all we need to do is place the pot into the map. The pot sprite is missing one line the other sprites have: `game.rootScene.addChild(pot)` so let's add it in the logic.
+
+``` javascript
+function flowersframe() {
+  if ( character.intersect(flowers) && !potVisible) {
+    game.rootScene.addChild(pot)
+    potVisible = true
+  }
+}
+```
+
+The pot should now show up when you walk over the flowers!
+
+### Add a treasure chest to the page
+
+To get some practice for your own game, let's add one more sprite to this page. I want to add a treasure chest sprite to the upper right of the map. We're going to copy and paste the code before, and rename the variables:
+
+``` javascript
+// A treasure chest
+chest = new Sprite(16, 16)
+chest.image = game.assets['images/map.png']
+chest.frame = 25
+chest.x = 16 * 13
+chest.y = 16 * 2
+game.rootScene.addChild(chest)
+```
+
+Now you should have a treasure chest showing up!
 
 ## Free time
 
+Add some objects to your map.
+

lessons/3-objects/character.js

@@ -74,10 +74,28 @@ game.addEventListener("load", function(){
       }
     }
 
+
+    // Set character.blocked = true to stop moving when colliding when objects
+    if (character.blocked) {
+      x = this.x + 2 * (this.x - x)
+      y = this.y + 2 * (this.y - y)
+
+      setTimeout(function() {
+        character.blocked = false
+      }, 50)
+    }
+
+
     this.x = x
     this.y = y
 
   }
   character.addEventListener("enterframe", movement)
 
+  function resetCharacter() {
+    character.x = 100
+    character.y = 100
+  }
+  game.rootScene.addEventListener("reset", resetCharacter)
+
 })

lessons/3-objects/lib/game.js

@@ -4,4 +4,33 @@ var game = new Game(240, 240)
 game.scale = 2
 game.fps = 25
 game.preload('images/map.png', 'images/boy.gif', 'images/girl.gif')
-var map, map, character
+var map, character
+
+function resetGame(){
+  document.body.setAttribute('style', 'background-color:#911')
+  setTimeout(function() {
+    document.body.setAttribute('style', '')
+  }, 100)
+  setTimeout(function() {
+    document.body.setAttribute('style', 'background-color:#911')
+  }, 200)
+  setTimeout(function() {
+    document.body.setAttribute('style', '')
+  }, 300)
+
+  event = new enchant.Event("reset")
+  game.rootScene.dispatchEvent(event)
+}
+
+function endGame(){
+  document.body.setAttribute('style', 'background-color:#6CC644')
+  setTimeout(function() {
+    document.body.setAttribute('style', '')
+  }, 100)
+  setTimeout(function() {
+    document.body.setAttribute('style', 'background-color:#6CC644')
+  }, 200)
+  setTimeout(function() {
+    document.body.setAttribute('style', '')
+  }, 300)
+}

lessons/3-objects/objects.js

@@ -6,14 +6,15 @@ game.addEventListener("load", function(){
   pit.frame = 9
   pit.x = 16 * 5
   pit.y = 16 * 5
-  pit.scaleX = 2
-  pit.scaleY = 2
   game.rootScene.addChild(pit)
 
-  pit.addEventListener("enterframe", function(){
-    //
-  })
+  function pitframe() {
 
+    if ( character.intersect(pit) ) {
+    }
+
+  }
+  pit.addEventListener("enterframe", pitframe)
 
 
   // A moveable pot
@@ -22,6 +23,33 @@ game.addEventListener("load", function(){
   pot.frame = 26
   pot.x = 16 * 10
   pot.y = 16 * 10
-  game.rootScene.addChild(pot)
+
+  potVisible = false
+
+  function potframe() {
+
+    if ( character.intersect(pot) ) {
+      character.blocked = true
+    }
+
+  }
+  pot.addEventListener("enterframe", potframe)
+
+
+  // Some flowers
+  flowers = new Sprite(16, 16)
+  flowers.image = game.assets['images/map.png']
+  flowers.frame = 18
+  flowers.x = 16 * 2
+  flowers.y = 16 * 10
+  game.rootScene.addChild(flowers)
+
+
+  function flowersframe() {
+    if ( character.intersect(flowers) && !potVisible) {
+      potVisible = true
+    }
+  }
+  flowers.addEventListener("enterframe", flowersframe)
 
 })