使用JavaScript构建数字游戏程序

时间：2015-12-15 15:48:40

标签： javascript jquery html css function

我正在尝试构建一个猜谜游戏，计算机会自动生成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文本。

5 个答案:

答案 0 :(得分：1)

我建议使用全局变量来跟踪剩余的猜测，并在每次用户猜测时将其减少1，而不是使用for循环。 0。 您的方式不会等待用户输入，而是连续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');
    }
}

答案 1 :(得分：1)

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

1

我认为玩家没有猜测，因为你每次都会猜测减少猜测次数的猜测次数，所以循环继续，直到猜测基本为零。

2：

如果添加return语句，用户的猜测永远不会失败，因为每按一次按钮，你再次调用lowerOrHigher（）函数，你在函数中设置等于5的猜测

3：

出于同样的原因，你得到一个无限循环来调用playerGuessSubmission（）函数，因为playerGuessSubmission（）函数调用lowerOrHigher（），后者又将用户猜测设置为5，允许循环再次运行，再次调用playerGuessSubmission等等

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

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

然后当你调用JSFiddle中指示的PlayAgain（）函数时，只重置guessesRemaining = 5，我认为这将是一个＆＃34; onclick＆＃34;再次播放按钮：

function playAgain(){
    guessesRemaining = 5;
}

从那里我将完全删除for循环，以便仅在按钮点击时调用lowerOrHigher（），并在每次单击按钮时决定是否猜测 - 还是 - = 1，或者是console.log（＆ ＃34;你赢了＆＃34;）。

答案 2 :(得分：0)

  
    

我是学习JS的新手（也是我自己做的）所以任何指导都非常感谢！

  

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

根据这个

  
    

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

  

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

答案 3 :(得分：0)

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

答案 4 :(得分：0)

这是我的建议

我更改了按钮的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);
});
相关问题
最新问题