开源了！从 0 到 1 实现“合成大西瓜”

转自：shymeanwww.shymean.com/article/使用cocos实现一个合成大西瓜

最近微博上曝出了很多瓜，"合成大西瓜"这个游戏也很火热，玩了一阵还挺有意思的。研究了一下原理，发现目前流传的版本都是魔改编译后的版本，代码经过压缩不具备可读性，因此决定自己照着实现一个。

本项目主要用作 cocos creator 练手使用，所有美术素材和音频材料均来源于 www.wesane.com/game/654/感谢原作者，向每一位游戏开发者致敬！

本文所有代码及素材都放在 Github上： https://github.com/tangxiangmin/cocos-big-watermelon

也可以通过在线预览地址体验：https://web-game-9gh6nrus14fec37e-1252170212.tcloudbaseapp.com/

微信无法点击外链，请给我们公号发送大西瓜获取入口

游戏逻辑

整个游戏逻辑比较简单，结合了俄罗斯方块与消除游戏的核心玩法

• 在生成一个水果
• 点击屏幕，水果移动到对应x轴位置并自由下落
• 每个水果会与其他水果发生碰撞,两个相同的水果碰撞时会发生合并，升级成更高一级的水果

水果共有 11 种类型，

游戏目标是合成最高级的水果：大西瓜！当堆积的水果超过顶部红线时则游戏结束整理出需要实现的核心逻辑

• 生成水果
• 水果下落与碰撞
• 水果消除动画效果及升级逻辑

预备工作

cocos creator基本概念

整个项目使用cocos creator v2.4.3实现，建议初次了解的同学可以先过一下官方文档，本文不会过多介绍creator的使用（主要是我也不太熟练hah）官方文档链接：https://docs.cocos.com/creator/2.3/manual/zh/

游戏素材

首先需要准备美术资源，本位所有美术素材和音频材料均来源于 www.wesane.com/game/654/。首先访问游戏网站，打开network面板，可以看见游戏依赖的所有美术资源，我们下载自己所需的文件即可。

所需的图片资源包括

• 11张水果贴图

• 每种水果合成效果贴图，均包含

  • 一张果粒图片
  • 一张圆形水珠图片
  • 一张爆炸贴图

• 两个西瓜合成时有灯光和撒花的效果，时间有限暂不实现

音频文件同理，可以在Filter栏选择.mp3后缀的请求快速筛选对应资源。

• 水果消除时的爆炸声和水声

创建游戏场景和背景

打开cocos creator，新建一个项目（也可以直接导入从github下载的项目源码）。然后记得将刚才下载的素材资源拖拽到右下角的资源管理器中。

创建scene和背景节点

项目初始化之后，在左下角资源管理器新建一个游戏Scene，取名game作为游戏主场景。

创建完毕后就可以在资源管理器的assets中看见刚才创建的名为game的scene。选择game场景，在左上角的层级管理器中可以看见场景的Canvas画布根节点，cocos默认画布是横屏的960*640，可以选择根节点然后再右侧属性检查器中调整宽高为640*960

接下来创建背景层，我们在Canvas节点下面新建一个background节点，由于整个背景是纯色#FBE79D的，因此使用一个单色Sprite填充即可

同样将background节点宽高调整为整个画布的大小，由于默认锚点均为0.5*0.5，此时整个画布会被完全填充。现在整个游戏场景大概是这个样子的

接下来设计游戏的逻辑脚本部分

场景脚本组件

在assets目录下新建一个js脚本，按照惯例命令成Game.js，creator会生成一个带基础cc.Class的模板文件

先将脚本组件与节点关联起来，选择Canvas根节点，在右侧属性检查器中添加组件，然后选择刚才创建的这个Game组件

然后编写具体的代码逻辑，打开Game.js文件（建议使用vscode或者webstrom打开整个项目的根目录进行编辑）里面的初始代码大概长这样

// Game.js  
cc.Class({  
    e