效果展示

## gif 帧率较低 实际体验效果更好

实现思路

1、中间一个节点 里面有两个node 分别放背景橘子node,存放刀的node
然后只旋转这个中间节点让刀和背景一块旋转就行了
2、碰撞检测给每一把刀放上碰撞检测
3、下边放一把假的刀 用来做动画执行，刀子到达位置 将假的刀放回原来的位置，将复制新的刀到中间存刀的节点
4、判断下一关 将中间节点存刀的node判断子节点数量
5、管卡难度
·匀速
·变速
·变速+变向
·时间限制

关键代码

   fire(event: any, data: any) {// 游戏结束 或者当前没有刀不能点击if (!this.gameStatus || this.knifeCount <= 0) {return}// 当前刀的数量减少this.knifeCount--;if (this.knife) {let p = this.knife.getPosition()p.x = 0;p.y = 0;if (this.knifeSize) {p.y += this.knifeSize.height / 2;}let that = this/*** 执行线性动画* 动画结束复制当前动画的刀到当前位置*/this.currentKnifeAnim = tween(this.knife).to(0.1, { position: p }, {easing: 'linear',onComplete: function (target?: object) {let node = instantiate(that.knife)if (node) {// 设置刀的位置 到初始位置that.knife?.setPosition(that.knifeX, that.knifeY, 0)// 执行橘子动画 向上弹that.orangeNode?.getComponent(AnimationComponent)?.play()let px = 0, py = 0, ox = 0, oy = 0;if (that.knifeSize) {// 设置刀插进去的位置py = that.knifeSize.height / 2 - that.orangeY;}/***  2D上的点围绕某另一个点旋转： If you rotate point (px, py) around point (ox, oy) by angle theta you’ll get:*  p'x = cos(theta) * (px-ox) - sin(theta) * (py-oy) + ox*  p'y = sin(theta) * (px-ox) + cos(theta) * (py-oy) + oy*/// 计算角度 要一直为下方 注意补角let temp = 360 - that.angle;let theta = Math.PI / 180 * templet x = Math.cos(theta) * (px - ox) - Math.sin(theta) * (py - oy) + oxlet y = Math.sin(theta) * (px - ox) + Math.cos(theta) * (py - oy) + oy// 设置新刀位置node.setPosition(x, y, 0)// 设置新刀角度node.setWorldRotationFromEuler(0, 0, temp)// 附加到虚拟转盘上node.parent = that.discNode}}}).start()}}

试玩地址（加载慢，自己服务器带宽低）

 https://www.intkilow.top/jfcz/

下载地址

关注微信公众号：
随疾风前行
回复：
cocos见缝插针游戏源码

开源不易，仅学习使用

cocos creator 3.0见缝插针（口红机）相关推荐

Cocos Creator下JavaScript实现口红机，附代码
原理转盘.发射的口红.转盘上的口红添加三个不同的碰撞体: 发射的口红和转盘,转盘上的口红和发射的口红碰撞体能发生碰撞: 发射的口红与转盘碰撞时,在指定(根据转盘旋转的角度)位置添加口红: 发射的口 ...
Cocos Creator 3.0 教程! 标志板！ Billboard !
用2D素材节省包体!节约性能! 前言标志板是什么呢? billboard 英文翻译为广告牌,标志板和广告牌肯定会有不可告人的联系! 广告牌的使命是什么?就是无论你在哪里,都要让你看到! 标志板也是这 ...
折纸效果！ Cocos Creator 3.0
效果折纸效果实现整体思路思路遵循以下几步初始化一个多边形. 折叠后分割成两个多边形. 如果需要继续分割,对场上的所有多边形进行折叠,折叠出新的多边形的层级正好与原来的相反. 整体思路所以, ...
Cocos Creator 3.0 入门 ! 2D 素材 3D 效果！
用 2D 素材实现 3D 效果! 前言好久没写教程笔记了,不知大伙是否想念教程干货了? 温馨提示:所有内容纯属个人瞎玩研究,如要上线项目,请自行评估~ oh 最近逛论坛,看到有一位小伙伴想实现下面这 ...
一文搞懂 Cocos Creator 3.0 坐标转换原理
一文搞懂 Cocos Creator 3.0 坐标转换原理屏幕坐标 UI 触点坐标 UI 多分辨率适配方案 UI 触点获取不同坐标之间的转换屏幕坐标与 3D 节点世界坐标互转 3D 节点之间的坐 ...
使用 cocos creator 3.0 制作抽奖小游戏
使用 cocos creator 3.0 制作抽奖小游戏描述一个抽奖小游戏demo, 点击抽奖按钮进行抽奖, 抽完奖后该结果置灰.下一次抽奖就会跳过已经抽过的奖项. 注意: 每次点击抽奖按钮 ...
Cocos Creator 2.0 正式版发布
我拟了不下10个标题,用来描述这个里程碑事件,但最后发现,还是这样简单的<Cocos Creator 2.0 正式版发布>最直接. 回头一看,时间过得真是太快了. 两年前,我和团队都顶着各 ...
Cocos Creator 2.0.1 正式发布
2.0.0 是一个经历了大量底层重构的全新版本,部分开发者在升级项目过程中遇到了一些恼人的问题,这些问题我们一一收集并尽全力解决,现在为大家带来 2.0.1 版本.这个版本除了大幅度提升稳定性和项目升 ...
cocos creator jsb2.0手动绑定过程
在打包原生包的时候js层想调用c++层,但是没有对应的实现需要自己扩展自己的jsb,官方有两种绑定方式:手动绑定和自动绑定,这里着重介绍手动绑定: 首先找到cocos creator自带的c++层的源 ...

cocos creator 3.0见缝插针（口红机）

cocos creator3.0 见缝插针

效果展示

实现思路

关键代码

试玩地址（加载慢，自己服务器带宽低）

下载地址

开源不易，仅学习使用

cocos creator 3.0见缝插针（口红机）相关推荐

最新文章

热门文章