js实现扫雷的代码
本文主要介绍js实现扫雷小程序的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
初学javascript，写了一个扫雷程序练练手！
扫雷规则及功能
扫雷想必大家都不陌生，就是windows上点击排雷的小游戏，它的主要规则有
1.左键点击显示当前格子是否为雷，如果为雷的话，GameOver啦，如果不是雷的话，这个格子会显示周围八个格子内的雷数量。
2.鼠标右键标记，标记可能的雷，标记了之后取消需要再次右键点击该格子，左键无效果。
3.鼠标中键（滚轮）按下后，快捷扫雷（如果周围雷数和未被标记且未被翻开的格子相等，会将这些格子一并翻开）
主要功能基本完全复刻了windows7扫雷的功能
扫雷github地址：扫雷github地址
扫雷算法
1.首先我定义了一个构造函数,里面是一系列的属性：
var mineCraft = function(num1,num2,mine_num,obj,type){
this.num1 = num1; //整个扫雷的行数
this.num2 = num2; //整个扫雷的列数
this.mine_num = mine_num; //雷的个数
this.tiles = []; //数组里面存放的是每个小格子
this.obj = obj; //扫雷放置的对象
this.flag = true;
this.arr = [];
this.arr_2 = [];
this.time_dsq = null;
this.time_dc ='';
this.time_arr = [[],[],[]]; //时间统计信息
this.details = [[],[],[]]; // 游戏统计详情
this.type = type; //游戏类型：初级/中级/高级/自定义
this.buildTiles(); //创建游戏函数
};2.在页面上创建扫雷的界面 函数buildTiles
buildTiles:function(){
this.obj.style.width = 51*this.num1+'px'; //在传进来的对象上画整体格子，每个小格子51px大小，总大小就为个数*单个大小
this.obj.style.height = 51*this.num2+'px';
var indexOfp = 0;
for(var i = 0;i<this.num2;i++){
for(var j = 0;j<this.num1;j++){
var tile = document.createElement('p');
tile.className = 'tile'; //定义小格子class
tile.index = indexOfp; //为每个小格子添加索引
this.tiles[indexOfp] = tile; //将小格子存入数组中
indexOfp++;
this.obj.appendChild(tile); //将小格子插入到整个扫雷界面中
}
}
this.obj.oncontextmenu = function(){ //取消浏览器的默认右键菜单事件
return false;
}
this.event(); //点击事件
},3.绑事件函数：
event : function(){
var _this = this;
this.obj.onmouseover = function(e){ //鼠标悬停事件---
if(e.target.className == 'tile'){
e.target.className = 'tile current';
}
}
this.obj.onmouseout = function(e){ //鼠标移出事件--
if(e.target.className == 'tile current'){
e.target.className = 'tile';
}
}
this.obj.onmousedown = function(e){ //鼠标按下事件
var index = e.target.index;
if(e.button == 1){ //e.button属性 左键0/中键1/右键2
event.preventDefault(); //取消默认
}
_this.changeStyle(e.button,e.target,index);
}
this.obj.onmouseup = function(e){ //鼠标弹起事件
if(e.button == 1){
_this.changeStyle(3,e.target);
}
}
},4.点击调用的函数：
changeStyle:function(num1,obj,num_index){
if(num1 == 0){ //是左键的话
if(this.flag){ //this.flag 是之前定义的用于判断是否为第一次点击
this.store(num_index); //store函数，存放被点击的格子周围的8个格子
this.setMineCraft(this.mine_num,this.arr,num_index); //如果是第一次点击 即调用布雷函数 更改flag状态
this.flag = false;
this.detail_statistics(0,false); //开始信息统计函数
}
if(obj.className != 'tile'&&obj.className !='tile current'){//如果不是第一次点击，被点击的格子不是未点击状态，无效
return false;
}
if(obj.getAttribute('val') == 0){ //如果不是雷。改为翻开状态
obj.className = "showed";
obj.innerHTML = obj.getAttribute('value') == 0?'':obj.getAttribute('value'); //显示周围雷数
this.showAll(obj.index); //递归函数判断周围格子的情况，就是扫雷游戏上一点开会出现一片的那种
}
if(this.over(obj)){ //判断游戏是否结束
this.last();
}
}
if(num1 == 2){ //右键标记事件
if(obj.className == 'biaoji'){
obj.className = 'tile';
}else if(obj.className !='biaoji'&&obj.className != 'showed'){
obj.className = 'biaoji';
}
}
if(num1 == 1){ // 中键事件
if(obj.className =="showed"){
this.show_zj1(obj.index);
}
}
if(num1 == 3){ //鼠标弹起事件
if (obj.className == "showed") {
var flag1 = this.show_zj2(obj.index,0);
}else{
this.show_zj2(obj.index,1)
return false;
}
if(flag1&&this.over()){ //弹起判断是否结束
this.last();
}
}
},5.布雷：我之前的布雷是在页面加载在buildTiles()的时候布雷的，但是这样会导致有可能你电机的第一个格子就是雷（游戏性不强），后来修改到第一次点击完成之后布雷（确保第一下点的不是雷），避开直接炸死的现象.所以把调用放在后面的event后触发的changeStyle函数中
setMineCraft:function(num,arr_first,num_first){ //雷的个数、最开始被点击的格子周围的八个、被点击的那个格子
var arr_index = [];
for(var i = 0;i<arr_first.length;i++){
arr_index.push(arr_first[i].index);
}
var length = this.tiles.length;
for (var i = 0; i < length; i++) {
this.tiles[i].setAttribute("val", 0);
}
for (var i = 0; i < num; i++) {
var index_Mine = Math.floor(Math.random() * this.tiles.length);
if(index_Mine == num_first||arr_index.lastIndexOf(index_Mine)>-1){//如果是属于第一次点击的周围的直接跳过在该位置布雷
num++;
continue;
}
if (this.tiles[index_Mine].getAttribute("val") == 0) {
this.tiles[index_Mine].setAttribute("val", 1);
}else {
num++;
}
}
this.showValue();
this.event()
},6.存储周围格子的函数：
store : function(num) { //传入格子的index.
var tiles_2d = [];
var indexs = 0;
for(var i = 0;i<this.num2;i++){
tiles_2d.push([]);
for(var j = 0;j<this.num1;j++){
tiles_2d[i].push(this.tiles[indexs]);
indexs++;
}
}
var j = num % this.num1;
var i = (num - j) / this.num1;
this.arr = [];
//左上
if (i - 1 >= 0 && j - 1 >= 0) {
this.arr.push(tiles_2d[i - 1][j - 1]);
}
//正上
if (i - 1 >= 0) {
this.arr.push(tiles_2d[i - 1][j]);
}
//右上
if (i - 1 >= 0 && j + 1 <= this.num1-1) {
this.arr.push(tiles_2d[i - 1][j + 1]);
}
//左边
if (j - 1 >= 0) {
this.arr.push(tiles_2d[i][j - 1]);
}
//右边
if (j + 1 <= this.num1-1) {
this.arr.push(tiles_2d[i][j + 1]);
}
//左下
if (i + 1 <= this.num2-1 && j - 1 >= 0) {
this.arr.push(tiles_2d[i + 1][j - 1]);
}
//正下
if (i + 1 <= this.num2-1) {
this.arr.push(tiles_2d[i + 1][j]);
}
//右下
if (i + 1 <= this.num2-1 && j + 1 <= this.num1-1) {
this.arr.push(tiles_2d[i + 1][j + 1]);
}
},7.showAll函数：作用是如果该格子周围没有雷，自动翻开周围8个格子，然后再判断周围八个格子的周围8隔格子是否有雷，利用了递归的方法
showAll:function(num){
if (this.tiles[num].className == "showed" && this.tiles[num].getAttribute("value") == 0){
this.store(this.tiles[num].index);
var arr2 = new Array();
arr2 = this.arr;
for (var i = 0; i < arr2.length; i++) {
if (arr2[i].className != "showed"&&arr2[i].className !='biaoji') {
if (arr2[i].getAttribute("value") == 0) {
arr2[i].className = "showed";
this.showAll(arr2[i].index);
} else {
arr2[i].className = "showed";
arr2[i].innerHTML = arr2[i].getAttribute("value");
}
}
}
}
},8.show_zj函数：主要是中键按钮的作用中键点击后的函数，这里的show_zj1是鼠标键按下后的显示效果，
show_zj2函数就是
show_zj1:function(num){
this.store(this.tiles[num].index);
for (var i = 0; i < this.arr.length; i++) {
if (this.arr[i].className == "tile") {
this.arr_2.push(this.arr[i]);
this.arr[i].className = "showed";
// this.arr[i].className = "test";
}
}
},
show_zj2:function(num,zt){
var count = 0;
this.store(this.tiles[num].index);
for(var i = 0,len = this.arr_2.length;i<len;i++){
this.arr_2[i].className = 'tile'; //按下效果恢复原状
}
this.arr_2.length = 0;
for(var i = 0;i<this.arr.length;i++){
this.arr[i].className == 'biaoji'&&count++;
}
if(zt == 1){
return false;
}
var numofmines = this.tiles[num].getAttribute("value");
if(numofmines == count){ //如果周围雷数和周围被标记数相等就翻开周围的格子
var arr = new Array(this.arr.length);
for(var i = 0;i<this.arr.length;i++){
arr[i] = this.arr[i];
}
for (var i = 0,length = arr.length; i < length; i++) {
if (arr[i].className == "tile" && arr[i].getAttribute("val") != 1) {//如果周围格子无雷则继续。
arr[i].className = "showed";
arr[i].innerHTML = arr[i].getAttribute("value") == 0?"":arr[i].getAttribute("value");
this.showAll(arr[i].index);
} else if (arr[i].className == "tile" && arr[i].getAttribute("val") == 1) { //如果周围格子有雷，游戏结束
this.over(arr[i]);
this.last();
return false;
}
}
}
return true;
},9.结束判断：
over:function(obj){
var flag = false;
var showed = document.getElementsByClassName('showed');
var num = this.tiles.length - this.mine_num;
if(showed.length == num){ //如果被排出来的格子数等于总格子数-雷数，这游戏成功结束
this.detail_statistics(1,true); //游戏统计 ，true代表胜，false，代表失败
alert('恭喜你获得成功');
flag = true;
}else if(obj&&obj.getAttribute('val') == 1){ //如果被点击的是雷，则炸死
this.detail_statistics(1,false);
alert('被炸死！');
flag = true;
}
return flag;
},10.结束后的显示函数：
last:function(){
var len = this.tiles.length;
for(var i = 0;i<len;i++){
this.tiles[i].className = this.tiles[i].getAttribute('val') == 1?'boom':'showed';
if(this.tiles[i].className != 'boom'){ //
this.tiles[i].innerHTML = this.tiles[i].getAttribute('value') == 0?'':this.tiles[i].getAttribute('value');
}
}
this.obj.onclick = null;
this.obj.oncontextmenu = null;
},11 统计信息：还是比较全的和windows7扫雷版的判断项目是一样的，使用的是每次结束游戏后将数据存入localStorage中，
//已玩游戏，已胜游戏，胜率，最多连胜，最多连败，当前连局；
detail_statistics:function(num,zt){
var time_pay = 1;
var _this = this;
if(num == 0){
this.time_dsq = setInterval(function(){
$('#time_need').text(time_pay);
_this.time_dc =time_pay;
time_pay++;
},1000);
}
else if(num == 1){
clearInterval(this.time_dsq);
if(this.type == 4){return false;}
if(localStorage.details == undefined){
localStorage.details = JSON.stringify([[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]]); //这里存放的就是上面注释中的六项数据
}
if(JSON.parse(localStorage.details) instanceof Array){
this.details = JSON.parse(localStorage.details);
}
this.details[this.type][0] += 1;
if(zt == false){
if(this.details[this.type][5]>=0){
this.details[this.type][5] = -1;
}else{
this.details[this.type][5] -= 1;
}
if(this.details[this.type][5]<this.details[this.type][4]){
this.details[this.type][4] = this.details[this.type][5];
}
this.details[this.type][2] = this.toPercent(this.details[this.type][2]/this.details[this.type][0]);
localStorage.details = JSON.stringify(this.details);
return false;
}
if(this.details[this.type][5]>=0){
this.details[this.type][5] += 1;
}else{
this.details[this.type][5] = 1;
}
if(this.details[this.type][5]>this.details[this.type][3]){
this.details[this.type][3] = this.details[this.type][5];
}
this.details[this.type][3] += 1;
this.details[this.type][2] = this.toPercent(this.details[this.type][4]/this.details[this.type][0]);
localStorage.details = JSON.stringify(this.details);
var time1 = new Date();
var time_str = time1.getFullYear()+'/'+time1.getMonth()+'/'+time1.getDate()+' '+time1.getHours()+':'+time1.getMinutes();
if(localStorage.time == undefined){
localStorage.time = JSON.stringify([[],[],[]]);
}
if(JSON.parse(localStorage.time) instanceof Array){
this.time_arr = JSON.parse(localStorage.time);
}
this.time_arr[this.type].push([this.time_dc,time_str]);
this.time_arr[this.type].sort(function(a,b){
return a[0]-b[0];
});
if(this.time_arr[this.type].length>5){
this.time_arr[this.type].pop();
}
localStorage.time = JSON.stringify(this.time_arr);
}
},扫雷的主要部分就是这些了，还有一些小功能包括没写来，要看完整的可以看gitHub
相关推荐：
以上是js实现扫雷的代码的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
解决win7驱动程序代码28的方法
Dec 30, 2023 pm 11:55 PM
有的用户在安装设备的时候遇到了错误，提示错误代码28，其实这主要是由于驱动程序的原因，我们只要解决win7驱动程序代码28的问题就可以了，下面就一起来看一下应该怎么来操作吧。win7驱动程序代码28怎么办：首先，我们需要点击屏幕左下角的开始菜单。接着，在弹出的菜单中找到并点击“控制面板”选项。这个选项通常位于菜单的底部或者附近。点击后，系统会自动打开控制面板界面。在控制面板中，我们可以进行各种系统设置和管理操作。这是怀旧大扫除关卡中的第一步，希望对大家有所帮助。然后，我们需要继续操作，进入系统和
扫雷怎么标记？-扫雷怎么更改难度？
Mar 18, 2024 pm 06:34 PM
扫雷怎么标记？首先，我们需要熟悉扫雷游戏中的标记方式。通常情况下，扫雷游戏中有两种常见的标记方式：旗子标记和问号标记。旗子标记用来表示该方块中有地雷，是一种确定性的标记；而问号标记则表明该方块可能存在地雷，但并非确定性。这两种标记方式在游戏中起着重要的作用，帮助玩家推断哪些方块可能存在地雷，从而有效地进行下一步操作。熟练运用这些标记方式可以提高玩家在扫雷游戏中的成功率，降低踩雷的风险。因此，在玩扫雷游戏时，掌握好旗子标记和问号标记的当玩家不能确定某一个方格是否有地雷时，可以使用问号标记来进行标记
蓝屏代码0x0000001怎么办
Feb 23, 2024 am 08:09 AM
蓝屏代码0x0000001怎么办蓝屏错误是电脑系统或硬件出现问题时的一种警告机制，代码0x0000001通常表示出现了硬件或驱动程序故障。当用户在使用电脑时突然遇到蓝屏错误，可能会感到惊慌和无措。幸运的是，大多数蓝屏错误都可以通过一些简单的步骤进行排除和处理。本文将为读者介绍一些解决蓝屏错误代码0x0000001的方法。首先，当遇到蓝屏错误时，我们可以尝试重
电脑频繁蓝屏而且每次代码不一样
Jan 06, 2024 pm 10:53 PM
win10系统是一款非常优秀的高智能系统强大的智能可以为用户们带来最好的使用体验，一般正常的情况下用户们的win10系统电脑都不会出现任何的问题！但是在优秀的电脑也难免会出现各种故障最近一直有小伙伴们反应自己的win10系统遇到了频繁蓝屏的问题！今天小编就为大家带来了win10电脑频繁蓝屏不同代码的解决办法让我们一起来看一看吧。电脑频繁蓝屏而且每次代码不一样的解决办法：造成各种故障代码的原因以及解决建议1、0×000000116故障原因：应该是显卡驱动不兼容。解决建议：建议更换厂商原带驱动。2、
GE通用远程代码可在任何设备上编程
Mar 02, 2024 pm 01:58 PM
如果您需要远程编程任何设备，这篇文章会给您带来帮助。我们将分享编程任何设备的顶级GE通用远程代码。通用电气的遥控器是什么？GEUniversalRemote是一款遥控器，可用于控制多个设备，如智能电视、LG、Vizio、索尼、蓝光、DVD、DVR、Roku、AppleTV、流媒体播放器等。GEUniversal遥控器有各种型号，具有不同的功能和功能。GEUniversalRemote最多可以控制四台设备。顶级通用遥控器代码，可在任何设备上编程GE遥控器配备一组代码，使其能够与不同设备相配合。您可
如何使用Copilot生成代码
Mar 23, 2024 am 10:41 AM
作为一名程序员，对于能够简化编码体验的工具，我感到非常兴奋。借助人工智能工具的帮助，我们可以生成演示代码，并根据需求进行必要的修改。在VisualStudioCode中新引入的Copilot工具让我们能够创建具有自然语言聊天交互的AI生成代码。通过解释功能，我们可以更好地理解现有代码的含义。如何使用Copilot生成代码？要开始，我们首先需要获得最新的PowerPlatformTools扩展。要实现这一点，你需要进入扩展页面，搜索“PowerPlatformTool”，然后点击Install按钮
解决代码0xc000007b错误
Feb 18, 2024 pm 07:34 PM
终止代码0xc000007b在使用电脑时，有时会遇到各种各样的问题和错误代码。其中，终止代码最为令人困扰，尤其是终止代码0xc000007b。这个代码表示某个应用程序无法正常启动，给用户带来了不便。首先，我们来了解一下终止代码0xc000007b的含义。这个代码是Windows操作系统的错误代码，通常发生在32位应用程序尝试在64位操作系统上运行时。它表示应
详解0x0000007f蓝屏代码的原因和解决方案
Dec 25, 2023 pm 02:19 PM
蓝屏是我们在系统使用的时候经常会碰到的问题，根据错误代码的不同，会有很多中不一样的原因和解决方法。例如我们在使用时遇到stop：0x0000007f的问题，可能是硬件或软件错误，下面就跟着小编一起来看看解决方法吧。0x000000c5蓝屏代码原因：答：内存、CPU、显卡突然超频，或软件运行错误。解决方法一：1、在开机时候不断按F8进入，选择安全模式，回车进入。2、进入到安全模式后，按win+r打开运行窗口，输入cmd，回车。3、在命令提示窗口，输入“chkdsk/f/r”，回车，然后按y键。4、
