From 532d0abfc0c8980574d2104ad15071a149dc95d1 Mon Sep 17 00:00:00 2001 From: Jastien Sandhu Date: Sun, 17 May 2020 04:18:35 +0000 Subject: [PATCH 1/3] Done. --- index.js | 68 +++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 58 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index 19bad7092f..7419097971 100644 --- a/index.js +++ b/index.js @@ -10,7 +10,7 @@ const RIGHT_ARROW = 39 // use e.which! const ROCKS = [] const START = document.getElementById('start') -var gameInterval = null +const gameInterval = null /** * Be aware of what's above this line, @@ -29,14 +29,13 @@ 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; - - if (false /** + const rockRightEdge = rockLeftEdge+ 20; + /** * 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,7 +44,10 @@ 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. - */) { + */ + if ((rockLeftEdge <= dodgerLeftEdge && rockRightEdge >= dodgerLeftEdge) || + (rockLeftEdge >= dodgerLeftEdge && rockRightEdge <= dodgerRightEdge) || + (rockLeftEdge <= dodgerRightEdge && rockRightEdge >= dodgerRightEdge)) { return true } } @@ -66,25 +68,35 @@ 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() { + x.style = `${top += 2}px` // implement me! // (use the comments below to guide you!) /** * If a rock collides with the DODGER, * we should call endGame(). */ - + if(checkCollision(rock)) + { + endGame(); + } /** * Otherwise, if the rock hasn't reached the bottom of * the GAME, we want to move it again. */ - + if (top < GAME_HEIGHT) + { + window.requestAnimationFrame(moveRock) + }else + { + rock.remove() + } /** * But if the rock *has* reached the bottom of the GAME, * we should remove the rock from the DOM. @@ -92,7 +104,7 @@ function createRock(x) { } // 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. ROCKS.push(rock) @@ -108,6 +120,11 @@ function createRock(x) { * Finally, alert "YOU LOSE!" to the player. */ function endGame() { + clearInterval(gameInterval) + ROCKS.forEach(function(rock){ rock.remove()}) + document.removeEventListener('keydown', moveDodger); + alert("YOU LOSE!") + } function moveDodger(e) { @@ -119,6 +136,21 @@ function moveDodger(e) { * we've declared for you above.) * And be sure to use the functions declared below! */ + //Test codes asks for propagation , defaults, so checked for either input and inputted + 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() + } + } function moveDodgerLeft() { @@ -127,6 +159,15 @@ function moveDodgerLeft() { * This function should move DODGER to the left * (mabye 4 pixels?). Use window.requestAnimationFrame()! */ + window.requestAnimationFrame(function() { + var left = positionToInteger(dodger.style.left) + + if(left > 0) + { + dodger.style.left = `${left - 4}px` + } + }) + } function moveDodgerRight() { @@ -135,6 +176,13 @@ function moveDodgerRight() { * This function should move DODGER to the right * (mabye 4 pixels?). Use window.requestAnimationFrame()! */ + window.requestAnimationFrame(function(){ + var right = positionToInteger(dodger.style.left) + if (right < 360) + { + dodger.style.left= `${right + 4}px` + } + }) } /** From 26083eb1dd4ab9c63cbb57fd198d8cb2b19c31b1 Mon Sep 17 00:00:00 2001 From: Jastien Sandhu Date: Sun, 17 May 2020 04:34:27 +0000 Subject: [PATCH 2/3] Done. --- index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 7419097971..5d9fc08334 100644 --- a/index.js +++ b/index.js @@ -10,7 +10,7 @@ const RIGHT_ARROW = 39 // use e.which! const ROCKS = [] const START = document.getElementById('start') -const gameInterval = null +var gameInterval = null /** * Be aware of what's above this line, @@ -75,7 +75,7 @@ function createRock(x) { * seems like a good pace.) */ function moveRock() { - x.style = `${top += 2}px` + rock.style.top = `${top += 2}px` // implement me! // (use the comments below to guide you!) /** @@ -123,7 +123,7 @@ function endGame() { clearInterval(gameInterval) ROCKS.forEach(function(rock){ rock.remove()}) document.removeEventListener('keydown', moveDodger); - alert("YOU LOSE!") + return alert("YOU LOSE!") } @@ -137,7 +137,7 @@ function moveDodger(e) { * And be sure to use the functions declared below! */ //Test codes asks for propagation , defaults, so checked for either input and inputted - if(e.which === LEFT_ARROW || e.which === RIGHT_ARROW){ + if(e.which === LEFT_ARROW || e.which === RIGHT_ARROW){ e.preventDefault() e.stopPropagation() } From 00f56a47fdbe01718f9ee701db43e0a6c08b276a Mon Sep 17 00:00:00 2001 From: Jastien Sandhu Date: Sun, 17 May 2020 04:37:11 +0000 Subject: [PATCH 3/3] Done. --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 5d9fc08334..9d534d2d10 100644 --- a/index.js +++ b/index.js @@ -123,7 +123,8 @@ function endGame() { clearInterval(gameInterval) ROCKS.forEach(function(rock){ rock.remove()}) document.removeEventListener('keydown', moveDodger); - return alert("YOU LOSE!") + var e = alert("YOU LOSE!") + return e.close() }