微信小程序实验四 —

实验小提醒，打开微信小程序模板时，一定要看清楚，要选js模板，不要选ts模板，因为ts中对数据类型检查更严格，同样的代码在ts中可能无法运行！

实验内容：

编写如下扫雷游戏，基本要求如下：

（1）方块数为10行7列；

（2）有游戏计时（计时单位为秒）；

（3）有一个“开始游戏”按钮，按该按钮能重新开始一局游戏。

可依据个人能力自由发挥点：

（1）让玩家可以自由设定方块数；

（2）让玩家可以自由设定地雷数；

实验效果：

程序优势：

1，必须点击开始游戏，才能点击方块，避免用户误碰影响玩的体验

2，游戏玩到中途，可以新开一局，也可以在点击新开一局后，点击取消，继续玩

3，可以点击设置，设置行数，列数或者地雷数任意一个参数，游戏怎么玩儿，由你定

代码目录：

这里面index目录下面四个文件，放的是扫雷相关的代码；而setUp目录中的四个文件放的是设置页面相关的代码！

实验代码：

index目录下的代码文件

index.wxml

<!--index.wxml-->
<view class="time"><view class="using-time">当前用时：{{timeformat}}</view><view class="start-game" bindtap="start"> 开始游戏 </view></view>
<view bindtap="setUp" class="set-up">设置</view>
<view class="main"><view wx:for="{{bts}}" wx:for-item="itemRow" class="yy"> <view wx:for="{{itemRow}}" wx:for-item="bt" class="xx" id="{{bt.id}}" style="background-color:{{bt.bgcolor}};color:{{bt.ftcolor}}" bindtap="click">{{bt.text}}</view></view>
</view>

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=thisclearInterval(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 = truethat.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.secondvar minute = this.data.minutevar hour = this.data.hourthis.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 = secondthis.minute = minutethis.hour = hourif(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 = 10this.defaultColumn = 7this.defaultDilei = 10this.init()},// 设置默认数据，用户不设置也能玩defaultRow:10,defaultColumn:7,defaultDilei:10,//初始化函数init: function () {//初始化时间this.counter()// 下面代码用于获取全局变量数据(只能函数中用)var app = getApp()var setRow = app.globalData.rowvar setColumn = app.globalData.columnvar setDilei = app.globalData.dileithis.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 <this.defaultRow; i++) {ds[i] = new Array();for (var j = 0; j < this.defaultColumn; j++) {ds[i][j] = {id: "" + i + j, //方块idbgcolor: "yellow", //方块背景色ftcolor: "red", //方块文字颜色text: "", //方块显示的文本信息dilei: 0 //方块下是否有雷 0：无雷，1有雷}}}this.data.bts=ds;//随机产生地雷for (var v = 0; v < this.defaultDilei; v++) {var i = Math.floor(Math.random() * (this.defaultRow-1))var j = Math.floor(Math.random() * (this.defaultColumn-1))this.data.bts[i][j].dilei = 1this.data.bts[i][j].text = ""this.data.bts[i][j].ftcolor = "red"}this.setData({ bts: this.data.bts })this.data.clickButton = falseclearInterval(this.data.timer)},onLoad: function () {this.counter()this.init() },countDilei:function(i,j){var N=0if(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 && j<this.defaultColumn-1) N=N+this.data.bts[i-1][j+1].dilei //右上if(j>0) N=N+this.data.bts[i][j-1].dilei//左if(j<this.defaultColumn-1) N=N+this.data.bts[i][j+1].dilei//右if(i<this.defaultRow-1 && j>0) N=N+this.data.bts[i+1][j-1].dileiif(i<this.defaultRow-1) N=N+this.data.bts[i+1][j].dileiif(i<this.defaultRow-1 && j<this.defaultColumn-1) N=N+this.data.bts[i+1][j+1].dileireturn N;},aotoClick: function (i, j) {var n = this.countDilei(i, j)//无论周围是否有雷都首先将当前翻开，这样递归才可以作为条件判断this.data.bts[i][j].bgcolor = "white"this.data.bts[i][j].ftcolor = "blue"//再根据周围是否有雷决定是否递归if (n != 0) {this.data.bts[i][j].text = n}else{//三个条件：存在、未翻开、不是雷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 <this.defaultRow-1 && 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)}},click: function (e) {//要求用户必须点击开始游戏 才能开始玩if(this.data.clickButton == false){wx.showModal({title:'提示',content:'请点击开始游戏，才能玩',})return}//找到点击位置var ds = e.target.id var i = Number(ds.substr(0, 1))var j = Number(ds.substr(1, 2))// this.data.bts[i][j].bgcolor="white"// this.data.bts[i][j].text=""// // this.data.bts[i][j].ftcolor=""//如果点到地雷if (this.data.bts[i][j].dilei == 1) {this.data.bts[i][j].bgcolor="white"this.data.bts[i][j].text="*"this.data.bts[i][j].ftcolor="red"wx.showModal({title: '提示',content: '你点到地雷了，游戏结束！'+'\n'+'所用时间为：'+this.data.timeformat,})clearInterval(this.data.timer)this.init()}else{ //没点到地雷this.aotoClick(i,j)//开始递归当前的周围//每次点击后都检查是否胜利if(this.isVictory()==true){wx.showModal({title: '提示',content: '恭喜你翻开所有地雷！',})this.init()}}this.setData({ bts: this.data.bts })},isVictory:function(){var flag = true;for (var i = 0; i < this.defaultRow; i++) {for (var j = 0; j < this.defaultColumn; j++) { if(this.data.bts[i][j].dilei==0 && this.data.bts[i][j].bgcolor=="yellow") {flag=falsebreak}}}return flag}
})

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,不用管它)

<!--index.wxml--><label class="title">你可以只设置一个数据，其他数据为系统默认数据</label>
<view class="firstNum"><!-- <text>请输入第一个运算数:</text> --><label class="text" >请输入方块数的行数: </label><input type="digit" bindinput="input1"     style=" border: 2rpx solid #ccc; width:150px;  margin-left: 5px; "/>
</view>
<view class="secondNum"><text class="text">请设置方块数的列数:</text><input type="digit" bindinput="input2"     style=" border: 2rpx solid #ccc; width:150px;  margin-left: 5px;"/>
</view>
<view class="dilei"><text class="text">请设置地雷数:</text><input type="digit" bindinput="input3"    style=" border: 2rpx solid #ccc; width:150px;  margin-left: 5px;"/>
</view><button bindtap="jump" class="jump">确定</button>

setUp.js

// index.jsconst 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}
})

微信小程序实验四 —— 扫雷游戏相关推荐

微信小程序实验二 ——— 弹球游戏
实验内容: 小球按照随机的角度直线运动,如果碰到四壁则反弹.你们不需要做游戏计时.设置小球及背景颜色等,只完成小球在方框内反弹运动的功能.这里主要考查绘图知识,数学计算能力,以及对定时器的应用. 实验 ...
微信小程序实验案例：简易成语小词典
微信小程序实验案例:简易成语小词典 01.准备工作 1●申请数据接口现在网络上第三方的免费数据资源越来越少了,这里推荐使用聚合数据的免费接口来实现本次实验案例. 首先访问聚合数据官网https:// ...
java基于微信小程序的四六级英语学习测试系统 uinapp 计算机毕业设计
通过本课题的研究与分析,能够建立一种基于微信小程序的四六级助手系统,以MySQL为数据库,后端采用Java语言SSM框架,并对系统中的各个模块功能及它们之间相互协调工作进行了详细的分析与设计:尤其是对 ...
《移动软件开发》实验1：第一个微信小程序实验报告
2022年夏季<移动软件开发>实验报告本实验报告所参考实验文档为:Docs (feishu.cn) 如想获得详细的制作过程,请点击上面链接.该博客仅为个人使用实验报告姓名和学号? / ...
微信小程序实验报告-----学生家教小程序
实验报告课程名称:企业级前端应用开发实践实验项目:学生家教小程序实验地点: 专业班级: 学号: 学生姓名: 指导教师: 年月日实验报告实验名称学生家教系统实验地点实验日 ...
微信小程序实现水果转盘游戏
游戏介绍水果老虎机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格上有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后,小灯开始绕着正方形中每个格子 ...
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录路由_navigateTo 页面跳转携带参数返回上一级页面路由_redirectTo 页面跳转路由_reLaunch 页面跳转路由_switchTab 实现 tabbar 页面跳转交 ...
微信小程序----第四天（基础加强）
一.自定义组件自定义组件 - 组件的创建与引用 1. 创建组件 1.在项目的根目录中,鼠标右键,创建 components -> test 文件夹 2.在新建的 components -> ...
微信小程序入门四：实现table效果
微信小程序中没有table组件,那么怎么实现呢? 其实使用多个view组件就可以实现,接下来就直接看代码吧 <view class="co ...

微信小程序实验四 —— 扫雷游戏

微信小程序实验四 —— 扫雷游戏相关推荐

最新文章

热门文章