diff --git a/index.html b/index.html index 04ddda2cc2..96e8be3839 100644 --- a/index.html +++ b/index.html @@ -19,5 +19,6 @@ + diff --git a/index.js b/index.js index 19bad7092f..5deb03bf85 100644 --- a/index.js +++ b/index.js @@ -1,71 +1,54 @@ /** * 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') +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; -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) + 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 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. - */) { - return true - } + const dodgerLeftEdge = positionToInteger(DODGER.style.left); + const dodgerRightEdge = dodgerLeftEdge + 40; + const rockLeftEdge = positionToInteger(rock.style.left); + const rockRightEdge = rockLeftEdge + 20; + return (rockLeftEdge < dodgerRightEdge && rockRightEdge > dodgerLeftEdge || rockLeftEdge > dodgerLeftEdge && rockRightEdge < dodgerLeftEdge || rockLeftEdge < dodgerRightEdge && rockRightEdge > dodgerRightEdge); } } function createRock(x) { - const rock = document.createElement('div') - - rock.className = 'rock' - rock.style.left = `${x}px` - - // 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. - */ + // rock is a div + const rock = document.createElement('div'); + // assign class name .rock to rock + rock.className = 'rock'; + // generates position on the x axis + rock.style.left = `${x}px`; + //rock will always be generated at the top + var top = rock.style.top = 0; + GAME.appendChild(rock); + /** @@ -73,84 +56,91 @@ function createRock(x) { * 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(). - */ - - /** - * Otherwise, if the rock hasn't reached the bottom of - * the GAME, we want to move it again. - */ - - /** - * But if the rock *has* reached the bottom of the GAME, - * we should remove the rock from the DOM. - */ + //moves top of rock two pixels down (essentially "moving" the rock) + rock.style.top = `${top += 2}px`; + // checks if there is a collision with rock from dodger + if (checkCollision(rock) === true) { + return endGame(); + // this basically is saying as long as the top is less than GAME_HEIGHT, to let it fall. + } if (top < GAME_HEIGHT) { + window.requestAnimationFrame(moveRock); + } else { rock.remove(); + } } - - // We should kick off the animation of the rock around here. - - // Add the rock to ROCKS so that we can remove all rocks - // when there's a collision. - ROCKS.push(rock) - - // Finally, return the rock element you've created. - return rock + // this requests to use the moveRock() function on the next frame + window.requestAnimationFrame(moveRock); + ROCKS.push(rock); +return rock; } - /** * End the game by clearing `gameInterval`, + * clearInterval(gameInterval) * removing all ROCKS from the DOM, + * ROCKS.forEach(function(rock) {rock.remove();}); * and removing the `moveDodger` event listener. * Finally, alert "YOU LOSE!" to the player. */ function endGame() { + //gameInterval calls the createRock function and randomly assigns it a position on the x axis + clearInterval(gameInterval); + // this uses the forEach() array iterator to remove all rocks in the ROCKS array. + ROCKS.forEach(function(rock) { rock.remove() }); + //This removes the event listener for moveDodger located in the start() function + document.removeEventListener('keydown', moveDodger); + alert('YOU LOSE!'); } function moveDodger(e) { - // implement me! - /** - * This function should call `moveDodgerLeft()` - * if the left arrow is pressed and `moveDodgerRight()` - * if the right arrow is pressed. (Check the constants - * we've declared for you above.) - * And be sure to use the functions declared below! - */ + let code = e.which; + + if ([LEFT_ARROW, RIGHT_ARROW].indexOf(code) > -1) { + e.preventDefault(); + e.stopPropagation(); + } + if (LEFT_ARROW === code){ + return moveDodgerLeft(); + } + + if (RIGHT_ARROW === code) { + return moveDodgerRight(); + } } - 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 - 4}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 + 4}px`; + } + }) } + + /** * @param {string} p The position property * @returns {number} The position as an integer (without 'px') */ function positionToInteger(p) { - return parseInt(p.split('px')[0]) || 0 + return parseInt(p.split('px')[0]) || 0; } function start() { - window.addEventListener('keydown', moveDodger) + window.addEventListener('keydown', moveDodger); - START.style.display = 'none' + START.style.display = 'none'; gameInterval = setInterval(function() { - createRock(Math.floor(Math.random() * (GAME_WIDTH - 20))) - }, 1000) -} + createRock(Math.floor(Math.random() * (GAME_WIDTH - 20))); + }, 1000); +} \ No newline at end of file