前端项目:从0开始实现一个合成大西瓜

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

本项目主要用作cocos creator练手使用，所有美术素材和音频材料均来源于 www.wesane.com/game/654/。

感谢原作者，向每一位游戏开发者致敬！

本文所有代码及素材都放在github上面了，

https://github.com/tangxiangmin/cocos-big-watermelon

也可以通过在线预览地址体验

https://web-game-9gh6nrus14fec37e-1252170212.tcloudbaseapp.com/

“我自己是一名从事了6年web前端开发的老程序员（我的微信：webxxq），今年年初我花了一个月整理了一份最适合2021年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“web”即可领取）。

游戏逻辑

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

• 在生成一个水果

• 点击屏幕，水果移动到对应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，此时整个画布会被完全填充。

现在整个游戏场景大概是这个样子的

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

场景脚