Question

我做了一些调查，看看我是否能找出我的代码无效的原因，但我并不完全明白我应该寻找什么！

当用户在文本框中输入猜测“playerinput”然后点击提交（运行游戏功能）时，我的程序输出“你猜得太低了（）。”你有4/3 / 2/1 ......猜测。“

让我疯狂的是（）是应该猜测的地方。由于某些原因（我认为）它被停留在0。

我的代码是否正确生成数字并正确调用？

var NumberGame={
playerinput:document.getElementById("playerinput").value,

computernumber:0,
count:0,
output:document.getElementById("CPUoutput"),
guess:document.getElementById("guessbutton"),
randomnumber: function(){
 NumberGame.computernumber = Math.floor(Math.random() * 20) + 1;
return NumberGame.computernumber;
    }

}

function newgame() {
    window.alert("A new game has begun. Your guesses have been reset to 0, and the new number has been generated.");
    location.reload();
    }

function game() {

if (NumberGame.count===0){
    NumberGame.computernumber=NumberGame.randomnumber();
}

    if (NumberGame.playerinput < NumberGame.computernumber)
{
    NumberGame.count++;
    NumberGame.output.innerHTML = "You have guessed too low. (" + NumberGame.playerinput + ") You have used up " + NumberGame.count + " guesses.";
}
    else if (NumberGame.playerinput > NumberGame.computernumber) 
{
   NumberGame.count++;
    NumberGame.output.innerHTML = "You have guessed too high. (" + NumberGame.playerinput + ") You have used up " + NumberGame.count + " guesses.";

}
    else if (NumberGame.playerinput === NumberGame.computernumber) 
{
    NumberGame.output.innerHTML = "<h1>You Win!</h1>";
        newgame();

}
    if (NumberGame.count === 5)
{
    NumberGame.output.innerHTML = "<h1>You Lose!</h1>";
    newgame();

}


}

更新：这是HTML，按要求。要尝试一些你的建议。我不明白的几件事需要更多的研究。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>KevinPietteProject1</title>
<link rel="stylesheet" type="text/css" href="mycss.css">

</head>
<body>


    <div id="gamebody">
        <h1>-- Number Guessing Game -- 
    </h1>
<p >Guess the number between 1-20.</p>
<input id="playerinput" type="text" maxlength="2" autofocus size="4" />
<br>
<input type="button" id="guessbutton" value="Guess!" onClick="game()"/>
<br>
<input type="button" value="New Game" onclick="newgame();" />
<p>
    The object of the game is to guess what number the computer is thinking of.<br> The number is always between 1 and 20. Everytime you win, lose, or hit the new game button, a new number is generated. <br> Every new game, you begin with 5 guesses.

    <br>
        <div id="imagediv">
            <img id="thepicture" src="Images/neutral.png" height="120" width="120">
        </div>
    <br>


                <div id="Guessesleft">
                </div>


    </p>

            <div id="CPUoutput">
            </div>
    </div> 

<script src="rewrittenscript.js">
// Here, I've put the script at the bottom of the page so the DOM loads in the right order
</script>


</body>
</html>

Answer 1

您可以使用

onkeyup=""

在你的HTML中

onkeyup="NumberGame.playerinput = this.value"

我根本没有看到你拨打过NumberGame，但如果你只在提交时运行game（），你应该将NumberGame加入到你调用的函数中！

或尝试写

playerinput : function() {return parseInt(document.getElementById("playerinput").value),10}();

然后每次调用时都会更新值

NumberGame.playerinput

Answer 2

当你定义NumberGame时，你有这个：

playerinput:document.getElementById("playerinput").value,

这会将玩家输入设置为您定义NumberGame时的值。该值永远不会改变。您基本上是为playerInput分配一个字符串。我认为这不是你想要的。

您需要做的是每次调用game（）函数时获取新的输入值。你可以做的一件事就是每当你调用game（）时定义playerinput

function game() {
    NumberGame.playerinput = parseInt(document.getElementById("playerinput").value)

没有从我的对象变量获得正确的输入

2 个答案: