From 6943eb761b6a5b2b9e3c8fdb031cf1cfc0ee9497 Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 15:40:34 +0000 Subject: [PATCH 01/17] Done. --- index.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 19bad7092f..bccdec5e01 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 +var gameInterval = null; /** * Be aware of what's above this line, @@ -20,18 +20,25 @@ var gameInterval = null function checkCollision(rock) { // implement me! // use the comments below to guide you! - const top = positionToInteger(rock.style.top) + const top = positionToInteger(rock.style.top); + + var droppingRocks = $("droppingRocks"); + //droppingRocks is a div but I'm not sure what to name it because I don't want to name it dodger, that's not the right description... + droppingRocks.animate({height:'20px', opacity: '0.1'}, "slow"); + droppingRocks.animate({height:'20px', opacity: '0.2'}, "slow"); + droppingRocks.animate({height:'20px', opacity: '0.3'}, "slow"); + droppingRocks.animate({height:'20px', opacity: '0.4'}, "slow"); // rocks are 20px high // DODGER is 20px high // GAME_HEIGHT - 20 - 20 = 360px; if (top > 360) { - const dodgerLeftEdge = positionToInteger(DODGER.style.left) + 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) + const rockLeftEdge = positionToInteger(rock.style.left); // FIXME: The rock is 20 pixel's wide -- how do we get the right edge? const rockRightEdge = 0; @@ -52,7 +59,7 @@ function checkCollision(rock) { } function createRock(x) { - const rock = document.createElement('div') + const rock = document.createElement('div'); rock.className = 'rock' rock.style.left = `${x}px` From 74b602caab4d92089b5d710d92e92447163758ef Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 16:29:16 +0000 Subject: [PATCH 02/17] Done. --- index.js | 46 +++++++++++++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/index.js b/index.js index bccdec5e01..9961546b4f 100644 --- a/index.js +++ b/index.js @@ -9,39 +9,48 @@ 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! + + function checkCollision(rock) { const top = positionToInteger(rock.style.top); - - var droppingRocks = $("droppingRocks"); - //droppingRocks is a div but I'm not sure what to name it because I don't want to name it dodger, that's not the right description... - droppingRocks.animate({height:'20px', opacity: '0.1'}, "slow"); - droppingRocks.animate({height:'20px', opacity: '0.2'}, "slow"); - droppingRocks.animate({height:'20px', opacity: '0.3'}, "slow"); - droppingRocks.animate({height:'20px', opacity: '0.4'}, "slow"); // rocks are 20px high // DODGER is 20px high // GAME_HEIGHT - 20 - 20 = 360px; + if (top > 360) { - const dodgerLeftEdge = positionToInteger(DODGER.style.left); + + const dodgerLeftEdge = DODGER.style.left = 200; + // take DODGER.style.left and convert it to an integer + + + + + const dodgerRightEdge = DODGER.style.right = 200; + // I would do the same for dodgerRightEdge + + - // FIXME: The DODGER is 40 pixels wide -- how do we get the right edge? - const dodgerRightEdge = 0; - const rockLeftEdge = positionToInteger(rock.style.left); + const rockLeftEdge = positionToInteger(rock.style.left); + // repeat for rockLeftEdge + + + const rockRightEdge = positionToInteger(rock.style.right); + // repeat for rockRightEdge + + + + // FIXME: The DODGER is 40 pixels wide -- how do we get the right edge? // FIXME: The rock is 20 pixel's wide -- how do we get the right edge? - const rockRightEdge = 0; + // We will then need to use the information above to write some logic to check collision + if (false /** * Think about it -- what's happening here? @@ -58,6 +67,9 @@ function checkCollision(rock) { } } + + + function createRock(x) { const rock = document.createElement('div'); From 8831766df71967750189ca01c2270195d522da59 Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 16:49:56 +0000 Subject: [PATCH 03/17] Done. --- index.js | 33 +++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/index.js b/index.js index 9961546b4f..ea0d1d6825 100644 --- a/index.js +++ b/index.js @@ -25,13 +25,13 @@ var gameInterval = null; if (top > 360) { - const dodgerLeftEdge = DODGER.style.left = 200; + const dodgerLeftEdge = DODGER.style.left ; // take DODGER.style.left and convert it to an integer - const dodgerRightEdge = DODGER.style.right = 200; + const dodgerRightEdge = DODGER.style.right ; // I would do the same for dodgerRightEdge @@ -52,19 +52,24 @@ var gameInterval = null; // We will then need to use the information above to write some logic to check collision - 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 + + + //There's been a collision if one of three things is true: + if ((rockLeftEdge > dodgerLeftEdge) && (rockRightEdge < dodgerLeftEdge)){ + return true; + } + else if ((rockLeftEdge > dodgerLeftEdge) && (rockRightEdge < dodgerRightEdge)){ + return true; + } + else if ((rockLeftEdge < dodgerRightEdge) && (rockRightEdge > dodgerRightEdge)){ + return true; + } + else { + return false; + } + } - } + } From c9ec08babc696608e3a2fd86b65824d7b58dc640 Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 17:32:46 +0000 Subject: [PATCH 04/17] Done. --- index.js | 41 ++++++++++++++++------------------------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/index.js b/index.js index ea0d1d6825..374f852c2b 100644 --- a/index.js +++ b/index.js @@ -28,33 +28,20 @@ var gameInterval = null; const dodgerLeftEdge = DODGER.style.left ; // take DODGER.style.left and convert it to an integer - - - const dodgerRightEdge = DODGER.style.right ; // I would do the same for dodgerRightEdge - - - - const rockLeftEdge = positionToInteger(rock.style.left); // repeat for rockLeftEdge - const rockRightEdge = positionToInteger(rock.style.right); // repeat for rockRightEdge - - // FIXME: The DODGER is 40 pixels wide -- how do we get the right edge? // FIXME: The rock is 20 pixel's wide -- how do we get the right edge? // We will then need to use the information above to write some logic to check collision - - - - //There's been a collision if one of three things is true: + //There's been a collision if one of three things is true: if ((rockLeftEdge > dodgerLeftEdge) && (rockRightEdge < dodgerLeftEdge)){ return true; } @@ -67,9 +54,7 @@ var gameInterval = null; else { return false; } - } - } @@ -78,18 +63,20 @@ var gameInterval = null; function createRock(x) { const rock = document.createElement('div'); - rock.className = 'rock' - rock.style.left = `${x}px` + rock.className = 'rock'; + rock.style.left = `${x}px`; // Hmmm, why would we have used `var` here? - var top = 0 + var top = 0; - rock.style.top = top + rock.style.top = top; /** * Now that we have a rock, we'll need to append * it to GAME and move it downwards. */ +GAME.appendChild(rock); +moveRock(); /** @@ -99,11 +86,15 @@ function createRock(x) { function moveRock() { // implement me! // (use the comments below to guide you!) - /** - * If a rock collides with the DODGER, - * we should call endGame(). - */ - + + if (checkCollision(rock) = true) { //a rock collides with the DODGER, + alert endGame() //we should call endGame(). + } + + else { + moveRock() + } + /** * Otherwise, if the rock hasn't reached the bottom of * the GAME, we want to move it again. From c9b161edc8f527a931a662950f5b0ea02de9991b Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 17:53:38 +0000 Subject: [PATCH 05/17] Done. --- index.js | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/index.js b/index.js index 374f852c2b..4d370e22dd 100644 --- a/index.js +++ b/index.js @@ -83,27 +83,36 @@ moveRock(); * 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!) +function moveRock() { + # implement me! + # (use the comments below to guide you!) + # should we reset rock.style.top??? - if (checkCollision(rock) = true) { //a rock collides with the DODGER, - alert endGame() //we should call endGame(). + if (checkCollision(rock) = true) { #a rock collides with the DODGER, + return endGame() #we should call endGame() } - else { - moveRock() - } + + + # Otherwise, if the rock hasn't reached the bottom of + # the GAME, we want to move it again. + if (top < GAME_HEIGHT) { + #mve rock + } else { + #remove rock + } + + + # But if the rock *has* reached the bottom of the GAME, + # we should remove the rock from the DOM. + } /** * 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. - */ + } // We should kick off the animation of the rock around here. From 08b895971b32c1dc775b22f4e8021c1a01e925fa Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 18:59:03 +0000 Subject: [PATCH 06/17] Done. --- index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/index.js b/index.js index 4d370e22dd..793786c6ff 100644 --- a/index.js +++ b/index.js @@ -84,22 +84,22 @@ moveRock(); * seems like a good pace.) */ function moveRock() { - # implement me! - # (use the comments below to guide you!) - # should we reset rock.style.top??? + // implement me! + //(use the comments below to guide you!) + // should we reset rock.style.top??? - if (checkCollision(rock) = true) { #a rock collides with the DODGER, - return endGame() #we should call endGame() + if (checkCollision()) { //a rock collides with the DODGER, + return endGame() //we should call endGame() } - # Otherwise, if the rock hasn't reached the bottom of - # the GAME, we want to move it again. + // Otherwise, if the rock hasn't reached the bottom of + // the GAME, we want to move it again. if (top < GAME_HEIGHT) { - #mve rock + //mve rock } else { - #remove rock + //remove rock } From 1c2702c4a6b2b146abbc111a784f7ddb69125698 Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 19:24:06 +0000 Subject: [PATCH 07/17] Done. --- index.js | 39 ++++++++++++++++++++++++--------------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 793786c6ff..3e1e622f4b 100644 --- a/index.js +++ b/index.js @@ -71,25 +71,19 @@ function createRock(x) { rock.style.top = top; - /** - * Now that we have a rock, we'll need to append - * it to GAME and move it downwards. - */ + GAME.appendChild(rock); -moveRock(); - /** - * 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!) // should we reset rock.style.top??? if (checkCollision()) { //a rock collides with the DODGER, - return endGame() //we should call endGame() + return endGame() //we should call endGame() } @@ -103,8 +97,8 @@ function moveRock() { } - # But if the rock *has* reached the bottom of the GAME, - # we should remove the rock from the DOM. + // But if the rock *has* reached the bottom of the GAME, + // we should remove the rock from the DOM. } /** @@ -113,16 +107,31 @@ function moveRock() { */ - } + // We should kick off the animation of the rock around here. - + + function move(el) { + var top = 0 + + function step() { + el.style.top = `${top += 2}px` + + if (top < 200) { + window.requestAnimationFrame(step) + } + } + + window.requestAnimationFrame(step) +} + + // 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 + return rock; } /** From fe0aa9ed85deed6481bac1b13151f227f8150d6f Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 19:40:10 +0000 Subject: [PATCH 08/17] Done. --- index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 3e1e622f4b..c91ccbe855 100644 --- a/index.js +++ b/index.js @@ -25,16 +25,16 @@ var gameInterval = null; if (top > 360) { - const dodgerLeftEdge = DODGER.style.left ; + const dodgerLeftEdge = positionToInteger(DODGER.style.left) ; // take DODGER.style.left and convert it to an integer - const dodgerRightEdge = DODGER.style.right ; + const dodgerRightEdge = DODGER.style.right + 40; // I would do the same for dodgerRightEdge const rockLeftEdge = positionToInteger(rock.style.left); // repeat for rockLeftEdge - const rockRightEdge = positionToInteger(rock.style.right); + const rockRightEdge = rock.style.right + 20; // repeat for rockRightEdge // FIXME: The DODGER is 40 pixels wide -- how do we get the right edge? @@ -55,7 +55,7 @@ var gameInterval = null; return false; } } -} + From 9302867a871b0f0c504e201a6dab9580e05a7a15 Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 22:23:18 +0000 Subject: [PATCH 09/17] Done. --- index.js | 44 ++++++++++++++++---------------------------- 1 file changed, 16 insertions(+), 28 deletions(-) diff --git a/index.js b/index.js index c91ccbe855..fc43532e6a 100644 --- a/index.js +++ b/index.js @@ -18,45 +18,33 @@ var gameInterval = null; function checkCollision(rock) { 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) ; - // take DODGER.style.left and convert it to an integer - const dodgerRightEdge = DODGER.style.right + 40; - // I would do the same for dodgerRightEdge - const rockLeftEdge = positionToInteger(rock.style.left); - // repeat for rockLeftEdge - const rockRightEdge = rock.style.right + 20; - // repeat for rockRightEdge - - // FIXME: The DODGER is 40 pixels wide -- how do we get the right edge? - // FIXME: The rock is 20 pixel's wide -- how do we get the right edge? - // We will then need to use the information above to write some logic to check collision - - //There's been a collision if one of three things is true: - if ((rockLeftEdge > dodgerLeftEdge) && (rockRightEdge < dodgerLeftEdge)){ - return true; - } - else if ((rockLeftEdge > dodgerLeftEdge) && (rockRightEdge < dodgerRightEdge)){ - return true; - } - else if ((rockLeftEdge < dodgerRightEdge) && (rockRightEdge > dodgerRightEdge)){ - return true; - } + //There's been a collision if one of three things is true: + if (((rockLeftEdge <= dodgerLeftEdge) && (rockRightEdge >= dodgerLeftEdge)) || + + + ((rockLeftEdge > dodgerLeftEdge) && (rockRightEdge < dodgerRightEdge)) || + + + ((rockLeftEdge < dodgerRightEdge) && (rockRightEdge > dodgerRightEdge))){ + + return true; + + } + + else { return false; } } - +} From 40d635a844261e771de48b6e609639c01b47d2ed Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 22:41:21 +0000 Subject: [PATCH 10/17] Done. --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index fc43532e6a..4d6ad3d80d 100644 --- a/index.js +++ b/index.js @@ -29,10 +29,10 @@ var gameInterval = null; if (((rockLeftEdge <= dodgerLeftEdge) && (rockRightEdge >= dodgerLeftEdge)) || - ((rockLeftEdge > dodgerLeftEdge) && (rockRightEdge < dodgerRightEdge)) || + ((rockLeftEdge >= dodgerLeftEdge) && (rockRightEdge <= dodgerRightEdge)) || - ((rockLeftEdge < dodgerRightEdge) && (rockRightEdge > dodgerRightEdge))){ + ((rockLeftEdge <= dodgerRightEdge) && (rockRightEdge >= dodgerRightEdge))){ return true; From 07d639aec88d72f17617c4b24a14e1c42888c933 Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Fri, 22 May 2020 23:11:59 +0000 Subject: [PATCH 11/17] Done. --- index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 4d6ad3d80d..0af029baa8 100644 --- a/index.js +++ b/index.js @@ -25,6 +25,7 @@ var gameInterval = null; const dodgerRightEdge = DODGER.style.right + 40; const rockLeftEdge = positionToInteger(rock.style.left); const rockRightEdge = rock.style.right + 20; + //There's been a collision if one of three things is true: if (((rockLeftEdge <= dodgerLeftEdge) && (rockRightEdge >= dodgerLeftEdge)) || @@ -70,8 +71,8 @@ function moveRock() { //(use the comments below to guide you!) // should we reset rock.style.top??? - if (checkCollision()) { //a rock collides with the DODGER, - return endGame() //we should call endGame() + if (checkCollision(rock)) { //a rock collides with the DODGER, + return endGame(); //we should call endGame() } From 4551a5310ccc46e5ac2d09f7b1fe2349015b05ab Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Sat, 23 May 2020 19:14:52 +0000 Subject: [PATCH 12/17] Done. --- index.js | 204 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 105 insertions(+), 99 deletions(-) diff --git a/index.js b/index.js index 0af029baa8..9183d60c2f 100644 --- a/index.js +++ b/index.js @@ -21,142 +21,148 @@ var gameInterval = null; if (top > 360) { - const dodgerLeftEdge = positionToInteger(DODGER.style.left) ; - const dodgerRightEdge = DODGER.style.right + 40; + const dodgerLeftEdge = positionToInteger(DODGER.style.left); + const dodgerRightEdge = dodgerLeftEdge + 40; const rockLeftEdge = positionToInteger(rock.style.left); - const rockRightEdge = rock.style.right + 20; + const rockRightEdge = rockLeftEdge + 20; //There's been a collision if one of three things is true: - if (((rockLeftEdge <= dodgerLeftEdge) && (rockRightEdge >= dodgerLeftEdge)) || - - - ((rockLeftEdge >= dodgerLeftEdge) && (rockRightEdge <= dodgerRightEdge)) || - - - ((rockLeftEdge <= dodgerRightEdge) && (rockRightEdge >= dodgerRightEdge))){ - - return true; - - } - - - else { - return false; - } + 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; - + GAME.appendChild(rock); + + function moveRock() { + + + rock.style.top = `${top += 2}px`; + if (checkCollision(rock)) { + return endGame(); + } + + if (top < 400) { + window.requestAnimationFrame(moveRock); + } + else { + rock.remove(); + } + + + + } -GAME.appendChild(rock); - - - - -function moveRock() { - // implement me! - //(use the comments below to guide you!) - // should we reset rock.style.top??? - - if (checkCollision(rock)) { //a rock collides with the DODGER, - return endGame(); //we should call endGame() - } - - - // Otherwise, if the rock hasn't reached the bottom of - // the GAME, we want to move it again. - if (top < GAME_HEIGHT) { - //mve rock - } else { - //remove rock - } + window.requestAnimationFrame(moveRock); + ROCKS.push(rock); + return rock; - - // But if the rock *has* reached the bottom of the GAME, - // we should remove the rock from the DOM. - } - - /** - * Otherwise, if the rock hasn't reached the bottom of - * the GAME, we want to move it again. - */ - - +} - - // We should kick off the animation of the rock around here. - - function move(el) { - var top = 0 - - function step() { - el.style.top = `${top += 2}px` - - if (top < 200) { - window.requestAnimationFrame(step) - } - } - - window.requestAnimationFrame(step) -} - // 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; -} - /** * End the game by clearing `gameInterval`, - * removing all ROCKS from the DOM, + * removing all ROCKS from the DOM,// iterate through ROCKS[] rock.remove * and removing the `moveDodger` event listener. * Finally, alert "YOU LOSE!" to the player. */ function endGame() { -} +var rock; + + clearInterval(gameInterval); + + for (let i=0; i 0) { + dodger.style.left = `${left - 4}px`; + } + + document.addEventListener('keydown', function(e) { + if (e.which === 37) { + moveDodgerLeft(); + } + }); + + } + else { + + + window.requestAnimationFrame(moveDodgerLeft); + } } + + + function moveDodgerRight() { - // implement me! - /** - * This function should move DODGER to the right - * (mabye 4 pixels?). Use window.requestAnimationFrame()! - */ + + var rightNumbers = dodger.style.right.replace('px', ''); + var right = parseInt(rightNumbers, 10); + + if (right > 0) { + dodger.style.right = `${right - 4}px`; + } + +document.addEventListener('keydown', function(e) { + if (e.which === 39) { + moveDodgerRight(); + } +}); + + + + // Use window.requestAnimationFrame()! } /** @@ -170,7 +176,7 @@ function positionToInteger(p) { function start() { window.addEventListener('keydown', moveDodger) - START.style.display = 'none' + START.style.display = 'none' gameInterval = setInterval(function() { createRock(Math.floor(Math.random() * (GAME_WIDTH - 20))) From 73011b5318f05c1dba0430cde39e30862045cfe0 Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Sun, 24 May 2020 00:06:19 +0000 Subject: [PATCH 13/17] Done. --- index.js | 67 ++++++++++++++++++++++++-------------------------------- 1 file changed, 29 insertions(+), 38 deletions(-) diff --git a/index.js b/index.js index 9183d60c2f..e53e2f956b 100644 --- a/index.js +++ b/index.js @@ -85,11 +85,11 @@ var rock; clearInterval(gameInterval); for (let i=0; i 0) { - dodger.style.left = `${left - 4}px`; - } - - document.addEventListener('keydown', function(e) { - if (e.which === 37) { - moveDodgerLeft(); - } - }); - - } - else { - - - window.requestAnimationFrame(moveDodgerLeft); + window.requestAnimationFrame(function(){ + var leftNumbers = DODGER.style.left.replace('px', ''); + var left = parseInt(leftNumbers, 10); + if (left > 0) { + DODGER.style.left = `${left - 4}px`; } + }); } - function moveDodgerRight() { - - var rightNumbers = dodger.style.right.replace('px', ''); - var right = parseInt(rightNumbers, 10); - - if (right > 0) { - dodger.style.right = `${right - 4}px`; - } - -document.addEventListener('keydown', function(e) { - if (e.which === 39) { - moveDodgerRight(); + window.requestAnimationFrame(function(){ + var leftNumbers = DODGER.style.left.replace('px', ''); + var left = parseInt(leftNumbers, 10); + if (left < 360) { + DODGER.style.left = `${left + 4}px`; + } }); +} + // Use window.requestAnimationFrame()! -} + /** * @param {string} p The position property @@ -182,3 +171,5 @@ function start() { createRock(Math.floor(Math.random() * (GAME_WIDTH - 20))) }, 1000) } + + From f66cd40d844ae742ff9011c28545ab3e1327750a Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Sun, 24 May 2020 00:12:06 +0000 Subject: [PATCH 14/17] Done. --- index.js | 24 ++---------------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/index.js b/index.js index e53e2f956b..90ea2c2138 100644 --- a/index.js +++ b/index.js @@ -101,27 +101,16 @@ var rock; function moveDodger(e) { document.addEventListener('keydown', function(e) { - if (e.which === 37) { + if (e.which === LEFT_ARROW) { moveDodgerLeft(); } }) document.addEventListener('keydown', function(e) { - if (e.which === 39) { + if (e.which === RIGHT_ARROW) { moveDodgerRight(); } }) - - // 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! - * const LEFT_ARROW = 37 // use e.which! - * const RIGHT_ARROW = 39 // use e.which! - * - */ } function moveDodgerLeft() { @@ -148,16 +137,7 @@ function moveDodgerRight() { }); } - - - - // Use window.requestAnimationFrame()! - -/** - * @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 } From 7a64c2e43f90bea15293ccf8f09cc63cca84f1c5 Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Sun, 24 May 2020 00:14:06 +0000 Subject: [PATCH 15/17] Done. --- index.js | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/index.js b/index.js index 90ea2c2138..7304bf6059 100644 --- a/index.js +++ b/index.js @@ -73,12 +73,7 @@ function createRock(x) { -/** - * End the game by clearing `gameInterval`, - * removing all ROCKS from the DOM,// iterate through ROCKS[] rock.remove - * and removing the `moveDodger` event listener. - * Finally, alert "YOU LOSE!" to the player. - */ + function endGame() { var rock; @@ -104,13 +99,13 @@ function moveDodger(e) { if (e.which === LEFT_ARROW) { moveDodgerLeft(); } - }) + }); document.addEventListener('keydown', function(e) { if (e.which === RIGHT_ARROW) { moveDodgerRight(); } - }) + }); } function moveDodgerLeft() { @@ -139,17 +134,17 @@ function moveDodgerRight() { 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); } From c0081e53835080e1af7651dec6c1c57be77bdd4c Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Sun, 24 May 2020 00:34:24 +0000 Subject: [PATCH 16/17] Done. --- index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 7304bf6059..973f94ef7f 100644 --- a/index.js +++ b/index.js @@ -96,16 +96,20 @@ var rock; function moveDodger(e) { document.addEventListener('keydown', function(e) { + e.preventDefault(); + e.stopPropagation(); if (e.which === LEFT_ARROW) { moveDodgerLeft(); } }); document.addEventListener('keydown', function(e) { - if (e.which === RIGHT_ARROW) { - moveDodgerRight(); - } - }); + e.preventDefault(); + e.stopPropagation(); + if (e.which === RIGHT_ARROW) { + moveDodgerRight(); + } + }); } function moveDodgerLeft() { From e076866d6689062dd5aa6f6884945d3b50f717be Mon Sep 17 00:00:00 2001 From: Kimberly Kohel-Hayes Date: Sun, 24 May 2020 00:50:32 +0000 Subject: [PATCH 17/17] Done. --- index.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/index.js b/index.js index 973f94ef7f..3c99ee83a6 100644 --- a/index.js +++ b/index.js @@ -89,27 +89,31 @@ var rock; window.alert("YOU LOSE!"); - START.style.display = 'Play Again?'; + START.innerText = "Start Again?"; + START.style.display = ''; } function moveDodger(e) { - document.addEventListener('keydown', function(e) { - e.preventDefault(); - e.stopPropagation(); + + if (e.which === LEFT_ARROW) { + moveDodgerLeft(); + e.preventDefault(); + e.stopPropagation(); } - }); + - document.addEventListener('keydown', function(e) { - e.preventDefault(); - e.stopPropagation(); + + if (e.which === RIGHT_ARROW) { + e.preventDefault(); + e.stopPropagation(); moveDodgerRight(); } - }); + } function moveDodgerLeft() {