Chore door


#1

Can anyone plz help me to figure out why I need ‘door’ parameter for playDoor function and why i need to place door1, door2, door3 as an argument for each ‘onclick’ function.
my html code:

<!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>
    <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>

my javaScript code:

let doorImage1= document.getElementById("door1");
let doorImage2= document.getElementById("door2");
let doorImage3= document.getElementById("door3");
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 startButton = document.getElementById("start");
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
let currentlyPlaying = true;
const gameOver = status => {
  if (status==="win") {
    startButton.innerHTML="You win! Play again?";
  }else{
    startButton.innerHTML="Game over! Play again?"
  }
  currentlyPlaying = false;
}
const playDoor = door => {
 numClosedDoors--;
 if (numClosedDoors===0) {
   gameOver("win")
 }else if(isBot(door)){
     gameOver()
   }
 };
const isBot = door => {
 if(door.src===botDoorPath) {
   return true;
 }else{
   return false;
 }
};
const isClicked = door => {
 if (door.src===closedDoorPath) {
   return false;
 }else {
   return true;
 }
};

door1.onclick = () => {
  if (!isClicked(doorImage1) && currentlyPlaying) {
  doorImage1.src= openDoor1;
  playDoor(door1);
  }
};
door2.onclick = () => {
  if (!isClicked(doorImage2) && currentlyPlaying) {
    doorImage2.src= openDoor2;
  playDoor(door2);
  }
};
door3.onclick = () => {
  if (!isClicked(doorImage3) && currentlyPlaying) {
  doorImage3.src= openDoor3;
  playDoor(door3);
  }
};
const startRound = () => {
  numClosedDoors= 3;
  doorImage1.src= closedDoorPath;
  doorImage2.src= closedDoorPath;
  doorImage3.src= closedDoorPath;
  startButton.innerHTML= "Good luck!";
  currentlyPlaying= true;
  randomChoreDoorGenerator();
}
startButton.onclick = () => {
 if(!currentlyPlaying){ startRound()}
}

const randomChoreDoorGenerator = () => {
  const choreDoor = Math.floor(Math.random() * 6);
  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;
    openDoor2=beachDoorPath;
    openDoor1=spaceDoorPath;
  }else if (choreDoor===3){
    openDoor1=botDoorPath;
    openDoor3=beachDoorPath;
    openDoor2=spaceDoorPath;
  }else if (choreDoor===4){
    openDoor3=botDoorPath;
    openDoor1=beachDoorPath;
    openDoor2=spaceDoorPath;
  }else {
    openDoor2=botDoorPath;
    openDoor3=beachDoorPath;
    openDoor1=spaceDoorPath;
  }
  
}
startRound();




#2

So we can test if it is the robot behind the door.

We have to be sure to pass the correct door to playDoor. The only problem here is that door1, door2, and door3 are not defined. These are supposed to be the cached image objects, doorImage1, …

There are only ever intended to be three doors for this game. The generator should randomly set one of three configurations. I would fix that so there are only three if's. 0, 1, and 2 and set Math.random to multiply by 3.


#3

does the ‘door’ parameter of isBot(door) takes ‘door1’ as an argument when we call playDoor(door1)?


#4

Yes it does. That’s exactly what it is, except we should be using the names given in the instructions for those three variables. door will be doorImage1, or doorImage2 or doorImage3 depending on which door is clicked.