Hey again guys, this is a bit of follow up from my post yesterday where I lost interactivity on the chore door project, where the doors would not interact when clicked. This has occurred again right at the end of the project and I can’t figure out why. Also, before this bug, the start button wouldn’t reset as per the startRound() function that I’ve declared.
Project Chore Door: https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door
<!DOCTYPE html>
<html>
<head>
<title>Chore Door!</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
</head>
<body>
<!-- header -->
<div class='header'>
<img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg' alt='header logo'>
</div>
<!-- Title row -->
<div class='title-row'>
<img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg' alt='star image'>
<p class='instructions-title'>Instructions</p>
<img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg' alt='star image'>
</div>
<!-- Instructions table -->
<table class='title-row'>
<tr>
<td class='instructions-number'>
1
</td>
<td class='instructions-text'>
Hiding behind one of these doors is the ChoreBot.
</td>
</tr>
<tr>
<td class='instructions-number'>
2
</td>
<td class='instructions-text'>
Your mission is to open all of the doors without running into the ChoreBot.
</td>
</tr>
<tr>
<td class='instructions-number'>
3
</td>
<td class='instructions-text'>
If you manage to avoid the ChoreBot until you open the very last door, you win!
</td>
</tr>
<tr>
<td class='instructions-number'>
4
</td>
<td class='instructions-text'>
See if you can score a winning streak!
</td>
</tr>
</table>
<!-- Door parent container -->
<div class='door-row'>
<!-- Chorebot door -->
<img id='door1' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg' alt='closed door'>
<!-- door 2 -->
<img id='door2' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg' alt='closed door'>
<!-- door 3 -->
<img id='door3' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg' alt='closed door'>
</div>
<!-- Start button -->
<div id='start' class='start-row'>
Good luck!
</div>
<script type='text/javascript' src='script.js'></script>
</body>
</html>
body {
background-color: #010165;
margin: 0px;
}
.header {
background-color: #00FFFF;
text-align: center;
}
.title-row {
margin-top: 42px;
margin-bottom: 21px;
text-align: center;
}
.instructions-title {
display: inline;
font-size: 18px;
color: #00ffff;
font-family: 'Work Sans';
}
.instructions-row {
margin: 0 auto;
width: 400px;
}
.instructions-number {
padding-right: 25px;
font-family: 'Work Sans';
font-size: 36px;
color: #00ffff;
}
.instructions-text {
padding: 10px;
font-family: 'Work Sans';
font-size: 14px;
color: #ffffff;
}
/* Door styling */
.door-row {
text-align: center;
}
.door-frame {
cursor: pointer;
padding: 10px;
}
/* misc styling */
.start-row {
margin: auto;
width: 120px;
height: 43px;
font-family: 'Work Sans';
background-color: #eb6536;
padding-top: 18px;
font-size: 18px;
text-align: center;
color: #010165;
margin-bottom: 21px;
cursor: pointer;
}
// Global scope
const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const doorImage3 = document.getElementById('door3');
const startButton = document.getElementById('start');
const currentlyPlaying = true;
// Door generator variables
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
// Door images
const botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
const beachDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg';
const spaceDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg';
const closedDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg';
// Block scope
// Random door generator
const randomChoreDoorGenerator = () => {
let choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 0) {
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
}
else if (choreDoor === 1) {
openDoor2 = botDoorPath;
openDoor3 = beachDoorPath;
openDoor1 = spaceDoorPath;
}
else {
openDoor3 = botDoorPath;
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
}
};
// Door 1
doorImage1.onclick = () => {
if (currentlyPlaying && !isClicked(doorImage1)) {
doorImage1.src = openDoor1;
playDoor(doorImage1);
}
// Door 2
doorImage2.onclick = () => {
if (currentlyPlaying && !isClicked(doorImage2)) {
doorImage2.src = openDoor2;
playDoor(doorImage2);
}
}
// Door 3
doorImage3.onclick = () => {
if (currentlyPlaying && !isClicked(doorImage3)) {
doorImage3.src = openDoor3;
playDoor(doorImage3);
}
}
startButton.onclick = () => {
startRound();
}
// Start round function
// Resets all doors to closed and resets the start button
const startRound = () => {
doorImage1.src = closedDoorPath;
doorImage2.src = closedDoorPath;
doorImage3.src = closedDoorPath;
numClosedDoors = 3;
currentlyPlaying = true;
startButton.innerHTML = 'Good luck!';
randomChoreDoorGenerator();
}
// Game over function
const gameOver = (status) => {
if (status === 'win') {
startButton.innerHTML = 'You win! Play again?';
} else {
startButton.innerHTML = 'Game over! Play again?';
}
currentlyPlaying = false;
};
// Logic functions
const isBot = (door) => {
if (door.src === botDoorPath) {
return true;
} else {
return false;
}
};
const isClicked = (door) => {
if (door.src === closedDoorPath) {
return false;
} else {
return true;
}
};
const playDoor = (door) => {
numClosedDoors--;
if (numClosedDoors === 0) {
gameOver('win');
} else if (isBot(door)) {
gameOver();
}
};
startRound();