电脑猜数字 JavaScript

Question

我正在尝试在网页中创建一个简单的“猜数字游戏”，其中用户是思考数字的人，而计算机是猜测用户正在思考的数字（在 1-100 范围内）（没有用户需要输入）。 我为用户创建了四个按钮来响应计算机的猜测：Start、Guess Higher、Guess Lower、Bingo。 我有这个范围的问题。 如果用户点击'Lover'按钮，它应该成为最大的数字（例如，60太高，然后计算机猜测在1-60之间）（与'Higher'相同），但不能将它们连接在一起。 这是我的代码：

 let computerGuess = 0, numberOfGuesses = 0; function writeMessage(elementId, message, appendMessage) { let elemToUpdate = document.getElementById(elementId); if (appendMessage) { elemToUpdate.innerHTML = elemToUpdate.innerHTML + message; } else { elemToUpdate.innerHTML = message; } }; function newGame() { computerGuess = 0; numberOfGuesses = 1; writeMessage('historyList', ''); document.getElementById('buttonLover').disabled = true; document.getElementById('buttonHigher').disabled = true; document.getElementById('buttonBingo').disabled = true; } function randomNumber(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; } function computerGuessed() { let compGuess = document.getElementById('compGuess'), butLover = document.getElementById('buttonLover'), butHigher = document.getElementById('buttonHigher'), butBingo = document.getElementById('buttonBingo'), statusArea = document.getElementById('statusArea'), historyList = document.getElementById('historyList'); document.getElementById('buttonArea').disabled = true; butLover.disabled = false; butHigher.disabled = false; butBingo.disabled = false; let a = 1, b = 100; computerGuess = randomNumber(a, b); writeMessage('compGuess', '<p>' + computerGuess + '</p>', true); writeMessage('statusArea', '<p>Choose a number between 1-100 and click the button.</p>'); butLover.addEventListener("click", function () { writeMessage('historyList', '<li>' + computerGuess + ' (too high)</li>', true); writeMessage('compGuess', '<p>' + '' + '</p>', false); computerGuess = randomNumber(a, computerGuess); writeMessage('compGuess', '<p>' + computerGuess + '</p>', true); numberOfGuesses++; }); butHigher.addEventListener("click", function () { writeMessage('historyList', '<li>' + computerGuess + ' (too low)</li>', true); writeMessage('compGuess', '<p>' + '' + '</p>', false); computerGuess = randomNumber(computerGuess, b); writeMessage('compGuess', '<p>' + computerGuess + '</p>', true); numberOfGuesses++; }); butBingo.addEventListener("click", function () { writeMessage('statusArea', '<p>You got me in ' + numberOfGuesses + ' guesses, I was thinking ' + computerGuess + '. Let\'s go again...</p>'); writeMessage('compGuess', '<p>' + '' + '</p>', false); document.getElementById('buttonArea').disabled = false; newGame(); }); } window.onload = function () { newGame(); document.getElementById('buttonArea').addEventListener('click', computerGuessed); };

 <div id="game"> <h1>Computer Guessing Game</h1> <div id="statusArea"> <p>Choose a number between 1-100 and click the button.</p> </div> <div id="compGuess"> </div> <div class="buttons"> <input type="button" value="Start" class="button" id="buttonArea"/> <input type="button" value="Lover" class="button" id="buttonLover"/> <input type="button" value="Higher" class="button" id="buttonHigher"/> <input type="button" value="Bingo" class="button" id="buttonBingo"/> </div> <div id="historyArea"> <h2>Computer Previous Guesses</h2> <ol id="historyList"> </ol> </div> </div>

Answer 1

每次调用 computerGuessed() 时，都会将 a & b 重置为 1 和 100。尝试将它们设置为全局变量（因为您已经在使用全局变量），并在每场游戏开始时将它们设置为 1 和 100。

 let computerGuess = 0, numberOfGuesses = 0, a=0, b=100; function writeMessage(elementId, message, appendMessage) { let elemToUpdate = document.getElementById(elementId); if (appendMessage) { elemToUpdate.innerHTML = elemToUpdate.innerHTML + message; } else { elemToUpdate.innerHTML = message; } }; function newGame() { computerGuess = 0; numberOfGuesses = 1; a = 0; b = 100; writeMessage('historyList', ''); document.getElementById('buttonLower').disabled = true; document.getElementById('buttonHigher').disabled = true; document.getElementById('buttonBingo').disabled = true; } function randomNumber(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; } function computerGuessed() { let compGuess = document.getElementById('compGuess'), butLower = document.getElementById('buttonLower'), butHigher = document.getElementById('buttonHigher'), butBingo = document.getElementById('buttonBingo'), statusArea = document.getElementById('statusArea'), historyList = document.getElementById('historyList'); document.getElementById('buttonArea').disabled = true; butLower.disabled = false; butHigher.disabled = false; butBingo.disabled = false; computerGuess = randomNumber(a, b); writeMessage('compGuess', '<p>' + computerGuess + '</p>', true); writeMessage('statusArea', '<p>Choose a number between 1-100 and click the button.</p>'); } window.onload = function () { newGame(); document.getElementById('buttonArea').addEventListener('click', computerGuessed); let butLower = document.getElementById('buttonLower'), butHigher = document.getElementById('buttonHigher'), butBingo = document.getElementById('buttonBingo'); butLower.addEventListener("click", function () { writeMessage('historyList', '<li>' + computerGuess + ' (too high)</li>', true); writeMessage('compGuess', '<p>' + '' + '</p>', false); b = computerGuess; computerGuessed(); writeMessage('compGuess', '<p>' + computerGuess + '</p>', true); numberOfGuesses++; }); butHigher.addEventListener("click", function () { writeMessage('historyList', '<li>' + computerGuess + ' (too low)</li>', true); writeMessage('compGuess', '<p>' + '' + '</p>', false); a = computerGuess; computerGuessed(); writeMessage('compGuess', '<p>' + computerGuess + '</p>', true); numberOfGuesses++; }); butBingo.addEventListener("click", function () { writeMessage('statusArea', '<p>You got me in ' + numberOfGuesses + ' guesses, I was thinking ' + computerGuess + '. Let\'s go again...</p>'); writeMessage('compGuess', '<p>' + '' + '</p>', false); document.getElementById('buttonArea').disabled = false; newGame(); }); };

 <div id="game"> <h1>Computer Guessing Game</h1> <div id="statusArea"> <p>Choose a number between 1-100 and click the button.</p> </div> <div id="compGuess"> </div> <div class="buttons"> <input type="button" value="Start" class="button" id="buttonArea"/> <input type="button" value="Lower" class="button" id="buttonLower"/> <input type="button" value="Higher" class="button" id="buttonHigher"/> <input type="button" value="Bingo" class="button" id="buttonBingo"/> </div> <div id="historyArea"> <h2>Computer Previous Guesses</h2> <ol id="historyList"> </ol> </div> </div>

Answer 2

如果我们已经排除了这些可能性，这个版本会禁用较低/较高的按钮，如果没有其他选项，它会自动检测宾果游戏。

 //initialize global variables to keep track of stuff between functions var min = 1; var max = 100; var currentGuess = -1; function start() { //reset everything min = 1; max = 100; document.getElementById("historyList").innerHTML = ""; disable("startButton"); enable("lowerButton"); enable("higherButton"); enable("bingoButton"); //and guess guess(); } function guess() { //generate a guess between min and max currentGuess = rando(min, max); //disable higher/lower buttons if we've ruled out those possibilities currentGuess == min? disable("lowerButton"): enable("lowerButton"); currentGuess == max? disable("higherButton"): enable("higherButton"); //tell the user the guess document.getElementById("compGuess").innerHTML = currentGuess; } function lower() { //our guess was too high, so our new max is one lower than that guess max = currentGuess - 1; //automatically detect bingo if it's the only possible outcome left and don't bother executing the rest of the lower function if (max == min) { currentGuess = min; return bingo(); } //record that the guess was too high document.getElementById("historyList").innerHTML += "<li>" + currentGuess + " (too high)</li>"; guess(); } function higher() { //our guess was too low, so our new min is one higher than that guess min = currentGuess + 1; //automatically detect bingo if it's the only possible outcome left and don't bother executing the rest of the higher function if (max == min) { currentGuess = min; return bingo(); } //record that the guess was too low document.getElementById("historyList").innerHTML += "<li>" + currentGuess + " (too low)</li>"; guess(); } function bingo() { //record that the guess was a bingo document.getElementById("historyList").innerHTML += "<li>" + currentGuess + " (BINGO)</li>"; //only allow start button enable("startButton"); disable("lowerButton"); disable("higherButton"); disable("bingoButton"); //give the user a breakdown document.getElementById("compGuess").innerHTML = "You got me in " + document.getElementsByTagName("li").length + " guesses. I was thinking " + currentGuess + ". Let's go again..."; } //these two functions just make our code easier to read function disable(id) { document.getElementById(id).disabled = true; } function enable(id) { document.getElementById(id).disabled = false; }

 <script src="https://randojs.com/1.0.0.js"></script> <div id="game"> <h1>Computer Guessing Game</h1> <div id="statusArea"> <p>Choose a number between 1-100 and click the button.</p> </div> <div id="compGuess"></div> <div class="buttons"> <input type="button" value="Start" id="startButton" onclick="start();" /> <input type="button" value="Lower" id="lowerButton" onclick="lower();" disabled/> <input type="button" value="Higher" id="higherButton" onclick="higher();" disabled/> <input type="button" value="Bingo" id="bingoButton" onclick="bingo();" disabled/> </div> <div id="historyArea"> <h2>Computer Previous Guesses</h2> <ol id="historyList"></ol> </div> </div>

它使用randojs.com使随机性更易于阅读，因此如果您使用此代码，请确保您在 html 文档的 head 标记中包含此代码：

<script src="https://randojs.com/1.0.0.js"></script>

Answer 3

尝试以下...

开始.html

<!DOCTYPE html>
<html>
    <head>

    <script>

        function StartGame()
        {
            aMaxValue = Number(theMaxValueText.value);
            window.localStorage.setItem ("theMaxValueToGuess", aMaxValue);

            aNumberToGuess = Math.floor ( Math.random() * aMaxValue + 1 );
            window.localStorage.setItem ("theNumberToGuess", aNumberToGuess);

            aMaxNumberOfTries = Math.floor ( Math.log2 (aMaxValue) + 1 );
            window.localStorage.setItem ("theMaxNumberOfTries", aMaxNumberOfTries);

            window.localStorage.setItem ("theUserTriesCount", 0);

            aPrevGuessesString = "";
            window.localStorage.setItem ("thePrevGuessesString", aPrevGuessesString);

            document.location.href = "play.html";
        }

    </script>

    </head>

    <body>
        <h1>Guess a Number</h1>

        <div class="form">
            <label for="theMaxValueText">Max Value to Guess:</label>
            <input type="text" id="theMaxValueText">
            <input type="submit" value="Play" id="ExecPlayBtn" onclick="StartGame()">
        </div>

    </body>

</html>

播放.html

<!DOCTYPE html>
<html>
    <head>

        <script>

            var theMaxNumberToGuess = Number ( window.localStorage.getItem ("theMaxValueToGuess") );

            // let theMaxNumberOfTries = 0;

            // let theNumberToGuess = 0;

            // let theUserTriesCount = 0;


            function getMaxNumberOfTries() {
                return Number ( window.localStorage.getItem ("theMaxNumberOfTries") );
            }

            function getNumberToGuess() {
                return Number ( window.localStorage.getItem ("theNumberToGuess") );
            }

            function getUserTriesCount() {
                return Number ( window.localStorage.getItem ("theUserTriesCount") );
            }

            function incrUserTriesCount()
            {
                aUserTriesCount = getUserTriesCount();
                ++ aUserTriesCount;
                window.localStorage.setItem ("theUserTriesCount", aUserTriesCount);
            }

            function getNumberOfTriesLeft()
            {
                aMaxNumberOfTries = getMaxNumberOfTries();
                aUserTriesCount = getUserTriesCount();
                aNumberOfTriesLeft = aMaxNumberOfTries - aUserTriesCount;
                return aNumberOfTriesLeft;
            }

            function getPrevGuessesString() { return window.localStorage.getItem ("thePrevGuessesString"); }

            function addToPrevGuessesString (aStr)
            {
                aPrevGuessesString = getPrevGuessesString();
                aPrevGuessesString += (aStr + " ");
                window.localStorage.setItem ("thePrevGuessesString", aPrevGuessesString);
            }


            function PageLoaded()
            {
                document.getElementById("theMaxNumberToGuessLabel").innerHTML = theMaxNumberToGuess;

                // compute values ...

                // theNumberToGuess = Math.floor ( Math.random() * theMaxNumberToGuess + 1 );

                // theMaxNumberOfTries = Math.floor ( Math.log2 (theMaxNumberToGuess) + 1 );

                // theUserTriesCount = 0;

                DisplayGameStatus();
            }

            window.addEventListener ("load", PageLoaded);



            function DisplayNumberOfTriesLeft()
            {
                aNumberOfTriesLeft = getNumberOfTriesLeft();
                document.getElementById("theTriesLeftCountLabel").innerHTML = aNumberOfTriesLeft;
            }

            function DisplayPrevUserGuesses()
            {
                aPrevGuessesString = getPrevGuessesString();
                document.getElementById("theUserPrevGuessesLabel").innerHTML = aPrevGuessesString;
            }

            function DisplayGameStatus()
            {
                DisplayNumberOfTriesLeft();
                DisplayPrevUserGuesses();
            }

            function CheckUserGuess()
            {
                aNumberOfTriesLeft = getNumberOfTriesLeft();

                if (aNumberOfTriesLeft <= 0) {

                    // go to the loose page

                }

                aNumberToGuess = getNumberToGuess();

                aUserGuess = Number(theUserValueText.value);

                addToPrevGuessesString ("" + aUserGuess);

                if (aUserGuess < aNumberToGuess) {

                    // retry

                    document.getElementById("theUserHintMessageLabel").innerHTML =
                        "retry, the number to guess is > higher"

                } else if (aUserGuess > aNumberToGuess) {

                    // retry

                    document.getElementById("theUserHintMessageLabel").innerHTML =
                        "retry, the number to guess is < lower"

                } else {

                    // the user wins !!

                    document.getElementById("theUserHintMessageLabel").innerHTML =
                        "you win !! " + aUserGuess + " == " + aNumberToGuess + ""

                    alert ("you win !! " + aUserGuess + " == " + aNumberToGuess + "");

                    // go to the win page ...
                    document.location.href = "youwin.html";

                }

                // ++ theUserTriesCount;
                incrUserTriesCount();

                aNumberOfTriesLeft = getNumberOfTriesLeft();

                if (aNumberOfTriesLeft <= 0) {

                    // go to the loose page
                    document.location.href = "youloose.html";

                }

                DisplayGameStatus();
            }

        </script>

    </head>

    <body>

        <div>
            <h1>
                <label>Guess a Number in the Range ( 0 .. </label>
                <label id="theMaxNumberToGuessLabel"></label>
                <label>)</label>
            </h1>
        </div>

        <div>
            <label>you have </label>
            <label id="theTriesLeftCountLabel"></label>
            <label> tries left</label>
        </div>

        <p></p>

        <div>
            <label for="theUserValueText">Enter your Guess: </label>
            <input type="text" id="theUserValueText">
            <input type="submit" value="Guess" id="ExecUserGuessBtn" onclick="CheckUserGuess()">
        </div>

        <p></p>

        <div>
            <label>Prev Guesses: </label>
            <label id="theUserPrevGuessesLabel"></label>
        </div>

        <p></p>

        <div>
            <label id="theUserHintMessageLabel"></label>
        </div>

    </body>

</html>

你松了.html

<!DOCTYPE html>
<html>

    <head>

    </head>

    <body>

        <div>
            <h1>
                <label>Sorry, You Loose !!</label>
                <label>go to </label> <a href="start.html">Start</a>
            </h1>
        </div>

    </body>

</html>

优赢.html

<!DOCTYPE html>
<html>

    <head>

    </head>

    <body>

        <div>
            <h1>
                <label>Congrats, You Win !!</label>
                <label>go to </label> <a href="start.html">Start</a>
            </h1>
        </div>

    </body>

</html>

这就是所有人...