Numbers aren't being recognized and conditional statement isn't doing anything

3338 views javascript
5

<!DOCTYPE html>
<html lang="en-us">


<head>
    <meta charset="UTF-8">
    <title>The Lord of the Rings - Game</title>

    <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>

<body>


    <div id="game-container">

        <h1>Battle!</h1>

        <div id="instructions">
            <p>You will be given a random number at the start of the game.</p>
            <p>There are four characters below. By clicking on a character you will add a specific amount of points to
                your total score.</p>
            <p>You win the game by matching your total score to the random number, you lose the game if your total
                score goes above the random number.</p>
            <p>The value of each crystal is hidden from you until you click on it.</p>
            <p>Everytime the game restarts, the game will change the values of each character.</p>
        </div>


        <div id="counters">
            <div id="total-score"></div>
            <div id="target-score"></div>
        </div>


        <div id="images-container">
            <img src="assets/images/Aragorn.jpeg" alt="Aragorn" class="LOTR-characters" id="character1">
            <img src="assets/images/Legolas.jpeg" alt="Legolas" class="LOTR-characters" id="character2">
            <img src="assets/images/Gimley.jpeg" alt="Gimley" class="LOTR-characters" id="character3">
            <img src="assets/images/Gandalf.jpeg" alt="Gandalf" class="LOTR-characters" id="character4">
        </div>

        <div id="wins-losses">
            <div id="wins"></div>
            <div id="losses"></div>
        </div>

    </div>



    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="assets/javascript/game.js"></script>
</body>

</html>
var wins = 0;
var losses = 0;

// This variable will store the target number to match
var targetNumber;
// This variable will store the numbers added together
var counter = 0;

// Display counter, wins & losses 
$("#target-score").text("Current score: " + counter);
$("#wins").text("Wins: " + wins);
$("#losses").text("Losses: " + losses);

// Step 1
// Assign each character image a variable. Add each variable to the empty array
var char1 = getRandomNumber();
var char2 = getRandomNumber();
var char3 = getRandomNumber();
var char4 = getRandomNumber();



// Step 2
// Create a function that gives a random number between 1 - 12 and adds it the arrays elements
function getRandomNumber() {
    var randomNumber = Math.floor( Math.random() * 12 ) + 1;
    console.log("Random number between 1 & 12 is: " + randomNumber); 
    return randomNumber;
};



// Step 3
// Create click functions and link the random number to each image 
$("#character1").click(function() {
    counter += char1;
    $("#target-score").text("Current score: " + counter);
});
$("#character2").click(function() {
    counter += char2;
    $("#target-score").text("Current score: " + counter);
});
$("#character3").click(function() {
    counter += char3;
    $("#target-score").text("Current score: " + counter);
});
$("#character4").click(function() {
    counter += char4;
    $("#target-score").text("Current score: " + counter);

});

if (counter === targetNumber) {
alert("YOU WIN");
}


// Step 4
// Create a random target number between 19 - 120
var createTarget = Math.floor(Math.random() * 100) + 19;
targetNumber =+ createTarget;
console.log(targetNumber);
// Display the random number 
$("#total-score").text("Target number is: " + targetNumber);

The idea of this game is to click on 4 images. Each image will be assigned a random number when the page loads, a targetNumber will also be displayed. The numbers will be added together in var counter = 0; If you go over the targetNumber then you lose, if you match it you win.

Can anyone tell me why this doesn't work? I used a conditional statement to alert("YOU WIN") when the counter matches the targetNumber but it obviously doesn't recognize the values.

answered question

2 Answers

12

You're only checking if the player has won at the start of the game, not when clicking one of the characters. Instead, you'll want to pull your winning logic into a function that you then call in each click handler.

Something like:

$("#character4").click(function() {
    counter += char4;
    $("#target-score").text("Current score: " + counter);
    checkWinner();
});

function checkWinner() {
    if (counter === targetNumber) {
        alert("YOU WIN");
    }
}

posted this
3

At the moment, your

if (counter === targetNumber) {

test runs only on pageload - see how it's on the top level? You need to change it so that the counter is checked every time a character is clicked. You might implement this by putting a listener on the #images-container, which will run after the proper character-click event (and counter increment) has been handled:

$('#images-container').on('click', checkCounter);

function checkCounter() {
  if (counter === targetNumber) {
    console.log("YOU WIN");
  } else if (counter > targetNumber) {
    console.log("you lose");
  }
}

var wins = 0;
var losses = 0;

// This variable will store the target number to match
var targetNumber;
// This variable will store the numbers added together
var counter = 0;

// Display counter, wins & losses 
$("#target-score").text("Current score: " + counter);
$("#wins").text("Wins: " + wins);
$("#losses").text("Losses: " + losses);

// Step 1
// Assign each character image a variable. Add each variable to the empty array
var char1 = getRandomNumber();
var char2 = getRandomNumber();
var char3 = getRandomNumber();
var char4 = getRandomNumber();



// Step 2
// Create a function that gives a random number between 1 - 12 and adds it the arrays elements
function getRandomNumber() {
  var randomNumber = Math.floor(Math.random() * 12) + 1;
  console.log("Random number between 1 & 12 is: " + randomNumber);
  return randomNumber;
};



// Step 3
// Create click functions and link the random number to each image 
$("#character1").click(function() {
  counter += char1;
  $("#target-score").text("Current score: " + counter);
});
$("#character2").click(function() {
  counter += char2;
  $("#target-score").text("Current score: " + counter);
});
$("#character3").click(function() {
  counter += char3;
  $("#target-score").text("Current score: " + counter);
});
$("#character4").click(function() {
  counter += char4;
  $("#target-score").text("Current score: " + counter);
});
$('#images-container').on('click', checkCounter);

function checkCounter() {
  if (counter === targetNumber) {
    console.log("YOU WIN");
  } else if (counter > targetNumber) {
    console.log("you lose");
  }
}


// Step 4
// Create a random target number between 19 - 120
var createTarget = Math.floor(Math.random() * 100) + 19;
targetNumber = +createTarget;
console.log(targetNumber);
// Display the random number 
$("#total-score").text("Target number is: " + targetNumber);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="game-container">

  <h1>Battle!</h1>

  <div id="instructions">
    <p>You will be given a random number at the start of the game.</p>
    <p>There are four characters below. By clicking on a character you will add a specific amount of points to your total score.</p>
    <p>You win the game by matching your total score to the random number, you lose the game if your total score goes above the random number.</p>
    <p>The value of each crystal is hidden from you until you click on it.</p>
    <p>Everytime the game restarts, the game will change the values of each character.</p>
  </div>


  <div id="counters">
    <div id="total-score"></div>
    <div id="target-score"></div>
  </div>


  <div id="images-container">
    <img src="assets/images/Aragorn.jpeg" alt="Aragorn" class="LOTR-characters" id="character1">
    <img src="assets/images/Legolas.jpeg" alt="Legolas" class="LOTR-characters" id="character2">
    <img src="assets/images/Gimley.jpeg" alt="Gimley" class="LOTR-characters" id="character3">
    <img src="assets/images/Gandalf.jpeg" alt="Gandalf" class="LOTR-characters" id="character4">
  </div>

  <div id="wins-losses">
    <div id="wins"></div>
    <div id="losses"></div>
  </div>

</div>

posted this

Have an answer?

JD

Please login first before posting an answer.