diff --git a/index.js b/index.js index 19bad7092f..8fe47da115 100644 --- a/index.js +++ b/index.js @@ -18,8 +18,7 @@ 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 @@ -27,25 +26,15 @@ function checkCollision(rock) { // 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