diff --git a/index.js b/index.js index 19bad7092f..3c99ee83a6 100644 --- a/index.js +++ b/index.js @@ -9,148 +9,150 @@ 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) - // rocks are 20px high - // DODGER is 20px high - // GAME_HEIGHT - 20 - 20 = 360px; + function checkCollision(rock) { + const top = positionToInteger(rock.style.top); + 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; + + //There's been a collision if one of three things is true: + return ( + ((rockLeftEdge <= dodgerLeftEdge) && (rockRightEdge >= dodgerLeftEdge)) || + ((rockLeftEdge >= dodgerLeftEdge) && (rockRightEdge <= dodgerRightEdge)) || + ((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 +function createRock(x) { + const rock = document.createElement('div'); + rock.className = 'rock'; + rock.style.left = `${x}px`; + var top = 0; + rock.style.top = top; + GAME.appendChild(rock); - /** - * Now that we have a rock, we'll need to append - * it to GAME and move it downwards. - */ + function moveRock() { + + + rock.style.top = `${top += 2}px`; + if (checkCollision(rock)) { + return endGame(); + } + + if (top < 400) { + window.requestAnimationFrame(moveRock); + } + else { + rock.remove(); + } + + + + } + + + window.requestAnimationFrame(moveRock); + ROCKS.push(rock); + return rock; + +} + + + +function endGame() { +var 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(). - */ - - /** - * 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. - */ + clearInterval(gameInterval); + + for (let i=0; i 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(){ + var leftNumbers = DODGER.style.left.replace('px', ''); + var left = parseInt(leftNumbers, 10); + 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); } + +