使用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);
});