電腦猜數字 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>

這就是所有人...