-
-
Save codecademydev/2d87c986da50b2fe98b5c5fb641b15ca to your computer and use it in GitHub Desktop.
Codecademy export
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 YO!</p> | |
| <img src="https://content.codecademy.com/projects/chore-door/images/star.svg"/> | |
| </div> | |
| <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 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> | |
| </body> | |
| <script src="./script.js" type="text/javascript"></script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const doorImage1 = document.getElementById('door1'); | |
| const doorImage2 = document.getElementById('door2'); | |
| const doorImage3 = document.getElementById('door3'); | |
| const botDoorPath = 'https://content.codecademy.com/projects/chore-door/images/robot.svg'; | |
| const beachDoorPath = 'https://content.codecademy.com/projects/chore-door/images/beach.svg'; | |
| const spaceDoorPath = 'https://content.codecademy.com/projects/chore-door/images/space.svg'; | |
| const closedDoorPath = 'https://content.codecademy.com/projects/chore-door/images/closed_door.svg'; | |
| let numClosedDoors = 3; | |
| let openDoor1; | |
| let openDoor2; | |
| let openDoor3; | |
| let startButton = document.getElementById('start'); | |
| let currentlyPlaying = true; | |
| 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(); | |
| } | |
| } | |
| const randomChoreDoorGenerator = () => { | |
| let choreDoor = Math.floor(Math.random() * numClosedDoors); | |
| if(choreDoor === 0) { | |
| openDoor1 = botDoorPath; | |
| openDoor2 = beachDoorPath; | |
| openDoor3 = spaceDoorPath; | |
| } else if(choreDoor === 1) { | |
| openDoor2 = botDoorPath; | |
| openDoor1 = beachDoorPath; | |
| openDoor3 = spaceDoorPath; | |
| } else if(choreDoor === 2) { | |
| openDoor3 = botDoorPath; | |
| openDoor1 = spaceDoorPath; | |
| openDoor2 = beachDoorPath; | |
| } | |
| } | |
| door1.onclick = () => { | |
| if(!isClicked(doorImage1) && currentlyPlaying){ | |
| doorImage1.src = openDoor1; | |
| playDoor(doorImage1); | |
| } | |
| }; | |
| door2.onclick = () => { | |
| if(!isClicked(doorImage2) && currentlyPlaying){ | |
| doorImage2.src = openDoor2; | |
| playDoor(doorImage2); | |
| } | |
| }; | |
| door3.onclick = () => { | |
| if(!isClicked(doorImage3) && currentlyPlaying){ | |
| doorImage3.src = openDoor3; | |
| playDoor(doorImage3); | |
| } | |
| }; | |
| startButton.onclick = () => { | |
| if(!currentlyPlaying){ | |
| startRound(); | |
| } | |
| } | |
| const startRound = () => { | |
| doorImage1.src = closedDoorPath | |
| doorImage2.src = closedDoorPath; | |
| doorImage3.src = closedDoorPath; | |
| numClosedDoors = 3; | |
| currentlyPlaying = true; | |
| startButton.innerHTML = 'Good Luck!'; | |
| randomChoreDoorGenerator(); | |
| } | |
| const gameOver = (status) => { | |
| if(status === 'win') { | |
| startButton.innerHTML = 'I love Lotti! Play Again?'; | |
| } else { | |
| startButton.innerHTML = 'Game Over! Try Again?' | |
| } | |
| currentlyPlaying = false; | |
| } | |
| //randomChoreDoorGenerator(); | |
| startRound(); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #010165; | |
| margin: 0px; | |
| } | |
| .header { | |
| background-color: #00ffff; | |
| text-align: center; | |
| margin: 2px auto; | |
| } | |
| .title-row { | |
| text-align: center; | |
| margin-top: 42px; | |
| margin-bottom: 21px; | |
| } | |
| .instructions-title { | |
| display: inline; | |
| font-size: 18px; | |
| color: #00ffff; | |
| font-family: 'Work Sans'; | |
| } | |
| .instructions-row { | |
| margin: 0 auto; | |
| width: 400px; | |
| } | |
| .instructions-number { | |
| font-family: 'Work Sans'; | |
| font-size: 36px; | |
| color: #00ffff; | |
| padding-right: 25px; | |
| } | |
| .instructions-text { | |
| padding: 10px; | |
| font-family: 'Work Sans'; | |
| font-size: 14px; | |
| color: #ffffff; | |
| } | |
| .door-frame { | |
| cursor: pointer; | |
| padding: 10px; | |
| //border: 1px solid red; | |
| margin: 5px; | |
| } | |
| .door-row { | |
| text-align: center; | |
| } | |
| .start-row { | |
| margin: auto; | |
| width: 150px; | |
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment