Chore Door Game Over and Doors are not working


#1

So I finished all the checklist, I noticed my gameOver(); function wasn’t working like it should, it didn’t display a losing message, I decided to continue to the end and check it out later.

Then after reviewing every part of the code, I noticed i did a step wrong in isClicked function where i had to wrap the code on the .onclick doors and did it and now the Doors won’t open at all.

This is my 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 numClosedDoors = 3;
let openDoor1
let openDoor2
let openDoor3
let closedDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg'
let startButton = document.getElementById('start');
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 = (door) => {
  numClosedDoors--;
  if (numClosedDoors === 0) {
    gameOver('win');
  } else if (isbot(door)) {
    gameOver();
  }
}

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

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

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

door3.onclick = () => {
  if(currentlyPlaying && !isClicked(doorImage3)){
  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 gameOver = (status) => {
  if (status === 'win') {
    startButton.innerHTML = 'You win! Play again?'
  } else {
    startButton.innerHTML = 'Game Over! Play again?'
  }
  currentlyPlaying = false;
}

startRound();

#2

its not even opening doors, looking here:

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

i can see why. Not sure why you have an empty second if statement


#3

Don’t forget those semi-colons at the end of each statement.

We can declare multiple undefined variables on a single line…

var numClosedDoors, currentlyPlaying, openDoor1, openDoor2, openDoor3;

We don’t need to assign any values since they are defined in the startRound() function.

The number of doors is fixed at three so no need to used the variable as that implies an optional number of doors, which we know is not how this game is played.

Math.floor(Math.random() * 3)

Consider your object declarations at the top. You have used let on all of them. Which ones will never change during the session (or better put, which ones do we not want to change)?

The cached nodes, for one. So make them constants…

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

All the door image paths, for two…

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'

Now let’s look for repetition. Notice how all four paths above are identical save for the image name? That suggests we could cache it in a single variable and tack on the image to complete the URL.

const host = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/"

Now we can shorten those four line so they are easy to read.

const botDoorPath = host + "robot.svg";
const beachDoorPath = host + "beach.svg";
const spaceDoorPath = host + "space.svg";
const closedDoorPath = host + "closed_door.svg";

Considering all our variables are declared outside of any block scope, using let is questionable, since that keyword is intended for blocks such as for and while loops to prevent their variables from leaking out. Above you will see I used var on the declaration line.


#6