门户网站建设请示报告,国家职业资格证书查询,网页技术,中信建设有限责任公司官网首页还记得小时候玩过的见缝插针游戏吗#xff0c;比一比看谁插得针比较多#xff0c;可有趣了#xff0c;当然了#xff0c;通过它可以训练自己的手速反应#xff0c;以及射击水平#xff0c;把握时机#xff0c;得分越高就越有成就感#xff0c;相信小朋友们会喜欢它的比一比看谁插得针比较多可有趣了当然了通过它可以训练自己的手速反应以及射击水平把握时机得分越高就越有成就感相信小朋友们会喜欢它的游戏实现原理看似简单实则包含了数学中几何知识接下来讲一讲实现过程吧。 这篇文章主要是用微信小程序项目做的需要用微信开发者工具打开 打开微信开发者工具选择创建小程序项目名称自己填写例如miniprogram-shoot-scope
如下图依次选择即可
AppID 选自己的测试号不使用云开发JavaScript - JS 基础模板 如果要选创建小游戏项目来做也是可以的实现步骤大同小异 可以将小程序的游戏源码改写到小游戏项目中有兴趣可以看看笔者写得这篇文章来做 【贪吃蛇】微信小程序的游戏转到小游戏上实现方法详解) 游戏页面
接下来创建一个游戏页面文件路径是/pages/game/game,
打开布局文件/pages/game/game.wxml
在里面放一个画布组件Canvas元素就可以了内容如下
!--pages/game/game.wxml--
view classpagecanvas classcanvas type2d idzs1028_csdn bindtouchendonTouchEnd/
/view游戏逻辑
打开逻辑文件/pages/game/game.js
在里面写游戏逻辑代码先把画布组件的触摸事件和初始化方法都写好
游戏引擎
写好的代码如下从onReady()开始执行绑定onTouchEnd()触摸事件
//导入一个模块这是个小游戏引擎或者框架
import ZS1028_CSDN from ../../utils/zs1028_CSDN.jsconst app getApp()Pages({/*** 生命周期函数--监听页面初次渲染完成*/onReady() {//选择查询画布组件实例wx.createSelectorQuery().select(#zs1028_csdn).fields({ size: true, node: true }, res {//查询结果从这里返回const { width, height, node: canvas } res//将画布大小调整一下保证宽高一致Object.assign(canvas, { width, height })// 创建一个游戏引擎用这实现游戏会方便一些const engine ZS1028_CSDN.createMiniGameEngine({canvas,// isTest: true, //测试的去掉注释可以显示游戏动画帧率数字越大越流畅})//这里处理初始化游戏数据...稍后讲const newShotData {...}const shotsData {...}const centerScopeData {...}//将上面的定义游戏都缓存到this.gameData {centerScopeData,shotsData,newShotData}//把游戏引擎缓存到this.engine engine//再把初始化游戏数据添加到游戏引擎对象中...稍后讲engine.addBgObject({data: newShotData,...})engine.addBgObject({data: shotsData,...})engine.addForeObject({data: centerScopeData,...})//最后调用此方法开始游戏this.restart()}).exec()},/*** 绑定画布的触摸结束事件*/onTouchEnd() {if (this.isGameEnd) return//将底部的针箭的速度属性从0改为10就可以发射const { newShotData } this.gameDataif (newShotData.speed 0) returnnewShotData.speed 10},
})模块文件zs1028_CSDN.js由开发者实现代码看起来可能复杂些这里讲简单的实现思路 接下来讲怎么用这个模块来轻松实现游戏 有JavaScript编程基础功底的学者可以研究这模块来学习 文件代码不多有150行 初始化数据
开始游戏前需要向游戏引擎传入游戏的一些初始化数据
在上面省略的初始化游戏数据代码位置开始着写写好代码如下
//记录一个水平的中心点位置
const centerX width / 2
//定义一个靶的中心数据就是绘制大红点的
const centerScopeData {x: centerX,y: centerX,r: centerX * 0.5,initTime: 0,
}
//定义一个针箭的数据
const shotsData {x: centerX,y: centerX,r: centerX * 0.1,//针的尾部圆半径shots: [],//放置已钉上的列表speed: 1,//旋转速度angle: 0,//旋转角度offset: 0
}
//定义一个在底部的针箭数据
const newShotData {y: -1,//上下的位置在底部speed: 0,//射出的速度为0就是待发的状态
}将初始化好的一些游戏数据对象都放到this.gameData后面有需要就取 对照游戏界面看看就知道只用这三个数据就可以了 加入游戏对象
继续写下去将初始化数据添加到游戏引擎对象中
钉上靶中的针箭
这里添加所有钉上针箭的对象代码如下
//创建一个新的针箭对象
let shot this.addNewShot()
//算出它的开始位置
const startY canvas.height - shotsData.r - shot.data.linerLength - centerScopeData.r - centerScopeData.y
//使用游戏引擎的添加背景对象方法绘制中心的所有针箭
engine.addBgObject({data: shotsData, //传入对象数据//实现重置数据方法reset() {const { shots } this.datashots.length 0 //重置时候将所有钉上的针箭都清除},//实现绘制方法redraw(data) {const { canvas, context: ctx, topBar } datalet { x, y, r, shots, speed, angle } this.data// 内边距上边距离let paddingTop topBar?.bottom || 0
// 绘制所有钉上的针箭shots.forEach((item, index) {//夹角角度let deg item.data.angle angle//圆边弧度let radian deg / 2 / Math.PI// 线段针长let c item.data.linerLength centerScopeData.r//使用数学中的勾股定理公式求得线段的两点坐标let y2 Math.sin(radian) * c y paddingToplet x2 Math.cos(radian) * c x//调用对象的绘制方法传入的是针箭的两端坐标点item.redraw(x, y paddingTop, x2, y2)})//旋转位置更新let offset speed / 10this.data.offset offsetthis.data.angle (angle offset) % 360}
})在初中数学课上才有讲勾股定理哦可见学好数学对做游戏来说是多么重要 底下待发的针箭
这里添加在底部针箭的对象代码如下
const that this
//调用引擎的添加背景对象方法绘制底部的针箭
engine.addBgObject({data: newShotData,reset() {this.data.y startYthis.data.speed 0 //重置时候速度为0表示不动shot?.reset()},redraw(data) {const { canvas, topBar } data//其中y就是移动位置通过改变这个值可实现上下移动射击let { y, speed } this.datalet x1 canvas.width / 2let y1 y centerScopeData.y centerScopeData.rlet y2 y1 shot.data.linerLength//调用对象的绘制方法shot.redraw(x1, y1, x1, y2)if (speed 0) {//当y的值还是大于0时说明它还没有钉到靶中心继续移动if (y (topBar?.bottom || 0)) {this.data.y - speedreturn}//执行到这里说明它刚刚钉上靶中心就设置它在靶中心的角度以及偏移位置shot.data.angle 90 - shotsData.angle - shotsData.offset * 10//这里用遍历逐个判断这个针箭尾部的圆是否与已钉上的针箭相碰for (let i 0; i shotsData.shots.length; i) {let item shotsData.shots[i]if (item.x 0 || item.y 0) continue//计算两一个圆心之间的距离这里用到数学的勾股定理公式直角三角形三边关系let c Math.sqrt(Math.pow(x1 - item.data.x, 2) Math.pow(y2 - item.data.y, 2))//如果两个圆相交互相碰到那么就游戏结束if (c item.data.r shot.data.r) {//调用游戏引擎的停止方法engine.stop()//记录最高分app.setMaxScope(shotsData.shots.length)//弹出对话框提示游戏结束that.showModalForGameEnd()return}}//将新的针箭添加到shotsData.shots.push(shot)//重置一下this.data.y startYthis.data.speed 0//重新添加shot that.addNewShot()}}
})直角三角形三边关系假设直角的两边长是a和b那么斜边长 c²a²b² 靶心中心
这里添加靶心的对象代码如下
engine.addForeObject({data: centerScopeData,reset() {Object.assign(this.data,{initTime: Date.now()})},redraw(data) {const { canvas, context: ctx, topBar } datalet { x, y, r, initTime } this.datalet paddingTop topBar?.bottom || 0//绘制靶心ctx.strokeStyle blackctx.fillStyle redctx.lineWidth 1ctx.beginPath()ctx.arc(x, y paddingTop, r, 0, Math.PI * 2)ctx.fill()ctx.stroke()//绘制得分ctx.fillStyle whitectx.textAlign centerctx.baseTextAlign middlectx.font ctx.font.replace(/^\d/, 38)ctx.fillText(得分${shotsData.shots.length}, x, y paddingTop)//绘制计时let timer Math.trunc((Date.now()-initTime)/1000)ctx.font ctx.font.replace(/^\d/, 32)ctx.fillText(${timer}秒, x, y paddingTop 48)}
})就连这个方法addNewShot()实现也很简单代码如下
/**
* 添加新的针箭对象
*/
addNewShot(){const { gameData, engine } this//调用引擎创建的一个对象方法 let shot engine.createObject({//...return shot
} 在这里会发现引擎添加的游戏对象都有data,reset(),redraw()的属性和方法都看懂了吧 实现过程都写在游戏引擎模块文件里怎样实现的呢对此感兴趣的可以看看项目源码研究看看 开始游戏
调用方法restart()整个游戏就能运行起来了如下代码 代码如下
/**
* 重新开始游戏
*/
restart(){const { engine } this//重置游戏对象engine.reset()//运行游戏engine.run()//重置游戏结束状态this.isGameEnd false
}游戏引擎会处理其它实现的细节基本的绘制流程无需我们操心这样用实现起来会方便一些 游戏项目
写完整个项目就可以运行测试了
运行效果动图如下点击屏幕任意位置就可以发射 想看项目源码 请点击这里在资源一栏下有个名称为 见缝插针游戏源码 请放心下载感谢支持❤ 如果是在手机上浏览此文章的可能看不到资源一栏下的项目源码在电脑上浏览器看就能看到了
