长春网站网站建设,西安网站建设工程,北京网站开发招聘,秦皇岛汽车网站制作还记得小时候玩过的弹珠撞击游戏不#xff0c;这里把它的实现原理通俗易懂地讲一下#xff0c;看看怎样实现一个碰碰球(弹珠)小游戏#xff0c;除了个人玩法#xff0c;也可以双人玩哦#xff0c;与打乒乓球一样的#xff0c;可练习临场反应。
创建项目
打开微信开发者…还记得小时候玩过的弹珠撞击游戏不这里把它的实现原理通俗易懂地讲一下看看怎样实现一个碰碰球(弹珠)小游戏除了个人玩法也可以双人玩哦与打乒乓球一样的可练习临场反应。
创建项目
打开微信开发者工具
小程序项目
选择创建小程序项目名称自己填写例如miniprogram-pairs-play
选择项目属性
如下图依次选择即可
AppID 选自己的测试号不使用云开发JavaScript - JS 基础模板
小游戏项目
如果要选创建小游戏项目来做也是可以的实现步骤大同小异
可以将小程序的游戏源码改写到小游戏项目中有兴趣可以看看笔者写得这篇文章来做 【贪吃蛇】微信小程序的游戏转到小游戏上实现方法详解 修改主页
创建一个项目会看到里面自动创建好了一些文件
找到位置pages/index/index打开其中index.wxml
这是第一个页面布局文件在里面加一个button按钮组件布局
在对应的index.js逻辑文件中实现一个点击方法点击可进入游戏
横屏显示
在对应的index.json配置文件中添加一个设置如下可实现横屏操作
pageOrientation: landscape游戏页面
进入的游戏页面位置在pages/game/game
这里是没有的需要自己创建一个游戏页面
打开其中的game.wxml文件添加内容如下
!--pages/game/game.wxml--
canvas classcanvas idzs1028_csdn type2d bindtouchstartonTouchStart bindtouchmoveonTouchMove bindtouchendonTouchEnd/canvas游戏页面只需要一个canvas画布组件就可以了非常简单 游戏逻辑
理清了游戏逻辑思路就可以实现了
看看游戏页面如下图思考一下它是怎样实现的是否简单呢
初始化
首先写好初始化代码并绑定canvas组件的触摸点击方法
// pages/game/game.js
import ZS1028_CSDN from ../../utils/zs1028_CSDN.jsconst app getApp()Page({/*** 生命周期函数--监听页面初次渲染完成*/async onReady() {const { width, height, node:canvas } await ZS1028_CSDN.query(#zs1028_csdn)Object.assign(canvas, { width, height })// 创建一个小游戏的引擎框架对象let game ZS1028_CSDN.createMiniGameEngine({canvas,bgColor: black, //背景色// isTest:true //性能测试用途需要时取消这里注释})this.game game// 初始化一些游戏数据对象const leftPlayerData {}const rightPlayerData {}const aBallData {}// 定义需要存储的游戏数据const gameData {leftPlayerData, //左侧的球拍rightPlayerData, //右侧的球拍aBallData, //弹珠的timeNum: 0, //计时scopeCount: 0, //记录分isGameEnd: false //游戏状态}// 定义游戏平面布局需要用到一些数据const r canvas.height * 0.18 // 球拍半径const dR r*0.25 // 弹珠半径const dH canvas.height/2 //垂直居中位置const powR Math.pow(r, 2) // 勾股定理中斜边长的平方this.gameData gameData// 这里处理将上面定义的一些游戏数据对象添加到游戏引擎中game.addBgObject({data: leftPlayerData,reset(){...},redraw(data){...}})game.addBgObject({data: rightPlayerData,reset(){...},redraw(data){...}})game.addBgObject({data: aBallData,reset(){...},redraw(data){...}})game.addForeObject({data:{...},reset(){...},redraw(data){...}})// 最后开始游戏这个方法就是调用了game.start()this.restart()},onTouchStart(e) {//...触摸开始时处理},onTouchMove(e) {//...触摸移动时处理},onTouchEnd(e) {//...触摸结束时处理}其中ZS1028_CSDN 是一个模块是作者编写的游戏引擎框架的一些方法总体代码不到200行可以研究学习 写好了初始化逻辑就可以运行看了界面显示效果如预期的一致
游戏引擎
这里说明一下模块ZS1028_CSDN 游戏引擎game对象的用法
addBgObject() 是将参与的游戏对象添加背景中的方法addForeObject() 是将参与的游戏对象添加到前景中的方法可以把绘制的背景对象覆盖add..() 还有其它方法都在模块中这里没用到就不多讲了请自己探索run() 是运行游戏的stop() 是停止游戏的在游戏结束时就调用它
球拍
接下来绘制左边和右边的球拍两个然后让用户可以拖动它上下移动
绘制球拍
前面使用了游戏引擎这样绘制变得简单一些
在添加游戏对象的方法addBgObject()中
在传入的redraw()方法这里实现绘制代码如下
game.addBgObject({data: leftPlayerData,reset(){//初始化数据Object.assign(this.data,{r,x:0, y:dH,relY:0,direY:0 })},redraw(data){const { context:ctx } data//获取球拍距离垂直中心点的长度let relY that.calcRelY(this.data)//绘制球拍的背景色ctx.fillStyle redctx.beginPath()//绘制一个半球形状ctx.arc(this.data.x,this.data.yrelY,this.data.r,Math.PI*1.5,Math.PI/2)ctx.fill()}})方法reset()是重置数据的里面写初始化它的数据即可在开始或重置游戏时都会调用它方法calcRelY()是计算球拍距离垂直中心点的长度的实现很简单 绘制右边的球拍同上面绘制球拍的方法一样复制这一段代码然后改一改实现右边绘制 拿起球拍
球拍绘制出来后下一步需要实现玩家对它的控制
实现球拍的拾起操作就从触摸开始的方法里开始写
如下代码遍历判断触摸位置是否碰到球拍所在位置
onTouchStart(e) {//此处省略了...for(let i0; ie.touches.length; i){//一个触摸点有三个重要属性 x, y, identifierlet touch e.touches[i]//此处省略了...}
},看上面的代码touches是一个数组表示它是支持多点触摸操作的 利用这个特点可以实现两个球拍同时移动操作 也就是说可以用自己的双手操作或者你一边我一边来控制球拍进行游戏 移动球拍
实现拖动球拍操作就在触摸移动的方法里写
如下代码判断触摸点的数据修改球拍数据就行
onTouchMove(e) {const { leftPlayerData, rightPlayerData } this.gameDatafor(let i0; ie.touches.length; i){let touch e.touches[i]//此处省略了...}
},修改球拍的数据就是对象的relY属性 在游戏引擎绘制方法中它绘制的球拍看起来是会移动的 放下球拍
在触摸结束的方法里要处理放下球拍
如下代码重置球拍数据要考虑处理一个在触摸另一个没在触摸时的场景
onTouchEnd(e) {const { leftPlayerData, rightPlayerData } this.gameDataif (e.touches.length0){for(let i0; ie.touches.length; i){let touch e.touches[i]//此处省略了...}}else{//重置球拍的数据this.resetTouchRelY(leftPlayerData)this.resetTouchRelY(rightPlayerData)}
},弹珠球
还有一个弹珠绘制应是球的形状
一开始不要想那么复杂先绘制看看
绘制弹珠
同样需要在添加的游戏对象中去实现绘制
如下代码和之前的添加对象方式一样
game.addBgObject({data: aBallData,reset(){Object.assign(this.data,{x:canvas.width/2, //初始坐标位置y:dH,moveDirection: {speed:8, //移动速度angle:0.1 //方向角度},})},redraw(data){const { context:ctx } data// 实现让弹珠动起来// 此处省略了...//绘制弹珠ctx.fillStyle greenctx.beginPath()ctx.arc(this.data.x,this.data.y,dR,0,Math.PI*2)ctx.fill()//保存改变判断游戏是否结束//此处省略了...}
})让弹珠动起来
在上面绘制方法里开始的地方
添加如下代码即可让弹珠动起来是不是很神奇
let { speed, angle } this.data.moveDirection// 球拍按照角度angle方向移动位置
this.data.y Math.sin(angle/180*Math.PI) * speed
this.data.x Math.cos(angle/180*Math.PI) * speed这里用到了初中数学知识勾股定理 上过初中的学生可曾记得正弦sin(A)余弦cos(A)的公式呢 其中A是边长弧度angle是相交于水平线夹角的角度 弧度和角度它们之间的关系是A angle / 180 * Math.PI 碰撞检测
现在弹珠可以动起来了接下来继续写代码
代码如下实现碰撞检测的思路大致是这样改变的速度和角度即可
// 计算弹珠的四个顶点位置用于实现碰撞检测
let left this.data.x-dR
let right this.data.xdR
let top this.data.y-dR
let bottom this.data.ydR
// 开始判断先看看看移动方向到了哪个位置
// 判断是否碰撞上下边界
// ...此处省略了
// 再判是否断碰撞左边和右边的球拍
// ...此处省略了
// 再判是否断碰撞左边和右边界
// ...此处省略了// 这里是绘制弹珠上面已经讲了...此处省略//最后保存改变的速度和角度
Object.assign(this.data.moveDirection, { speed, angle })//到左边和右边边界就判断出界到此游戏结束
if (left0 || rightcanvas.width) {game.stop()gameData.isGameEnd true// 记录最高分app.setHistoryScopeCount(gameData.scopeCount)// 弹窗提示游戏结束ZS1028_CSDN.showModal(游戏结束, 记录gameData.scopeCount,重新开始,退出游戏).then(res{if (res.confirm) that.restart()else wx.navigateBack()})
}角度方向改变
实现碰撞检测的思路会复杂一些需要研究搞清楚弹珠的运动轨迹 可要研究仔细了不然这代码会看不懂的 弹珠的移动到碰撞后怎样改变方向大致讲一下代码如下
// 判断上下边界的
if (top0 || bottomcanvas.height) {angle * -1 //改变负号弹珠在靠近水平线时会弹跳起来是不是很神奇
} else if (r left) {//判断到左边接近球拍半径就会执行到这里//...此处省略了
} else if (canvas.width right canvas.width-r right) {//判断到右边接近球拍半径就会执行到这里//...此处省略了
}
//...此处省略了显示记录
显示记录的方法
方法addForeObject()同上面的添加对象方式一样的就绘制显示游戏的数据
最后添加的会在最上层显示的很简单不重要不讲吧
游戏运行
写到这里按照上面的实现思路去做边写完一部边运行在实践中学习
做好了基本就可以运行游戏测试了
回到开始讲得游戏初始化地方调用游戏开始方法是this.restart()代码如下
restart() {const { game } this// 调用游戏引擎的run方法即可运行game.run()
}要重新开始游戏就调用restart()方法即可 用上游戏引擎框架运行过程就不用自己考虑实现了就是这么很简单
碰碰球的游戏运行效果的动图如下 右边的球拍是可以拖动的录制的电脑鼠标只能控制一个 在真机上可同时控制两个的这样玩效果会效果更好 完整代码可以看看碰碰球的小程序小游戏项目源码已放在资源里了 请点前往查看可能在手机上会找不到改用电脑浏览器看看感谢支持❤
