计算机猜数字 JavaScript

Question

我正在尝试在网页中创建一个简单的“猜数字游戏”，其中用户是思考数字的人，而计算机是猜测用户正在思考的数字（范围 1-100） （无需用户输入）。我为用户创建了四个按钮来响应计算机的猜测：开始、猜高、猜低、宾果。我对这个范围有疑问。如果用户点击'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

尝试以下...

start.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>

play.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>

youloose.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>

youwin.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>

这就是所有人......