JavaScript 数字猜测游戏

在本文中，我们将使用JavaScript创建一个数字猜测游戏。游戏的目标是在最少的猜测次数内猜出计算机生成的1-10范围内的随机数字。

前提条件：

HTML的基本知识
JavaScript的基本知识

使用的方法：

document.getElementById(“given_id”)方法 ：使用document.getElementById()方法可以从HTML页面中获取用户提供的id对应的元素。“.value”用于访问所获取的HTML元素的值。
JavaScript的Math.random()方法： random()方法用于生成0（包括）到1（不包括）之间的随机数。然后将生成的数字乘以10，并加上1以生成1到10的数字。
JavaScript的Math.floor()方法 ： floor()方法用于返回最接近整数（向下取整）的数字。如果传入的参数是整数，则不会四舍五入。

游戏实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Number Guessing Game</title>
 
    <style>
        body {
            font-family: sans-serif;
            width: 50%;
            max-width: 800px;
            min-width: 480px;
            margin: 0 auto;
        }
    </style>
</head>
 
<body>
    <h1>Guess The Number</h1>
    <p>
        We have selected a random number 
        between 1 - 10. See if you can
        guess it.
    </p>
 
    <div class="form">
        <label for="guessField">
            Enter a guess: 
        </label>
         
        <input type="text" id="guessField"
            class="guessField">
         
        <input type="submit" value="Submit guess"
            class="guessSubmit" id="submitguess">
    </div>
 
    <script type="text/javascript">
 
        // Generate a Random Number
        let y = Math.floor(Math.random() * 10 + 1);
 
        // Counting the number of guesses
        // made for correct Guess
        let guess = 1;
 
        document.getElementById("submitguess").onclick = function () {
 
            // Number guessed by user    
            let x = document.getElementById("guessField").value;
 
            if (x == y) {
                alert("CONGRATULATIONS!!! YOU GUESSED IT RIGHT IN "
                    + guess + " GUESS ");
            }
 
            /* If guessed number is greater than actual number*/
            else if (x > y) {
                guess++;
                alert("OOPS SORRY!! TRY A SMALLER NUMBER");
            }
            else {
                guess++;
                alert("OOPS SORRY!! TRY A GREATER NUMBER")
            }
        }
    </script>
</body>
</html>

输出:

JavaScript 数字猜测游戏