【迷宫】地下迷宫游戏-微信小程序开发流程详解
可曾记得，小时候上学路边买的透明铅笔盒，里面内嵌了一个小球，它用重力可从起点滚动到终点，对小朋友来说是感觉有趣的，在这个游戏的基础上，弄一款微信小程序的迷宫探索游戏试试，在不同关卡的迷宫中解开机关与谜题，最终到达迷宫的终点，人生要有自己的目标，就不会迷失方向。
打开微信开发工具，选择小程序，创建一个项目，
例如项目名称为
miniprogram-maze，然后选择以下，再确定创建
- AppID 使用自己的测试号
- 不使用云服务
- JavaScript - 基础模板
开始页面
要实现从开始页面跳转到游戏页面，
页面文件在/pages/index/index.wxml，添加选择关卡的表单组件，和点击按钮，绑定点击事件方法enterGame()，
布局显示如下即可
3个关卡是不是少了点，这个可以通过一种叫地图编辑器操作来添加很多关卡
只需在文件/pages/index/index.js里的enterGame()方法中添加一段代码即可，代码如下
import Map from '../../utils/map.js';Page({data: {//获取所有关卡显示maps:(new Map()).getMaps(),},enterGame(e){const { map } = e.detail.value;wx.navigateTo({url: '/pages/game/game?map='+map,//传入关卡id})}
})
可以看到导入的模块
map.js，这就是存放所有关卡的数据Map类，类似地图数据
游戏页面
在一个游戏页面文件/pages/game/game.wxml中写，只需要一个canvas画布组件即可，布局如下
<view class="page"><view class="game-view" id="game-view"><canvas class="canvas" type="2d" id="canv" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd" bindtouchcancel="onTouchEnd"></canvas></view>
</view>
要做的游戏页面如下，从入口到出口的路线是通的
游戏逻辑
理清一下迷宫游戏逻辑，这个基础的迷宫游戏，相信在座的各位都熟悉怎么玩吧，这里就不概述了
初始化
在页面准备完成时，调用方法onReady()这里，开始写代码，
先获取到画布，然后处理初始化，看如下代码
wx.createSelectorQuery().select('#canv').fields({size: true,node: true
}, res => {//...this.canvasData = {canvas: res.node,ctx: res.node.getContext('2d')};//使用迷宫的地图数据，mapid是指定用哪个地图数据const map = new Map();const mapData = map.getMap(this.mapid || 0);//...const grids = [];// 创建一个离屏画布const canvas = wx.createOffscreenCanvas({type: '2d',width: res.width,height: res.height});const ctx = canvas.getContext('2d');// 在离屏画布上绘制迷宫//先画背景ctx.fillStyle = '#666666';ctx.beginPath();ctx.rect(paddingLeft, paddingTop, size * cols, size * rows);ctx.fill();//在画其它的ctx.fillStyle = '#333333';for (let r = 0; r < rows; r++) {for (let c = 0; c < cols; c++) {let g = {//...};grids.push(g);//...//若是墙壁数据，就画出来if (g.a=='1') {ctx.beginPath();ctx.rect(g.x, g.y, size, size);ctx.fill();}}}//将所有数据设置到新的地图数据中this.map = {//...grids,//游戏选手数据player: {//...}};//这里将离屏绘制好的地图设置到地图数据中，将来有用this.map.data = ctx.getImageData(0,0,canvas.width,canvas.height);//这里处理加载所需的图片资源数据Promise.all(['../../static/player-1.png','../../static/player-2.png','../../static/player-3.png'].map(src=>new Promise((resolve,reject)=>{let playerImg = res.node.createImage();playerImg.onload = () => resolve(playerImg);playerImg.onerror = reject;playerImg.src = src;}))).then(res=>{//在游戏选手数据里放好所有图片数据this.map.player.headImgs = res;//重置游戏数据，开始游戏this.restart();}).catch(err => console.error(err))
}).exec()
从初始化的方法中可以看到，使用了离屏画布
wx.createOffscreenCanvas()，可能有一些小伙伴不什么理解它，
离屏画布与组件canvas的用法是一样的，但是有所区别，离屏画布可以理解为后台绘制，绘制出来的图形是不可见的，
后台绘制完后，要用canvas组件绘制，也就是覆盖一下，才能看到图形，
它的绘制方法，在下面的重绘方法redraw()中会提到
初始化方法处理完成，就进入开始游戏方法restart()，代码大致如下
//...
const { player, inIndex, outIndex } = this.map;
const { canvas } = this.canvasData;
//重置游戏选手数据和状态
player.index = inIndex;//表示在迷宫的入口
player.timer = TIMER_FULL;//这是常量，最大计时60s
//...
this.isGameEnd = false;
this.preIndex = inIndex;
//...
//处理下一帧的方法
const nextFrame = () => {//延迟执行this.timer = setTimeout(() => {if (player.timer <= 0) {this.showModal('挑战失败！\n爱是一道光，没了你发慌...');return;}else if (player.index == outIndex) {this.showModal('挑战成功！\n头上带点绿，生活过的去...');return;}else if (player.index == inIndex && this.preIndex!=inIndex) {this.preIndex = inIndex;// 如果走到原点（迷宫入口），就提示wx.showToast({title:'你不能回去...',icon:'none'});}//重绘this.redraw();//执行下一帧canvas.requestAnimationFrame(() => nextFrame());}, FRAME_TIME);
};
nextFrame();
其中
FRAME_TIME就是常量，延迟执行下一帧的时间，它的值是60，单位毫秒
接下来，看看重绘方法redraw()，代码大致如下
const { map } = this;
const { canvas, ctx } = this.canvasData;
const { player, grids, size, rows, cols, paddingTop, paddingLeft, outIndex } = map;
//绘制前，先清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
//判断游戏是否结束了
if (this.isGameEnd) {//绘制迷宫地图ctx.putImageData(map.data, 0, 0);
}else{//在选手头像的位置周围内绘制（限制在一格距离），超过距离都绘制黑色，表示看不见远处的let index = player.index;let g = grids[index-cols-1];//省略了...//3个格的距离let s = size*3;//这里将离屏绘制出来的地图绘制出来，传入的参数可决定绘制的地图范围ctx.putImageData(map.data, 0, 0, g.x, g.y, s, s);//...
}
//获取选手所在的格子数据
let playerG = grids[player.index];
//如不在终点位置
let isFail = outIndex!=player.index;
//是否游戏结束
if (this.isGameEnd) {//有没有到终点，绘制选手头像将是不一样的if (isFail) ctx.drawImage(player.headImgs[1],playerG.x,playerG.y,size,size);else ctx.drawImage(player.headImgs[2],playerG.x,playerG.y,size,size);
}else{//绘制选手头像ctx.drawImage(player.headImgs[0],playerG.x,playerG.y,size,size);//...//绘制出口的灯光泡，r是半径，可以改变，一大一小变化playerG = grids[outIndex];ctx.fillStyle = '#F4E286';ctx.beginPath();ctx.arc(playerG.x + r, playerG.y + r, r*s, 0, Math.PI * 2);ctx.fill();
}//绘制剩余时间，每过一秒就更新一下timer
ctx.fillStyle = '#ff0000';
ctx.font = 20+'px sans-serif';
ctx.fillText(`剩余时间 ${player.timer}`, paddingLeft, paddingTop*0.6);
在游戏进行中，迷宫地图应该是隐藏的，显示效果如下
由于是探索类迷宫，选手游戏时是没有地图可看的，
有方向感，可感知距离，还有手速，还是可以攻关的，
随着倒计时开始，会增加游戏紧张度吧，
关卡地图越大，挑战难度就越大。
接下来，是实现游戏交互逻辑了，通过触摸操作识别出移动方向，
请参考这个文章来实现 关于手机中的触摸手势操作实现过程详解，
主要是改变player.index就可以实现移动
游戏测试
写到这里，这个迷宫游戏基本就算完成了，看着不是很多，是不是感觉简单呢，运行效果动图如下，
想看详细的可以去找一下对应的项目源码，点此查看，在资源类别下可以找到（如果在手机上看到的，可能看不到，请用电脑浏览器上看），感谢支持。
游戏用到素材，同下面，如觉得不合适，自己修改替换就好，
爱是一道光，没了你发慌。
如果被爱是一道光，那没了以后，就问你慌不慌
生活过得去，头上带点绿。
那点绿，可以理解为慢羊羊头上的那颗智慧草吗【迷宫】地下迷宫游戏-微信小程序开发流程详解相关推荐
- 【数独】数独游戏-微信小程序开发流程详解
有没有玩过数独游戏呢,听说,它是一个能训练大脑思维的棋盘类游戏,游戏规则很简单,通过小程序来实现很容易,非常适合对数独游戏逻辑感兴趣的同学,选择它开发入门吧. 准备 会使用微信开发者工具, 有Java ...
- 【拼图】拼图游戏-微信小程序开发流程详解
还记得小时候玩过的经典拼图游戏吗,上小学时,在路边摊用买个玩具,是一个正方形盒子形状,里面装的是图片分割成的很多块,还差一块,怎么描述好呢,和魔方玩具差不多,有没有听说叫二维的魔方,这里用小程序把它实 ...
- 【十字绣】传统手艺-微信小程序开发流程详解
还记得小时候看过母亲的十字绣吗,易学易懂,就是用专用的绣线和十字格布,通过平面坐标计找出位置,对照专用的图案进行刺绣,可作出心中所想的画,奈何所需材料成本不小,这里用小程序简单模拟十字绣,喜欢的话可用 ...
- 【答题】在线答卷-答题系统的微信小程序开发流程详解
用死记硬背的方法学习的学生,面对桌上堆积成厚厚的书本,是否感觉鸭梨山大呢,想着教育却面临着学习成本不小问题,是否感觉各种不便呢,如果对编程代码有感兴趣,不妨试试做一个自己的在线答题系统,这里可以用微信 ...
- 【跳棋】跳棋游戏-多人游戏-微信小程序开发流程详解
看到跳棋游戏,一个2到6人可一起玩的游戏,于是联想起,自己上小学时候陪同学们玩过的弹珠游戏,是不是跟跳棋游戏很像呢,看了跳棋玩法,有兴趣就研究,这里把跳棋游戏给弄出来了,想知道地图怎么画,对此感兴趣的 ...
- 【飞行棋】多人游戏-微信小程序开发流程详解
可曾记得小时候玩过的飞行棋游戏,是90后的都有玩过吧,现在重温一下,这是一个可以二到四个人参与的游戏,通过投骰子走棋,一开始靠运气,后面还靠自己选择,谁抢占先机才能赢,还可以和小伙伴们一起玩,狭路相逢 ...
- 【国际象棋】棋盘游戏-微信小程序开发流程详解
与中国象棋类似的,还有国际象棋,知道有人爱玩,于是凭着好奇心,网上研究了一下,跟中国象棋有相似之处,玩法是有些许不一样,不知道象棋最早出于谁之手呢,抽空做一做,最终完成,玩一玩看着还不错吧,这里给讲一 ...
- 微信小程序支付流程详解
原创 Dr Hydra 码农参上 2020-11-22 11:00 收录于合集#微信开发技术3个 最近在工作中接入了一下微信小程序支付的功能,虽然说官方文档已经比较详细了,但在使用过程中还是踩了不少的 ...
- 微信小程序退款流程详解
原创 Dr Hydra 码农参上 2020-11-29 11:00 收录于合集#微信开发技术3个 在上一篇中我们介绍了微信小程序的支付流程,这一篇接着讲一下小程序的退款流程,首先看一下官方给出的介绍: ...
最新文章
- 2006年上半年 网络工程师 上下午试卷【附带答案】
- 华华和月月种树（牛客）
- 工作中关于rpm的一个简单但头疼的问题
- driver.get调用iframe中的页面_【5分钟玩转Lighthouse】爬取JavaScript动态渲染页面
- docker安装mysql8,Docker安装Mysql8.0，并配置忽略大小写
- linux设备模型的主要功能,第 14 章 Linux 设备模型
- 初级java程序员怎样快速提升自己
- 华为笔试题大全(史上最齐全)
- 智慧校园整体解决方案
- Rhino（犀牛）室内模型导入Unity3d快速烘焙光影【2020】
- 西游释厄传 所有物品代码
- 开题报告的前景_开题报告全分析，写出一份满意的答卷
- 深度揭秘：伪基站短信诈骗产业传奇始末!
- 【C语言】设计实现M*N矩阵和N*M矩阵相乘
- 移动直播app软件直播平台怎么创建
- JavaScript 动态获取ajax 自动刷新接口内容
- 【笔记】教学理论与教学模式、教学方法的区别于联系
- uniapp微信小程序富文本编辑器组件
- 解决联想ideapad 110如何进入bios界面修改禁用状态的VT选项问题
- 用计算机弹现在最火的英文歌,抖音最火的英文歌曲排行榜,2018抖音最火的英文歌(80首)...
热门文章