Project chore door problem part 2 :(

Hey again guys, this is a bit of follow up from my post yesterday where I lost interactivity on the chore door project, where the doors would not interact when clicked. This has occurred again right at the end of the project and I can’t figure out why. Also, before this bug, the start button wouldn’t reset as per the startRound() function that I’ve declared.

Project Chore Door: https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door

<!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>
    <!-- header -->
    <div class='header'>
      <img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg' alt='header logo'>
    </div>
    <!-- Title row -->
    <div class='title-row'>
      <img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg' alt='star image'>
      <p class='instructions-title'>Instructions</p>
      <img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg' alt='star image'>
    </div>
    <!-- Instructions table -->
    <table class='title-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>
    <!-- Door parent container -->
    <div class='door-row'>
    <!-- Chorebot door -->  
      <img id='door1' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg' alt='closed door'>
      <!-- door 2 -->
      <img id='door2' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg' alt='closed door'>
      
      <!-- door 3 -->
      <img id='door3' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg' alt='closed door'>
    </div>
    
    <!-- Start button -->
    <div id='start' class='start-row'>
      Good luck!
    </div>
    <script type='text/javascript' src='script.js'></script>
  </body>
</html>

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 styling */

.door-row {
  text-align: center;
}

.door-frame {
  cursor: pointer;
  padding: 10px;
}

/* misc styling */

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

// Global scope

const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const doorImage3 = document.getElementById('door3');
const startButton = document.getElementById('start');
const currentlyPlaying = true;

// Door generator variables

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;
    

// Door images

const botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";

const beachDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg';

const spaceDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg';

const closedDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg';

// Block scope

// Random door generator

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

// Door 1
doorImage1.onclick = () => {
  if (currentlyPlaying && !isClicked(doorImage1)) {
    doorImage1.src = openDoor1;
    playDoor(doorImage1);
  }

// Door 2
doorImage2.onclick = () => {
  if (currentlyPlaying && !isClicked(doorImage2)) {
    doorImage2.src = openDoor2;
    playDoor(doorImage2);
  }
}

// Door 3
doorImage3.onclick = () => {
  if (currentlyPlaying && !isClicked(doorImage3)) {
    doorImage3.src = openDoor3;
    playDoor(doorImage3);
  }
}

startButton.onclick = () => {
  startRound();
}

// Start round function
// Resets all doors to closed and resets the start button
const startRound = () => {
  doorImage1.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  doorImage3.src = closedDoorPath;
  numClosedDoors = 3;
  currentlyPlaying = true;
  startButton.innerHTML = 'Good luck!';
  randomChoreDoorGenerator();
}

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

// Logic functions
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)) {
     gameOver();
   }
 };

startRound();

Two errors:

doorImage1.onclick = () => {
  if (currentlyPlaying && !isClicked(doorImage1)) {
    doorImage1.src = openDoor1;
    playDoor(doorImage1);
  }
 // <--- missing closing }

And currentlyPlaying is a boolean variable has to change its value during the game yet you have given it the type of const.

Amazing, thank you! :smiley:

1 Like

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.