【问题标题】：Number Guessing Game Program Build with JavaScript用 JavaScript 构建猜数游戏程序
【发布时间】：2015-12-15 15:48:40
【问题描述】：

我正在尝试构建一个猜谜游戏，计算机会自动生成一个介于 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”语句中添加返回行结束循环，剩余的猜测永远不会减少，用户可以无限输入，直到他们猜对为止。将 playerGuessSubmission() 函数添加到每个“if”语句会导致无限循环。

我是学习 JS 的新手（并且是自己做的），因此非常感谢任何指导！提前致谢。

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

【问题讨论】：

1) 添加 type="button" 2) 在小提琴中使用 HEAD 而不是 onload：$(function() { $("#playersGuess").on("click",function(e) { e.preventDefault(); playersGuessSubmission(); }); });
我要给你的一个提示是为每个按钮设置一个唯一的 ID。否则你会得到冲突的代码。此外，在 HTML 中，仅允许使用特定名称 ID 一次。如果您想更频繁地使用相同的名称，请将其添加为一个类。我要给你的另一个提示是使用 jQuery 句柄作为点击函数，而不是调用内联函数。稍后我可能会尝试修复您的代码
同时更改按钮或变量的名称。

标签： javascript jquery html css function

【解决方案1】：

我建议不要使用 for 循环，而是使用全局变量来跟踪剩余的猜测，并在用户每次猜测且剩余猜测 > 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');
    }
}

【讨论】：

【解决方案2】：

不确定这是否能解决您的问题，但一次解决一个问题：

1：

我认为玩家的猜测用完了，因为你循环猜测的次数会减少每次猜测的次数，所以循环一直持续到猜测基本上为零。

2：

如果您添加 return 语句，用户的猜测永远不会下降，因为每次按下按钮时，您都会再次调用 lowerOrHigher() 函数，并且您在函数中将猜测设置为等于 5

3：

出于同样的原因，你会得到一个调用 playerGuessSubmission() 函数的无限循环，因为 playerGuessSubmission() 函数调用 lowerOrHigher() 反过来将用户猜测设置为 5，允许循环再次运行，再次调用 playerGuessSubmission等等等等

我要做的是创建一个 onload 函数，使用您的 jquery 在页面加载时将初始猜测数设置为 5：

$( document ).ready(function() {
    guessesRemaining = 5;
});

然后仅在您调用 JSFiddle 中所示的 PlayAgain() 函数时重置guessesRemaining = 5，我假设这将是“再次播放”按钮的“onclick”：

function playAgain(){
    guessesRemaining = 5;
}

从那里我将完全删除for循环，以便仅在单击按钮时调用lowerOrHigher()，并决定每次单击按钮时他是否guessesRemaining -= 1，或console.log("你赢了”）。

【讨论】：

【解决方案3】：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
  </head>

  <body>
    <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>

<script>
var playersGuess,
    winningNumber



// Fetch the Players Guess

function playersGuessSubmission(){
    winningNumber = Math.floor(Math.random() * 100);
    console.log(winningNumber +"winning");
    playersGuess = parseInt($('#playersGuess').val());
    console.log(playersGuess+ "guess");

    if(playersGuess <winningNumber)
    {
      console.log("guess higher");
    }

       else if(playersGuess >winningNumber)
    {
      console.log("guess lower");
    }

    else
    {
      console.log("correct");
    }

    $('#playersGuess').val('');

}

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

function lowerOrHigher(){

}</script>
  </body>

</html>

【讨论】：

这行得通。通过添加功能并输入您的猜测使其变得更好，一个简单的计数器递减。再次播放按钮只会让猜测回到 5

【解决方案4】：

这是我的建议

我更改了按钮的ID，它们必须与其他变量名称不同且不能相同

DEMO

/* **** Global Variables **** */
// try to elminate these global variables in your project, these are here just to start.

var playersGuess, winningNumber, guessesRemaining;



/* **** Guessing Game Functions **** */

// Generate the Winning Number

function generateWinningNumber() {
  winningNumber = Math.floor(Math.random() * 100);
  guessesRemaining=5;
  console.log(winningNumber);
  $('#remaining').html(guessesRemaining+" left");       
}



// Fetch the Players Guess

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

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

function lowerOrHigher() {
    guessesRemaining--;
    if (guessesRemaining<=0) {
      $('#remaining').html("You lose");        
      return;
    }  
    if (playersGuess > winningNumber) {
      console.log('lower');
      console.log(guessesRemaining);
      $('#remaining').html("too high "+guessesRemaining+" left");        
    } else if (playersGuess < winningNumber) {
      console.log('higher');
      $('#remaining').html("too low "+guessesRemaining+" left");        
    } else if (playersGuess == winningNumber) {
      $('#remaining').html("you win "+guessesRemaining+" left"); 
      guessesRemaining=0;
    }
    else {
      $('#remaining').html(playersGuess + " is not valid, "+guessesRemaining+" left"); 
    }
}

//continues to console.log false, een when the winning number is set to 24


// Check if the Player's Guess is the winning number 

function checkGuess() {
  // add code here
}

// Create a provide hint button that provides additional clues to the "Player"

function provideHint() {
  // add code here
}

// Allow the "Player" to Play Again

function playAgain() {
  // add code here
  generateWinningNumber();
}


/* **** Event Listeners/Handlers ****  */


$(function() {
  generateWinningNumber();
  $("#playersGuessBut").on("click",function(e) {
    e.preventDefault();
    playersGuessSubmission();
  });
  $("#playAgain").on("click",playAgain);
});

【讨论】：

【解决方案5】：

我是学习 JS 的新手（并且是自己学习的），因此非常感谢任何指导！

我建议您使用以下方法学习 javascript： Codeschool 他们为新手提供了很好的 javascript 学习路径，基础课程是免费的。或Coursera

据此

在每个“if”语句中添加返回行结束循环，剩余的猜测永远不会减少，用户可以无限输入，直到他们猜测正确

您在函数开始时定义猜测次数。所以每次你输入它都会被赋予初始值（5）。

【讨论】：

谢谢！是的，我学习过 CodeSchool、Codeacademy 和 Treehouse，这是一个让我尝试练习这些技能的项目。