这篇文章主要为大家详细介绍了微信小程序实现扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现扫雷游戏的具体代码，供大家参考，具体内容如下
实验小提醒，打开微信小程序模板时，一定要看清楚，要选js模板，不要选ts模板，因为ts中对数据类型检查更严格，同样的代码在ts中可能无法运行！
实验内容：
编写如下扫雷游戏，基本要求如下：
（1）方块数为10行7列；
（2）有游戏计时（计时单位为秒）；
（3）有一个“开始游戏”按钮，按该按钮能重新开始一局游戏。
可依据个人能力自由发挥点：
（1）让玩家可以自由设定方块数；
（2）让玩家可以自由设定地雷数；
实验效果：
程序优势：
1、必须点击开始游戏，才能点击方块，避免用户误碰影响玩的体验
2、游戏玩到中途，可以新开一局，也可以在点击新开一局后，点击取消，继续玩
3、可以点击设置，设置行数，列数或者地雷数任意一个参数，游戏怎么玩儿，由你定
代码目录：
这里面index目录下面四个文件，放的是扫雷相关的代码； 而setUp目录中的四个文件放的是设置页面相关的代码！
实验代码：
index目录下的代码文件
index.wxml
当前用时：{{timeformat}} 开始游戏 设置 {{bt.text}}
index.js
Page({ data: { bts: null, //9*6数组 54个方块，根方块有关的属性全部存储起来 timer:null, hour:0, minute:0, second:0, timeformat:'00:00:00', clickButton:false, cancelButton:false }, start:function(){ var that=this clearInterval(that.data.timer); wx.showModal({ title:'提示', content:'开始游戏', showCancel:true, 如何让用户点击取消按钮后，还能继续玩(已解决) success(res){ // 刚开局点击取消后，什么也不做 if(res.cancel ){ if(!that.data.cancelButton){ }else{ that.data.timer = setInterval(that.counter,1000) } // 点击确定后，初始化界面，并回调时间函数 }else{ that.data.cancelButton = true that.init() // clearInterval(this.data.timer) that.data.timer = setInterval(that.counter,1000) that.data.clickButton = true } } }) }, second:'', minute:'', hour:'', counter:function(){ var second = this.data.second var minute = this.data.minute var hour = this.data.hour this.setData({ second:second+1 }) if(second == 60){ this.setData({ second:0, minute:minute+1 }) } if(minute == 60){ this.setData({ minute:0, hour:hour+1 }) } // 下面三个全局变量用于保证时间格式 this.second = second this.minute = minute this.hour = hour if(second <10){ this.second="0"+second } if(minute <10){ this.minute = "0"+minute } if(hour <10){ this.hour="0"+hour } this.setData({ timeformat:this.hour+":"+this.minute+":"+this.second }) }, // 跳转到设置页面的函数 setUp:function () { wx.navigateTo({ url: '../index/setUp/setUpPage', }) // 设置完以后应该重新开始游戏 this.defaultRow = 10 this.defaultColumn = 7 this.defaultDilei = 10 this.init() }, // 设置默认数据，用户不设置也能玩 defaultRow:10, defaultColumn:7, defaultDilei:10, //初始化函数 init: function () { //初始化时间 this.counter() // 下面代码用于获取全局变量数据(只能函数中用) var app = getApp() var setRow = app.globalData.row var setColumn = app.globalData.column var setDilei = app.globalData.dilei this.setData({ hour:0, minute:0, second:0, timeformat:"00"+":"+"00"+":"+"00" }) // 检查用户修改了哪方面数据 if(typeof(setRow) != 'undefined'){ this.defaultRow = setRow } if(typeof(setColumn) != 'undefined'){ this.defaultColumn = setColumn } if(typeof(setDilei) != 'undefined'){ this.defaultDilei = setDilei } //生成指定行和列的方块数组，并初始化 var ds = new Array() for (var i = 0; i 0 && j>0) N=N+this.data.bts[i-1][j-1].dilei//左上 if(i>0) N=N+this.data.bts[i-1][j].dilei//上 if(i>0 && j0) N=N+this.data.bts[i][j-1].dilei//左 if(j0) N=N+this.data.bts[i+1][j-1].dilei if(i 0 && j > 0 && this.data.bts[i - 1][j - 1].bgcolor == "yellow" && this.data.bts[i - 1][j - 1].dilei != 1) this.aotoClick(i - 1, j - 1) //左上 if (i > 0 && this.data.bts[i - 1][j].bgcolor == "yellow" && this.data.bts[i - 1][j].dilei != 1) this.aotoClick(i - 1, j) //上 if (i > 0 && j 0 && this.data.bts[i][j - 1].bgcolor == "yellow" && this.data.bts[i][j - 1].dilei != 1) this.aotoClick(i, j - 1) //左 if (j 0 && this.data.bts[i + 1][j - 1].bgcolor == "yellow" && this.data.bts[i + 1][j - 1].dilei != 1) this.aotoClick(i + 1, j - 1) if (i index.wxss
.main{ display: flex; flex-direction: column; border: 1px solid black; } .yy{ display: flex; flex-direction: row; } .xx{ border: 1px solid black; width: 100%; height: 60px; margin: 2px; text-align: center; line-height: 60px; font-size: 35px; } .time{ display: flex; background: blueviolet; padding-left: 2vw; height: 7vh; line-height: 7vh; } .using-time{ width: 150px; font-weight: 700; } .start-game{ /* position: relative; */ font-size: 15px; padding-left: 80px; font-weight: 700; color: rgb(63, 204, 34); } .set-up{ padding-left: 85vw; margin-bottom: 2vh; height: 20px; }setUp目录下的代码文件
setUp.wxml (微信中所有页面代码它默认名叫 index.wxml,不用管它)
请设置方块数的列数: 请设置地雷数:
setUp.js
// index.js const app = getApp() Page({ // data: { // num1: 0, // num2: 0, // result: 0 // }, input1(e) { // 下面代码将本页面数据传给全局变量 // var app = getApp() app.globalData.row = e.detail.value // this.setData({ // num1: parseFloat(e.detail.value) // }) }, input2(e) { app.globalData.column = e.detail.value // this.setData({ // num2: parseFloat(e.detail.value) // }) }, input3(e){ app.globalData.dilei = e.detail.value }, jump:function(){ wx.navigateTo({ url: '../index' }) } })setUp.wxss
/**index.wxss**/ .text{ font-size: 13px; font-weight: 600; } .firstNum, .secondNum { margin: 50rpx; display: flex; flex-direction: row; height:50px; } .dilei{ display: flex; font-size: 13px; font-weight: 600; padding-left: 18vw; } .jump{ background: rgb(204, 19, 221); margin-top: 50px; } .title{ font-size: 13px; color:crimson; padding-left: 6vw; }由于涉及页面传递数据，所以还有一个app代码
app.js
// app.js App({ globalData:{ row:0, column:0, dilei:0 }, onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) }, globalData: { userInfo: null } })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是微信小程序实现扫雷游戏的详细内容，更多请关注0133技术站其它相关文章！
