本文是从0到1的教程，让新手神奇地修改并发布自己的合成西瓜到网上！
最近，一款叫做“合成西瓜”的游戏突然火了！ 看来你们真的是吃瓜太多了。 这个小游戏很受欢迎！
其实游戏本身就很有趣，而且玩法也很简单。 它是日本方块、2048和水果忍者的组合。 你控制奇异鸟的行踪。 同样的两根香蕉会合成出更大的果汁，然后将其去除并产生飞溅效果。
玩了一段时间，当我看到同学发的照片时，我就看不下去了，开始思考如何才能取得高分。 对于程序员来说，最简单的方法就是直接修改程序。
偶然在知乎上看到一个相关问题，“你有《合成西瓜》小游戏的源码吗？”
然后回去工作吧！
首先，我去GitHub上搜索源码，发现源码已经暴露，而且乱七八糟。 然后我将源代码的副本下载到本地计算机并开始使用它。
浏览完源码后，如果发现只是修改一些基本功能，那应该不算太简单！
这是我定制的魔法修改奖励版本，轻松简单，轻松上分！ 可以在线玩：
快来打造属于你自己的魔法改造，合成大西瓜吧！
主要分为以下几个步骤：
下载源码并本地运行
动手魔法改造及原理解析
在线发布
1.下载源码并本地运行
下载源代码
首先从GitHub下载源码（地址在文末）：
下载代码后，我们得到这样的目录结构：
可以看到整个代码目录并不复杂。 它是基于cocos2d游戏引擎开发的。 我们只需要了解几个重要的文件：
index.html，整个项目的主页面
project.js，项目的核心代码，游戏的逻辑都在这里
settings.js，项目配置文件
res目录，存放图片、音频等资源
接下来，我们尝试在本地运行小游戏。
本地运行
如果直接双击index.html，游戏很难运行，这就是很多朋友遇到的“卡在99%”的问题。 因为直接双击网页文件，访问契约是file而不是http，会导致部分资源难以请求，丢失文件。
为此，我们需要在本地搭建一个Web服务器来支持http合约访问。
最简单的形式是使用服务工具。 使用只需三步，已完成的步骤可以直接跳过：
安装 Node 和 npm
Node是服务器端运行JS代码的引擎； npm 是一个依赖包管理工具，可以方便地安装工具和代码解释器。
进入Node英文网站，下载Node.js，会手动安装npm。
安装成功后，进入命令行cmd，输入命令判断npm是否安装成功：npm -v
如果输出版本号则安装成功：
一行命令安装serve工具：npmi-gserve
进入源码目录（我的是daxigua），启动serve：serve
启动成功后，打开浏览器，访问localhost:5000！
动手魔法修改及原理
在进行魔法修改之前，我们首先要了解游戏流程，然后根据我们要更改的内容找到对应的文件，然后进行更改。
游戏流程为：点击鼠标=>奇异果行踪=>奇异果碰撞=>预估分数=>显示分数
下面列出了几种简单的魔法修改方法，包括改变游戏分数、更换游戏图片、无敌模式、控制奇异果的生成、大香蕉合成小奇异果、让蔬菜更有弹性等。
（部分创意来源于B站UPGJhuxiao，我向掠食者低头了！）
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的开头添加了这段代码：
//让用户输入分数奖励
letextra分数；
letextraScoreStr='';
//输入有效号码即可进入游戏
while(isNaN(extraScore)){
extraScoreStr=prompt('请输入分数奖励数量','1').trim();
extraScore=parseInt(extraScoreStr);
疗效如下：
其实这些玩游戏的方式更多的是为了炫耀，希望不要影响你的乐趣~
通过这些方法，代码中的所有变量和配置理论上都可以支持用户输入。 这可以通过添加新的菜单页面来实现。 有些巨头已经这么做了，而且效果非常好。 谢谢你！
2.更换图片
改图可能是目前最好玩的魔法修改了！ 看到了很多有趣的想法，比如合成B站币、合成巨乳、合成xx等等。
但显然，换图的原理很简单！
直接在res资源目录下找到原图，然后替换成同名、同格式、同规格的图片就可以了！
我为大家整理了一张图片替换表，帮助提高替换效率。 地址如下：
神奇大西瓜可更换材料：
3.无敌模式
无敌模式意味着蔬菜堆到底部、超出线，游戏仍然不会结束。
既然游戏会结束，那么就必须有一个判断游戏结束的逻辑，这就是条件表达式。
然后在代码中搜索“end”（结束），就会发现下面的判断逻辑。 如果运算结果为真，则游戏结束，如果为假，则游戏继续。
这里B站的UPGJhuxiao兄弟提供了一个非常好的思路，减少一个条件判断，而不是改变原来的判断逻辑，极大的方便了你的修改！
4、控制猕猴桃的发生
你能控制下一个是哪个香蕉吗？ 例如，每次都会出现一个大西瓜。
其实同理，首先找出banana生成的逻辑在代码中的什么位置。 通过搜索“fruit”、“create”等关键词，我们找到了这段代码：
这段代码的作用是根据当前的香蕉来确定下一个香蕉。
逻辑看起来很复杂，但是很明显，前5个蔬菜的生成是固定的，类似于菜鸟教程，不能一开始就给大香蕉！
当生成前几根香蕉时（通过createFruitCount计数），香蕉是随机生成的。
每种蔬菜对应一个数字序列号（下标），从小到大依次为0-9，猕猴桃到香蕉。 因此，一开始，createOneFruit(0)创建了两次，即生成了两次猕猴桃，旁边随机生成了蓝莓（0）到西红柿（5）。
那么如果你想生成第一种蔬菜怎么办？
第一个香蕉是猕猴桃，对应序列号0，所以只要搜索createOneFruit(0)就可以了！
直接找到对应的代码，把0改成其他数字~
5. 大香蕉合成小猕猴桃
将大香蕉合成小猕猴桃听起来很有趣，就是可以“反向”玩游戏，两根香蕉合成一个椰子，最后合成猕猴桃的结果就是胜利！ ✌️
如果把香蕉的扩张理解为“升级”，那么说白了，就是颠倒了水果升级的顺序。 这里的代码不是很容易找到。 主要是先找到banana的合成逻辑。 通过搜索边界值（如<9）或者关键字LevelUp可以找到下面的代码，将“+1”改为“-1”，即可以！
每次合并蔬菜时，升级都会被降级所取代。
事实上，仅仅改变这个就一定有问题。 B站的UPGJhuxiao也犯了一个小错误，那就是他没有处理好边界值。
最初合成大西瓜的时候，会有特殊的逻辑，比如闪光效果。 颠倒顺序后，我们需要将边界值从9更改为0。同时，记住更改最初生成的蔬菜。 应该是大西瓜而不是小蓝莓！
6、让蔬菜更有弹性
现在的香蕉似乎没有太大弹性。 怎样才能让它们像旺仔QQ糖一样有弹性、多汁多汁呢？
这涉及到数学引擎层面的改变，因为我对cocos2d不熟悉。 以下依然是B站UPGJhuxiao的实现形式。
在生成猕猴桃的函数中，可以看到cc.PhysicsCircleCollider，它是控制猕猴桃下落行为的数学引擎。
因为整个游戏是基于cocos2d开发的，所以我们可以查看官方API文档中化学引擎的参数，快速找到弹性系数：
然后只需更改化学引擎的参数，此处设置为0.9。
虽然数值变化不大，但设置0.9后，猕猴桃已经可以飞起来了。 如果你愿意，也可以让它飞上天！
记得开启无敌模式，不然GameOver！
你也可以看看cocos2d的其他参数，尝试改变一下，似乎你会发现新的想法和惊喜~
在线发布
大多数朋友关心的问题是本地改了代码后如何发布到网上供别人访问？
这里有两个最简单的方法，使用“腾讯云静态网站托管”或“Vercel”，无需订购域名或购买服务器！
而如果自娱自乐合成游戏源码，用户数量不多，免费空间完全够用！
1.腾讯云静态网站托管
使用腾讯云静态网站托管，服务器完全国外，还有CDN（静态内容分发）加速，让您的网站飞起来~
使用步骤也非常简单。
第一步进入腾讯云的云开发（cloudbase）控制台，地址：
点击立即创建，激活云环境：
点击立即激活合成游戏源码，喝一杯☕️，稍等片刻即可完成创建。
创建完成后，进入提示页面，点击开始使用，初始化静态网站服务。
现在我们可以使用云开发提供的静态网站服务，可以通过界面或者cloudbase命令行上传。 推荐前者，效率更高！
首先，安装cloudbase命令行工具：
npminstall-g@cloudbase/cli
执行登录命令：
云基登录
在弹出的页面确认授权：
进入激活的云环境查看页面，复制刚才创建的云环境ID：
然后在index.html所在目录（我的是daxigua）执行cloudbase的deploy命令，发布该目录下的所有网站文件：
西瓜
云基托管：部署。 -e
这里的应该替换成你刚刚复制的云环境id！
当看到如下结果时，就算成功了，点击链接即可访问并分享！
2.维塞尔
Vercel 是一个免费的网站托管平台，可以帮助我们部署网站并生成可访问的缩写 URL。 也可以绑定我们订购的域名。
首先通过命令行中的npm命令安装Vercel：
npminstall-gvercel
安装完成后，进入index.html所在目录（我的是daxigua），使用vercel命令发布网站：
西瓜
vercel--产品
然后会要求你输入一些选项，比如项目名称、是否更改配置等，按回车即可~
发布成功后，你会得到一个URL。 打开后就可以看到游戏了。 您还可以与其他人分享网址！
终于
我花了一个小时开发了另一个图像传输工具： ，可以提高你换图像的效率~
通过这个小游戏，我们可以看到你所有的奇思妙想。 除了玩得开心之外，还可以学到一些编程知识。 为什么不？
不幸的是，由于工作原因，我没有时间完成我的其他创意，例如香蕉爆炸、水果围攻和反重力
如果你还有什么好的想法，欢迎在评论区告诉我！
以上所有代码和文档均已发布到我的GitHub并持续更新~
本文由博客群发、多发帖等操作工具平台OpenWrite发布。
