My game is not behaving properly. Built with JS, HTML & CSS

My game is not behaving properly. Built with JS, HTML & CSS
0

#1

I made this game. Its basically a guessing game. Click a door and hope it does not have a robot behind it or you lose. One door will have the robot behind it, another will have the beach behind it and the last will have space behind it. You win when you the last door you open has the bot behind it. And every time you click play again, it randomizes which door will have the different entities behind it.
I have two problems:

  1. The instructions for the game have a certain design but the design is not catching. The number 1-4 are supposed to look the way their heading “Instructions” look.
  2. When i click on the door, instead of it showing me space, beach or robot, it becomes broken. It becomes that broken image symbol that you see on images that did not load properly. image
    Here is the game:
    https://codepen.io/Dee55/pen/KxpBLe

#2

You need to look at your browser’s console, because you have a “ReferenceError”, because doorImage is not defined when you try to use it on the following line of your startRound function.

doorImage.src = closedDoorPath;

Do you mean the instructions are suppose to have the stars before and after? If so, then, you will need to add them like you did with the title. If that is not what you mean, you are going to need to be more descriptive in exactly how you expect the 1-4 sentences should display on the page.


#4

I meant they are supposed to be of the same font and color


#5

Not sure what you were trying to do with mixing tr elements inside divs, but if you replace the following html:

    <div 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>
    </div>

with the following div structure:

  <div class="instructions-row">
    <div class="instructions-number">1</div>
    <div class="instructions-text">Hiding behind one of these doors is the ChoreBot.</div>
  </div>
  <div class="instructions-row">
    <div class="instructions-number">2</div>
    <div class="instructions-text">Your mission is to open all of the doors without running into the ChoreBot.</div>
  </div>
  <div class="instructions-row">
    <div class="instructions-number">3</div>
    <div class="instructions-text">If you manage to avoid the ChoreBot until you open the very last door, you win!
    </div>
  </div>
  <div class="instructions-row">
    <div class="instructions-number">4</div>
    <div class="instructions-text">See if you can score a winning streak!</div>
  </div>

and use the following CSS to replace what you were using for .instructions-number and .instructions-text, I think you will get closer to what you wanted. I left the color of the number to the light blue, because that is what you already had in your CSS.

.instructions-number, .instructions-text {
  display: inline-block;
  vertical-align: middle;
  margin:0;
  font-family: 'Work Sans';
}

.instructions-number {
  width: 10%;
  font-size: 36px;
  color: #00ffff;
}

.instructions-text{
  width: 89%;
	font-size: 14px;
  color: #ffffff;
}

#6

You have a bug in this line: var choreDoor = Math.floor(Math.random() * numClosedDoors);
numClosedDoors is set to 3 but this code will always return either 0, 1 or 2. If the game initializes with choreDoor set to 0, you don’t set the corresponding filepaths. Hence the broken links.
Also the best strategy now is to always open door 3, the robot will never be behind it. When you won a game and start a new game where numClosedDoors is 0, the doors will stay the same as the last round because they will not be reset.

So your logic needs some rework, either start counting doors from 0 or use a random function that returns a number in range and is inclusive. Here is the MDN article in random functions with examples: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values_inclusive