原生JS实现简易扫雷游戏

于 2021-05-29 17:08:25 发布
阅读量312 收藏 1
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26748811/article/details/117388133
版权

HTML5 扫雷游戏 难度设置 逻辑挑战 前端开发
关键词由CSDN通过智能技术生成

注：使用了Font Awesome 字体图标库，使用前请下载引入(下载地址）

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

<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>扫雷小游戏2.2</title>
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <style>
        * {
            user-select: none;
        }

        .mineBox {
            width: 900px;
            height: 600px;
            margin: 0 auto;
            border: 3px solid gray;
            position: relative;
            color: black;
        }

        .red {
            font-size: 22px;
            color: #B22222;
        }

        .black {
            font-size: 22px;
            color: black;
        }

        .difficulty {
            width: 900px;
            text-align: center;
            margin: 0 auto 15px;
        }

        button {
            width: 60px;
            height: 25px;
        }

        .info {
            position: fixed;
            top: 100px;
            left: 190px;
        }

        input {
            width: 60px;
            height: 40px;
            margin-left: 2px;
            margin-top: 10px;
            text-align: center;
            font-weight: bold;
            font-size: 18px;
        }

        #times {
            font-size: 16px;
            font-weight: none;
        }

        .success {
            position: absolute;
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            top: -160px;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: rgba(255, 255, 255, 0.4);
            z-index: 1000;
            border-radius: 25px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="success">
        恭喜通关
    </div>
    <div class="difficulty">
        <b>难度选择:</b>&nbsp;<b style="color: #FF00FF">Lunatic</b><br>
        <button class="Easy">Easy</button>
        <button class="Normal">Normal</button>
        <button class="Hard">Hard</button>
        <button class="Lunatic">Lunatic</button>
        <button class="Extra">Extra</button>
    </div>
    <div class="mineBox"></div>
    <div class="info">
        地雷:
        <input type="text" readonly id="txtB"><br>
        旗帜:
        <input type="text" readonly id="txtF"><br>
        时间:
        <input type="text" readonly id="times" value="0"><br>
    </div>
    <script>
        class Mining {
            constructor() {
                // 获取存放小盒子的节点
                this.mineBox = document.getElementsByClassName('mineBox')[0];
                // 定义一个用来存放雷div的下标的数组
                this.arr = [];
                // 获取存放按钮的节点
                this.btnList = document.querySelectorAll('.difficulty button');
                // 获取显示难度的节点
                this.diff = document.getElementsByTagName('b')[1];
                // 获取显示雷数量的节点
                this.txtBomb = document.getElementById('txtB');
                // 获取显示旗子数量的节点
                this.txtFlag = document.getElementById('txtF');
                // 获取显示时间的节点
                this.txtTime = document.getElementById('times');
                // 定义小盒子的默认宽高
                this.sDivW = 30;
                this.sDivH = 30;
                // 定义雷的默认数量
                this.bombSum = 120;
                // 定义旗子的默认数量
                this.flagSum = this.bombSum;
                // 将雷和旗子的数量显示到input框内
                this.txtBomb.value = this.bombSum;
                this.txtFlag.value = this.flagSum;
                // 设置标记正确后的变量
                this.success = 0;
                // 设置游戏结束状态
                this.endGame = false;
                // 定义计时器&计时器状态
                this.times = '';
                this.timeStatus = true;
                // 默认执行一次
                this.init();
                // 给按钮绑定点击事件
                this.btnList.forEach(v => {
                    v.addEventListener('click', () => {
                        switch (v.className) {
                            case 'Easy':
                                this.clear();
                                this.mineBox.style.width = '500px';
                                this.mineBox.style.height = '500px';
                                this.sDivW = 50;
                                this.sDivH = 50;
                                this.bombSum = 10;
                                this.flagSum = this.bombSum;
                                this.txtBomb.value = this.bombSum;
                                this.txtFlag.value = this.flagSum;
                                this.init();
                                this.diff.innerText = 'Easy';
                                this.diff.style.color = '#00FF00';
                                break;
                            case 'Normal':
                                this.clear();
                                this.mineBox.style.width = '600px';
                                this.mineBox.style.height = '600px';
                                this.sDivW = 50;
                                this.sDivH = 50;
                                this.bombSum = 15;
                                this.flagSum = this.bombSum;
                                this.txtBomb.value = this.bombSum;
                                this.txtFlag.value = this.flagSum;
                                this.init();
                                this.diff.innerText = 'Normal';
                                this.diff.style.color = '#4169E1';
                                break;
                            case 'Hard':
                                this.clear();
                                this.mineBox.style.width = '800px';
                                this.mineBox.style.height = '600px';
                                this.sDivW = 50;
                                this.sDivH = 50;
                                this.bombSum = 30;
                                this.flagSum = this.bombSum;
                                this.txtBomb.value = this.bombSum;
                                this.txtFlag.value = this.flagSum;
                                this.init();
                                this.diff.innerText = 'Hard';
                                this.diff.style.color = '#FF0000';
                                break;
                            case 'Lunatic':
                                this.clear();
                                this.mineBox.style.width = '900px';
                                this.mineBox.style.height = '600px';
                                this.sDivW = 30;
                                this.sDivH = 30;
                                this.bombSum = 120;
                                this.flagSum = this.bombSum;
                                this.txtBomb.value = this.bombSum;
                                this.txtFlag.value = this.flagSum;
                                this.init();
                                this.diff.innerText = 'Lunatic';
                                this.diff.style.color = '#FF00FF';
                                break;
                            case 'Extra':
                                this.clear();
                                this.mineBox.style.width = '900px';
                                this.mineBox.style.height = '600px';
                                this.sDivW = 30;
                                this.sDivH = 30;
                                this.bombSum = 180;
                                this.flagSum = this.bombSum;
                                this.txtBomb.value = this.bombSum;
                                this.txtFlag.value = this.flagSum;
                                this.init();
                                this.diff.innerText = 'Extra';
                                this.diff.style.color = '#A020F0';
                                break;
                            default:
                                throw console.error('报错了...');
                                break;
                        }
                    })
                });
            }
            clear() {
                //清空大盒子
                this.mineBox.innerHTML = '';
                //清空存放div的数组
                this.arr = [];
                //重置时间
                this.txtTime.value = '0';
                //清除定时器
                clearInterval(this.times);
                //设置定时器状态
                this.timeStatus = true;
                // 设置游戏结束状态
                this.endGame = false;
                //清除标记正确后的变量
                this.succefss = 0;
            }
            init() {
                // 动态创建小div放在box里面
                this.create(this.sDivW, this.sDivH);
                // 标记地雷
                this.markBomb();
                // 点击小盒子
                this.blockClick();
            }
            create(mineW, mineH) {
                this.mineN = this.mineBox.clientWidth * this.mineBox.clientHeight / (mineW * mineH);
                this.mineCol = this.mineBox.clientWidth / mineW;
                this.mineRow = this.mineBox.clientHeight / mineH;
                // 定义一个数组，将周围div的下标存起来
                this.arr2 = [-(this.mineCol + 1), -this.mineCol, -(this.mineCol - 1), -1, 1, this.mineCol - 1, this.mineCol, (this.mineCol + 1)];
                for (let i = 0; i < this.mineN; i++) {
                    let block = document.createElement('div');
                    setStyle(block, {
                        width: mineW - 2 + "px",
                        height: mineH - 2 + "px",
                        backgroundColor: "rgb(141,162,155)",
                        border: "1px solid #fff",
                        position: "absolute",
                        left: (i % this.mineCol) * mineW + "px",
                        top: parseInt(i / this.mineCol) * mineH + "px",
                        textAlign: "center",
                        lineHeight: mineH + "px"
                    })
                    this.mineBox.appendChild(block);
                    //判断是不是雷
                    block.mine = false;
                    //判断小方块是否被打开
                    block.show = false;
                    //判断插旗状态
                    block.status = 0;
                }
            }
            markBomb() {
                // 标记雷
                for (let i = 0; i < this.bombSum; i++) {
                    // 获取随机下标
                    let index = Math.floor(Math.random() * this.mineN)
                    // 判断数组中是否已经有了这个下标
                    if (this.arr.indexOf(index) < 0) this.arr.push(index); else i--;
                }

                for (let i = 0; i < this.arr.length; i++) {
                    this.mineBox.children[this.arr[i]].mine = true
                }
                for (var i = 0; i < this.mineBox.children.length; i++) {
                    // 如果当前这个div是雷就不统计了
                    if (this.mineBox.children[i].mine) {
                        continue;
                    }
                    // this.mineBox.children[i] // 每个div
                    // 查看当前div周围的所有div
                    // 定义周围雷数量的变量
                    let bombN = 0
                    for (var j = 0; j < this.arr2.length; j++) {
                        // 考虑最上面一行 - 不能-(this.mineCol+1) 不能-this.mineCol 不能-(this.mineCol-1)
                        if (i < this.mineCol && (this.arr2[j] === -(this.mineCol + 1) || this.arr2[j] === -this.mineCol || this.arr2[j] === -(this.mineCol - 1))) {
                            continue;
                        }
                        // // 最左边一行过滤掉
                        if (i % this.mineCol === 0 && (this.arr2[j] === -(this.mineCol + 1) || this.arr2[j] === -1 || this.arr2[j] === (this.mineCol - 1))) {
                            continue;
                        }
                        // 最下面一行
                        if (parseInt(i / this.mineCol) === this.mineRow - 1 && (this.arr2[j] === (this.mineCol - 1) || this.arr2[j] === this.mineCol || this.arr2[j] === (this.mineCol + 1))) {
                            continue;
                        }
                        // 最右边一行
                        if (i % this.mineCol === this.mineCol - 1 && (this.arr2[j] === -(this.mineCol - 1) || this.arr2[j] === 1 || this.arr2[j] === (this.mineCol + 1))) {
                            continue;
                        }
                        if (this.mineBox.children[i + (this.arr2[j])].mine) {
                            bombN++
                        }

                    }
                    // 将雷的数量放在div中
                    this.mineBox.children[i].bombN = bombN
                }
            }
            blockClick() {
                for (let i = 0; i < this.mineBox.children.length; i++) {
                    this.mineBox.children[i].index = i;
                    let that = this;
                    this.mineBox.children[i].onclick = function () {
                        //如果计时器未开启 则开启计时器 (仅在第一次点击时开启定时器)
                        if (that.timeStatus) {
                            that.txtTime.value = '1';
                            that.timer();
                            that.timeStatus = false;
                        }
                        if (this.mine) {
                            // 如果点击到雷了
                            for (let j = 0; j < that.mineBox.children.length; j++) {
                                //清除计时器
                                clearInterval(that.times);
                                // 设置游戏结束状态
                                that.endGame = true;
                                // 给所有不是雷的div设置内容显示，雷的数量
                                that.mineBox.children[j].innerText = that.mineBox.children[j].bombN ? that.mineBox.children[j].bombN : '';
                                that.mineBox.children[j].style.backgroundColor = 'rgb(210,222,238)';
                            }
                            // 将所有是雷的div设置为红色
                            for (let j = 0; j < that.arr.length; j++) {
                                that.mineBox.children[that.arr[j]].style.backgroundColor = 'red';
                                that.mineBox.children[that.arr[j]].innerHTML = '<i class="fa fa-bomb black">';
                            }
                        } else {
                            that.openAround(this.index)
                        }
                    }
                    this.mineBox.children[i].oncontextmenu =
                        function () {
                            // 如果小盒子已经是打开的状态 则跳出函数
                            if (this.show) return false;
                            // 如果游戏已经结束了 则跳出函数
                            if (that.endGame) return false;
                            if (this.status == 0) {
                                this.innerHTML = '<i class="fa fa-flag red">';
                                this.status = 1;
                                that.flagSum--;
                                that.txtFlag.value = that.flagSum;
                                if (this.mine) {
                                    that.success++;
                                    if (that.success == that.bombSum) {
                                        //清除计时器
                                        clearInterval(that.times);
                                        //设置通关状态
                                        that.endGame = true;
                                        //显示通关信息
                                        document.getElementsByClassName('success')[0].style.display = 'block';
                                        //设置延时2秒后关闭
                                        setTimeout(() => {
                                            document.getElementsByClassName('success')[0].style.display = 'none';
                                        }, 2000);
                                    }
                                }
                                return false;
                            }
                            if (this.status == 1) {
                                this.innerHTML = '<i class="fa fa-question black">';
                                this.status = 2;
                                return false;
                            }
                            if (this.status) {
                                if (this.mine) {
                                    that.success--;
                                }
                                this.innerHTML = '';
                                this.status = 0;
                                that.flagSum++;
                                that.txtFlag.value = that.flagSum;
                                return false;
                            }
                        }
                }
            }
            // 打开周围div的递归函数
            openAround(index) {
                this.mineBox.children[index].innerText = this.mineBox.children[index].bombN
                this.mineBox.children[index].style.backgroundColor = 'rgb(210,222,238)'
                this.mineBox.children[index].show = true
                if (this.mineBox.children[index].bombN === 0) {
                    this.mineBox.children[index].innerText = '';
                    for (let j = 0; j < this.arr2.length; j++) {
                        if (index < this.mineCol && (this.arr2[j] === -(this.mineCol + 1) || this.arr2[j] === -this.mineCol || this.arr2[j] === -(this.mineCol - 1))) {
                            continue;
                        }
                        // // 最左边一行过滤掉
                        if (index % this.mineCol === 0 && (this.arr2[j] === -(this.mineCol + 1) || this.arr2[j] === -1 || this.arr2[j] === (this.mineCol - 1))) {
                            continue;
                        }
                        // 最下面一行
                        if (parseInt(index / this.mineCol) === this.mineRow - 1 && (this.arr2[j] === (this.mineCol - 1) || this.arr2[j] === this.mineCol || this.arr2[j] === (this.mineCol + 1))) {
                            continue;
                        }
                        // 最右边一行
                        if (index % this.mineCol === this.mineCol - 1 && (this.arr2[j] === -(this.mineCol - 1) || this.arr2[j] === 1 || this.arr2[j] === (this.mineCol + 1))) {
                            continue;
                        }
                        if (this.mineBox.children[index + this.arr2[j]].show) {
                            continue
                        }
                        this.openAround(index + this.arr2[j])
                    }
                }
            }
            // 设置计时器函数
            timer() {
                this.times = setInterval(() => {
                    this.txtTime.value = (this.txtTime.value - 0) + 1;
                }, 1000);
            }
        }
        new Mining;
        //封装设置样式的方法
        function setStyle(tag, styleObj) {
            for (var attr in styleObj) {
                tag.style[attr] = styleObj[attr];
            }
        }
    </script>
</body>

</html>

 

听雪拨弦
关注
js实现扫雷游戏
Zoey_dm的博客
10-24 252
使用js实现扫雷游戏的制作 使用原始的js实现扫雷游戏的制作 没有使用canvas 基本功能： 用户进入界面时启动计时功能 游戏难度设置 右键标记地雷，标记之后不能点击 显示剩余雷数（总的雷数减去插旗的数量） 自动连锁点开（当点开某个区块后，如果该区块的数字为 0，也就是九宫格内没有雷，那么将自动点开九宫格内的所有区块） 思路 地图的生成：采用二维数组的形式，用户点击开始界面 自动生成一个初...
纯JS实现简易扫雷小游戏网页项目
weixin_45007812的博客
06-19 4056
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了...
原生js扫雷游戏
02-24
基于原生js写的扫雷游戏，代码里面有详细注释，大家可以看看。
扫雷（js原生）
weixin_48156531的博客
12-30 340
扫雷游戏 对于10年前的人来说，扫雷肯定是家喻户晓，由于当时的科技并不是很发达，大家对于电脑游戏的了解，可能都是从扫雷开始的，今天就交大家一种用js原生代码写一个简单的扫雷游戏，话不多说，直接上干货： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
简单的扫雷游戏，原生JS实现
weixin_30548917的博客
12-12 169
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ position:relative; } .father{ position:...
js原生扫雷(第一版)
weixin_40518538的博客
08-23 2952
最近痴迷上了扫雷游戏,所以根据一些扫雷的规则,自己 写了一套简易的扫雷游戏,没有参考任何代码,凭自己感觉来的,所以希望大家多提意见 扫雷事项:                操作: 右击立旗帜,左击打开方格                逻辑: 1、先生成10个随机雷,然后在点击的时候计算八个方位的雷的数量,得到你的数字                         2、如果点击到0的位...
原生JS写扫雷游戏
qq_28919991的博客
10-01 806
相信大家都玩过扫雷这个在经典不过的游戏吧 小编还记得当时在机房，将电脑断网，然后玩windows自带的扫雷游戏 重点是：我竟然玩了一节课！ 咳咳 言归正传 写扫雷游戏的思路： 1.动态生成一百个(可以更多)div块 2.左键点击事件(显示周围的地雷数、扩散算法) 3.右键点击事件(插旗与取消插旗、胜利事件) 多说一句：所谓的扩散就是当点击的元素显示的数字为0即周围没有雷时，又点击它周围显示的数为...
纯原生JS用面向对象class方法实现简易扫雷小游戏
qq_23539691的博客
05-29 1766
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏：布局为10*10的网格，随机生成10-20个雷。 左键点击扫雷。右键标记该地方有雷。该demo下载下来复制到html文件中直接可以使用。不需要下载任何插件和引入任何框架。 小游戏源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
JS原生扫雷精简版（功能能够实现，精简样式）
11-28
原生JS精简版的扫雷，功能实现没有问题。适合两节课的课容量进行讲解。扫雷的核心内容都在，只是精简了样式部分。
java开源包3
06-28
Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏，可在线玩。 public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页...
原生js实现扫雷小游戏
11-29
这里是博客介绍地址：https://blog.csdn.net/zmdmwh/article/details/84579884 。
纯JS扫雷游戏
04-25
纯JS写的扫雷游戏
原生js扫雷源码（详细注释）
11-14
扫雷源码 ,原生js写的，注释很详细，有不是很完善的地方，但是功能都实现了
java开源包4
06-28
Java扫雷游戏 JVMine JVMine用Applets开发的扫雷游戏，可在线玩。 public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页...
JAVA上百实例源码以及开源项目源代码
12-11
日历表格面板 [ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP连接...
原生JS实现扫雷小游戏
Ireallyyourfather的博客
09-19 1310
原生JS实现扫雷小游戏 HTML部分 CSS部分 JavaScript部分 效果 -html代码 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head
JS编写的扫雷游戏（简单易懂）
追梦人
03-18 980
初学JavaScript,这是自己仿照windows下面的扫雷游戏用写成的，网页上的扫雷游戏。通过这个程序的编写让我更加熟悉js的面向函数编程的思想和模式。同时深刻的体会到，要学好一门语言，一定得多动手写些代码。这里将代码分享出来，欢迎大家批评指正。   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt...
原生JS实现扫雷——项目总结
chenyu-max
09-22 680
项目展示图 项目准备 一样的，我们先是准备出三个文件夹，以及根目录下的index.html 文件 然后是两张图片（地雷 和 旗子） 之后是html结构 html 首先是最外层的 游戏内容区域的div 取名id为mine <div id="mine"> </div> 之后是游戏内容区域中最上面的四个按钮，我们用四个button标签来表示，并且用一个div来包裹起来 并且给初级按钮一个最初的选中的样式 <div class="level"> &l
使用原生JS实现简易slider教程
本示例介绍如何利用原生JavaScript实现一个基本的slider功能，无需依赖jQuery或其他库。以下是详细的知识点解析： 1. **HTML结构**： - `<!doctype html>`：声明文档类型为HTML5。 - `<html lang="en">`：定义...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值