From 38c2b7c62481a3cab70458ac87d85195f5687d55 Mon Sep 17 00:00:00 2001 From: Evan Pavone Date: Sun, 26 Jul 2020 16:14:01 +0000 Subject: [PATCH] Done. --- index.js | 156 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 81 insertions(+), 75 deletions(-) diff --git a/index.js b/index.js index 19bad7092f..71784c01c3 100644 --- a/index.js +++ b/index.js @@ -1,42 +1,37 @@ /** * Don't change these constants! */ -const DODGER = document.getElementById('dodger') -const GAME = document.getElementById('game') -const GAME_HEIGHT = 400 -const GAME_WIDTH = 400 -const LEFT_ARROW = 37 // use e.which! -const RIGHT_ARROW = 39 // use e.which! -const ROCKS = [] -const START = document.getElementById('start') - -var gameInterval = null - +const DODGER = document.getElementById('dodger'); +const GAME = document.getElementById('game'); +const GAME_HEIGHT = 400; +const GAME_WIDTH = 400; +const LEFT_ARROW = 37; // use e.which! +const RIGHT_ARROW = 39; // use e.which! +const ROCKS = []; +const START = document.getElementById('start'); + +var gameInterval = null; /** * Be aware of what's above this line, * but all of your work should happen below. */ 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; + const top = positionToInteger(rock.style.top);//gives rock's distance from top as an integer (without 'px') + //the following 'if' statement says 'if the rock's distance from the top is greater than 360 (i.e. it is now at same level or below where the dodger is)... 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 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 /** + const dodgerLeftEdge = positionToInteger(DODGER.style.left);//gives dodger's left edge distance from left as an integer (without 'px') + const dodgerRightEdge = dodgerLeftEdge+40;//gives dodger's right edge distance from left as an integer (without 'px') + const rockLeftEdge = positionToInteger(rock.style.left);//gives rock's left edge distance from left as an integer (without 'px') + const rockRightEdge = rockLeftEdge+20; + if ((rockLeftEdge <= dodgerLeftEdge && rockRightEdge >= dodgerLeftEdge) || + (rockLeftEdge >= dodgerLeftEdge && rockRightEdge <= dodgerRightEdge) || + (rockLeftEdge <= dodgerRightEdge && rockRightEdge >= dodgerRightEdge)) { + return true; + } +} +} + /** explaining above logic: * 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, @@ -44,41 +39,35 @@ function checkCollision(rock) { * 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. - */) { - return true - } - } -} - -function createRock(x) { - const rock = document.createElement('div') - - rock.className = 'rock' - rock.style.left = `${x}px` + * and the rock's right edge is > the DODGER's right edge + */ - // Hmmm, why would we have used `var` here? - var top = 0 - - rock.style.top = top - - /** - * Now that we have a rock, we'll need to append - * it to GAME and move it downwards. - */ +function createRock(x) { + const rock = document.createElement('div'); + rock.className = 'rock'; + rock.style.left = `${x}px`; + var top2 = rock.style.top = 0; + 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!) - /** - * If a rock collides with the DODGER, - * we should call endGame(). + /* 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 @@ -87,18 +76,18 @@ function createRock(x) { /** * But if the rock *has* reached the bottom of the GAME, - * we should remove the rock from the DOM. + * we should remove the rock from the DOM */ - } - // We should kick off the animation of the rock around here. + // We should kick of 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) + // when there's a collision + ROCKS.push(rock); - // Finally, return the rock element you've created. - return rock + // Finally, return the rock element you've created + return rock; } /** @@ -108,10 +97,26 @@ 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) { - // implement me! + 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()` * if the left arrow is pressed and `moveDodgerRight()` @@ -122,21 +127,22 @@ function moveDodger(e) { } function moveDodgerLeft() { - // implement me! - /** - * This function should move DODGER to the left - * (mabye 4 pixels?). Use window.requestAnimationFrame()! - */ + window.requestAnimationFrame(function() { + const left = positionToInteger(DODGER.style.left) + if (left>0) { + DODGER.style.left = `${left - 6}px` + } + }); } function moveDodgerRight() { - // implement me! - /** - * This function should move DODGER to the right - * (mabye 4 pixels?). Use window.requestAnimationFrame()! - */ -} - + window.requestAnimationFrame(function() { + const left = positionToInteger(DODGER.style.left) + if (left<360) { + DODGER.style.left = `${left + 6}px` + } + }); + } /** * @param {string} p The position property * @returns {number} The position as an integer (without 'px')