您现在的位置是:网站首页> 编程资料编程资料
微信小程序实现扫雷游戏_javascript技巧_
2023-05-24
350人已围观
简介 微信小程序实现扫雷游戏_javascript技巧_
本文实例为大家分享了微信小程序实现扫雷游戏的具体代码,供大家参考,具体内容如下
实验小提醒,打开微信小程序模板时,一定要看清楚,要选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 < this.defaultColumn-1 && 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 (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 < this.defaultColumn-1 && this.data.bts[i][j + 1].bgcolor == "yellow" && this.data.bts[i][j + 1].dilei != 1) this.aotoClick(i, j + 1) //右 if (i < this.defaultRow-1 && 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 < this.defaultRow-1 && this.data.bts[i + 1][j].bgcolor == "yellow" && this.data.bts[i + 1][j].dilei != 1) this.aotoClick(i + 1, j) 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,不用管它)
请设置方块数的列数: 提示: 本文由神整理自网络,如有侵权请联系本站删除!
本站声明:
1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!
相关内容
- Vue表单快速上手_vue.js_
- vue项目如何引入element ui、iview和echarts_vue.js_
- Node处理CPU密集型任务有哪些方法_node.js_
- 如何使用 Node.js 将 MongoDB 连接到您的应用程序_node.js_
- 一文理解Redux及其工作原理_React_
- React项目中使用Redux的 react-redux_React_
- Vue.js 状态管理及 SSR解析_vue.js_
- Vue.js 前端路由和异步组件介绍_vue.js_
- JavaScript变量中var,let和const的区别_javascript技巧_
- JavaScript变量or循环中的var和let详解_javascript技巧_
点击排行
本栏推荐
