-
-
Save codecademydev/a42f53d046b70eb90685355e2ddf531c 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://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg> | |
| </div> | |
| <div class="title-row"> | |
| <img src=https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg> | |
| <p class='instructions-title'>Welcome player ....</p> | |
| <img src=https://s3.amazonaws.com/codecademy-content/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://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg> | |
| <img id = door2 class='door-frame' src=https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg> | |
| <img id = door3 class='door-frame' src=https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg> | |
| </div> | |
| <div id=start class=start-row> | |
| Good Luck! | |
| </div> | |
| <script type='text/javascript' src='script.js'></script> | |
| </body> | |
| </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
| //doorImage global variables | |
| let doorImage1 = document.getElementById('door1'); | |
| let doorImage2 = document.getElementById('door2'); | |
| let doorImage3 = document.getElementById('door3'); | |
| //behind the doors | |
| 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"; | |
| numClosedDoors = 3; | |
| //open door | |
| let openDoor1; | |
| let openDoor2; | |
| let openDoor3; | |
| const currentlyPlaying = true; | |
| //start | |
| const startButton = document.getElementById('start'); | |
| const isBot = door => { | |
| if(door.src === botDoorPath) { | |
| return true; | |
| } else { | |
| return false; | |
| } | |
| } | |
| isClicked= door =>{ | |
| if (door.src === closedDoorPath){ | |
| return false; | |
| } else { | |
| return true; | |
| } | |
| } | |
| playDoor = door => { | |
| numClosedDoors--; | |
| if(numClosedDoors ===0) { | |
| return gameOver('win') | |
| } else if(isBot(door)) { | |
| return gameOver(); | |
| } | |
| } | |
| const randomChoreDoorGenerator = ()=> { | |
| const choreDoor = Math.floor(Math.random()*numClosedDoors); | |
| if(choreDoor === 0){ | |
| return openDoor1 = botDoorPath; | |
| return openDoor2 = beachDoorPath; | |
| return openDoor3 = spaceDoorPath | |
| } else if(choreDoor === 1){ | |
| return openDoor2 = botDoorPath; | |
| return openDoor3 = beachDoorPath; | |
| return openDoor1 = spaceDoorPath; | |
| } else { | |
| return openDoor3 = botDoorPath; | |
| return openDoor1 = beachDoorPath; | |
| return openDoor2 = spaceDoorPath; | |
| } | |
| } | |
| door1.onclick = () => { | |
| if(currentlyPlaying && !isCLicked(doorImage1)) { | |
| doorImage1.src = openDoor1; | |
| playDoor(door1) | |
| } | |
| } | |
| door2.onclick = () =>{ | |
| if(currentlyPlaying &&!isClicked(doorImage2)) { | |
| doorImage2.src = openDoor2; | |
| playDoor(door2) | |
| } | |
| } | |
| door3.onclick = () => { | |
| if(currentlyPlaying && !isClicked(doorImage3)) { | |
| doorImage3.src = openDoor3; | |
| playDoor(door3); | |
| } | |
| } | |
| startButton.onclick = () => { | |
| startRound() | |
| } | |
| startRound = () => { | |
| numClosedDoors = 3; | |
| doorImage1.src = closedDoorPath; | |
| doorImage2.src = closedDoorPath; | |
| doorImage3.src = closedDoorPath; | |
| startButton.innerHTML = 'Good luck!'; | |
| currentlyPlaying = true; | |
| randomChoreDoorGenerator(); | |
| } | |
| gameOver = status => { | |
| if(status=== 'win') { | |
| startButton.innerHTML = 'You win! Play again?' | |
| } else { | |
| startButton.innerHTML = 'Game over! Play again?' | |
| } | |
| currentlyPlaying = false | |
| } | |
| startButton.onclick(startRound()) { | |
| if(!currentlyPlaying()){ | |
| } | |
| } |
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; | |
| } | |
| .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-row { | |
| text-align: center; | |
| } | |
| .door-frame { | |
| cursor: pointer; | |
| padding: 10px; | |
| } | |
| .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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment