Done

index.js

@@ -29,14 +29,18 @@ 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) && top >360){
+      //rock collided
+      return true
+    }
+    /**
                * 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,9 +49,11 @@ 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
+               */
+    else{
+      return false
     }
+
   }
 }
 
@@ -58,6 +64,7 @@ function createRock(x) {
   rock.style.left = `${x}px`
 
   // Hmmm, why would we have used `var` here?
+  // So it will be attached to each rock individually?
   var top = 0
 
   rock.style.top = top
@@ -66,6 +73,8 @@ function createRock(x) {
    * Now that we have a rock, we'll need to append
    * it to GAME and move it downwards.
    */
+  ROCKS.push(rock)
+  GAME.appendChild(rock)
 
 
   /**
@@ -79,19 +88,54 @@ function createRock(x) {
      * If a rock collides with the DODGER,
      * we should call endGame().
      */
+
+
+    /**
+    Originl attempt at checking for collisions
+    for(var i = 0; i<ROCKS.length ; i++){
+      if(checkCollision(ROCKS[i])){
+        endGame();
+        return;
+      }
+    }
+      */
+
+
+
+    if(checkCollision(rock)){
+      endGame();
+      return;
+    }
+
+
+
 
     /**
      * Otherwise, if the rock hasn't reached the bottom of
      * the GAME, we want to move it again.
      */
+    if(top < 360){
+      rock.style.top += 2
+      top= rock.style.top;
+    }
+
 
     /**
      * But if the rock *has* reached the bottom of the GAME,
      * we should remove the rock from the DOM.
      */
+    else if(top >= 360){
+      rock.remove()
+    }
+
   }
+
 
   // We should kick off the animation of the rock around here.
+    if(top < 360){
+      window.requestAnimationFrame(moveRock)
+    }
+
 
   // Add the rock to ROCKS so that we can remove all rocks
   // when there's a collision.
@@ -108,6 +152,17 @@ function createRock(x) {
  * Finally, alert "YOU LOSE!" to the player.
  */
 function endGame() {
+  for(var i = 0 ; i< ROCKS.length;i++){
+    ROCKS[i].remove()
+  }
+
+  DODGER.removeEventListener('keydown',moveDodger);
+  var times = ROCKS.length
+  for(var b = 0 ; b< times;b++){
+    ROCKS.unshift();
+  }
+  clearInterval(gameInterval)
+  alert("YOU LOSE!")
 }
 
 function moveDodger(e) {
@@ -119,6 +174,18 @@ function moveDodger(e) {
    * we've declared for you above.)
    * And be sure to use the functions declared below!
    */
+
+  if (e.which === LEFT_ARROW) {
+    moveDodgerLeft()
+    e.stopPropagation()
+    e.preventDefault()
+  }
+  else if(e.which === RIGHT_ARROW){
+    moveDodgerRight()
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
 }
 
 function moveDodgerLeft() {
@@ -127,6 +194,14 @@ function moveDodgerLeft() {
    * This function should move DODGER to the left
    * (mabye 4 pixels?). Use window.requestAnimationFrame()!
    */
+
+  var leftNumbers = dodger.style.left.replace('px', '')
+  var left = parseInt(leftNumbers, 10)
+
+  if (left > 0) {
+    dodger.style.left = `${left - 4}px`
+  }
+
 }
 
 function moveDodgerRight() {
@@ -135,6 +210,14 @@ function moveDodgerRight() {
    * This function should move DODGER to the right
    * (mabye 4 pixels?). Use window.requestAnimationFrame()!
    */
+  var rightNumbers = dodger.style.left.replace('px', '')
+  var right = parseInt(rightNumbers, 10)
+
+  if (right < 360) {
+    dodger.style.left = `${right + 4}px`
+
+  }
+
 }
 
 /**