//app.js，将游戏配置文件放在APP中，可实现跨页之间共享
App({row:12,//扫雷游戏的行数column:8,//扫雷游戏的列数bomb:8//包含雷的总数
})

//index.js
Page({data: {dialog_warn:false,//通过修改此数据值，改变弹框的显示状态dialog_suc:false, //游戏成功，设为true，视图层通过wx:if来判断是否渲染该弹窗count:null,//翻牌计数，初始值为app.row*app.columngamearr:[]//游戏地图的基础数据（二维数组），根据此来生成游戏
  }
})

<!--index.wxml-->
<view class="dialog warn" wx:if="{{dialog_warn}}"><icon type="warn" size="60" color="orange"></icon><text>Game Over</text><button bindtap="reset">重新开始</button>
</view>
<view class="dialog success" wx:if="{{dialog_suc}}"><icon type="success" size="60" color="green"></icon><text>Success~</text><button bindtap="reset">重新开始</button>
</view>

setgamearr:function(row,column,bomb){//根据行列设置游戏二维数组（地图）var that=this;var arrmap=[];//二维初始数组，全为空for(var i=row-1;i>=0;i--){arrmap[i]=[];for(var j=column-1;j>=0;j--){arrmap[i][j]={val:"",cover:true};}//val用来记录周边雷的数量，cover用来记录是否翻开：无dom操作只能用数据记录状态}var arr=[];//一维自然数for(var k=row*column-1;k>=0;k--){arr[k]=k}//随机炸弹位置for(var h=bomb-1;h>=0;h--){var seat=arr.splice(Math.floor(Math.random()*arr.length),1)[0]var r=Math.floor(seat/column),c=Math.floor(seat%column);//console.log(seat+'\n'+r+","+c);arrmap[r][c].val="B";arrmap=that.addcount(r,c,arrmap)//给炸弹周围九宫格增加标记数
    }that.setData({gamearr:arrmap})},

addcount:function(r,c,arrmap){var that=this;if(r-1>=0){//九宫格上三个if(c-1>=0 && arrmap[r-1][c-1].val!="B"){arrmap[r-1][c-1].val++}if(arrmap[r-1][c].val!="B"){arrmap[r-1][c].val++}if(c+1<app.column && arrmap[r-1][c+1].val!="B"){arrmap[r-1][c+1].val++}}if(r+1<app.row){//九宫格下三个if(c-1>=0 && arrmap[r+1][c-1].val!="B"){arrmap[r+1][c-1].val++}if(arrmap[r+1][c].val!="B"){arrmap[r+1][c].val++}if(c+1<app.column && arrmap[r+1][c+1].val!="B"){arrmap[r+1][c+1].val++}}//九宫格左右两个if(c-1>=0 && arrmap[r][c-1].val!="B"){arrmap[r][c-1].val++}if(c+1<app.column && arrmap[r][c+1].val!="B"){arrmap[r][c+1].val++}return arrmap;}

<view class="game"><view class="tr" wx:for="{{gamearr}}" wx:for-index="row" wx:for-item="itemrow"><!--根据数据遍历行--><view class="td" wx:for="{{itemrow}}" wx:for-index="column" wx:for-item="itemcolumn" data-row="{{row}}" data-column="{{column}}"  bindtap="taphandler"><view class="mask" wx:if="{{itemcolumn.cover}}"></view><!--遮罩层，无法用伪元素before来更改状态，只能数据来判断了--><text wx:if="{{itemcolumn.val==''}}">{{itemcolumn.val}}</text><!--根据数值显示不同样式，如果是web能用jquery选择器就简单多了，这里略显复杂--><text class="color1" wx:elif="{{itemcolumn.val==1}}">{{itemcolumn.val}}</text><text class="color2" wx:elif="{{itemcolumn.val==2}}">{{itemcolumn.val}}</text><text class="color3" wx:else>{{itemcolumn.val}}</text></view></view></view>

//游戏控制部分taphandler:function(e){var that=this;var r=e.currentTarget.dataset.row,c=e.currentTarget.dataset.column;//无法想jquery获得index，只能用数据记录，直接获取喽if(that.data.gamearr[r][c].val!="B"){//如果没点到炸弹that.data.gamearr[r][c].cover=false;that.data.count--;that.setData({count:that.data.count})if(that.data.count==app.bomb){that.setData({dialog_suc:true})}//当剩余单元格计数等于雷数，游戏胜利if(that.data.gamearr[r][c].val==""){//如果点到的是空,将它周围的四个打开that.data.gamearr=that.show4(r,c,that.data.gamearr)// that.data.gamearr=that.show9(r,c,that.data.gamearr)//原先考虑九点，结果递归直接栈溢出了，(⊙﹏⊙)b
      }console.log(that.data.count)}else{that.setData({dialog_warn:true})}//点到了雷，游戏结束
    that.setData({gamearr:that.data.gamearr})}

show4:function(r,c,arrmap){//显示周边的4点var that=this;if(r-1>=0 && arrmap[r-1][c].val==""){//上if(arrmap[r-1][c].cover){arrmap[r-1][c].cover=false;that.data.count--;that.setData({count:that.data.count})that.show4(r-1,c,arrmap)//递归
        }}if(r+1<app.row && arrmap[r+1][c].val==""){//下if(arrmap[r+1][c].cover){arrmap[r+1][c].cover=false;that.data.count--;that.setData({count:that.data.count})that.show4(r+1,c,arrmap)//递归
        }}if(c-1>=0 && arrmap[r][c-1].val==""){//左if(arrmap[r][c-1].cover){arrmap[r][c-1].cover=false;that.data.count--;that.setData({count:that.data.count})that.show4(r,c-1,arrmap)//递归
      }}if(c+1<app.column && arrmap[r][c+1].val==""){//右if(arrmap[r][c+1].cover){arrmap[r][c+1].cover=false;that.data.count--;that.setData({count:that.data.count})that.show4(r,c+1,arrmap)//递归
      }}return arrmap;}

// pages/set/set.js
var app = getApp();
Page({data:{row:app.row,column:app.column,bomb:app.bomb},//游戏设置部分，修改设置将重新生成游戏rowChange:function(e){app.row=e.detail.value;},columnChange:function(e){app.column=e.detail.value;},bombChange:function(e){app.bomb=e.detail.value;}
})