魔改和上线你的合成大西瓜，最全教程！

本文是从 0 到 1 的教程，让小白也可以魔改和上线发布属于你的合成大西瓜！

PS. 最新上线了 大西瓜改图工具，效率提高十倍！

最近，一款名为『 合成大西瓜 』的游戏忽然火了！看来真的是你们吃瓜吃太多了，这个小游戏深抓人心！

固然，游戏自己很是有趣，玩法简单，就是俄罗斯方块、204八、水果忍者的结合，控制水果的下落，相同的两个水果会合成更大的水果，而后消除，并发出溅射效果。

玩了一会后，看到朋友圈的晒图，我也安耐不住了，开始思考怎么拿高分。对于程序员来讲，最简单的方式就是直接改造程序。

正好在知乎上偶然刷到了一个相关问题，“ 小游戏《合成大西瓜》源代码有吗？”

那就开工吧！

首先去 GitHub 搜索源代码，发现源码已经被曝光的稀巴烂了，而后就下载了一份源代码到本地，摩拳擦掌。

浏览源码后，发现只是魔改一些基础功能的话，不要太简单！

这是我魔改的自定义加分版，轻轻松松千万分！可在线玩：dadaxigua.liyupi.com

下面一块儿来打造本身的魔改合成大西瓜吧！

---

主要分为以下几个步骤：

1. 下载源代码及本地运行
2. 动手魔改及原理分析
3. 发布上线

1. 下载源码，本地运行

下载源码

首先从 GitHub 上下载源代码（地址在文末）：

下载代码后，咱们获得这样的目录结构：

能够看到整个代码目录并不复杂，是基于 cocos2d 游戏引擎开发，咱们只须要了解几个重要文件：

1. index.html，整个项目的主页面
2. project.js，项目核心代码，游戏逻辑都在这里
3. settings.js，项目配置文件
4. res 目录，存放图片和音频等资源

下面咱们先试着在本地运行小游戏。

本地运行

若是直接双击 index.html，是没法运行游戏的，也就是不少同窗遇到的 “卡在 99%” 问题。由于直接双击网页文件，访问协议是 file，而不是 http，会致使一些资源没法请求，缺失文件。

所以，咱们须要在本地搭建一个 web 服务器，以支持 http 协议访问。

最简单的方式就是使用 serve 工具。只需三步，就能使用，已完成的步骤能够直接跳过：

1. 安装 Node 和 npm

   Node 是服务器端运行 Js 代码的引擎；npm 则是依赖包管理工具，能够轻松安装工具和代码类库。

   进入 Node 中文网 nodejs.cn/download/，下… Node.js，会自动安装 npm。

   安装成功后，进入命令行 cmd，输入命令来判断 npm 是否安装成功：

   npm -v
   复制代码

   输出版本号，则安装成功：

2. 一行命令安装 serve 工具：

   npm i -g serve
   复制代码

3. 进入源代码目录（我这里是 daxigua），启动 serve：

   serve
   复制代码

   启动成功后，打开浏览器访问 localhost:5000 便可！

动手魔改及原理

在魔改前，咱们要先认清游戏过程，而后根据本身要修改的内容去找对应的文件，再作修改。

游戏的过程是：点击鼠标 => 水果下落 => 水果碰撞 => 计算分数 => 展现分数

下面列举几种简单的魔改方式，包括改游戏分数、替换游戏图片、无敌模式、控制水果生成、由大水果合成小水果、让水果更 Q 弹等。

（部分创意源于 B 站 UP GJhuxiao，给大佬跪了！）

1. 改分数

拿到源代码后，怎么最快的定位要修改哪里呢？

经过分析游戏过程，发现改分数有两种实现方式，在计算分数阶段修改，或者直接修改最后要展现的分数。

再简单浏览下项目里的各个文件，发现 project.js 就是影响游戏逻辑的核心文件。

那么很简单，直接在 project.js 中搜索代码。分数对应的英文单词是 "score" ，添加分数的英文单词是 "addScore"，搜搜看能不能找到线索。

果真，很快就发现了，分数是由 default.score 变量做为统计值的，有这么一行代码：

a.default.score += this.fruitNumber + 1
复制代码

显然，"+1" 是参与分数计算的，那我只要把基数 "1" 改成本身定义的数字便可~

// extraScore 能够本身改成任意值
a.default.score += this.fruitNumber + extraScore
复制代码

固然也能够在进入游戏前让用户本身输入！我在 project.js 开头加入了这样一段代码：

// 让用户输入分数加成
let extraScore;
let extraScoreStr = '';

// 输入有效数字才进入游戏
while (isNaN(extraScore)) {
  extraScoreStr = prompt('请输入分数加成数字', '1').trim();
  extraScore = parseInt(extraScoreStr);
}
复制代码

效果以下：

固然，这种方式玩游戏更多地是晒个圈，但愿别影响你们的乐趣~

经过这种方式，代码中的全部变量和配置，理论上均可以支持让用户来输入。能够经过新增一个菜单页面来实现，有大佬已经作出来了，效果很好，瑞思拜！

2. 改图片

改图片应该是目前乐趣最大的魔改了吧！我看到了不少有趣的创意，合成 B 站硬币、合成大胸、合成 xx 等等。

但其实，改图片的原理很是简单！

直接在 res 资源目录下，找到原有的图片，而后用相同名称、相同格式、相同尺寸的图片进行替换便可！

我帮你们整理了图片替换表哦，帮助提高替换效率，地址以下：

魔改大西瓜可替换的素材：docs.qq.com/sheet/DS0d2…

3. 无敌模式

无敌模式是指水果堆积到顶部、超出线条，游戏依然不会结束。

既然游戏会结束，那么一定有一个判断游戏结束的逻辑，也就是条件表达式。

那就在代码中搜索 "end"（结束），果真找到了下面这串判断逻辑，运算结果为 true 则游戏结束，为 false 则继续。

这里 B 站 UP GJhuxiao 哥提供了很是好的思路，增长一个条件判断，而不是修改原有判断逻辑，极大地方便你们修改！

4. 控制水果生成

能不能控制下一个水果是什么呢？好比每次都出现大西瓜。

固然，一样的思路，先找到水果生成的逻辑在代码的哪一个位置。经过搜索 "fruit"、"create" 等关键字，定位到了这段代码：

这段代码的功能是，根据当前的水果决定下一个水果。

逻辑看起来很复杂，但其实就是，前 5 个水果的生成是固定的，相似新手教程，总不能刚开始就给大水果吧！

当生成第几个水果（用 createFruitCount 统计）以后，开始随机生成水果。

每个水果都对应一个数字序号（下标），由小到大依次是 0-9，葡萄到西瓜。所以刚开始是两次 createOneFruit(0)，即生成两次葡萄，后面就是随机生成葡萄（0）到西红柿（5）。

那若是想要生成第一个水果，怎么办？

第一个水果是葡萄，对应序号 0，那直接搜索 createOneFruit(0) 不就成了！

直接找到对应代码，能够把 0 修改为其余数字~

5. 大水果合成小水果

大水果合成小水果听起来颇有趣，便可以把游戏 “倒着玩”，两个西瓜合成椰子，最终合成葡萄即胜利！✌️

若是把水果膨胀理解为 “升级”，那说白了，就是反转下水果的升级顺序。这里的代码不是很好定位，主要是先找到水果的合成逻辑，能够经过搜索边界值（好比 < 9）、或者关键词 LevelUp 的方式找到下面代码，将 "+1" 变为 "-1" 便可！

每次合并水果，升级改成降级。

固然，只改这里确定是有问题的，B 站的 UP GJhuxiao 也犯了一个小小小小的错误，就是没有处理边界值。

本来当合成大西瓜后，会有特殊逻辑，好比闪光特效。在顺序反转后，咱们要把边界值由 9 改成 0。同时记得修改一下初始生成的水果，应该是大西瓜而不是小葡萄啦！

6. 让水果更 Q 弹

如今的水果好像没什么弹性，怎么让它们像果味香浓、Q 弹多汁的旺仔 QQ 糖同样弹性十足呢？

这就涉及到物理引擎层面的修改，因为我本人对 cocos2d 不熟悉，如下依然是 B 站的 UP GJhuxiao 的实现方式。

在生成水果的函数中，能够看到 cc.PhysicsCircleCollider，就是控制水果下落行为的物理引擎。

因为整个游戏是基于 cocos2d 开发，咱们能够看看官方 API 文档中，该物理引擎有哪些参数，很快就找到了弹性系数：

而后去修改物理引擎的参数便可，此处设置为 0.9。

别看数值改动不大，设置 0.9 后，水果就已经能飞起来了。若是你乐意，想要让它一飞冲天也是能够的！

记得打开无敌模式，不然一下就 GameOver 了！

还能够看看 cocos2d 有什么其余的参数，试着修改一下，也许会发现新的创意和惊喜哦~

发布上线

最多同窗关心的问题，在本地修改好代码后，怎么发布到网上供其余人访问呢？

这里提供最简单的两种方法，使用『 腾讯云静态网站托管 』或『 Vercel 』，不须要购买域名、也不须要买服务器！

并且本身娱乐、用户量不大的话，免费空间彻底够用！

1. 腾讯云静态网站托管

使用腾讯云静态网站托管，服务器彻底在国内，还有 CDN（静态内容分发）加速，让你的网站飞起来~

使用步骤也很简单。

首先进入腾讯云的云开发 (cloudbase) 控制台，地址：cloud.tencent.com/product/wh：

点击当即建立，开通一个云环境：

点击当即开通，喝杯 ☕️，稍等片刻便可建立完成。

建立完成后，进入到提示页，点击开始使用，初始化静态网站服务。

如今咱们就可使用云开发提供的静态网站服务了，能够经过界面上传，也可使用 cloudbase 命令行上传。推荐后者，效率更高！

首先，安装 cloudbase 命令行工具：

npm install -g @cloudbase/cli
复制代码

执行登陆命令：

cloudbase login
复制代码

在弹出的页面确认受权：

进入到已开通的云环境查看页面，复制刚刚建立的云环境 id：

接着，在 index.html 所在目录中（个人是 daxigua），执行 cloudbase 的 deploy 命令将目录中的网站文件所有发布：

cd daxigua
cloudbase hosting:deploy . -e <EnvID>
复制代码

这里的 <EnvID> 要替换为刚刚复制的云环境 id！

看到以下结果，就算成功啦，点击连接便可访问和分享！

2. Vercel

Vercel 是免费网站托管平台，能够帮咱们部署网站，并生成可访问的简短网址，还可以和本身购买的域名进行绑定。

先在命令行经过 npm 命令安装 Vercel：

npm install -g vercel
复制代码

安装完成后，进入 index.html 所在目录（个人是 daxigua），使用 vercel 命令发布网站：

cd daxigua
vercel --prod
复制代码

而后会让你输入一些选项，好比项目名称、是否修改配置等，一路回车就能够了~

发布成功，会获得一个网址，打开就能够看到游戏啦，还能够把网址分享给别人！

最后

经过这个小游戏，咱们可以看到你们各类奇思妙想的创意，在乐趣以外，还能学习一些编程小知识，何乐而不为呢？

惋惜因为工做，我没有时间去完成本身的其余创意啦，好比水果爆炸、水果围城、反重力 😢

你们还有什么好的创意欢迎在评论区告诉我吧！

以上全部代码和文档都发布到了个人 GitHub 中

github.com/liyupi/daxi…