Cocos Creator | 挤水果小游戏实现 ( 二 )

点击上方蓝字关注我

预览效果

玩法介绍

■ 具体玩法，可以搜微信小游戏【挤水果】，只实现了部分功能。游戏开始后，点击屏幕，出现标尺，松开后，水果上的水滴滴落到杯子中，单局中没有落入杯子中的水滴数不超过 3 完成游戏，表示游戏成功，否则失败。这一期讲解 4 部分的实现：

1. 新手引导显示控制；

2. 水滴落入杯子水位变化；

3. 得分控制；

4. 出界控制。

新手引导

■ 新手引导独立一个节点，所有新手引导需要显示的内容，都放在这个根节点上，根节点上挂在新手引导控制脚本 Newer ，脚本内监听触摸事件，点击开始，直接隐藏整个新手引导节点即可。

滴入水位变化

■ 游戏开始前，已经规定，水杯总共滴入多少水滴，水位能满，中途滴入水滴后，动态更新水位，如下图，我设置的总共 5 滴水滴入，水杯装满水，途中是已经滴入了4滴水后的效果。

■ 水杯内水位的变化，分两部分，一部分显示水，一部分显示杯子。显示水的部分，使用遮罩图控制显示，水杯就使用一张精灵显示，给水杯左、右、下，设置好水杯的物理碰撞事件，具体方法，第一篇有讲。下图就是水位部分，遮罩之前的效果。

■ 水位的变化，就是通过修改水位图的高度就行，初始时，0 水位高度就是 0，假设最大高度是 300，按照总共 5 滴水计算，第 n 滴水入杯以后，水位的高度就是 n / 5 * 300，水位的图片，锚点设置在（0.5, 0）。

■ 游戏过程中，水滴滴落到杯子底部或者滴落到水面，都视作成功滴入，所以需要给变化的水位，添加物理碰撞区域，还需要根据水位的变化，动态的修改物理碰撞区域的大小和位置，要注意的是，修改成功以后，调用 apply 方法才能生效。

得分控制

■ 上一篇讲到，水滴通过不同区域进入水杯，得到不同的分数，白色、黄色、蓝色依次得分是 3、2、1 分，只需要在三个不同区域添加物品碰撞的触发器即可，监听触发器的开始事件，给 3、2、1 区域，分别设置不同的 tag ，触发以后，根据 tag 判断，是经由哪个区域进入到水杯的。

出界控制

■ 出界的控制，类似得分控制，在屏幕的左、右、下方，设置好物理边界的触发器，设置不同 tag ，以区分标尺的触发器，我这里 tag 设置成 0，也就是表示得 0 分。出界以后，通知到游戏界面，更新剩余的水滴数量，就是下图左上角 3 个水滴即可实现剩余生命显示的控制。

往期精选

精品游戏大炮英雄附带代码！

精品动物同化附代码！

完整代码左右跳！

陀螺仪重力球代码奉上！

100关推箱子代码免费获取！

拼手速的游戏代码！

打地鼠有代码！

3D篮球投篮附代码！

3D足球射门附代码！

如何使用3D素材试玩3D！

2D游戏忍者跳跃代码~

2D游戏沙滩足球代码~

Cocos Creator | 挤水果小游戏实现 ( 二 )相关推荐

Cocos Creator | 挤水果小游戏实现 ( 一 )
点击上方蓝字关注我预览效果玩法介绍 ■ 具体玩法,可以搜微信小游戏[挤水果],只实现了部分功能.游戏开始后,点击屏幕,出现标尺,松开后,水果上的水滴滴落到杯子中.这一期讲解三部分的实现: 1. 标 ...
Cocos Creator发布微信小游戏包内体积过大问题
1.初识设置微信开发工具和js编辑器 3.5.2 :Cocos Creator perferences 2.Cocos Creator发布微信小游戏包内体积过大问题 2.1 已不可取:搭建本机服务器 ...
cocos creator开发微信小游戏(五)贪吃蛇大作战
目录小游戏介绍小游戏cocos creator场景图小游戏部分JS代码开发中碰到的问题工程及说明小游戏介绍贪吃蛇小游戏:贪吃蛇试玩(首次加载比较慢),类似贪吃蛇大作战的小游戏.当玩家的蛇 ...
Cocos Creator之微信小游戏的游戏圈
Cocos Creator之微信小游戏的游戏圈 1.官方文档游戏圈使用指南 · 小游戏: 2.需要将游戏圈放到指定地方(比如下图,坐标为x:160,y:850,因为游戏圈图标的锚点在左上角,所在层的锚 ...
Cocos creator导出微信小游戏，转发给朋友，分享到朋友圈灰色不能点击
Cocos creator导出微信小游戏, 转发给朋友,分享到朋友圈灰色不能点击解决方法如下: onLoad(){ wx.showShareMenu({withShareTicket: true, ...
cocos creator 接QQ小游戏 BannerAd 广告sdk
cocos creator 接QQ小游戏 BannerAd 广告sdk 开发者工具 0.1.26 版本开始支持调试广告组件首先,你需要初始化广告,判断什么的你自己加,我就不写很详细 //方法外的全局 ...
cocos creator 接QQ小游戏小程序RewardedVideoAd 激励视频广告sdk
cocos creator 接QQ小游戏小程序RewardedVideoAd 激励视频广告sdk 开发者工具 0.1.26 版本开始支持调试广告组件话说你们看完为什么不留言点赞? 首先,你需要初始化 ...
Cocos Creator 微信创意小游戏《蛇它虫》团队专访：玩法画面均是新意
<蛇它虫>是由杭州电魂网络投资的文艺复兴工作室自主研发的一款益智解谜小游戏,在今年 1 月 9 日的微信公开课上,与其他五款小游戏一起,作为首批微信创意小游戏,在公开课上的小游戏环节亮相. ...
Cocos Creator 写的小游戏
# 超能陆战队注:美术资源来源于网络作者: 是烧麦啊未生畏死游戏类型:动作类 * 所用到的 IDE : Cocos Creator v2.0.10,主要用于视觉还原.主逻辑开发.跨端调试和编译 ...

Cocos Creator | 挤水果小游戏实现 ( 二 )

Cocos Creator | 挤水果小游戏实现 ( 二 )相关推荐

最新文章

热门文章