如何使用 Javascript 在每个输入上重置 for 语句？

Question

I am trying to make a simple game in Javascript and I need some help because this language is new to me. In this game a random number from 1 to 100 appears. Then the user writes the number he sees and clics on the submit guess button. After that, a new random number appears and the user has to input the previous number and the new one and so on until he inputs an incorrect number.

Here is how I start the game

function createGame() {
  let x = Math.floor(Math.random() * 100 + 1);
  document.getElementById("valop1").innerHTML = x;
  numbers.push(x);
}

And this is my main algorithm. SubmitGuessButton makes reference to the button the user clics when he wants to enter a new number, like the one he sees on the screen and the previous ones.

document.getElementById("submitGuessButton").onclick = function() {
  let i;
  const miResultado = guessField.value;
  for (i = 0; i < numbers.length; i++) {
    if (guessField.value == numbers[i]) {
      finalScore++;
    } else {
      console.log("inccorrecto!!");
    }
  }
  createGame();
};

Of course this works fine but it does not make what I want. I tried everything to make it works but it never behaves like I want. I tried restarting the for loop but it does not work. Any suggestions?

Answer 1

welcome to the world of JavaScript!

If you are having trouble with syntax i would highly recommend writing your game in "psuedo code" first. Make sure each line does exactly what you want it to do, and try to keep things as simple as possible.

Also please update your question to include the full code for your game.

you declare miResultado but you don't reference it again

try writing a separate function that checks the value of each value in the numbers array one at a time. HINT: you are going to want to compare 2 arrays (the numbers array and the array the user inputs that are supposed to match the number array)

Answer 2

Guessing Game

This demo will randomly get a number 1 to 100, the number is revealed for testing, look in CSS and uncomment the style when done testing. User will guess and will get feedback on how far or close on each guess. When the user succeeds in guessing the correct number, they are notified along with how many guesses it took.

The reset function is:

 game.onreset = init;

triggered by clicking:

 `<input type='reset'>`

within a <form> .

---

References

In order to understand how it works read the following:

• HTMLFormElement
• document.forms
• HTMLFormElement.elements
• HTMLFormControlsCollection
• event.preventDefault()
• .parseInt()
• Math.abs()
• Math.ceil()
• Math.floor()
• .textContent

---

Demo

 var game = document.forms[0]; var counter = 0; window.onload = init; game.onreset = init; game.onsubmit = takeAGuess; function init(e) { var game = document.forms[0]; var ui = game.elements; var mystery = getRandom(1, 100); ui.test.value = mystery; ui.number.value = ''; ui.message.value = 'Take a guess'; ui.button.style.display = 'inline-block'; return guessingGame(null); } function takeAGuess(e) { e.preventDefault(); var number = this.number.value; var end = guessingGame(number); if (end) { this.button.style.display = 'none'; } } function guessingGame(digit) { var msg = game.message; var N = parseInt(digit, 10); var X = parseInt(test.value); counter++; var rng = Math.abs(X - N) if (N === X) { msg.textContent = `You won with ${counter} guesses!`; return true; } if (rng <= 10) { msg.textContent = `You are very close`; return false; } if ((rng > 10) && (rng <= 20)) { msg.textContent = `You are getting there`; return false; } if ((rng > 20) && (rng <= 40)) { msg.textContent = `You are far from close`; return false; } else if (rng > 40) { msg.textContent = `You are way too far`; return false; } else { return false; } } function getRandom(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; }

 fieldset { width: fit-content; } /* Uncomment when done testing #test { display: none }*/

 <form id='game'> <fieldset> <legend>Guess a Number between 1 to 100</legend> <output id='message'></output> <br><output id='test'></output><br> <input id='number' type='number' min='1' max='100'> <input id='button' type='submit'> <input type='reset'> </fieldset> </form>