Number Guesser Game - Code Review Please | Solved

Hello, I’ve recently begun learning JavaScript. I try to understand the theory and mentality of everything before moving over. I realize I could just play around and figure out the correct code to make this project function, however then I’d be at a loss. Therefore I humbly ask that someone who knows JavaScript and is familiar with the number guesser game review my code and tell me where I have gone wrong;

Number Guesser Project Link

let humanScore = 0;
let computerScore = 0;
let currentRoundNumber = 1;

// Write your code below:
// Here I am writing a function that will pick a number from 0 to 9.
function generateTarget() {
  return Math.floor(Math.random() * 10)
} 
/* So this is basically the main function of the project.
In this function we require 3 numbers: humanGuess, computerGuess and targetGuess.
The program says that it automatically runs generateTarget function at the beginning of each round to decide on the secret number itself. So I'll not be identifying it myself. I do however need the computer to make a guess so I run the same function for the computerGuess variable and then assign it to the variable.

Basically the winner is the one who is closest to the secret number. So I run Math.abs on the distance of both computer and human guesses to the TargetGuess. If the computer's point is higher than the human, then the human wins since it is closer to the target. When tied human wins as well. Otherwise if the computer's point is lesser than the human, computer wins. The project says to return true if human wins, to return false if computer wins.
*/
function compareGuesses(humanGuess, computerGuess, targetGuess) {
  computerGuess = generateTarget();

  humanPoint = Math.abs(targetGuess - humanGuess);
  computerPoint = Math.abs(targetGuess - computerGuess);
  console.log(humanPoint);
  console.log(computerPoint);
  
  if (computerPoint >= humanPoint ) {
    return true;
  } else if (computerPoint < humanPoint) {
    return false;
  }
}
/* Project says that we need an updateScore function that takes in only one argument named winner, which will come back as either 'human' or 'computer'. So if the winner comes as 'human' I am to increase the humanScore by 1 else if it comes as 'computer' the computerScore is to increase by 1.
*/

function updateScore(winner) {
  if (winner = 'human') {
    humanScore = humanScore + 1;
  } else {
    computerScore = computerScore + 1;
  }
}

function advanceRound() {
  currentRoundNumber++
}

Questions and Notes:
1- The compareGuesses() function does not appear to be running smoothly.
For instance the secret number rolls as 7.
Computer guesses 6.
I guess 1.
Yet somehow the human wins?

2- My updateScore function is not working correctly. I originally tried humanScore++ and computerScore instead of the whole humanScore = humanScore + 1; but when it failed I switched to this, alas no luck. What happens is regardless of who wins the humanScore increases by 1.

3- I’ve Inserted two console.log commands inside the compareGuesses() function to see the output of each value. However the code won’t let me see those values, so I can’t compare them with what I see on the web side. I was merely wondering if the actual numbers show up or if I somehow botched the code. Basically a debug atttempt on my end, I was simply curious why the console.log doesn’t bring anything at the code side.

4- I’ve went ahead and peeked at the correct code for it. There was a line I did not understand, perhaps you can help me?

const compareGuesses = (humanGuess, computerGuess, targetGuess) => {
const humanDifference = Math.abs(targetGuess - humanGuess)
const computerDifference = Math.abs(targetGuess - computerGuess)
return humanDifference <= computerDifference;
}

I get the humanDifference and computerDifference. However the return part confuses me. return keyword as far as I know is simply means to store data. How is
“humanDifference <= computerDifference” is simply saying that if humanDifference is less or equal to the computerDifference it is true, otherwise it is false?

Sorry if my speech is a bit complex, English is not my native language.
I appreciate all the help!

its confusing that you have both targetGuess (parameter of compareGuesses function) and within the function you declare a variable named computerGuess. This is duplicate code, now you have two random numbers.

again, looking at the code:

if (winner = 'human')

i see you do an assignment, not a comparison.

you never call any of the functions? You declare them, but you never run/execute them.

no, it means handing back (returning) data to the caller.

a comparison always results in a boolean value. A comparison is either true (condition met) or false.

2 Likes

Well the first random number is for the game to decide on the secret number. The one I run inside the function is for the computer score. Otherwise wouldn’t the computer always win? Since Secret number and Computerguess would be the same?

Oh boy what a stupid mistake, thank you that solves one problem :slight_smile:

Oh I figured the function has got to run when I click on the web side of things.

I now see it, that’s brilliant thank you!

So now I only need to fix the first problem and I must confess I’m still a tad bit lost at it.
I think the biggest challenge here is that I am only partial to part of the code. I don’t know what is given and what isn’t, since I did not delve too much on the web JavaScript code this assignment uses.
Does it also supply me with the computer’s guess?

Actually the moment I removed the computerGuess bit, the code fixed itself. Apparently the other JS gave the computerGuess input, I didn’t need to add it myself. Thank you very much, I can finally move on.

1 Like

that was the point i was trying to make :wink: compareGuesses function receives a randomly generated number for computerGuess and targetGuess, which are generated else where in the code.

a function should only have a single responsibility, which is comparison in this case.

No idea, depends on the objective, but you did not share the exercise (url). You can make a button in the webpage which can call the function.

i would need to view the exercise. Which you would have to share. I don’t know all the exercises from the top of my head, there are too many.

we can even show this with code:

console.log(typeof (5 == 5));

the parentheses are needed to resolve the comparison first.

1 Like

My apologies. I’ll add the link now, even though the problem was resolved. Afterall it may help others who might run into the same problem with myself.

Number Guesser Project

Once more thanks a lot! I’m already conquering the arrays as we speak :slight_smile:

1 Like

found the rest of the code:

// game.js
let target;

const humanGuessInput = document.getElementById('human-guess');

const roundNumberDisplay = document.getElementById('round-number');

const computerGuessDisplay = document.getElementById('computer-guess');
const humanScoreDisplay = document.getElementById('human-score');
const computerScoreDisplay = document.getElementById('computer-score');
const targetNumberDisplay = document.getElementById('target-number');
const computerWinsDisplay = document.getElementById('computer-wins');

const guessButton = document.getElementById('guess');
const nextRoundButton = document.getElementById('next-round')

guessButton.addEventListener('click', () => {
  // Generate the target value
  target = generateTarget();
  // Retrieve the player's guess
  const currentHumanGuess = humanGuessInput.value;
  // Make a random 'computer guess'
  const computerGuess = Math.floor(Math.random() * 10);

  // Display the computer guess and the target
  computerGuessDisplay.innerText = computerGuess;
  targetNumberDisplay.innerText = target;
  
  // Determine if the human or computer wins:
  const humanIsWinner = compareGuesses(currentHumanGuess, computerGuess, target)
  const winner = humanIsWinner ? 'human' : 'computer'

  // Update the correct score:
  updateScore(winner);

  // Display the winner
  if (humanIsWinner) {
    guessButton.innerText = 'You Win!!!!!';
    guessButton.classList.toggle('winning-text')
  } else {
    computerWinsDisplay.innerText = 'Computer Wins!!!';
  }

  // winnerDisplay.innerText = humanIsWinner ? 'You win!' : 'Computer wins!';

  // Display the current scores:
  humanScoreDisplay.innerText = humanScore;
  computerScoreDisplay.innerText = computerScore;
  
  // Set the correct disabled state for the buttons
  guessButton.setAttribute('disabled', true)
  nextRoundButton.removeAttribute('disabled');
});

nextRoundButton.addEventListener('click', () => {
  // Increase the round number
  advanceRound();
  // Display the new round number
  roundNumberDisplay.innerText = currentRoundNumber;

  // Set the correct disabled state for the buttons
  nextRoundButton.setAttribute('disabled', true);
  guessButton.removeAttribute('disabled');

  // Reset the guess input box and the target number display:
  targetNumberDisplay.innerText = '?';
  guessButton.innerText = 'Make a Guess';
  humanGuessInput.value = '';
  computerGuessDisplay.innerText = '?';
  computerWinsDisplay.innerText = '';
  guessButton.classList.remove('winning-text');
});

const addButton = document.getElementById('add');
const subtractButton = document.getElementById('subtract');

addButton.addEventListener('click', () => {
  humanGuessInput.value = +humanGuessInput.value + 1;
  handleValueChange(humanGuessInput.value);
});

subtractButton.addEventListener('click', () => {
  humanGuessInput.value = +humanGuessInput.value - 1;
  handleValueChange(humanGuessInput.value);
});

const handleValueChange = value => {
  if (value > 0 && value <= 9) {
    subtractButton.removeAttribute('disabled');
    addButton.removeAttribute('disabled');
  } else if (value > 9) {
    addButton.setAttribute('disabled', true);
  } else if (value <= 0) {
    subtractButton.setAttribute('disabled', true);
  }
}

humanGuessInput.addEventListener('input', function(e) {
  handleValueChange(e.target.value);
});

that explains where the function calls are.

so game.js indeed calls generateTarget, as we suspected. and it calls compareGuesses function, that explains a lot.

1 Like

With that in mind begs the question I asked before :smiley:

Could it be that the game.js’s JavaScript window and the one I was staring at in my project are different? Hence the reason I failed to get those console.log values of each variable?

which is what?

the output window in this exercise is a webpage/html document, not a console. If you want to use the console, you can use the one build into your browsers (under devtools, you can google this)

1 Like

Got it thanks. I assumed as much personally.

9 posts were split to a new topic: Number guesser