使用JavaScript构建猜数字游戏程序
[英]Number Guessing Game Program Build with JavaScript
问题描述
我正在尝试构建一个猜谜游戏，其中计算机会自动生成一个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”语句中添加返回行将结束循环，并且剩余的猜测永远不会减少，并且用户可以无限输入直到正确猜测为止。 在每个'if'语句中添加playerGuessSubmission（）函数会导致无限循环。
我刚开始学习JS（并且自己动手做），因此对任何指导都非常感谢！ 提前致谢。
请参阅此处的JSFiddle： http : //jsfiddle.net/njpatten/qo1d63da/1/可以随意更改console.log以发出警报或替换div文本。
5 个解决方案
解决方案1
1 2015-12-15 16:10:06
我不建议使用for循环，而建议使用全局变量来跟踪剩余的猜测，并在每次用户进行猜测并且剩余的Guesss> 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 2015-12-15 16:12:02
不确定是否可以解决您的问题，但是一次解决一个问题：
1：
我认为播放器用尽了所有猜测，因为您循环猜测的次数会减少每次的猜测数目，因此循环会一直持续到猜测基本上为零为止。
2：
如果添加return语句，则用户的猜测永远不会降低，因为每次按下按钮时，您都会再次调用lowerOrHigher（）函数，并且在函数中设置的猜测等于5
3：
出于同样的原因，您会获得无限循环来调用playerGuessSubmission（）函数，因为playerGuessSubmission（）函数会调用lowerOrHigher（），而后者又将用户猜测值设置为5，从而允许循环再次运行，再次调用playerGuessSubmission，依此类推，等等
我要做的是，使用jquery创建一个onload函数，以在页面加载时将初始猜测数设置为5：
$( document ).ready(function() {
guessesRemaining = 5;
});
然后，当您按照JSFiddle中的指示调用PlayAgain（）函数时，仅重设guessRemaining = 5，我认为这将是“再次播放”按钮的“ onclick”：
function playAgain(){
guessesRemaining = 5;
}
从那里，我将完全删除for循环，以便仅在单击按钮时调用lowerOrHigher（），并确定每次单击按钮时，他是否猜测是否为-= 1，还是console.log（“ You Won” ）。
解决方案3
0 2015-12-15 16:09:42
我刚开始学习JS（并且自己动手做），因此对任何指导都非常感谢！
我建议您使用诸如： Codeschool之类的语言来学习javascript，它们为新手提供良好的javascript学习路径，并且基础课程免费。 或Coursera
根据这个
在每个'if'语句中添加返回行将结束循环，并且剩余的猜测永远不会减少，并且用户可以无限输入直到正确猜测为止
您可以在函数开始时定义猜测数。 因此，每次输入时，它都会带有初始值（5）。
解决方案4
0 2015-12-15 16:12:36
<!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
0 2015-12-15 16:23:42
这是我的建议
我更改了按钮的ID，它们必须不同且与其他变量名称不同
/* **** 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);
});
Javascript数字猜谜游戏
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.