学习飞刀小游戏案例（cocos creator）

首先，我们先进行布局，搭建好靶点与小刀节点，小刀位置（0，-300），靶点位置（0，300），小刀生成预制体，一会需要用到。

【截图】

1、在onLoad（）中进行屏幕点击事件的注册与一些参数的初始化

onLoad() {this.canThrow = true //是否可以发刀this.targetNode.zIndex = 1 // 设置靶点层级this.targetRotation = 3 //靶点的转动速度this.knifeNodeArr = [] // 存放小刀数组this.node.on('touchstart', this.throwKnife, this)
},

2、发射小刀函数。这里使用缓动系统（cc.tween）进行小刀位置的移动，在call回调中生成小刀预制体，小刀预制体留在原小刀当前位置并添加进小刀数组，而原小刀回到初始位置

// 发射飞刀函数
throwKnife() {if (this.canThrow) {this.canThrow = falsecc.tween(this.knifeNode).to(0.15, {position: cc.v2(this.knifeNode.x, this.targetNode.y - this.targetNode.width / 2)}).call(() => {let knifeNode = cc.instantiate(this.knifePrefab)knifeNode.setPosition(this.knifeNode.position)this.node.addChild(knifeNode)this.knifeNode.setPosition(cc.v2(0, -300))this.knifeNodeArr.push(knifeNode)this.canThrow = true}).start()}},

3、在update（）中设置靶点与小刀数组内的小刀转动

update(dt) {// 靶点转动this.targetNode.angle = (this.targetNode.angle + this.targetRotation) % 360// this.knifeNodeArr[]内的小刀跟随靶点转动，角度、位置跟随。for (let knifeNode of this.knifeNodeArr) {knifeNode.angle = (knifeNode.angle + this.targetRotation) % 360// 角度转弧度公式，Math.cos()/Math.sin()需要传进弧度，减去90是因为小刀初始位置在下方let rad = Math.PI * (knifeNode.angle - 90) / 180let r = this.targetNode.width / 2knifeNode.x = this.targetNode.x + r * Math.cos(rad)knifeNode.y = this.targetNode.y + r * Math.sin(rad)}},

4、添加小刀撞击逻辑，在小刀缓动系统call()回调中进行判断，所以call()回调中改成这样

.call(() => {let isHit = false // 是否撞击let gap = 15 // 撞击最小角度// 判断是否撞击了for (let knifeNode of this.knifeNodeArr) {if (Math.abs(knifeNode.angle) < gap || (360 - Math.abs(knifeNode.angle)) < gap) {isHit = trueconsole.log('isHit')break}}if (isHit) {// 撞击了，小刀弹出屏幕外，重新加载场景cc.tween(this.knifeNode).to(0.25, {position: cc.v2(this.knifeNode.x, -cc.winSize.height), angle: 30}).call(() => {cc.director.loadScene('game')}).start()} else {// 没有撞击，执行原本生成小刀预制体的逻辑let knifeNode = cc.instantiate(this.knifePrefab)knifeNode.setPosition(this.knifeNode.position)this.node.addChild(knifeNode)this.knifeNode.setPosition(cc.v2(0, -300))this.knifeNodeArr.push(knifeNode)this.canThrow = true}
})

5、增加游戏难度。靶点变速效果，只需要对靶点速度做文章即可

// 靶点变速函数
changeSpeed() {let dir = Math.random() > 0.5 ? 1 : -1let speed = 1 + Math.random() * 4this.targetRotation = speed * dir
},// 在onLoad（）中设置定时器调用
setInterval(() => {this.changeSpeed()
}, 2000)

至此，简单的飞刀小游戏就做好了，后续自己可以设置一些关卡，游戏开始时就有一些小刀存在靶点上增加游戏难度什么的。

学习飞刀小游戏案例（cocos creator）相关推荐

学习跃动小球小游戏（cocos creator）
学习跃动小球小游戏玩法:小球会不断的上下跳动,点击屏幕小球会加速掉落,下面的白色跳板一直在移动,小球需要准确的跳到跳板上才能得分. 效果图 [截图] ball脚本小球碰撞回调 block脚本初始 ...
学习完美方块小游戏（cocos creator）
学习完美方块小游戏通过学习完美方块小游戏,了解缓动系统(cc.tween)的简单运用 [游戏效果图] [游戏玩法]:玩家通过长按屏幕,使方块放大到一定的大小后下落,如果被基座接住算是过关,掉落或者被 ...
微信小游戏实战--cocos creator实现wordle游戏（五）
到目前为止我们已经实现了整个游戏的界面以及"空格"和键盘按钮的动画,接下来完成游戏的基础玩法流程. 完整代码一.初始化游戏由于在游戏中"空格"的背景和Lab ...
从投篮小游戏入门 Cocos Creator 3D 开发
一枚小工,多年 Cocos2d-x 和 Cocos Creator 游戏开发工程师.现阶段,主要在 Cocos Creator 环境下用 JS 和 TS 进行项目开发.19 年 7 月份开始,想和其 ...
拖动小游戏html,Cocos Creator 入门篇-拖拽小游戏（一）
前言 Cocos Creator的官方文档还是非常友好的,有中英文两个版本. [强烈建议] 初学者先把官方文档看一遍.里面还包含了很多demo. 今天主要先带大家简单熟悉一下Cocos Creator ...
微信小游戏实战--cocos creator实现wordle游戏（六）
就wordle游戏本身而言它已经完成了,但我并不打算就到此为止."麻雀虽小五脏俱全",从"完整"的角度来看,它还缺少一些"必不可少"的功能: ...
微信小游戏实战--cocos creator实现wordle游戏（一）
前言前段时间赋闲在家,整理电脑上的资料时才发现从业这么多年都是在给公司打工,没为自己写过点什么,所以决定为自己写一个完整的"产品".同时,为了检验一下自己的学习能力,选择了从未接 ...
微信小游戏：Cocos Creator《守卫竹林》线上游戏源码资源分享
<守卫竹林>源码资源分享 <守卫竹林>的云开发方式与文章微信小游戏:云开发(三)云开发和CocosCreator解决方案介绍的相同,可以作为参考 <守卫竹林>下载链 ...
视频教程-Layabox3D游戏开发入门-微信3D小游戏案例 -微信开发
Layabox3D游戏开发入门-微信3D小游戏案例有多年Unity程序开发经验,有策划和美术设计的经验.愿意在csdn这个平台和大家一起分享! 金龙 ¥29.00 立即订阅扫码下载「CSDN程序员 ...

学习飞刀小游戏案例（cocos creator）

学习飞刀小游戏案例（cocos creator）

学习飞刀小游戏案例（cocos creator）相关推荐

最新文章

热门文章