Done

index.js

@@ -29,14 +29,17 @@ function checkCollision(rock) {
     const dodgerLeftEdge = positionToInteger(DODGER.style.left)
 
     // 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 = rockLeftEdge+20;
 
-    if (false /**
+    if ((rockLeftEdge <= dodgerLeftEdge && rockRightEdge >= dodgerLeftEdge) ||
+        (rockLeftEdge >= dodgerLeftEdge && rockRightEdge <= dodgerRightEdge) ||
+        (rockLeftEdge <= dodgerRightEdge && rockRightEdge >= dodgerRightEdge))
+       /**
                * 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,
@@ -45,7 +48,7 @@ function checkCollision(rock) {
                *    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
     }
   }
@@ -58,9 +61,9 @@ function createRock(x) {
   rock.style.left = `${x}px`
 
   // Hmmm, why would we have used `var` here?
-  var top = 0
+  var top2 = rock.style.top = 0;
+ GAME.appendChild(rock);
 
-  rock.style.top = top
 
   /**
    * Now that we have a rock, we'll need to append
@@ -79,6 +82,13 @@ function createRock(x) {
      * If a rock collides with the DODGER,
      * we should call endGame().
      */
+     rock.style.top = `${top2+=2}px`;
+         if (checkCollision(rock)){
+           return endGame();
+         } if (top2 < GAME_HEIGHT){
+           window.requestAnimationFrame(moveRock);
+         } else {
+           rock.remove();
 
     /**
      * Otherwise, if the rock hasn't reached the bottom of
@@ -92,7 +102,7 @@ function createRock(x) {
   }
 
   // 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)
@@ -108,9 +118,24 @@ function createRock(x) {
  * Finally, alert "YOU LOSE!" to the player.
  */
 function endGame() {
+  clearInterval(gameInterval);
+ ROCKS.forEach(function(rock)
+     {rock.remove()
+     });
+ document.removeEventListener('keydown',moveDodger);
+ return alert('YOU LOSE!');
 }
 
 function moveDodger(e) {
+  if([LEFT_ARROW, RIGHT_ARROW].indexOf(e.which) > -1){
+  e.preventDefault();
+  e.stopPropagation();
+}
+if (e.which === LEFT_ARROW){
+  moveDodgerLeft()
+}if (e.which === RIGHT_ARROW){
+  moveDodgerRight()
+}{
   // implement me!
   /**
    * This function should call `moveDodgerLeft()`
@@ -122,6 +147,12 @@ function moveDodger(e) {
 }
 
 function moveDodgerLeft() {
+  window.requestAnimationFrame(function() {
+  const left = positionToInteger(DODGER.style.left)
+  if (left>0) {
+    DODGER.style.left = `${left - 6}px`
+  }
+});
   // implement me!
   /**
    * This function should move DODGER to the left
@@ -130,6 +161,12 @@ function moveDodgerLeft() {
 }
 
 function moveDodgerRight() {
+  window.requestAnimationFrame(function() {
+  const left = positionToInteger(DODGER.style.left)
+  if (left<360) {
+    DODGER.style.left = `${left + 6}px`
+  }
+});
   // implement me!
   /**
    * This function should move DODGER to the right