广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js实现经典扫雷游戏
  • 392

0
分享到

js实现经典扫雷游戏

2024-04-02 19:04:59 392人浏览 泡泡鱼
摘要

本文实例为大家分享了js实现经典扫雷游戏的具体代码，供大家参考，具体内容如下 项目结构 实现效果 思路流程 1、写出基本的布局 2、利用js生成扫雷的table表格 3、利用随

本文实例为大家分享了js实现经典扫雷游戏的具体代码，供大家参考，具体内容如下

项目结构

实现效果

思路流程

1、写出基本的布局
2、利用js生成扫雷的table表格
3、利用随机数来做地雷在表格中的索引
4、初始化table表格
5、根据地雷的坐标生成地雷周围的数字
6、点击事件分成鼠标左键点击和右键点击
7、左键点击情况下又分为点到的是地雷和非地雷两种情况
8、点到的是地雷情况下，则将全部地雷显示，其他样式不变，并且不能再进行任意表格内的点击事件（左键右键都不行）
9、点到的是非地雷情况下又分为点击的数字是0和非0两种情况
10、如果是非0，则只需要显示其数字
11、如果是0，利用递归思想，遍历周围的表格，若为0则继续递归显示0，直到遇到非0停止
12、接上面的6，若进行右键点击，则显示小红旗，并且剩余地雷数-1
13、当剩余雷数为0时，判断小红旗底下是否全为地雷，若全是地雷则成功扫雷，否则扫雷失败
14、为按钮添加功能，分别为9乘以9->10个雷、16乘以16->40个地雷、28乘以28、99个地雷，以及重新开始按钮

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>Document</title>
    <link rel="stylesheet" href="./CSS/style.css" rel="external nofollow" >
</head>

<body>
    <div class="footer">剩余雷数：<span class="mineNum"></span></div>
    <div class="gameBox">

    </div>
    <div class="header">
        <button class="active">初级</button>
        <button>中级</button>
        <button>高级</button>
        <button>重新开始</button>
    </div>
    <script src="./js/main.js"></script>
</body>
</html>

css样式表


* {
    padding: 0;
    margin: 0;
}

.header {
    margin: 10px auto auto auto;
    text-align: center;
}

.header button {
    padding: 5px 15px;
    background-color: #02a4ad;
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
}

.header button.active {
    background-color: #00abff;
}

.footer {
    margin: 100px auto auto auto;
    text-align: center;
}



table {
    margin: 10px auto auto auto;
    border-spacing: 1px;
    background: #929196;
}

td {
    padding: 0;
    width: 20px;
    height: 20px;
    border: 2px solid;
    background: #ccc;
    border-color: #fff #a1a1a1 #a1a1a1 #fff;
    text-align: center;
    line-height: 20px;
    font-weight: 700;
}

.mine {
    background: #d9d9d9 url(../images/mine01.jpg) no-repeat center;
    background-size: cover;
}

.flag {
    background: #fff url(../images/flag.jpeg) no-repeat center;
    background-size: cover;
}

.redMine {
    background: #fff url(../images/mine02.jpg) no-repeat center;
    background-size: cover;
}

td.zero{
 border-color: #d9d9d9;
 background: #d9d9d9;
}
td.one{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #0332fe;
}
td.two{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #019f02;
}
td.three{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #ff2600;
}
td.four{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #93208f;
}
td.five{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #ff7f29;
}
td.six{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #ff3fff;
}
td.seven{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #3fffbf;
}
td.eight{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #22ee0f;
}

js源码


function Mine(tr, td, mineNum) {
    this.tr = tr;   // 行
    this.td = td;   // 列
    this.mineNum = mineNum; // 雷的数量
    this.squares = []; // 方格的对象数组
    this.tds = []; // 方格的DOM
    this.surplusMine = mineNum; // 剩余的雷数
    this.mainBox = document.querySelector('.gameBox'); // 获取游戏box元素
    //this.createDom();
}


Mine.prototype.randomNum = function () {
    var positionArray = new Array(this.tr * this.td);
    for (var i = 0; i < positionArray.length; i++) { // 利用索引来确定雷的位置
        positionArray[i] = i
    }
    // 数组乱序
    positionArray.sort(function () {
        return 0.5 - Math.random()
    });
    return positionArray.splice(0, this.mineNum); // 取乱序的mineNum个数字当做雷的位置
}

// 初始化
Mine.prototype.init = function () {
    var positionMine = this.randomNum(); // 获得雷的位置
    var n = 0;
    for (var i = 0; i < this.tr; i++) {
        this.squares[i] = [];
        for (var j = 0; j < this.td; j++) {
            if (positionMine.indexOf(n++) != -1) {      // 利用indexOf将雷放入方格数组中
                this.squares[i][j] = { type: 'mine', x: j, y: i };
            } else {
                this.squares[i][j] = { type: 'number', x: j, y: i, value: 0 };
            }
        }
    }

    this.mainBox.oncontextmenu = function () {
        return false;
    }

    this.updateNum();
    this.createDom();
    //console.log(this.squares);

    // 处理剩余的雷数
    this.mineNumDom = document.querySelector('.mineNum');
    this.surplusMine = this.mineNum;
    this.mineNumDom.innerHTML = this.surplusMine;

    // 处理游戏提示
    //document.querySelector('');

};


Mine.prototype.createDom = function () {
    var This = this; // 作用是指向实例对象
    var table = document.createElement('table'); // 创建table
    for (var i = 0; i < this.tr; i++) {
        var domTr = document.createElement('tr'); // 创建行tr
        this.tds[i] = []; // 存储[[],[],[]...[]] 行
        for (var j = 0; j < this.td; j++) {
            var domTd = document.createElement('td'); // 创建列td
            domTd.pos = [i, j];
            domTd.onmousedown = function () {
                This.play(event, this);
            };
            this.tds[i][j] = domTd; // 存储列 [ [,],[,], [,] .....]
            domTr.appendChild(domTd); // 在行中添加列
        }
        table.appendChild(domTr) // 在table中添加方格
    }

    // 清空之前的状态
    this.mainBox.innerHTML = '';
    this.mainBox.appendChild(table); // 形成大方格 tr*td
}

// 找格子
Mine.prototype.getAround = function (positionArray) {
    var x = positionArray.x;
    var y = positionArray.y;
    var result = []; // 二维，找到的各子返回

    
    for (var i = x - 1; i <= x + 1; i++) {
        for (var j = y - 1; j <= y + 1; j++) {
            if (
                i < 0 ||    // 超出表格左边
                j < 0 ||    // 超出上边
                i > this.td - 1 ||  // 超出表格右边
                j > this.tr - 1 ||  // 超出表格下边
                (i == x && j == y ||    // 点击点本身
                    this.squares[j][i].type == 'mine')  // 如果是雷也没必要修改数值
            ) {
                continue;
            }
            result.push([j, i]);    // 将周围格子信息添加到result数组 如第j行，第i列有数字
        }
    }

    return result;  // 返回格子信息数组
}


// 更新数字
Mine.prototype.updateNum = function () {
    for (var i = 0; i < this.tr; i++) {
        for (var j = 0; j < this.td; j++) {
            // 只需要更新雷周围的数字
            if (this.squares[i][j].type == 'number') {
                continue;
            }
            var num = this.getAround(this.squares[i][j]);
            for (var k = 0; k < num.length; k++) {
                // 如果数字周围有雷就加1
                this.squares[num[k][0]][num[k][1]].value += 1;
            }
        }
    }
}


Mine.prototype.play = function (ev, obj) {
    var This = this; // 获取实例对象

    // 点击的是左键 which=1是左键，2是中间的滚轮，3是右键
    if (ev.which == 1 && obj.className != 'flag') {

        var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
        // 各个数字对应的样式
        var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];

        // 点击的是数字
        if (curSquare.type == 'number') {
            obj.innerHTML = curSquare.value;
            obj.className = cl[curSquare.value];

            // 点到数字可以分成两种，0和非0
            // 1.点到了数字0
            if (curSquare.value == 0) {
                obj.innerHTML = ''; // 将0的数字样式不显示0

                function getAllZero(positionArray) {
                    // 获取周围的格子信息
                    var around = This.getAround(positionArray);

                    // 利用递归思想，使周围格子0不显示，直至不是0停止
                    for (var i = 0; i < around.length; i++) {
                        // around[i]=[0,0]
                        var x = around[i][0];
                        var y = around[i][1];

                        This.tds[x][y].className = cl[This.squares[x][y].value];

                        // 若依然为0
                        if (This.squares[x][y].value == 0) {
                            // 递归
                            if (!This.tds[x][y].check) {
                                This.tds[x][y].check = true;

                                getAllZero(This.squares[x][y]);
                            }
                        } else {
                            // 不为0则继续显示数字
                            This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }
                }

                getAllZero(curSquare);

            }
        } else {
            // 点击的是雷，直接判断游戏结束
            this.gameOver(obj);
        }
    }
    // which=3，鼠标点击的是右键
    if (ev.which == 3) {
        if (obj.className && obj.className != 'flag') {
            return;
        }
        obj.className = obj.className == 'flag' ? '' : 'flag';

        // 处理剩余的雷数
        // if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
        //     this.allRight = true;
        // } else {
        //     this.allRight = false;
        // }
        if (obj.className == 'flag') {
            this.mineNumDom.innerHTML = --this.surplusMine;
        } else {
            this.mineNumDom.innerHTML = ++this.surplusMine;
        }

        if (this.surplusMine == 0) {
            for (var i = 0; i < this.tr; i++) {
                for (var j = 0; j < this.td; j++) {
                    if (this.tds[i][j].className == 'flag') {
                        if (this.squares[i][j].type != 'mine') {
                            this.gameOver();
                            return;
                        }
                    }
                }
            }
            alert("恭喜你成功扫雷！");
            this.init();
        }
    }

};

// 游戏结束方法gameover
Mine.prototype.gameOver = function (clickTd) {
    // 1.显示所有的雷
    // 2.取消所有格子的点击事件
    // 3.给点中的雷标上红

    for (var i = 0; i < this.tr; i++) {
        for (var j = 0; j < this.td; j++) {
            if (this.squares[i][j].type == 'mine') {
                this.tds[i][j].className = 'mine';
            }
            this.tds[i][j].onmousedown = null;
        }
    }

    if (clickTd) {
        clickTd.className = 'redMine';
    }
};

// 按钮的功能
var btns = document.querySelectorAll('.header button');
var mine = null;

var btnKey = 0; // 等级的索引

// 初级，中级，高级的难度设置
var headerArr = [
    [9, 9, 10], [16, 16, 40], [28, 28, 99]
];

for (let i = 0; i < btns.length - 1; i++) {
    btns[i].onclick = function () {

        // 清除之前点击的样式
        btns[btnKey].className = '';
        this.className = 'active';

        mine = new Mine(...headerArr[i]);
        mine.init();

        // 更新状态
        btnKey = i;
    }
}

// 页面一开始就是初级扫雷
btns[0].onclick();
btns[3].onclick = function () {
    mine.init();
}

源码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: js实现经典扫雷游戏

本文链接: https://www.lsjlt.com/news/126344.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • js实现经典扫雷游戏
    本文实例为大家分享了js实现经典扫雷游戏的具体代码，供大家参考，具体内容如下 项目结构 实现效果 思路流程 1、写出基本的布局 2、利用js生成扫雷的table表格 3、利用随...
    99+
    2022-11-12
  • C语言实现扫雷经典游戏
    C语言实现扫雷游戏，供大家参考，具体内容如下 实现扫雷游戏 与三子棋游戏类似，为了便于后期对于代码的阅读、理解与地图大小和地雷的数量变更，先用#define定义一个标识符表示一个常量...
    99+
    2022-11-12
  • C语言实现经典扫雷游戏流程
    目录扫雷小游戏简介一、分析与实现1.设计棋盘2.放置雷以及排雷二、扫雷小游戏演示三、源码总结扫雷小游戏简介 想必很多人小时候电脑没网的时候都玩儿过这个经典的小游戏，也都被它折磨过。其...
    99+
    2022-11-12
  • 100行C#代码实现经典扫雷游戏
    目录布局生成雷区左键扫雷和右键标记翻面功能布局 布局效果如下，下面每个“网格”都是一个按钮，点击按钮，就会有相应的事件发生。 由于UniformGrid中每...
    99+
    2023-02-27
    C#实现扫雷游戏 C#扫雷游戏 C#扫雷 C#游戏
  • JAVA实现经典扫雷游戏的示例代码
    目录前言主要设计功能截图代码实现总结前言 windows自带的游戏《扫雷》是陪伴了无数人的经典游戏，本程序参考《扫雷》的规则进行了简化，用java语言实现，采用了swing技术进行了...
    99+
    2022-11-13
  • 微信小程序实现经典window扫雷游戏
    前言 打开手机游戏列表发现了一款经典的扫雷游戏，在玩的过程中发现游戏逻辑应该不难，想着是不是能自己写写这个游戏，后来用了1天实现了整体游戏开发，于是有了这篇文章来总结整体的游戏开发思...
    99+
    2022-11-13
  • 怎么用C语言实现扫雷经典游戏
    本篇内容介绍了“怎么用C语言实现扫雷经典游戏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！C语言实现扫雷游戏，供大家参考，具体内容如下实现扫...
    99+
    2023-06-20
  • 怎么使用C#代码实现经典扫雷游戏
    这篇文章主要介绍“怎么使用C#代码实现经典扫雷游戏”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用C#代码实现经典扫雷游戏”文章能帮助大家解决问题。布局布局效果如下，下面每个“网格”都是一个按...
    99+
    2023-07-05
  • Vue2+JS实现扫雷小游戏
    目录实现步骤1、场景布局实现2、初始化事件3、游戏动作（action）游戏收尾总结实现步骤 1、场景布局实现 布局就是经典的方格布局，对于场景的美观度可以自行找几个配色网站作为参考。...
    99+
    2022-11-13
  • js版扫雷游戏
    本文实例为大家分享了js版扫雷游戏的具体代码，供大家参考，具体内容如下 界面 考虑到简单，一般，困难三个扫雷区域的格子数都不同，所以界面上的扫雷区域是用js动态生成。先搭好整体htm...
    99+
    2022-11-13
  • 利用js+canvas实现扫雷游戏
    本文实例为大家分享了用js+canvas实现扫雷游戏的具体代码，供大家参考，具体内容如下 记录js学习后制作的第一关小游戏。 这里的代码还不够精简，许多地方偷懒没有封装，逻辑也有许多...
    99+
    2022-11-13
  • C语言实现经典windows游戏扫雷的示例代码
    目录1. 前言2. 准备工作3. 设计思路4. 定义数组5. 初始化6. 打印7. 布置雷8. 排查雷9. 完整代码game.hgame.ctest.c1. 前言 大家好，我是努力学...
    99+
    2022-11-13
    C语言扫雷游戏 C语言 扫雷 C语言 游戏
  • C语言实现经典扫雷小游戏的示例代码
    目录一、游戏简介二、游戏实现1.初始化棋盘2.打印棋盘3.布置雷4.排查雷三、源文件1.game.h2.game.c3.Test.c一、游戏简介 游戏初始界面有两个选择，选项&ldq...
    99+
    2022-11-13
    C语言扫雷游戏 C语言 扫雷 C语言 游戏
  • C#实现扫雷游戏
    目录一、实验目的：二、实验要求：三、实验内容：四、实验源代码：五、实验结果：六、总结本文实例为大家分享了C#实现扫雷游戏的具体代码，供大家参考，具体内容如下 一、实验目的： 1、掌握...
    99+
    2022-11-13
  • Easyx实现扫雷游戏
    本文实例为大家分享了Easyx实现扫雷游戏的具体代码，供大家参考，具体内容如下 代码： #include<stdio.h> #include<stdlib.h&g...
    99+
    2022-11-12
  • 如何利用js+canvas实现扫雷游戏
    这篇文章主要介绍“如何利用js+canvas实现扫雷游戏”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何利用js+canvas实现扫雷游戏”文章能帮助大家解决问题。代码如下<body>...
    99+
    2023-07-02
  • 怎么使用Vue2+JS实现扫雷小游戏
    这篇文章主要讲解了“怎么使用Vue2+JS实现扫雷小游戏”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么使用Vue2+JS实现扫雷小游戏”吧！实现步骤1、场景布局实现布局就是经典的方格布局...
    99+
    2023-07-02
  • HTML+JS实现经典推箱子游戏
    目录1. 效果展示2. 游戏介绍3. 游戏规则4. 源码学习1. 效果展示 2. 游戏介绍 经典的推箱子是一个非常古老游戏，甚至是80，90年代的回忆，目的是在训练你的逻辑思考能...
    99+
    2022-11-13
    JS推箱子游戏 JS推箱子 JS 游戏
  • JS+HTML实现经典游戏吃豆人
    目录前言HTML代码JS代码游戏截图前言 很早就知道canvas，当时一直没应用到，最近闲来无事就顺便写写看。吃豆游戏可以说是我们80，90后共同的回忆录，小时候常常在学习机上玩，所...
    99+
    2022-11-13
  • JavaScript实现扫雷小游戏
    本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码，供大家参考，具体内容如下 先说大体思路，下面放代码 思路： 1产生指定数量的地雷2计算方块周围的地雷3点击地雷结束4...
    99+
    2022-11-13
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作