const - JS | lectureDOM & Events Fundamentals

Let's now continue building our game and implement the game logic itself. By game logic, I mean implementing how the game works:

• We need to implement what happens when the guess is correct, i.e., when it is equal to the secret number
• We also need to implement what happens when the guess is too low or too high.

To start, we need to define that secret number. Otherwise, there is nothing we can compare the guess to. The secret number should be defined outside the function handler and not inside since we want our secret number to be defined only once, .i.e. when we start the application. If we define our secret number inside the event handler function, we will get a new secret number on each click, and the game will make no sense.

Let's define our secret number.

let secretNumber = Math.trunc(Math.random() * 20) + 1;

In the real game, the number will obviously be hidden. But since we are still in development, let's display the number to the browser.

document.querySelector('.number').textContent = secretNumber;

After saving everything, you should now see a number and not the question mark we had before. If you keep on reloading the page, you will see different numbers appearing.

Let's now move on and now compare our secret number to the user's guess.

document.querySelector('.check').addEventListener('click', function () {
  if (!guess) {
    document.querySelector('.message').textContent = '⛔ No number!';
  } else if (guess === secretNumber) {
    document.querySelector('.message').textContent = '🎉 Correct Number!';
  } else if (guess > secretNumber) {
    document.querySelector('.message').textContent = '📈 Too High!';
  } else if (guess < secretNumber) {
    document.querySelector('.message').textContent = '📉 Too Low!';
  }
});

With our comparison working as expected, lets' now move on and work with the score. Our score decreases by one each time we do not guess the correct number.

// Outside our event handler
let score = 20;

// Inside our event handler
if (!guess) {
  //...
} else if (guess === secretNumber) {
  //...
} else if (guess > secretNumber) {
  //...
  score--;
  document.querySelector('.score').textContent = score;
} else if (guess < secretNumber) {
  //...
  score--;
  document.querySelector('.score').textContent = score;
}

With the above, the score works great, but we will face an issue: if we keep on clicking the check button with the wrong secret number, our score will go below zero, which is not correct because we should normally lose the game at zero.

To fix this problem, we first must keep in mind that the code we added in our if conditions (too high and too low) should only happen when the score is above zero. When the score is below zero, we should show a message saying we lost the game.

Here is how we can fix it :

if (score > 1) {
  document.querySelector('.message').textContent = '📈 Too High!';
  score--;
  document.querySelector('.score').textContent = score;
} else {
  document.querySelector('.message').textContent = '💥 You lost the game!';
  document.querySelector('.score').textContent = 0;
}

The above code applies for the case where the guess is greater than the secret umber. We can copy the same thing for the other scenario (guess < secretNumber). You will certainly notice that we have lots of duplicates. We will fix that by the end of the project.

Our final event handler will look like this:

function () {
  const guess = Number(document.querySelector('.guess').value);
  if (!guess) {
    document.querySelector('.message').textContent = '⛔ No number!';
  } else if (guess === secretNumber) {
    document.querySelector('.message').textContent = '🎉 Correct Number!';
  } else if (guess > secretNumber) {
    if (score > 1) {
      document.querySelector('.message').textContent = '📈 Too High!';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = '💥 You lost the game!';
      document.querySelector('.score').textContent = 0;
    }
  } else if (guess < secretNumber) {
    if (score > 1) {
      document.querySelector('.message').textContent = '📉 Too Low!';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = '💥 You lost the game!';
      document.querySelector('.score').textContent = 0;
    }
  }
}

With the above code, everything should now work great and as expected. What is now left for us to implement is the high score and the again button. But before implementing those functionalities, in the next lecture, we are going to talk about CSS and how we can manipulate styles using JavaScript.