微信小程序扫雷游戏
枫渝浪天下 人气:0实验小提醒，打开微信小程序模板时，一定要看清楚，要选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=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 <this.defaultRow; i++) {
ds[i] = new Array();
for (var j = 0; j < this.defaultColumn; j++) {
ds[i][j] = {
id: "" + i + j, //方块id
bgcolor: "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 = 1
this.data.bts[i][j].text = ""
this.data.bts[i][j].ftcolor = "red"
}
this.setData({ bts: this.data.bts })
this.data.clickButton = false
clearInterval(this.data.timer)
},
onLoad: function () {
this.counter()
this.init()
},
countDilei:function(i,j){
var N=0
if(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].dilei
if(i<this.defaultRow-1) N=N+this.data.bts[i+1][j].dilei
if(i<this.defaultRow-1 && j<this.defaultColumn-1) N=N+this.data.bts[i+1][j+1].dilei
return 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=false
break
}
}
}
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.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
}
})加载全部内容