Chore Door - Steps 58 to 65

Hey guys, i’m working my way through the “Chore Door” project, on the Web Developer path.
(https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door)

I’m currently stuck between steps 58 & 65, here’s my situation:

  • I can click the doors and it generates random results each time
    BUT:
  • Even if i open the BotDoor on my 1st or 2nd attempt, i can keep clicking: the game keeps going and results in a win no matter what.

I followed all the steps to check if a door has the game-ending ChoreBot.
Having spent quite some time trying to find the mistake(s), i’m afraid i’m to close to it to find it. Any ideas ?

note: i already used the console to check for potential syntax errors.

JS :

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 openDoor1;
let openDoor2;
let openDoor3;
let numClosedDoors = 3;
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 = () => {
  numClosedDoors--;
  if (numClosedDoors === 0) {
    gameOver('win');
  } else if (isBot(door)) {
    gameOver();
  }
};

const gameOver = status => {
  if(status === 'win') {
    startButton.innerHTML = 'You win! Play again?';
  } else {
    startButton.innerHTML = 'Game Over! Play again?'
  };
  currentPlaying = false;
};


const startButton = document.getElementById('start');


const randomChoreDoorGenerator = () => {
  const choreDoor = Math.floor(Math.random() * numClosedDoors);
  if (choreDoor === 0) {
    openDoor1 = botDoorPath;
    openDoor2 = spaceDoorPath;
    openDoor3 = beachDoorPath;
  } else if (choreDoor === 1) {
    openDoor2 = botDoorPath;
    openDoor3 = spaceDoorPath;
    openDoor1 = beachDoorPath;
  } else {
    openDoor3 = botDoorPath; 
    openDoor1 = spaceDoorPath;
    openDoor2 = beachDoorPath;
  }
};

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);
  }
};

randomChoreDoorGenerator();

HTML:


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

    <script type='text/javascript' src="./script.js"> </script>
  </body>
</html>

CSS:

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;
}
1 Like

Step 58 :
let isBot = door => {
if(door.src === botDoorPath) {
return true;
} else {
return false;
}
}

Me too i looking for step number 65 , i wish someone help us !! , i give you the step 58 . just try it !!

What do you have currently?

For Step 65, you should have a global variable called currentlyPlaying set to true.
Somewhere in your code should change this variable to false when the game is over.

Then you need to modify your if statement for your door clicks to check whether currentlyPlaying is false or true. If true, then allow the door to be clicked and if false do nothing.

1 Like

I will try again !!! Thanks for reply