游戏预览 

Cocos Creator | 开红包小游戏实现翻开效果,有代码!

 

游戏玩法 

▌游戏开始后,点击开抢,屏幕中会出现9个未开启的红包,点击任一红包,翻开随机金额的红包,直到翻开所有红包,游戏结束,可以照此继续下去。

 

Cocos Creator | 开红包小游戏实现翻开效果,有代码!    Cocos Creator | 开红包小游戏实现翻开效果,有代码!

 

游戏介绍 

▌游戏主要分 2 部分,游戏主逻辑 ( Game ) 和红包预制逻辑 ( Card ),游戏逻辑主要控制红包布局和点击后的逻辑处理 ( 包括红包动画的播放 ),红包预支逻辑主要控制红包的随机金额出现后,更换不同的纹理,逻辑并不复杂。

 

Cocos Creator | 开红包小游戏实现翻开效果,有代码!

 

游戏逻辑 

▌游戏逻辑主要是播放动画和控制红包的布局,分开两部分讲。

 

1. 翻开动画

借助 scaleTo 和 skewTo 模拟翻开效果。一开始红包是背面,x 轴方向先缩放到 0 ,然后红包翻开到正面,再把 x 轴缩放到 1,在变化的同时,为了有一点翻开的 3D 效果,沿着 y 轴倾斜,角度不大,就倾斜 5 度即可,可以根据自己的需要调整。

 

Cocos Creator | 开红包小游戏实现翻开效果,有代码!

 

2. 布局控制

从上到下,从左到右,分 3 行 3 列,摆放红包,每次游戏结束以后,清除之前的红包,重新布局一次。

 

Cocos Creator | 开红包小游戏实现翻开效果,有代码!

 

红包预制 

▌红包预制,添加 2 个精灵作为红包的正面和背面,未翻开时,显示背面,翻开以后显示正面,点击红包,记录可能出现的金额纹理,封装一个根据金额更换纹理的接口,在翻开红包以后,动态更新红包纹理。

 

Cocos Creator | 开红包小游戏实现翻开效果,有代码!

 

游戏结束判断 

▌这个可以根据需要修改,demo 内的是每次翻开动画结束以后,翻开红包数 +1,当翻开的总红包个数为9的时候,重新显示9个未翻开的红包,进行下次游戏,红包预制需要监听触摸事件,翻开过的红包,不能处理点击事件。

 

Cocos Creator | 开红包小游戏实现翻开效果,有代码!

 

获取代码 

▌需要代码,加扣群:764937885。

Cocos Creator | 开红包小游戏实现翻开效果,有代码!

相关文章: