javascript - 使用 JavaScript 构建猜数游戏程序

Question

我正在尝试构建一个猜谜游戏，计算机会自动生成一个 1-100 之间的数字，用户有 5 次机会猜这个数字。在猜测之间我想清除输入字段。有一个提示按钮可以告诉用户“更低”或“更高”，还有一个 div 显示还剩多少猜测。还有一个再次播放按钮。

我已经构建了 html、css 和一些 JS，但我被 for 循环卡住了。

JS/HTML 是:

<input type="text" id="playersGuess" placeholder="Input Number 1-100" class="form-control input" >
<h3 id="status"></h3>
<button onclick='playersGuessSubmission()' type="button" id="playersGuess"class="btn btn-lg btn-info submit">Submit Your Guess</button>


var playersGuess,
    winningNumber

// Generate the Winning Number

function generateWinningNumber(){
    winningNumber = Math.floor(Math.random() * 100);
    console.log(winningNumber);
}

generateWinningNumber();

// Fetch the Players Guess

function playersGuessSubmission(){
    playersGuess = parseInt($('#playersGuess').val());
    console.log(playersGuess);
    lowerOrHigher();
}

// Determine if the next guess should be a lower or higher number

function lowerOrHigher(){
    var guessesRemaining=5;
    for(i=guessesRemaining; i>0; i-- ) {
        if (playersGuess > winningNumber){
            console.log('lower');
            guessesRemaining -= 1;
            // $('remaining span').html(guessesRemaining);
            console.log(guessesRemaining);
            // return;
            // playersGuessSubmission()
        } else if (playersGuess < winningNumber) {
            console.log('higher');
            guessesRemaining -= 1;
            // $('remaining span').html(guessesRemaining);
            console.log(guessesRemaining);
            // return;
            // playersGuessSubmission()
        } else {
            console.log('you win')
            return;
        }
    }
}

目前，计算机生成一个随机数，用户可以猜测，然后用户通过循环控制台运行。将剩余的猜测注销为 0，不允许用户输入任何其他猜测。在每个“if”语句中添加返回行结束循环，剩余的猜测永远不会减少，用户可以无限输入直到他们猜对为止。将 playersGuessSubmission() 函数添加到每个“if”语句会导致无限循环。

我是刚开始学习 JS(并且自己学习)，所以非常感谢任何指导!提前致谢。

在这里查看 JSFiddle:http://jsfiddle.net/njpatten/qo1d63da/1/请随意将 console.log 更改为警报或替换 div 文本。

Answer 1

我建议不要使用 for 循环，而是使用全局变量来跟踪剩余的猜测，并在每次用户进行猜测且 remainingGuesses > 0 时将其减 1。您的方式不会等待用户输入，而是连续 5 次检查相同的值。这样的事情应该有效:

var guessesRemaining = 5;
function lowerOrHigher(){

    if (guessesRemaining > 0){
        guessesRemaining--;
        if (playersGuess > winningNumber){
            console.log('lower');
            // $('remaining span').html(guessesRemaining);
            console.log(guessesRemaining);
        } else if (playersGuess < winningNumber) {
            console.log('higher');
            // $('remaining span').html(guessesRemaining);
            console.log(guessesRemaining);
        } else {
            console.log('you win')
            return;
        }
    }
    else {
         console.log('You ran out of guesses');
    }
}