Wednesday, 29 May 2024
Technology

Chore Door: A Solution Guide

random chore generator

Have you been struggling with the Chore Door exercise? Don’t worry, you’re not alone. Many students and developers have faced similar challenges. In this article, we will provide you with a step-by-step solution to help you conquer Chore Door!

HTML

Let’s start by examining the 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="./images/logo.svg">
    </div>
    <div class="title-row">
        <img src="images/star.svg">
        <p class="instructions-title">Instructions</p>
        <img src="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 on the first two doors.</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="images/closed_door.svg">
        <img id="door2" class="door-frame" src="images/closed_door.svg">
        <img id="door3" class="door-frame" src="images/closed_door.svg">
    </div>
    <div id="start" class="start-row">Good luck!</div>
    <script type="text/javascript" src="scriptB.js"></script>
</body>
</html>

The HTML code defines the structure of the Chore Door game. It includes the game instructions, three door images, and a start button. You can see that the door images are initially closed.

Tham Khảo Thêm:  How to Go "Public" on Snapchat

CSS

Here’s the CSS code that styles the Chore Door game:

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;
    cursor: pointer;
}

The CSS code defines the visual appearance of the Chore Door game. It sets the background color, font styles, and alignments for various elements such as the header, instructions, doors, and start button.

JavaScript

Lastly, let’s examine the JavaScript code that adds interactivity to the Chore Door game:

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

const botDoorPath = "images/robot.svg";
const beachDoorPath = "images/beach.svg";
const spaceDoorPath = "images/space.svg";
const closedDoorPath = "images/closed_door.svg";

let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
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) {
    openDoor1 = beachDoorPath;
    openDoor2 = botDoorPath;
    openDoor3 = spaceDoorPath;
  } else {
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
    openDoor3 = botDoorPath;
  }
};

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

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

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

startButton.onclick = () => {
  if(!currentlyPlaying) {
    startRound();
  }
};

const startRound = () => {
  if (currentlyPlaying === false) {
    doorImage1.src = closedDoorPath;
    doorImage2.src = closedDoorPath;
    doorImage3.src = closedDoorPath;
    numClosedDoors = 3;
    startButton.innerHTML = 'Good luck!';
    currentlyPlaying = true;
    randomChoreDoorGenerator();
  }
};

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

startRound();

The JavaScript code controls the game logic of Chore Door. It handles the clicking of doors, checks if the ChoreBot is behind a door, keeps track of the number of closed doors, and determines the game’s outcome.

Tham Khảo Thêm:  How to Reset or Clear the BIOS Password

Frequently Asked Questions

Q: I’ve followed the code exactly as provided, but the Chore Door game is not working. What could be the issue?
A: Make sure that all file paths for images and scripts are correctly referenced. Check the file names, locations, and extensions to ensure they match the code.

Q: How can I restart the game after winning or losing?
A: Simply click the “Play again?” button displayed at the end of the game. It will reset the doors and start a new round.

Q: Can I customize the images used in the Chore Door game?
A: Absolutely! Feel free to replace the existing images with your own. Just make sure to update the file paths in the JavaScript code accordingly.

Conclusion

Congratulations! You have successfully learned how to implement the Chore Door game. By following the provided HTML, CSS, and JavaScript code, you can create a fun and interactive game that challenges players to open doors without running into the ChoreBot. Experiment with different styles, images, and game mechanics to make it your own. Have fun coding!

Eireview – Extractive Industries Review