diff --git a/21Shadow10/Chore-Door/css/style.css b/21Shadow10/Chore-Door/css/style.css new file mode 100644 index 0000000..abfeba7 --- /dev/null +++ b/21Shadow10/Chore-Door/css/style.css @@ -0,0 +1,96 @@ +body { + background-color: #010165; + margin: 0px; + } + + .header { + background-color: #00ffff; + text-align: center; + } + + .first-row { + margin-top: 42px; + text-align: center; + margin-bottom: 21px; + } + + .instructions-title { + display: inline; + font-family: 'Work Sans'; + font-size: 18px; + color: #00ffff; + } + + .second-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; + background-color: #eb6536; + padding-top: 18px; + font-family: 'Work Sans'; + font-size: 18px; + text-align: center; + color: #010165; + margin-bottom: 9px; + cursor: pointer; + } + + .score-row { + text-align: center; + width: 100%; + } + + .score-text { + margin-right: 17px; + padding: 5px; + display: inline; + font-family: 'Work Sans'; + font-size: 12px; + letter-spacing: 1.1px; + color: #ffffff; + } + + .score-box { + margin-top: 9px; + display: inline-block; + padding: 8px; + margin: 18px; + margin-right: 29px; + width: 59px; + background-color: #00ffff; + font-family: 'Work Sans'; + font-size: 45px; + } + + center { + color: white ; + font-size: 15px; + } \ No newline at end of file diff --git a/21Shadow10/Chore-Door/images/beach.svg b/21Shadow10/Chore-Door/images/beach.svg new file mode 100644 index 0000000..6417429 --- /dev/null +++ b/21Shadow10/Chore-Door/images/beach.svg @@ -0,0 +1,50 @@ + + + + Group 16 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/21Shadow10/Chore-Door/images/closed_door.svg b/21Shadow10/Chore-Door/images/closed_door.svg new file mode 100644 index 0000000..5e5a789 --- /dev/null +++ b/21Shadow10/Chore-Door/images/closed_door.svg @@ -0,0 +1,18 @@ + + + + Group 3 + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/21Shadow10/Chore-Door/images/logo.svg b/21Shadow10/Chore-Door/images/logo.svg new file mode 100644 index 0000000..ac3e36d --- /dev/null +++ b/21Shadow10/Chore-Door/images/logo.svg @@ -0,0 +1,15 @@ + + + + Group 13 + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/21Shadow10/Chore-Door/images/robot.svg b/21Shadow10/Chore-Door/images/robot.svg new file mode 100644 index 0000000..4832681 --- /dev/null +++ b/21Shadow10/Chore-Door/images/robot.svg @@ -0,0 +1,45 @@ + + + + Group 14 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/21Shadow10/Chore-Door/images/space.svg b/21Shadow10/Chore-Door/images/space.svg new file mode 100644 index 0000000..4272821 --- /dev/null +++ b/21Shadow10/Chore-Door/images/space.svg @@ -0,0 +1,82 @@ + + + + Group 15 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/21Shadow10/Chore-Door/images/star.svg b/21Shadow10/Chore-Door/images/star.svg new file mode 100644 index 0000000..c68f19e --- /dev/null +++ b/21Shadow10/Chore-Door/images/star.svg @@ -0,0 +1,14 @@ + + + + Star + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/21Shadow10/Chore-Door/index.html b/21Shadow10/Chore-Door/index.html new file mode 100644 index 0000000..8fd5678 --- /dev/null +++ b/21Shadow10/Chore-Door/index.html @@ -0,0 +1,68 @@ + + + + Chore Door! + + + + + + +
+ +
+ +
+ +

Instructions

+ +
+ + + + + + + + + + + + + + + + + + +
1Hiding behind one of these doors is the ChoreBot.
2Your mission is to open all of the doors without running into the ChoreBot.
3If you manage to avoid the ChoreBot until the very last door, you win!
4See if you can score a winning streak!
+ +
+ + + +
+ +
Good luck!
+ + + + + + + + + + +
Current streak:Best streak:
+ +
+
© Copyrights :
+ Dharmik Govani +
+
+ + + + + diff --git a/21Shadow10/Chore-Door/js/script.js b/21Shadow10/Chore-Door/js/script.js new file mode 100644 index 0000000..575718e --- /dev/null +++ b/21Shadow10/Chore-Door/js/script.js @@ -0,0 +1,141 @@ +let door1 = document.getElementById('door1'); +let door2 = document.getElementById('door2'); +let door3 = document.getElementById('door3'); +let startButton = document.getElementById('start'); +let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg"; +let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg"; +let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg"; +let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" +let numClosedDoors = 3; +let openDoor1; +let openDoor2; +let openDoor3; +let currentlyPlaying = true; +let score = 0; +let highScore = 0; +let currentStreak = document.getElementById('score-number'); +let bestStreak = document.getElementById('high-score-number'); +currentStreak.innerHTML = score; +bestStreak.innerHTML = highScore; + +const isClicked = (door) => { + if (door.src == closedDoorPath) { + return false; + } else { + return true; + } +} + +const isBot = (door) => { + if (door.src === botDoorPath) { + return true; + } else { + return false; + } +} + +const playDoor = (door) => { + numClosedDoors--; + if (numClosedDoors === 0) { + gameOver('win'); + } else if (isBot(door)) { + gameOver('lose'); + } +} + +//Next Steps - Switch Statement Version (6 possible combinations) +const randomChoreDoorGenerator = () => { + choreDoor = Math.floor(Math.random() * 6); + switch (choreDoor) { + case 0: + openDoor1 = botDoorPath; + openDoor2 = beachDoorPath; + openDoor3 = spaceDoorPath; + break; + case 1: + openDoor1 = botDoorPath; + openDoor2 = spaceDoorPath; + openDoor3 = beachDoorPath; + break; + case 2: + openDoor2 = botDoorPath; + openDoor1 = beachDoorPath; + openDoor3 = spaceDoorPath; + break; + case 3: + openDoor2 = botDoorPath; + openDoor1 = spaceDoorPath; + openDoor3 = beachDoorPath; + break; + case 4: + openDoor3 = botDoorPath; + openDoor1 = beachDoorPath; + openDoor2 = spaceDoorPath; + break; + case 5: + openDoor3 = botDoorPath; + openDoor1 = spaceDoorPath; + openDoor2 = beachDoorPath; + break; + } +} + +door1.onclick = () => { + if(currentlyPlaying && !isClicked(door1)) { + door1.src = openDoor1; + playDoor(door1); + } +} + +door2.onclick = () => { + if(currentlyPlaying && !isClicked(door2)) { + door2.src = openDoor2; + playDoor(door2); + } +} + +door3.onclick = () => { + if(currentlyPlaying && !isClicked(door3)) { + door3.src = openDoor3; + playDoor(door3); + } +} + +startButton.onclick = () => { + startRound(); +} + +const startRound = () => { + // Reset all the doors to be closed + door1.src = closedDoorPath; + door2.src = closedDoorPath; + door3.src = closedDoorPath; + numClosedDoors = 3; + currentlyPlaying = true; + startButton.innerHTML = 'Good luck!'; + randomChoreDoorGenerator(); +} + +const gameOver = (str) => { + if(str === 'win') { + startButton.innerHTML = 'You win! Play again?'; + getYourScore(); + } else { + startButton.innerHTML = "Game over! Play again?" + score = 0; + currentStreak.innerHTML = score; + } + currentlyPlaying = false; +} + +const getYourScore = () => { + score++; + currentStreak.innerHTML = score; + if (score > highScore) { + highScore = score; + bestStreak.innerHTML = highScore; + } +} + + +startRound();