Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created Nov 11, 2020
Embed
What would you like to do?
Codecademy export
<!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>
<div class="header">
<img src='https://content.codecademy.com/projects/chore-door/images/logo.svg'>
</div>
<div class='title-row'>
<img src='https://content.codecademy.com/projects/chore-door/images/star.svg'>
<p class='instructions-title'>Instructions</p>
<img src='https://content.codecademy.com/projects/chore-door/images/star.svg'>
<table class='instructions-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>
</div>
<div class='door-row'>
<img id='door1' class='door-frame' src='https://content.codecademy.com/projects/chore-door/images/closed_door.svg'>
<img id='door2' class='door-frame' src='https://content.codecademy.com/projects/chore-door/images/closed_door.svg'>
<img id='door3' class='door-frame' src='https://content.codecademy.com/projects/chore-door/images/closed_door.svg'>
</div>
<div id='start' class='start-row'> Good luck! </div>
<script src="script.js" type='text/javascript'></script>
</body>
</html>
let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
let startButton = document.getElementById('start');
let beachDoorPath = 'https://content.codecademy.com/projects/chore-door/images/beach.svg';
let spaceDoorPath ='https://content.codecademy.com/projects/chore-door/images/space.svg';
let botDoorPath ='https://content.codecademy.com/projects/chore-door/images/robot.svg';
let closedDoorPath='https://content.codecademy.com/projects/chore-door/images/closed_door.svg'
let currentlyPlaying = true;
let numClosedDoors=3;
let openDoor1;
let openDoor2;
let openDoor3;
function isBot(door){
if (door.src===botDoorPath){
return true;
} else {
return false};
};
function isClicked(door){
if (door.src===closedDoorPath){
return false;
} else {return true};
};
function playDoor(door){
numClosedDoors--;
if (numClosedDoors === 0) {
gameOver('win');
} else if (isBot(door)){
gameOver();
};
};
function randomChoreDoorGenerator() {
let choreDoor = Math.floor(Math.random()*numClosedDoors);
if (choreDoor===0){
openDoor1=botDoorPath;
openDoor2=spaceDoorPath;
openDoor3=beachDoorPath;
} else if (choreDoor===1){
openDoor2=botDoorPath;
openDoor1=spaceDoorPath;
openDoor3=beachDoorPath;
} else { (choreDoor===2)
openDoor3=botDoorPath;
openDoor2=beachDoorPath;
openDoor1=spaceDoorPath;
};
};
door1.onclick = () => {
startRound();
if(currentlyPlaying && !isClicked(doorImage1)){
doorImage1.src=openDoor1;
playDoor(doorImage1);
};
};
door2.onclick = () => {
startRound();
if(currentlyPlaying && !isClicked(doorImage2)){
doorImage2.src=openDoor2;
playDoor(doorImage2);
};
};
door3.onclick = () => {
startRound();
if(currentlyPlaying && !isClicked(doorImage3)){
doorImage3.src=openDoor3;
playDoor(doorImage3);
};
};
startButton.onclick = () => {
if (currentlyPlaying === false) {
startRound();
};
};
function startRound() {
door1.src=closedDoorPath;
door2.src=closedDoorPath;
door3.src=closedDoorPath;
numClosedDoors=3;
startButton.innerHTML='Good luck!';
currentlyPlaying=true;
randomChoreDoorGenerator();
};
function gameOver(status){
if (status === 'win') {
startButton.innerHTML='You win! Play again?';
} else {
startButton.innerHTML='Game Over! Play again?';
};
currentlyPlaying = false;
};
startRound();
body {
background-color: #010165;
margin: 0px;
}
.door-frame {
cursor: pointer;
padding: 10px;
}
.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: 400 px;
}
.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;
text-align: justify;
}
.door-row {
text-align: center;
}
.start-row{
margin: auto;
width: 120px;
height: 43px;
font-family: 'Work Sans';
background-color: #eb6536;
padding-top: 18px;
text-align: center;
color: #010165;
margin-bottom: 21px;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment