微信小程序项目实例——扫雷
今日推荐💁♂️
2023许嵩演唱会即将到来🎤🎤🎤大家一起冲冲冲🏃♂️🏃♂️🏃♂️
🔮🔮🔮🔮🔮往期优质项目实例🔮🔮🔮🔮🔮
微信小程序项目实例——图片处理小工具
🔗 https://blog.csdn.net/ws15168689087/article/details/125356342微信小程序项目实例——我有一支画笔（画画）
🔗 https://blog.csdn.net/ws15168689087/article/details/124967906微信小程序项目实例——印记
🔗 https://blog.csdn.net/ws15168689087/article/details/124606436微信小程序项目实例——飞机大战
🔗 https://blog.csdn.net/ws15168689087/article/details/123153607微信小程序项目实例——狼人杀
🔗 https://blog.csdn.net/ws15168689087/article/details/123307880
文章目录
- 今日推荐💁♂️
- 1️⃣ 项目介绍 👨🏫
- 2️⃣ 项目结构 👨💻
- 3️⃣ 项目展示 👨🎨
- 4️⃣ 结尾 👨🎓
1️⃣ 项目介绍 👨🏫
🎃游戏介绍：
👉《扫雷》是一款大众类的益智小游戏，于1992年发行。游戏目标是在最短的时间内根据点击格子出现的数字找出所有非雷格子，同时避免踩雷，踩到一个雷即全盘皆输。
🎯PC端扫雷：
📑雷诀八条：
1️⃣基本定式不要忘，现场推理真够呛。
2️⃣鼠标点击不要快，稳定节奏把空开。
3️⃣顺手标雷不要惯，积累下来记录悬。
4️⃣无从下手不要愣，就近猜雷把心横。
5️⃣遇到猜雷不要怕，爆了脸上不留疤。
6️⃣猜雷猜错不要悔，哭天抢地也白费。
7️⃣碰上好局不要慌，紧盯局部慢扩张。
8️⃣痛失好局不要恨，既然有缘定有份。
⛳项目展示：
👉扫雷小程序借鉴经典的PC端扫雷
👉玩家可以自行设置格子数🟫和地雷数💣
👉单点是开启，长按为插旗🚩
2️⃣ 项目结构 👨💻
🎃项目目录：
🧑🚀核心代码：
<!--pages/game/game.wxml-->
<view class="page">
<view class="section btns">
<button bindtap="newGame">重新开始</button>
<button bindtap="handleSetting">游戏设置</button>
</view>
<view class="section">
<view wx:for="{{grids}}" class="grid">
<view wx:for="{{item}}" class="grid_cell" style="height:{{height}}rpx;">
<view bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindtap="handleClick" id="{{item}}" class="card {{cards[item].open?'open':''}}">
<view wx:if="{{cards[item].open}}">
<text wx:if="{{cards[item].boom}}" class="iconfont icon-zhadan-BOOM"></text>
<text wx:else>{{cards[item].num>0?cards[item].num:''}}</text>
</view>
<view wx:else>
<text wx:if="{{cards[item].flag}}" class="iconfont icon-qizhi" style="color:red"></text>
</view>
</view>
</view>
</view>
</view>
</view>
// pages/game/game.js
const app = getApp();
Page({
data:{
config: {
x: 0,
y: 0,
n: 0
},
cards: [],
grids: [],
// arr: [],
start: false,
open: 0,
touchStart:0,
touchEnd:0,
height: 0
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
this.setData({
config:{
x:app.globalData.config.x,
y:app.globalData.config.y,
n:app.globalData.config.n
},
height: 750/app.globalData.config.x
});
this.newGame();
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
newGame(){
const x = this.data.config.x;
const y = this.data.config.y;
const n = this.data.config.n;
const cards = [];
const grids = [];
// const arr = [];
for(let i=0; i<y; i++){
grids.push([]);
for(let j=0; j<x; j++){
const index = i*x+j;
cards.push({
index:index,
boom:false,
num:0,
open:false,
flag:false
});
grids[i].push(index);
// arr.push(index);
}
}
this.setData({
cards: cards,
grids: grids,
// arr: arr,
start: false,
open: x*y-n
});
},
handleClick(e){
const i = parseInt(e.currentTarget.id);
console.log(i);
// console.log(this.data.touchEnd);
// console.log(this.data.touchStart);
const touchTime = this.data.touchEnd-this.data.touchStart;
// console.log(touchTime);
if(touchTime>350){
const cards = this.data.cards;
cards[i].flag = true;
this.setData({cards:cards});
}else{
!this.data.start && this.setBoom(i);
this.handleOpen(i);
}
},
handleTouchStart(e){
this.setData({
touchStart:e.timeStamp
});
},
handleTouchEnd(e){
this.setData({
touchEnd:e.timeStamp
});
},
handleOpen:function(i){
// const i = e.currentTarget.id;
// console.log(i);
// !this.data.start && this.setBoom(i);
// this.getNeighbor(i);
const cards = this.data.cards;
if(cards[i].open){
// console.log('OPENED!!!!!!!!!!!!!!!');
return;
}else{
cards[i].open = true;
this.setData({
cards:cards,
open:--this.data.open
});
console.log(this.data.open);
if(this.data.open==0){
wx.showModal({
title: 'YOU WIN!!!!!',
showCancel: false,
success: function(res) {
if (res.confirm) {
// console.log('用户点击确定')
this.newGame();
}
}.bind(this)
});
}
}
if(cards[i].boom){
// console.log('boom!!!!!!!!!!!!!!!');
wx.showModal({
title: 'GAME OVER',
showCancel: false,
success: function(res) {
if (res.confirm) {
// console.log('用户点击确定')
this.newGame();
}
}.bind(this)
});
}else if(cards[i].num==0){
const ns = this.getNeighbor(i);
ns.forEach(function(item){
this.handleOpen(item);
}.bind(this));
}
},
setBoom:function(j){
const cards = this.data.cards;
// const arr = this.data.arr;
const num = this.data.config.n;
const newArr = this.getNeighbor(j).concat(j);
// arr.splice(j,1);
// const arr = [...Array(cards.length).keys()];
const arr = [];
for (let index of Array(cards.length).keys()) {
newArr.indexOf(index)==-1 && arr.push(index);
}
// console.log(newArr);
// console.log(arr);
for(let i=0; i<num; i++){
const index = Math.floor(Math.random()*arr.length);
cards[arr[index]].boom = true;
newArr.push(arr[index]);
arr.splice(index,1);
}
const newCards = cards.map(function(card,i){
let n = 0;
this.getNeighbor(i).forEach(function(neighbor){
cards[neighbor].boom && n++;
});
card.num = n;
return card;
}.bind(this));
this.setData({
arr:arr.concat(newArr),
cards:newCards,
start: true
});
},
getNeighbor:function(i){
const x = this.data.config.x;
const y = this.data.config.y;
// const arr = [i-x-1,i-x,i-x+1,i-1,i+1,i+x-1,i+x,i+x+1];
const arr = [];
!(i<x||i%x==0) && arr.push(i-x-1);
!(i<x) && arr.push(i-x);
!(i<x||i%x==(x-1)) && arr.push(i-x+1);
!(i%x==0) && arr.push(i-1);
// arr.push(i);
!(i%x==(x-1)) && arr.push(i+1);
!(i>=x*(y-1)||i%x==0) && arr.push(i+x-1);
!(i>=x*(y-1)) && arr.push(i+x);
!(i>=x*(y-1)||i%x==(x-1)) && arr.push(i+x+1);
// console.log(arr);
return arr
},
handleSetting:function(){
wx.navigateTo({
url: '../setting/setting'
})
}
})
3️⃣ 项目展示 👨🎨
4️⃣ 结尾 👨🎓
具体的介绍就到这里了💭
扫雷小程序与PC经典的扫雷玩法一致🎰
有兴趣的同学可以继续研究🔎
代码放到下面链接里了👇
👉点击下载 扫雷小程序💣
