网站建设源码安装教程,辽宁建设执业继续教育协会网站,搜索引擎国外,中国设计网官网图标记得小时候玩过的搭积木游戏吗#xff0c;和叠高高游戏原理差不多的#xff0c;与之类似的还有盖高楼游戏#xff0c;就是看谁盖的#xff08;叠的#xff09;最高#xff0c;这里讲一下比较基础的叠高高游戏小程序实现过程#xff0c;对编程感兴趣的同学可以参考学习一…记得小时候玩过的搭积木游戏吗和叠高高游戏原理差不多的与之类似的还有盖高楼游戏就是看谁盖的叠的最高这里讲一下比较基础的叠高高游戏小程序实现过程对编程感兴趣的同学可以参考学习一下代码不会很多非常值得入手研究学习哦。
打开微信开发工具选择小程序创建一个项目 例如项目名称为miniprogram-StackHigh然后选择以下再确定创建 AppID 使用自己的测试号不使用云服务JavaScript - 基础模板 开始页面
要实现从开始页面跳转到游戏页面
只需在文件/pages/index/index.js里的onLoad()方法中添加一段代码即可代码如下
wx.navigateTo({url: /pages/game/game,
})游戏页面
在一个游戏页面文件/pages/game/game.wxml中写只需要一个canvas画布组件即可布局如下
view classpagecanvas type2d idcanv classcanvas bindtouchstartonTouchStart bindtouchendonTouchEnd/canvas
/view游戏逻辑
理清一下游戏逻辑大致是这样 需要一个钩子放在上面左右移动同时带着方块 当用户点击屏幕时方块就会脱钩向下掉落有惯性会稍微偏移一点 最好可以落到下面的方块上面这样看着可以计算高度 目标很简单就是盖楼叠高高看谁的最高 增加关卡难度盖得越高移动钩子越快 在一个游戏逻辑文件/pages/game/game.js中开始写代码
加载时
先写好从页面加载完成时的onReady()方法中去写获取canvas组件
然后绑定的触摸事件onTouchStart和onTouchEnd代码如下
Page({/*** 生命周期函数--监听页面初次渲染完成*/onReady() {wx.createSelectorQuery().select(#canv).fields({ size: true, node: true }, res {//...//设置到画布的数据this.canvasData {canvas: res.node,ctx: res.node.getContext(2d),};//初始化画布this.initCanvas();}).exec()},/*** 触摸开始事件*/onTouchStart(e) {//这里没关系可不写任何代码},/*** 触摸结束事件*/onTouchEnd() {// 这里先判断 如果在动画进行中 或者 游戏已结束 就不继续处理if (this.isAnimining || this.isGameEnd) return;const { objBlock, objHook } this.canvasData;// 判断 方块是否被钩子勾上if (!objBlock.isHook) return;// 将方块脱钩 修改它的属性下落速度 和 没勾objBlock.offsetX objHook.offsetX;objBlock.isHook false;// 动画开始了 方块将下落this.isAnimining true;},})初始化
获取组件后会看到上面有调用了初始化方法initCanvas()
先加载图片资源图片文件都放在项目里的static文件夹中 实现的代码如下
const { canvas, ctx } this.canvasData;
this.loadResources([{src: /static/hook.png,width: canvas.width * 0.2
}, {src: /static/block-black.png,width: canvas.width * 0.3
}, {src: /static/block-blue.png,width: canvas.width * 0.3
}, {src: /static/block-yellow.png,width: canvas.width * 0.3
}, {src: /static/block-red.png,width: canvas.width * 0.3
}], images {// 将图片数据设置到画布数据中this.canvasData.images images;// 初始化图层方法this.initLayers();// 设置初始化计时this.currentTime 0;// 初始化游戏未结束this.isGameEnd false;// 执行重绘方法this.redraw();
});会看到调用了加载图片资源的方法loadResources(resources, success) 其中传入的两个参数分别是说 resources这是一个数组传入每个项都是引用图片文件的路径和图片在游戏画布中的显示宽度success这是一个回调函数由于加载图片文件是异步操作的待所有图片加载完就会调用这个函数从中得到图片资源列表images然后继续处理 上面的初始化方法中继续处理中有调用了两个方法一个是initLayers()另一个是redraw()分别是怎么实现的呢
图层
一个初始化图层的方法initLayers()实现代码大致如下
const { canvas, ctx, images } this.canvasData;
//初始化所有基本的图层对象
const layers [{ type: bg },Object.assign({ type: hook }, images[0]),Object.assign({ type: block }, images[1]),{ type: info }].map(layer Object.assign({ x: 0, y: 0 }, layer));const objBackground layers[0];//这是背景图对象const objHook layers[1];//这是钩子图对象const objBlock layers[2];//这是方块图对象const objInfo layers[3];//这是游戏显示信息对象//这里进一步初始化处理不同类型的对象有不同的处理方式layers.forEach((layer, index) {//这里代码看着比较多稍后讲...});// 将所有的图片 和 游戏对象 设置到画布数据中将来有用Object.assign(this.canvasData, {layers, objBackground, objHook, objBlock, objInfo});从 layers.forEach()遍历出不同类型的对象有不同的处理方式代码如下
//通过图层layer的属性type判断
switch (layer.type) {case bg://背景图{//设置平台托盘数据 用于能接住从上面掉落下的方块layer.platform {//省略...};//更新和绘制方法layer.update () {//省略...//绘制图片ctx.drawImage(layer.image, layer.x, layer.y);};break;}case hook://钩子{//...//更新和绘制方法layer.update () {//...//绘制图片ctx.drawImage(layer.image, layer.x, layer.y);};break;}case block://方块{//...layer.update () {//...//这里判断 如果没有被下面的平台托盘接住if (layer.isFallOut) {//判断 方块是否落到画布外if (layer.y canvas.height) {// 设置动画结束减去HP值this.isAnimining false;objInfo.hp--;// 判断HP值 如果还有继续游戏if (objInfo.hp 0) {wx.showToast({title: 还有机会再试试,icon: none});//...// 重新绘制背景 恢复上次的redrawBg();// 重置方块数据resetBlock();return;}//HP值 不够则提示游戏结束this.gameEnd();return;}//...ctx.drawImage(layer.image, layer.x, layer.y);//...return;} else {// 绘制方块ctx.drawImage(layer.image, layer.x, layer.y);}//...};break;}case info:// 游戏信息{//...layer.update () {//...// 更新显示游戏信息ctx.fillText(❤x${layer.hp} ⏰${layer.time}s ${layer.scope}m, layer.x, layer.y);};}
}看上面的方法实现代码比较多有省略了有一些没有说看着会不会觉得复杂呢能看懂大概吧 有没有看出来每个游戏对象都有初始化属性包括它的方法update()是用于将来更新绘制游戏对象的 重绘
另一个是重新绘制的方法redraw()这个看着简单
就是将所有的图层游戏对象都重绘一遍实现代码大致如下
if (this.isGameEnd) return;
const { canvas, ctx, objInfo, layers } this.canvasData;
// 每一次绘制 都要先清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 遍历每个游戏对象 调用对象的更新和绘制方法
layers.forEach((layer) layer.update());
// 这里记录时间
this.currentTime TimeFPS;
let time Math.floor(this.currentTime / 1000);
// 判断计时数是否变化 有变化就更新
if (time ! objInfo.time) objInfo.time time;
// 设置延迟多少ms就进行下一个重绘
this.timer setTimeout(() canvas.requestAnimationFrame(() this.redraw()), TimeFPS)TimeFPS 就是延迟多少毫秒的常量这里它的值是TimeFPS 60是可以调节刷新速度的 游戏测试
讲到这里上面的游戏基本就算完成了还有剩下的细节没有说那不重要不要在意 看到这里能想到小时候玩过的叠高高游戏是怎样实现了吧 这个叠高高游戏实现过程是否有给你启发呢 看着像不像多个图层叠起来的运动效果呢叠高高是不是在叠图层 如果还不够详细可以看项目源代码是完整的项目源代码点击这里查看在资源类别下可找到如果在手机上浏览可能会找不到请用电脑浏览器查看感谢支持。
来看一下运行时是怎么样的运行效果图如下 在这个游戏基础上学会了可以实现与之原理类似的游戏例如盖楼抓娃娃机等等 如果遇到什么问题可以留言哦请耐心等待作者回复 ~
