Done

index.html

@@ -19,5 +19,6 @@
     <script src="node_modules/expect/umd/expect.min.js"></script>
     <script>mocha.setup('bdd');</script>
     <script src="test/index-test.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   </body>
 </html>

index.js

@@ -1,156 +1,146 @@
 /**
  * Don't change these constants!
  */
-const DODGER = document.getElementById('dodger')
-const GAME = document.getElementById('game')
-const GAME_HEIGHT = 400
-const GAME_WIDTH = 400
-const LEFT_ARROW = 37 // use e.which!
-const RIGHT_ARROW = 39 // use e.which!
-const ROCKS = []
-const START = document.getElementById('start')
+const DODGER = document.getElementById('dodger');
+const GAME = document.getElementById('game');
+const GAME_HEIGHT = 400;
+const GAME_WIDTH = 400;
+const LEFT_ARROW = 37; // use e.which!
+const RIGHT_ARROW = 39; // use e.which!
+const ROCKS = [];
+const START = document.getElementById('start');
+
+var gameInterval = null;
 
-var gameInterval = null
 
 /**
  * Be aware of what's above this line,
  * but all of your work should happen below.
  */
+
+
+
 
 function checkCollision(rock) {
   // implement me!
   // use the comments below to guide you!
-  const top = positionToInteger(rock.style.top)
+  const top = positionToInteger(rock.style.top);
 
   // rocks are 20px high
   // DODGER is 20px high
   // GAME_HEIGHT - 20 - 20 = 360px;
   if (top > 360) {
-    const dodgerLeftEdge = positionToInteger(DODGER.style.left)
-
-    // FIXME: The DODGER is 40 pixels wide -- how do we get the right edge?
-    const dodgerRightEdge = 0;
-
-    const rockLeftEdge = positionToInteger(rock.style.left)
-
-    // FIXME: The rock is 20 pixel's wide -- how do we get the right edge?
-    const rockRightEdge = 0;
-
-    if (false /**
-               * Think about it -- what's happening here?
-               * There's been a collision if one of three things is true:
-               * 1. The rock's left edge is < the DODGER's left edge,
-               *    and the rock's right edge is > the DODGER's left edge;
-               * 2. The rock's left edge is > the DODGER's left edge,
-               *    and the rock's right edge is < the DODGER's right edge;
-               * 3. The rock's left edge is < the DODGER's right edge,
-               *    and the rock's right edge is > the DODGER's right edge.
-               */) {
-      return true
-    }
+    const dodgerLeftEdge = positionToInteger(DODGER.style.left);
+    const dodgerRightEdge = dodgerLeftEdge + 40;
+    const rockLeftEdge = positionToInteger(rock.style.left);
+    const rockRightEdge = rockLeftEdge + 20;
+  return (rockLeftEdge < dodgerRightEdge && rockRightEdge > dodgerLeftEdge || rockLeftEdge > dodgerLeftEdge && rockRightEdge < dodgerLeftEdge || rockLeftEdge < dodgerRightEdge && rockRightEdge > dodgerRightEdge); 
   }
 }
 
 function createRock(x) {
-  const rock = document.createElement('div')
-
-  rock.className = 'rock'
-  rock.style.left = `${x}px`
-
-  // Hmmm, why would we have used `var` here?
-  var top = 0
-
-  rock.style.top = top
-
-  /**
-   * Now that we have a rock, we'll need to append
-   * it to GAME and move it downwards.
-   */
+  // rock is a div
+  const rock = document.createElement('div');
+  // assign class name .rock to rock
+  rock.className = 'rock';
+  // generates position on the x axis
+  rock.style.left = `${x}px`;
+  //rock will always be generated at the top
+  var top = rock.style.top = 0;
+  GAME.appendChild(rock);
+
 
 
   /**
    * This function moves the rock. (2 pixels at a time
    * seems like a good pace.)
    */
   function moveRock() {
-    // implement me!
-    // (use the comments below to guide you!)
-    /**
-     * If a rock collides with the DODGER,
-     * we should call endGame().
-     */
-
-    /**
-     * Otherwise, if the rock hasn't reached the bottom of
-     * the GAME, we want to move it again.
-     */
-
-    /**
-     * But if the rock *has* reached the bottom of the GAME,
-     * we should remove the rock from the DOM.
-     */
+    //moves top of rock two pixels down (essentially "moving" the rock)
+    rock.style.top = `${top += 2}px`;
+    // checks if there is a collision with rock from dodger
+    if (checkCollision(rock) === true) {
+       return endGame();
+       // this basically is saying as long as the top is less than GAME_HEIGHT, to let it fall.
+     } if (top < GAME_HEIGHT) {
+       window.requestAnimationFrame(moveRock);
+     } else { rock.remove();
+     }
   }
-
-  // We should kick off the animation of the rock around here.
-
-  // Add the rock to ROCKS so that we can remove all rocks
-  // when there's a collision.
-  ROCKS.push(rock)
-
-  // Finally, return the rock element you've created.
-  return rock
+  // this requests to use the moveRock() function on the next frame
+    window.requestAnimationFrame(moveRock);
+  ROCKS.push(rock);
+return rock;
 }
-
 /**
  * End the game by clearing `gameInterval`,
+ * clearInterval(gameInterval)
  * removing all ROCKS from the DOM,
+ * ROCKS.forEach(function(rock) {rock.remove();});
  * and removing the `moveDodger` event listener.
  * Finally, alert "YOU LOSE!" to the player.
  */
 function endGame() {
+  //gameInterval calls the createRock function and randomly assigns it a position on the x axis
+  clearInterval(gameInterval);
+  // this uses the forEach() array iterator to remove all rocks in the ROCKS array.
+  ROCKS.forEach(function(rock) { rock.remove() });
+  //This removes the event listener for moveDodger located in the start() function
+  document.removeEventListener('keydown', moveDodger);
+  alert('YOU LOSE!');
 }
 
 function moveDodger(e) {
-  // implement me!
-  /**
-   * This function should call `moveDodgerLeft()`
-   * if the left arrow is pressed and `moveDodgerRight()`
-   * if the right arrow is pressed. (Check the constants
-   * we've declared for you above.)
-   * And be sure to use the functions declared below!
-   */
+  let code = e.which;
+
+  if ([LEFT_ARROW, RIGHT_ARROW].indexOf(code) > -1) {
+     e.preventDefault();
+    e.stopPropagation();
+  }
+   if (LEFT_ARROW === code){
+    return moveDodgerLeft();
+  } 
+
+  if (RIGHT_ARROW === code) {
+   return  moveDodgerRight();
+  }
 }
-
 function moveDodgerLeft() {
-  // implement me!
-  /**
-   * This function should move DODGER to the left
-   * (mabye 4 pixels?). Use window.requestAnimationFrame()!
-   */
+  window.requestAnimationFrame(function() {
+    const left = positionToInteger(DODGER.style.left)
+
+    if (left > 0) {
+      DODGER.style.left = `${left - 4}px`;
+    }
+  })
 }
 
 function moveDodgerRight() {
-  // implement me!
-  /**
-   * This function should move DODGER to the right
-   * (mabye 4 pixels?). Use window.requestAnimationFrame()!
-   */
+  window.requestAnimationFrame(function() {
+    const left = positionToInteger(DODGER.style.left)
+
+    if (left < 360) {
+      DODGER.style.left = `${left + 4}px`;
+    }
+  })
 }
 
+
+
 /**
  * @param {string} p The position property
  * @returns {number} The position as an integer (without 'px')
  */
 function positionToInteger(p) {
-  return parseInt(p.split('px')[0]) || 0
+  return parseInt(p.split('px')[0]) || 0;
 }
 
 function start() {
-  window.addEventListener('keydown', moveDodger)
+  window.addEventListener('keydown', moveDodger);
 
-  START.style.display = 'none'
+  START.style.display = 'none';
 
   gameInterval = setInterval(function() {
-    createRock(Math.floor(Math.random() *  (GAME_WIDTH - 20)))
-  }, 1000)
-}
+    createRock(Math.floor(Math.random() *  (GAME_WIDTH - 20)));
+  }, 1000);
+}