Created
May 24, 2020 17:57
-
-
Save stefancoding7/d12cc021659523c2db404b8be66145c6 to your computer and use it in GitHub Desktop.
Chore Door Codecademy solution/HTML,CSS,JAVASCRIPT(Three doors game)
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">Instructions</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> | |
| <table class="score-row"> | |
| <tr> | |
| <td> | |
| You: | |
| </td> | |
| <td id="score"> | |
| 0 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| Robot: | |
| </td> | |
| <td id="scorebot"> | |
| 0 | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| <script type=text/javascript src="script.js"></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
| let doorImage1 = document.getElementById('door1'); | |
| let doorImage2 = document.getElementById('door2'); | |
| let doorImage3 = document.getElementById('door3'); | |
| botDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg'; | |
| beachDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg'; | |
| spaceDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg'; | |
| // Logic for this game ( global variables) | |
| let numClosedDoors = 3; | |
| let openDoor1, openDoor2, openDoor3; | |
| // global variable for isClicked function | |
| let closedDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg'; | |
| // global variable for gameOver() function | |
| let startButton = document.getElementById('start'); | |
| let scoreDisplay = document.getElementById('score'); | |
| let scoreDisplayBot = document.getElementById('scorebot'); | |
| let score = 1; | |
| let scorebot = 1; | |
| 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) === true) { | |
| return gameOver(); | |
| } | |
| } | |
| const randomChoreDoorGenerator = () => { | |
| let choreDoor = Math.floor(Math.random() * 3) | |
| if (choreDoor === 0) { | |
| openDoor1 = botDoorPath; | |
| openDoor2 = beachDoorPath; | |
| openDoor3 = spaceDoorPath; | |
| } else if (choreDoor === 1) { | |
| openDoor2 = botDoorPath; | |
| openDoor1 = spaceDoorPath; | |
| openDoor3 = beachDoorPath; | |
| } else { | |
| openDoor3 = botDoorPath; | |
| openDoor1 = beachDoorPath; | |
| openDoor2 = spaceDoorPath; | |
| } | |
| } | |
| doorImage1.onclick = () => { | |
| if (currentlyPlaying && !isClicked(doorImage1)) { | |
| doorImage1.src = openDoor1; | |
| playDoor(doorImage1); | |
| } | |
| } | |
| doorImage2.onclick = () => { | |
| if (currentlyPlaying && !isClicked(doorImage2)) { | |
| doorImage2.src = openDoor2; | |
| playDoor(doorImage2); | |
| } | |
| } | |
| doorImage3.onclick = () => { | |
| if (currentlyPlaying && !isClicked(doorImage3)) { | |
| doorImage3.src = openDoor3; | |
| playDoor(doorImage3); | |
| } | |
| } | |
| const startRound = () => { | |
| doorImage1.src = closedDoorPath; | |
| doorImage2.src = closedDoorPath; | |
| doorImage3.src = closedDoorPath; | |
| numClosedDoors = 3; | |
| startButton.innerHTML = 'Good luck'; | |
| currentlyPlaying = true; | |
| randomChoreDoorGenerator(); | |
| } | |
| startButton.onclick = () => { | |
| if (!currentlyPlaying) { | |
| startRound(); | |
| } | |
| } | |
| const gameOver = status => { | |
| if (status === 'win') { | |
| startButton.innerHTML = 'You win! Play again?'; | |
| scoreDisplay.innerHTML = score++; | |
| } else { | |
| startButton.innerHTML = 'Game over! Play again?'; | |
| scoreDisplayBot.innerHTML = scorebot++; | |
| } | |
| currentlyPlaying = false; | |
| } | |
| 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; | |
| } | |
| .title-row { | |
| margin-top: 42px; | |
| margin-bottom: 21px; | |
| text-align: center; | |
| } | |
| .instructions-title { | |
| display: inline; | |
| font-size: 18px; | |
| color: white; | |
| font-family: 'Work Sans'; | |
| } | |
| .door-frame { | |
| cursor: pointer; | |
| padding: 10px; | |
| } | |
| .instructions-row, .instructions-text { | |
| margin: 0 auto; | |
| width: 400px; | |
| } | |
| .instructions-row { | |
| padding-right: 25px; | |
| font-family: 'Work Sans'; | |
| font-size: 36px; | |
| color: white; | |
| } | |
| .instructions-text { | |
| padding: 10px; | |
| font-family: 'Work Sans'; | |
| font-size: 14px; | |
| color: white; | |
| } | |
| .door-row { | |
| text-align: center; | |
| } | |
| .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; | |
| } | |
| .score-row { | |
| margin:auto; | |
| text-align: center; | |
| color: white; | |
| font-family: 'Work Sans'; | |
| font-size: 20px; | |
| padding-top: 18px; | |
| } | |
| #score, #scorebot { | |
| font-size: 30px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment