Done

index.js

@@ -28,24 +28,30 @@ function checkCollision(rock) {
   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;
+    // FIXME: The DODGER is 40 pixels wide --how do we get the right edge?
+    //const dodgerRightEdge = 0;
+
+    const dodgerRightEdge = dodgerLeftEdge + 40;
 
     const rockLeftEdge = positionToInteger(rock.style.left)
 
     // FIXME: The rock is 20 pixel's wide -- how do we get the right edge?
-    const rockRightEdge = 0;
+    //const rockRightEdge = 0;
+    const rockRightEdge = rockLeftEdge + 20;
 
-    if (false /**
+    if ( /**
                * 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.
-               */) {
+               */
+               ((rockLeftEdge <= dodgerLeftEdge) && (rockRightEdge >= dodgerLeftEdge)) || ((rockLeftEdge >= dodgerLeftEdge) && (rockRightEdge <= dodgerLeftEdge)) || ((rockLeftEdge <= dodgerRightEdge) && (rockRightEdge >= dodgerRightEdge))
+              ) {
       return true
     }
   }
@@ -58,16 +64,14 @@ function createRock(x) {
   rock.style.left = `${x}px`
 
   // Hmmm, why would we have used `var` here?
-  var top = 0
-
-  rock.style.top = top
+  var top = 0;
 
   /**
    * Now that we have a rock, we'll need to append
    * it to GAME and move it downwards.
    */
-
-
+  GAME.appendChild(rock);
+  //moveRock();
   /**
    * This function moves the rock. (2 pixels at a time
    * seems like a good pace.)
@@ -79,26 +83,36 @@ function createRock(x) {
      * If a rock collides with the DODGER,
      * we should call endGame().
      */
-
+     rock.style.top = `${top += 2}px`;
+
+     if (checkCollision(rock)) {
+        return endGame();
+      }
     /**
      * Otherwise, if the rock hasn't reached the bottom of
      * the GAME, we want to move it again.
      */
-
+
+      else if (top < GAME_HEIGHT) {
+        window.requestAnimationFrame(moveRock);
+      }
     /**
      * But if the rock *has* reached the bottom of the GAME,
      * we should remove the rock from the DOM.
      */
+     else {
+       rock.remove();
+     }
+
   }
 
   // We should kick off the animation of the rock around here.
-
+  window.requestAnimationFrame(moveRock);
   // Add the rock to ROCKS so that we can remove all rocks
   // when there's a collision.
-  ROCKS.push(rock)
-
+  ROCKS.push(rock);
   // Finally, return the rock element you've created.
-  return rock
+  return rock;
 }
 
 /**
@@ -108,6 +122,10 @@ function createRock(x) {
  * Finally, alert "YOU LOSE!" to the player.
  */
 function endGame() {
+  clearInterval(gameInterval);
+  ROCKS.forEach(function(rock) {rock.remove()});   
+  document.removeEventListener('keydown', moveDodger);  
+  alert("YOU LOSE!");
 }
 
 function moveDodger(e) {
@@ -119,38 +137,67 @@ function moveDodger(e) {
    * we've declared for you above.)
    * And be sure to use the functions declared below!
    */
+   if (e.which === LEFT_ARROW || e.which === RIGHT_ARROW) {
+     e.preventDefault();
+     e.stopPropagation();
+   }
+
+    if (e.which === LEFT_ARROW) {
+      moveDodgerLeft();
+    }
+    else if (e.which === RIGHT_ARROW){
+      moveDodgerRight();
+    }
 }
 
 function moveDodgerLeft() {
-  // implement me!
-  /**
+    /**
    * This function should move DODGER to the left
    * (mabye 4 pixels?). Use window.requestAnimationFrame()!
    */
+  window.requestAnimationFrame(stepLeft);
+
+  function stepLeft() {
+    var leftNumbers = dodger.style.left.replace('px', '');
+    var left = parseInt(leftNumbers, 10);
+
+    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()!
+   * (mabye 4 pixels?). Use window.requestAnimationFrame()
    */
+  window.requestAnimationFrame(stepRight);
+
+  function stepRight() {
+    var leftNumbers = dodger.style.left.replace('px', '');
+    var left = parseInt(leftNumbers, 10);
+
+    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);
 }