关于html5:魔改和上线你的合成大西瓜最全教程

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

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

当然，游戏自身十分乏味，玩法简略，就是俄罗斯方块、2048、水果忍者的联合，管制水果的着落，雷同的两个水果会合成更大的水果，而后打消，并收回溅射成果。

玩了一会后，看到朋友圈的晒图，我也安耐不住了，开始思考怎么拿高分。对于程序员来说，最简略的形式就是间接革新程序。

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

那就动工吧！

首先去 GitHub 搜寻源代码，发现源码曾经被曝光的稀巴烂了，而后就下载了一份源代码到本地，跃跃欲试。

浏览源码后，发现只是魔改一些根底性能的话，不要太简略！

这是我魔改的自定义加分版，轻轻松松千万分！可在线玩：https://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 中文网 http://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 资源目录下，找到原有的图片，而后用 雷同名称、雷同格局、雷同尺寸 的图片进行替换即可！

我帮大家整顿了图片替换表哦，帮忙晋升替换效率，地址如下：

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

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) 控制台，地址：https://cloud.tencent.com/pro…：

点击立刻创立，开明一个云环境：

点击立刻开明，喝杯 ☕️，稍等片刻即可创立实现。

创立实现后，进入到提醒页，点击开始应用，初始化动态网站服务。

当初咱们就能够应用云开发提供的动态网站服务了，能够通过界面上传，也能够应用 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

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

公布胜利，会失去一个网址，关上就能够看到游戏啦，还能够把网址分享给他人！

最初

花 1 个小时又开发了一个传图工具：https://daxigua-tools.liyupi.com，能够进步大家批改图片的效率~

通过这个小游戏，咱们可能看到大家各种奇思妙想的创意，在乐趣之外，还能学习一些编程小常识，何乐而不为呢？

惋惜因为工作，我没有工夫去实现本人的其余创意啦，比方水果爆炸、水果围城、反重力 ????

大家还有什么好的创意欢送在评论区通知我吧！

以上所有代码和文档都公布到了我的 GitHub 中，且继续更新~

本文由博客群发一文多发等经营工具平台 OpenWrite 公布