原生js实现经典扫雷游戏（含完整源码）

项目结构

实现效果

思路流程

写出基本的布局
利用js生成扫雷的table表格
利用随机数来做地雷在表格中的索引
初始化table表格
根据地雷的坐标生成地雷周围的数字
点击事件分成鼠标左键点击和右键点击
左键点击情况下又分为点到的是地雷和非地雷两种情况
点到的是地雷情况下，则将全部地雷显示，其他样式不变，并且不能再进行任意表格内的点击事件（左键右键都不行）
点到的是非地雷情况下又分为点击的数字是0和非0两种情况
如果是非0，则只需要显示其数字
如果是0，利用递归思想，遍历周围的表格，若为0则继续递归显示0，直到遇到非0停止
接上面的6，若进行右键点击，则显示小红旗，并且剩余地雷数-1
当剩余雷数为0时，判断小红旗底下是否全为地雷，若全是地雷则成功扫雷，否则扫雷失败
为按钮添加功能，分别为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">
</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 = []; // 方格的DOMthis.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'); // 创建tablefor (var i = 0; i < this.tr; i++) {var domTr = document.createElement('tr'); // 创建行trthis.tds[i] = []; // 存储[[],[],[]...[]] 行for (var j = 0; j < this.td; j++) {var domTd = document.createElement('td'); // 创建列tddomTd.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 = []; // 二维，找到的各子返回/* 这里的坐标信息如下x-1,y-1     x,y-1   x+1,y-1x-1,y       x,y      x+1,yx-1,y+1     x,y+1   x+1,y+1*/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++) {// 如果数字周围有雷就加1this.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.点到了数字0if (curSquare.value == 0) {obj.innerHTML = ''; // 将0的数字样式不显示0function 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];// 若依然为0if (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();
}

源码https://github.com/BaiH626/MineClearance/tree/master

原生js实现经典扫雷游戏（含完整源码）相关推荐

cocos2dx经典魔塔游戏改编完整源码
经典魔塔游戏改编,亲测可通过编译,完美运行,RGP+解密游戏源码客户端:cocos2dx 服务端:单机游戏无服务端源码连接cocos2dx经典魔塔游戏改编完整源码-cocos2D文档类资源-CSD ...
python小游戏源代码pygame_【pygame】Python 制作 XP 经典扫雷游戏（附源码）
importsysimporttimefrom enum importEnumimportpygamefrom pygame.locals import * from mineblock import ...
vue.js中经典扫雷游戏的实现
可视化 (vue-defuse) An implementation of the classical minesweeper game in vue.js. vue.js中经典扫雷游戏的实现. Vi ...
Python编程：打造太空入侵者游戏（含完整源码）
Python编程:打造太空入侵者游戏(含完整源码) 太空入侵者这款游戏经典得让人不能忘怀,而Python语言的简单易学.快速开发的特性,使其成为实现该游戏的最好选择.在本篇文章中,我们将为读者呈现如何 ...
Python贪吃蛇小游戏_完整源码免费分享
文章目录 Python 贪吃蛇小游戏 1. 导包 2. 配置初始化参数 3. 主函数及运行主体 4. 画食物的函数 5. 画贪吃蛇的函数 6. 画网格的函数(非必选,觉得多余的可以忽略此项) 7. 操 ...
Python实现修改图片分辨率（含完整源码）
Python实现修改图片分辨率(含完整源码) 在我们日常的工作和学习中,经常需要处理图片.有时候,我们可能需要修改图片的分辨率,以适应不同的需求.本文将介绍如何使用Python来实现修改图片的分辨率, ...
java实现大富翁游戏(附完整源码)
java实现大富翁游戏以下是 Java 实现大富翁游戏的完整源码: import java.util.Random; import java.util.Scanner;public class Mo ...
网上买的几百元的最新微信公众号H5游戏平台完整源码下载
网上买的几百元的最新微信公众号H5游戏平台完整源码下载微信Html5游戏平台源码,大家可以直接打开浏览器本地测试,到时候修改下关注链接就行,简单易学游戏太多了,不上图了,大家自己下去研究吧! 下载 ...
java实现军旗游戏(附完整源码)
java实现军旗游戏以下是Java实现军旗游戏的完整源码: import javax.swing.*; import java.awt.*; import java.awt.event.MouseA ...

原生js实现经典扫雷游戏（含完整源码）

项目结构

实现效果

思路流程

html源码

css样式表

js源码

原生js实现经典扫雷游戏（含完整源码）相关推荐

最新文章

热门文章