Question

我正在开发一个简单的猜谜游戏javascript程序。它提供1到10之间的随机数，并提供输入字段和按钮供用户进行猜测。该程序在每次猜测之后都会告诉用户是否猜到了太高或太低，并且它与用户获得正确答案的猜测次数保持一致，并且显示了＃34;祝贺＆＃34;他们说得对的消息。

我在让它正常工作方面遇到了一些麻烦。页面显示正确，但是当我输入猜测并单击我的提交按钮时，没有任何反应。

这是我的代码：

<html>
    <head>
        <title>Guess My Number</title>

        <script type="text/javascript">
            var game = {
                num : 0,
                turns : 1,
                reset : function() {
                    this.turns = 1;
                    this.newNum();
                },
                newNum() : function() {
                    this.num = parseInt(Math.random() * 10) +1;
                },
                checkNum() : function(guess) {
                    try {
                        guess = parseInt(guess);
                    }
                    catch(e) {
                        alert("Enter a guess!");
                        this.turns++;
                        return false;
                    }

                    if (guess == this.num) {
                        alert("Correct! It took you " + this.turns + "turns to guess my number.");
                        return true;
                    }
                    else if(guess > this.num) {
                        alert("Your guess is too high. Try again.");
                        this.turns++;
                        return false;
                    }
                    else (guess < this.num) {
                        alert("Your guess is too low. Try again.");
                        this.turns++;
                        return false;
                    }
                }
            };

            function guessNumber() {
                var guess = document.getElementById("guess").value;
                game.checkGuess(guess);
            }

            function resetGame() {
                game.reset();
            }

            resetGame();
        </script>
    </head>

    <body>
        <h1>Would You Like To Play A Game?</h1>
        <h2>Thank you for checking out my game. Good luck!</h2>
        <h3>Created by Beth Tanner</h3>
        <h2>Directions:</h2>
        <p>
            The game is very simple. I am thinking of a number between 1
            and 10. It is your job to guess that number. If you do not guess
            correctly on your first attempt, don't worry, you can keep guessing 
            until you guess the correct number.
        </p>
        <p>
        Your Guess: <input type="text" id="guess" size="10" />
        <br />
        <input type="button" value="Sumbit Guess" onclick="guessNumber()" />
        <input type="button" value="Reset Game" onclick="resetGame()" />
        </p>
    </body>
</html>

我之前从未真正使用过Javascript，所以我知道这可能是我忽略的一个非常基本的东西。关于为什么这不能正常工作的任何想法？

Answer 1

您的变量guess未定义。

只需用以下内容初始化：

var guess = 0;

但是请注意，num初始化为0的可能性。因此，用户立即猜测而没有做任何事情。

var num = Math.random() *10 + 1;

BR

Answer 2

你应该首先调用你的函数，你可以做的一件事是：

<input type = "button" value = "Submit Guess" onclick="guessNumber()">

现在您的函数被调用了，您需要将用户输入的值输入到guess变量中，我在代码中没有看到，您可以这样做：

Your guess:<input type = "text" name = "guess" size = "10" id="guess" /> <br />

然后在您的java脚本中将变量guess初始化为：

guess=document.getElementById("guess").value;

这应该做的事情！

修改另外，请确保Math.random()返回整数，其他人建议使用Math.ceil()！

Answer 3

您的代码存在一些问题：

Math.random()*10会返回类似于8.523525235的内容，因此您很难将其与任何猜测相匹配。相反，请使用Math.ceil(Math.random()*10)。这会生成一个随机数，然后向上舍入到最接近的整数。
在您的JavaScript代码中，您在最后一行调用guessNumber()，一旦浏览器到达该行，它就会执行该功能。这意味着在用户进行任何猜测之前执行的功能。相反，您需要将事件侦听器附加到按钮，以便在单击按钮时调用guessNumber()。类似的东西：

document.getElementById('button').addEventListener('click', guessNumber)。

目前您还没有以任何方式设置变量guess。您需要获取文本框的值并将其分配给guess。类似的东西：

guess = document.getElementById('textbox').value

此处使用while循环不合适，因为用户每次都使用文本框和按钮提交猜测。有一些方法可以通过while循环执行此操作，但让我们坚持使用您当前的设置。

你想要类似于此的东西：

HTML：

<p>Your guess:
    <input type="text" id="textbox" />
    <input type="button" id="button" value="Guess" />
</p>

JS：

var rand = Math.ceil(Math.random()*10);
var turns = 0;
var guess;

document.getElementById('button').addEventListener('click', guess);

function guess() {
    guess = document.getElementById('textbox').value;
    if (guess == rand) {
        alert('Correct! It took you ' + turns + ' turns to guess the number!');
    } else if (guess < rand) {
        alert('Your guess is too low. Try again.');
        turns++;
    } else if (guess > rand) {
        alert('Your guess is too high. Try again.');
        turns++;
    } else {
        alert('You didn\'t enter a number. Try again.');
    }
}

这里是fiddle。我添加了一些用于重置功能。</ p>

Answer 4

其他几个答案指出了测试代码中的一些问题：

type="submit"但没有<form>个标签。
拼错变量名称tunrs而不是turns。
使用while循环
按钮和JavaScript之间没有事件连接

这是一个简单的代码示例，有很多方法可以在JavaScript中解决它。这是我的方法。

在创建一个不需要重新加载页面的简单游戏板时，我喜欢创建一个game对象。在JavaScript中，您可以通过各种方式创建对象。但其中最简单的是：

var game = {};

这将创建一个没有属性或方法的空对象。要创建几个属性：

var game = {
    num: 0,
    turns: -1
};

每个属性都可以像var x = game.num;一样全局引用。使用函数创建对象：

var game = {
    num: 0,
    turns: 0,
    reset: function() {
        this.turns = 0;
        //get a random integer between 1 and 10
        this.num = parseInt(Math.random() * 10) + 1;
        //Note: "this" lets you refer to the current object context. "game" in this case.
        //There are a couple of ways to force the value to an Int, I chose parseInt
    }
};

游戏现在有一个game.reset()功能，可以将game.turns设置为0并获得新的game.num。以下是我的示例的完整javascript代码（与上面的示例略有不同）：

<script type="text/javascript">
    //Create an object to hold the game info
    var game = {
        num : 0,
        turns : 0,
        reset : function() {
            //function to reset 
            this.turns = 0;
            this.newNum();
        },
        newNum : function() {
            //get a random integer between 1 and 10
            this.num = parseInt(Math.random() * 10) + 1;
        },
        checkGuess : function(guess) {
            //try to convert the guess into a integer
            try {
                guess = parseInt(guess);
            } catch(e) {
                alert("Enter a guess!");
                this.turns++;
                return false;
            }

            //perform strict check of equality
            if (guess === this.num) {
                alert("Correct! It took you " + this.turns + " turn(s) to guess my number");
                return true;
            } else if (guess > this.num) {
                alert("Your guess is too high. Try again.");
                this.turns++;
                return false;
            } else {
                alert("Your guess is too low. Try again.");
                this.turns++;
                return false;
            }
        }
    };


    function guessNumber() {
        var guess = document.getElementById("guess").value;
        game.checkGuess(guess);
    }

    function resetGame() {
        game.reset();
    }

    resetGame();
</script>

注意：我没有在此处执行window.onload事件，因为仅当代码与文档或DOM元素上的元素交互时才需要这些事件。如果您尝试在文档的head中执行JS代码，则会在文档的其余部分加载之前立即执行。如果您的JS代码试图获取，设置或操作页面中的元素，那么这很糟糕，因为您仍然在head并且body尚未加载。

因此，在您的代码需要访问页面元素的情况下，通常会使用window.onload = someInitFunction();，以便在文档完成加载后执行JS代码。

以下是我的HTML代码。它与您的代码大致相似，只是我在“guess”输入上将name属性更改为id，以便更轻松地使用document.getElementById()进行访问。当您在name并且将向服务器提交值时，使用form会很有帮助。在这种情况下，只提交具有name属性集的字段。通常在表单上，您会有类似<input type="text" id="textfield" name="textfield" />的内容。 JavaScript中使用id以便于访问，并在将表单提交回服务器时使用name。

我还在按钮中添加了onclick个属性，并将input type="submit"更改为input type="button"。

<h1>Would You Like To Play A Game?</h2>
<h2>Thank you for checking out my game. Good luck!</h2>
<h3>Created by Beth Tanner</h3>
<h2>Instructions</h2>
<p>
    The game is very simple, I am thinking of a non-decimal number between 1 and 10
    and it is your job to guess what that number is. If you do not guess my number 
    correctly on your first attempt, that's ok, you can keep guessing until you are correct.
</p>
<p>
    Your guess:<input type="text" id="guess" size = "10" />
    <br />
    <input type="button" value = "Submit Guess" onclick="guessNumber()" />
    <input type="button" value = "Reset Game" onclick="resetGame()" />
</p>

这是一个JSFiddle示例，我相信，它会以您希望的方式运行。

<强>更新正如我所说，有很多方法可以做到这一点。 Here is an alternate way to give number selections

简单猜猜我的数字游戏在Javascript中

4 个答案: