Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Done #239

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Done #239

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 68 additions & 109 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,142 +1,101 @@
/**
* 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)

// 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 /**
* 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);//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;
}
}
}

function createRock(x) {
const rock = document.createElement('div')

rock.className = 'rock'
rock.style.left = `${x}px`
const rock = document.createElement('div');

// Hmmm, why would we have used `var` here?
var top = 0
rock.className = 'rock';
rock.style.left = `${x}px`;
var top2 = rock.style.top = 0;
GAME.appendChild(rock);

rock.style.top = top

/**
* Now that we have a rock, we'll need to append
* it to GAME and move it downwards.
*/


/**
* 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.
*/
}

// We should kick off the animation of the rock around here.
rock.style.top = `${top2+=2}px`;
if (checkCollision(rock)){
return endGame();
} if (top2 < GAME_HEIGHT){
window.requestAnimationFrame(moveRock);
} else {
rock.remove();
}
}

// Add the rock to ROCKS so that we can remove all rocks
// when there's a collision.
ROCKS.push(rock)
window.requestAnimationFrame(moveRock);

// Finally, return the rock element you've created.
return rock
ROCKS.push(rock);

return rock;
}

/**
* End the game by clearing `gameInterval`,
* removing all ROCKS from the DOM,
* and removing the `moveDodger` event listener.
* 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!
/**
* 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!
*/
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()
}{

}
}

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')
Expand Down