js实现扫雷小程序的示例代码(2)

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中,

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyzgpy.html