From 05efc20993d8bec24a8098f89e3ea2b324c9c52c Mon Sep 17 00:00:00 2001 From: Dharmik Govani <63103191+21Shadow10@users.noreply.github.com> Date: Fri, 29 Oct 2021 10:33:41 +0530 Subject: [PATCH] Chore-Door Game in JavaScript --- 21Shadow10/Chore-Door/css/style.css | 96 +++++++++++++ 21Shadow10/Chore-Door/images/beach.svg | 50 +++++++ 21Shadow10/Chore-Door/images/closed_door.svg | 18 +++ 21Shadow10/Chore-Door/images/logo.svg | 15 ++ 21Shadow10/Chore-Door/images/robot.svg | 45 ++++++ 21Shadow10/Chore-Door/images/space.svg | 82 +++++++++++ 21Shadow10/Chore-Door/images/star.svg | 14 ++ 21Shadow10/Chore-Door/index.html | 68 +++++++++ 21Shadow10/Chore-Door/js/script.js | 141 +++++++++++++++++++ 9 files changed, 529 insertions(+) create mode 100644 21Shadow10/Chore-Door/css/style.css create mode 100644 21Shadow10/Chore-Door/images/beach.svg create mode 100644 21Shadow10/Chore-Door/images/closed_door.svg create mode 100644 21Shadow10/Chore-Door/images/logo.svg create mode 100644 21Shadow10/Chore-Door/images/robot.svg create mode 100644 21Shadow10/Chore-Door/images/space.svg create mode 100644 21Shadow10/Chore-Door/images/star.svg create mode 100644 21Shadow10/Chore-Door/index.html create mode 100644 21Shadow10/Chore-Door/js/script.js 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();