Done

index.js

@@ -18,34 +18,23 @@ var gameInterval = null
  */
 
 function checkCollision(rock) {
-  // implement me!
-  // use the comments below to guide you!
+
   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 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;
-
-    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.
-               */) {
+    const rockRightEdge = rockLeftEdge + 20;
+
+    if ( rockLeftEdge <= dodgerLeftEdge && rockRightEdge >= dodgerLeftEdge || rockLeftEdge >= dodgerLeftEdge && rockRightEdge <= dodgerRightEdge || rockLeftEdge <= dodgerRightEdge && rockRightEdge >= dodgerRightEdge )
+            {
       return true
     }
   }
@@ -66,19 +55,24 @@ function createRock(x) {
    * Now that we have a rock, we'll need to append
    * it to GAME and move it downwards.
    */
-
+
+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!)
+
+    rock.style.top = `${top += 2} px`;
+
     /**
      * If a rock collides with the DODGER,
      * we should call endGame().
      */
+if (checkCollision(rock) === true) {
+  return endGame()
+}
 
     /**
      * Otherwise, if the rock hasn't reached the bottom of
@@ -89,9 +83,20 @@ function createRock(x) {
      * But if the rock *has* reached the bottom of the GAME,
      * we should remove the rock from the DOM.
      */
+
+  // We should kick off the animation of the rock around here
+
+
+    if (top < GAME_HEIGHT) {
+
+      window.requestAnimationFrame(moveRock)
+    }
+    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.
@@ -107,10 +112,23 @@ function createRock(x) {
  * and removing the `moveDodger` event listener.
  * Finally, alert "YOU LOSE!" to the player.
  */
+
 function endGame() {
+  clearInterval(gameInterval);
+  ROCKS.forEach(element => element.remove());
+ window.removeEventListener('keydown', moveDodger)
+ alert("YOU LOSE!");
 }
 
 function moveDodger(e) {
+  if (e.which===LEFT_ARROW || e.which===RIGHT_ARROW) {
+ e.preventDefault();
+ e.stopPropagation()
+  }
+  if (e.which===LEFT_ARROW) {moveDodgerLeft()}
+  if (e.which===RIGHT_ARROW) {moveDodgerRight()}
+}
+
   // implement me!
   /**
    * This function should call `moveDodgerLeft()`
@@ -119,23 +137,32 @@ function moveDodger(e) {
    * we've declared for you above.)
    * And be sure to use the functions declared below!
    */
-}
+// }
 
 function moveDodgerLeft() {
-  // implement me!
+  window.requestAnimationFrame(function (){
+    var left = positionToInteger(DODGER.style.left)
+    if (left > 0) { DODGER.style.left = `${left -= 4}px`}
+  })
+}
   /**
    * This function should move DODGER to the left
    * (mabye 4 pixels?). Use window.requestAnimationFrame()!
    */
-}
+
 
 function moveDodgerRight() {
+  window.requestAnimationFrame(function (){
+    var left = positionToInteger(DODGER.style.left)
+    if (left < 360) { DODGER.style.left = `${left += 4}px`}
+  })
+}
   // implement me!
   /**
    * This function should move DODGER to the right
    * (mabye 4 pixels?). Use window.requestAnimationFrame()!
    */
-}
+
 
 /**
  * @param {string} p The position property