使用Javascript在页面上保持运行列表

时间:2014-09-15 21:10:50

标签: javascript list

我正在努力创建一个允许用户玩简单的“猜我号码”游戏的网页。游戏本身运行正常,但我应该保留用户在网页上猜到的数字的运行列表,并让他们知道他们是否猜到了他们已经猜到的数字。这是我第一次使用Javascript,我无法弄清楚如何做到这一点。

我确定我需要创建一个变量,例如“num”,它可以保存他们已经猜到的数字,但不知道怎么做,因为我不想替换已经存储的数字这个变量。

这是我到目前为止的代码,就像我说的,代码的这部分工作正常,只是不知道如何去做我所描述的。

<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <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;
                },
                guessNumber : 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.");
                        document.getElementById("guess").value = " ";
                        return true;
                    }
                    else if(guess > this.num) {
                        alert("Your guess is too high. Try again.");
                        this.turns++;
                        document.getElementById("guess").value = " ";
                        return false;
                    }
                    else {
                        alert("Your guess is too low. Try again.");
                        this.turns++;
                        document.getElementById("guess").value = " ";
                        return false;
                    }
                }
            };

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

            function resetGame() {
                game.reset();
                document.getElementById("guess").value = " ";
            }

            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="reset" value="Reset Game" onclick="resetGame()"/>
        </p>
        <h3>Here Are Your Guesses So Far:</h3>
    </body>
</html>

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:2)

像这样初始化一个空数组

var tries = [];

每次用户猜出一个数字时,请使用数组的.push方法将数字附加到其中。

tries.push(guess);

要检查用户是否已尝试过号码,请检查数组方法.indexOf是否返回不同于-1的值

if (tries.indexOf(guess) != -1) //User has tried that number already

要在页面上显示值,您可以使用数组.join方法。

document.querySelector("#tries").textContent = tries.join(', ');

答案 1 :(得分:0)

要保留猜测数字的集合,您可以使用数组。您可以使用push函数添加到数组中。

&#13;
&#13;
var guessedNumbers = [];
guessedNumbers.push(24);
guessedNumbers.push(36);

for (i = 0; i < guessedNumbers.length; i++) {
  document.write(guessedNumbers[i] + "<br />");
}
&#13;
&#13;
&#13;