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

Keeping a running list on a page using Javascript

本文关键字：运行 列表 Javascript 使用      更新时间：2023-09-26

我正在创建一个网页，允许用户玩一个简单的"猜我的号码"游戏。游戏本身运行正常，但我应该在网页上保存一份用户猜测的数字的运行列表，并让他们知道他们是否猜到了已经猜到的数字。这是我第一次使用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>

如有任何帮助，我们将不胜感激。

初始化一个空数组，如

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(', ');

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

var guessedNumbers = [];
guessedNumbers.push(24);
guessedNumbers.push(36);
for (i = 0; i < guessedNumbers.length; i++) {
  document.write(guessedNumbers[i] + "<br />");
}

相关文章：