Javascript设计一个猜数字小游戏理解二分查找原理_javascript随机生成三个数字用户输入三个数字如果和随机产生的三个数字相同-优快云博客

本文链接：https://blog.youkuaiyun.com/hcc13974721431/article/details/122062333

介绍：
本游戏主要利用javascript的alert()提示框和prompt()输入框进行用户和电脑交互，通过内置函数Math.random() * 100随机生成一个1~100之间的数字，由于使用的是向下取整 Math.floor（）,不包括100。

然后通过判断输入的字符串类型，若不符合，则继续提示用户输入一个整数且不消耗游戏次数，若符合，则对该数字和后台数字进行大小比较，并给予用户一些提示，最后猜出后台数字。

由于游戏给予最高猜测次数为7次，建议用户输入时，根据二分查找的方式输入数字，这样就能在7次之内找出后台生成的数字。

若没有输入，则会判定为空即为0；若中途用户退出游戏，点击取消键就可以退出游戏。
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字小游戏</title>
    <script src='./js/utils.js'></script>
    <script src='./js/app.js'></script>

    <style>
        *{
            padding: 0;
            margin: 0;
            border: 0;
        }
         p{
           color:red;
           background-color: aqua;
       }
    </style>
</head>

<body>

    <p>本游戏主要利用javascript的alert()提示框和prompt()输入框进行用户和电脑交互，通过内置函数Math.random() * 100随机生成一个1~100之间的数字，由于使用的是向下取整 Math.floor（）,不包括100。</p><br>
    <p>然后通过判断输入的字符串类型，若不符合，则继续提示用户输入一个整数且不消耗游戏次数，若符合，则对该数字和后台数字进行大小比较，并给予用户一些提示，最后猜出后台数字。</p><br>
    <P>由于游戏给予最高猜测次数为7次，建议用户输入时，根据二分查找的方式输入数字，这样就能在7次之内找出后台生成的数字。</P><br>
    <p>若没有输入，则会判定为空即为0；若中途用户退出游戏，点击取消键就可以退出游戏。</p><br>

</body>

</html>

app.js

var num = Math.floor(Math.random() * 100)
// 向下取整
for (var i = 0; i < 7; i++) {
    var input = prompt('本游戏将会生成一个1~100之间的整数，请输入一个数字：')

    console.log(input)

    // 用户取消终止游戏
    if (input === null) {
        break
    }

    // 判断是不是一个正整数
    if (!checkInt(input)) {
        alert('请输入一个整数')
        i--
        continue
    }

    if (num == input) {
        alert('恭喜你猜对了')
    } else {
        var str = input > num ? '大' : '小'
        alert('额，你猜错了，' + str + '了')
    }

}
// 作业：
// 1. 怎么样提前终止游戏。

// 2. 8-11代码能不能改进一下。

// 3. 能不能判断用户的输入，非整数提示用户请输入整数。并且不消耗游戏次数。

utils.js正则表达式判断输入字符串是否是一个数字。

/**
 * 
 * @param {*} str 
 * @returns 
 */

//如果字符串是数字且没有'.'且'-'（即不是小数，负数，非数字）
function checkInt(str) {
    if (!isNaN(str) && str.indexOf('.') === -1 && str.indexOf('-') === -1) {
        return true
    } else {
        return false
    }
}

// 正则表达式

游戏次数只有7次，所以使用二分法方法手动输入数字，从50开始。
第一次：
在这里插入图片描述

在这里插入图片描述
第二次：由于小了，于是我们输入50~100之间中间值75

第三次：由于大了，所以去取50~75之间的中间值62
在这里插入图片描述

第四次：由于大了，所以取50~62中间值56

第五次：由于大了，所以再取50~56中间值53

第六次：由于小了取53~56之间中间值54或55
输入54

第七次：这里经过不断地二分找出，我们终于知道这个数只剩一个值就是55
在这里插入图片描述