基于JS制作一个网页版的猜数字小游戏

更新时间：2022年07月22日 09:19:21 作者：Java猿~

这篇文章主要为大家详细介绍了如何利用HTML+CSS+JavaScript实现一个简单的网页版的猜数字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

一. 游戏简介

在输入框内输一个数字，点击后面的“猜”按钮，系统会根据你猜的数字的大小，返回你是猜大猜小还是猜正确，系统还会统计你猜的次数，在猜数字的途中你点击按钮随时可以重新开始游戏

二. 页面预览

因为是简易版，所以没有太多的样式

猜数字之前：

猜小了：

猜大了：

猜对了：

三. 页面实现

页面框架：

<body>
    <div id="i1">
        <span>请输入您猜的数字：</span>
        <input type="text" id="text">
        <input type="button" value="猜" id="guess">
        <br>
        <span>您已经猜的次数：</span>
        <span id="count">0</span>
        <br>
        结果：<span class="c1"></span>
        <br>
        <br>
        <input type="button" value="重新开始游戏" id="reBu">
    </div>
</body>

页面简单样式：

       #i1 {
            box-sizing: border-box;
            width: 400px;
            height: 300px;
            border-style: dashed;
            border-color:blue;
            padding: 85px;
            margin-top: 150px;
            margin-left: 500px;
        }

四. 功能实现

使用document.querySelector()获取页面上的元素：

    var text = document.querySelector("#text");//获取输入元素
    var count = document.querySelector("#count");//获取次数元素
    var result = document.querySelector(".c1");//获取结果元素
    var guessBu = document.querySelector("#guess");//获取“猜”按钮元素
    var reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素
    var sum = 0;//猜的总次数

生成随机数：

var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数

说明：Math.random()随机生成[0,1)的数字，乘上100范围为[0,100)，加上1，范围为[1,101)，使用Math.floor()去掉小数部分，最后生成数字的范围为[0,100]

给“猜”按钮绑定点击事件：

点击按钮后，启动比较功能
首先将猜的总次数sum++，并将sum设置到页面中
需要先用parseInt()将输入框的内容转为整数，再进行比较
若输入的数大，则将提示颜色调整为红色，并设置到页面中
若输入的数小，则将提示颜色调整为红色，并设置到页面中
若输入的数为系统生成的随机数，则将提示信息调整为绿色，并设置到页面中

    guessBu.onclick = function(){ //给“猜”按钮绑定点击功能
        sum++;
        count.innerHTML = sum;
        var userGuess = parseInt(text.value);//获取输入的数字
        if(userGuess > guessNumber){ //如果输入大于系统生成数字
            result.innerHTML = "很遗憾，您猜大了！";
            result.style.color = "red"; //调正颜色为红色
        }else if(userGuess < guessNumber){//如果输入小于系统生成数字
            result.innerHTML = "很遗憾，您猜小了！";
            result.style.color = "red";
        }else { //输入等于系统生成数字
            result.className = "c2";
            result.innerHTML = "恭喜您，您猜对了！";
            result.style.color = "green";//调整颜色为绿色
        }
    }

给“重新开始游戏”按钮绑定点击事件：

首先重新生成随机数
再将猜测的总次数置0，并设置到页面中
再将提示信息置空，并设置到页面中
最后将输入框数字置空，并设置到页面中

    reBu.onclick = function(){//给“重新开始”按钮绑定点击事件
        guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数
        sum = 0;//猜的总次数置0
        count.innerHTML = sum;//将0填充
        result.innerHTML = "";//结果置空
        text.value = "";//输入框置空
    }

五. 参考源码

拿来即可在自己电脑上运行，大家快来试试吧！

<!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>
    <style>
        #i1 {
            box-sizing: border-box;
            width: 400px;
            height: 300px;
            border-style: dashed;
            border-color:blue;
            padding: 85px;
            margin-top: 150px;
            margin-left: 500px;
        }
    </style>
</head>
<body>
    <div id="i1">
        <span>请输入您猜的数字：</span>
        <input type="text" id="text">
        <input type="button" value="猜" id="guess">
        <br>
        <span>您已经猜的次数：</span>
        <span id="count">0</span>
        <br>
        结果：<span class="c1"></span>
        <br>
        <br>
        <input type="button" value="重新开始游戏" id="reBu">
    </div>
</body>
<script>
    var text = document.querySelector("#text");//获取输入元素
    var count = document.querySelector("#count");//获取次数元素
    var result = document.querySelector(".c1");//获取结果元素
    var guessBu = document.querySelector("#guess");//获取“猜”按钮元素
    var reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素
    var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数
    var sum = 0;//猜的总次数
    guessBu.onclick = function(){ //给“猜”按钮绑定点击功能
        sum++;
        count.innerHTML = sum;
        var userGuess = parseInt(text.value);//获取输入的数字
        if(userGuess > guessNumber){ //如果输入大于系统生成数字
            result.innerHTML = "很遗憾，您猜大了！";
            result.style.color = "red"; //调正颜色为红色
        }else if(userGuess < guessNumber){//如果输入小于系统生成数字
            result.innerHTML = "很遗憾，您猜小了！";
            result.style.color = "red";
        }else { //输入等于系统生成数字
            result.className = "c2";
            result.innerHTML = "恭喜您，您猜对了！";
            result.style.color = "green";//调整颜色为绿色
        }
    }
    reBu.onclick = function(){//给“重新开始”按钮绑定点击事件
        guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数
        sum = 0;//猜的总次数置0
        count.innerHTML = sum;//将0填充
        result.innerHTML = "";//结果置空
        text.value = "";//输入框置空
    }
</script>
</html>

以上就是基于JS制作一个网页版的猜数字小游戏的详细内容，更多关于JS猜数字游戏的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

js中判断Object、Array、Function等引用类型对象是否相等
项目中有时会需要对引用类型进行比较，如常见的object和array，我们知道，引用类型无法直接使用 == 或=== 取得期待结果，因此需要一个迭代的compare函数转化成原始类型进行比较
2012-08-08
js实现简单拼图小游戏
这篇文章主要为大家详细介绍了js实现简单拼图小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
一文弄懂JavaScript的继承方式
这篇文章主要介绍了一文弄懂JavaScript的继承方式,在java面试过程中经常被问到javascript中有几种继承方式，每种继承方式是怎么实现的，文中给大家讲解的非常详细，需要的朋友可以参考下
2022-05-05
JS可以控制样式的名称写法一览
这篇文章主要介绍了JS可以控制样式的名称写法，有需要的朋友可以参考一下
2014-01-01
JavaScript给数组添加元素的6个方法
本文主要介绍了JavaScript给数组添加元素的6个方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
postman+json+springmvc测试批量添加实例
下面小编就为大家分享一篇postman+json+springmvc测试批量添加实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
ComboBox（下拉列表框）通过url加载调用远程数据的方法
这篇文章主要介绍了ComboBox（下拉列表框）通过url加载调用远程数据的方法 ,需要的朋友可以参考下
2017-08-08
浅谈JavaScript 浏览器对象
下面小编就为大家带来一篇浅谈JavaScript 浏览器对象。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
JS中的继承操作实例总结
这篇文章主要介绍了JS中的继承操作,结合实例形式总结分析了JS中的原型链继承、构造函数继承、组合继承、class继承等常见继承操作实现技巧,需要的朋友可以参考下
2020-06-06
微信小程序使用checkbox显示多项选择框功能【附源码下载】
这篇文章主要介绍了微信小程序使用checkbox显示多项选择框功能,涉及相关事件绑定与元素遍历操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
2017-12-12