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 #249

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

Done #249

Show file tree
Hide file tree
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
4 changes: 2 additions & 2 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
}

.rock {
width: 20px;
height: 20px;
width: 5px;
height: 5px;
background: tan;
position: absolute;
}
Expand Down
319 changes: 198 additions & 121 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,140 +17,217 @@ var gameInterval = null
* 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;
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
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;
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 = 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 = 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,
* 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.
*/
if ((rockLeftEdge<=dodgerLeftEdge&&rockRightEdge>=dodgerLeftEdge)
|| (rockLeftEdge>=dodgerLeftEdge&&rockRightEdge<=dodgerRightEdge)
|| (rockLeftEdge<=dodgerRightEdge&&rockRightEdge>=dodgerRightEdge)) {
ROCKS.forEach(rock => rock.style.left = "-20px")
return true;
} else {
return false;
}
}
}


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.
*/
// GAME.append(rock);
// GAME.appendChild(rock);
document.querySelector('#game').appendChild(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().
*/
if(checkCollision(rock)) {
top = 0;
rock.remove();
ROCKS.splice(0, ROCKS.length);
return endGame();
}

/**
* Otherwise, if the rock hasn't reached the bottom of
* the GAME, we want to move it again.
*/

if(top < 380) {
top += 2;
rock.style.top = top + 'px';
}

/**
* But if the rock *has* reached the bottom of the GAME,
* we should remove the rock from the DOM.
*/
else {
window.cancelAnimationFrame(moveRock);
top = 0;
rock.remove();
ROCKS.shift();
return rock;
}

window.requestAnimationFrame(moveRock);
}

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

// Finally, return the rock element you've created.
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);
// $('.rock').remove();
let rockClass = document.querySelectorAll(".rock");
rockClass.forEach(e => e.remove());
ROCKS.splice(0, ROCKS.length);
window.removeEventListener('keydown', moveDodger);
alert("YOU LOSE! ");
START.style.display = "inline";
DODGER.style.left = "180px";
}


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(e.which === LEFT_ARROW) {
e.preventDefault();
moveDodgerLeft();
e.stopPropagation();
}
if(e.which === RIGHT_ARROW) {
e.preventDefault();
moveDodgerRight();
e.stopPropagation();
}
}
}

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 moveDodgerLeft() {
// implement me!
/**
* This function should move DODGER to the left
* (mabye 4 pixels?). Use window.requestAnimationFrame()!
*/
let leftpos = positionToInteger(DODGER.style.left);

/**
* Now that we have a rock, we'll need to append
* it to GAME and move it downwards.
*/
function movediv(timestamp){
if(leftpos > 0) {
leftpos -= 4;
DODGER.style.left = leftpos + 'px';
}
}

requestAnimationFrame(movediv);
}

/**
* 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.
*/
function moveDodgerRight() {
// implement me!
/**
* This function should move DODGER to the right
* (mabye 4 pixels?). Use window.requestAnimationFrame()!
*/
let leftpos = positionToInteger(DODGER.style.left);

/**
* But if the rock *has* reached the bottom of the GAME,
* we should remove the rock from the DOM.
*/
}
function movediv(timestamp){
if(leftpos < 360) {
leftpos += 4;
DODGER.style.left = leftpos + 'px';
}
}

// We should kick off the animation of the rock around here.
requestAnimationFrame(movediv);
}

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

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

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

function moveDodgerLeft() {
// implement me!
/**
* This function should move DODGER to the left
* (mabye 4 pixels?). Use window.requestAnimationFrame()!
*/
}

function moveDodgerRight() {
// implement me!
/**
* This function should move DODGER to the right
* (mabye 4 pixels?). 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
}

function start() {
window.addEventListener('keydown', moveDodger)
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)))
}, 1000)
}
gameInterval = setInterval(function() {
createRock(Math.floor(Math.random() * (GAME_WIDTH - 20)));
}, 1000);
}