魔改合成大西瓜，从源码到部署，步骤详细

现在有一款火爆全网的小游戏《合成大西瓜》，据官方数据显示，目前参与合成西瓜的游玩人次已经多达六千多万，可见广大网友已经不仅仅满足于在娱乐圈吃瓜了，现在更喜欢自己创造大西瓜，哈哈哈。

前一段时间看朋友圈里有好多人晒合成西瓜的高分截图，于是我索性就百度了各种资料，拷贝了一份合成大西瓜的游戏源码，探索一下如何能让这个游戏变得更加有趣（以及通过“技术手段”获得更高的分数）。

那就，开始吧！

一、下载源码以及运行环境搭建

项目源码github地址：https://github.com/ScottDemo/Synthetic-big-watermelon

下载ZIP压缩包，解压
通过Git方式将项目克隆到本地

本地运行

将下载好的项目用编辑软件打开，我们可以看到如下的目录结构

这个游戏是基于cocos2d 游戏引擎开发的，

index.html是主要的网页文件，
main.js是主启动文件，
res目录用来存放资源，
src目录存放游戏逻辑和配置，这里也是我们主要的修改位置。

但是如果我们直接双击index.html文件，是无法打开游戏的，因为直接双击网页文件，访问协议是 file，而不是 http，会导致一些资源无法请求，缺失文件。

因此，我们需要在本地搭建一个 web 服务器，以支持 http 协议访问。

安装node和npm

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

在Node官网http://nodejs.cn/download/，选择node安装包下载安装，npm会自动安装。

安装成功后打开cmd，查看node和npm是否安装成功。如图正确输出版本号即为安装成功：

接下来安装serve工具：

npm i -g serve

接下来进入项目目录，启动serve工具：

cd "项目目录位置"
serve

控制台会输出如下信息：

到这里我们的本地环境搭建完毕，项目已经可以在本地正常运行。

二、魔改大西瓜

修改源码时如何快速定位要修改的位置呢？根据变量命名的“见名知意”原则，我们可以猜测项目作者在写代码时可能使用的变量名称来定位我们要修改的具体位置。

如“创造”就是“create”，“广告”就是“ad”，“总分”就是“count”等等。。。

如果大家在修改源码时不能快速找到对应的修改位置，可以根据下面的截图摁Ctrl+F快捷键快速搜索定位。

0. 水果ID和名称对应表

ID	水果
0	葡萄
1	樱桃
2	橘子
3	柠檬
4	猕猴桃
5	西红柿
6	桃子
7	菠萝
8	椰子
9	西瓜

1. 修改生成水果

修改src下project.js文件

如果想要修改水果的生成，我们可以推测出对应的关键字应该是“create（创造）”，“fruit（水果）”等关键词，通过搜索相应的关键词，我们定位到了下面这段代码；

分析这段代码，我们可以得出，水果的生成逻辑为：第一个和第二个水果均为葡萄（id为0），第三个为樱桃（id为1），第四个和第五个都是橘子（id为2），第六个水果为柠檬（id为3），后面的生成的水果的id为0-5之间的随机数。

除此之外，还有初始生成的第0个水果，在这里默认为葡萄。

this.createOneFruit() //括号内传入对应的水果编号0~9为参数，控制初始第0个水果的生成

2. 下落速度和Q弹程度

修改src下project.js文件

在源代码中并没有这两行代码，如需更改Q弹程度或下落速度，需要手动添加。

图中0.2和1为推荐值，如果想体验其他乐趣可任意修改。（Q弹程度接近1时，满屏幕富有弹性的水果，灰常有乐趣哈哈哈）

3. 修改右上角广告的链接

修改src下project.js文件

可以全文搜索，将搜索结果中所有的这种链接全部替换或删除掉。并且将诱导性的宝箱图片替换掉。

如果不需要右上角的图标，可以选择一张和背景颜色相同的图片放在对应的位置，并将连接属性改为“#”

4. 修改分数

修改src下project.js文件

根据“见名知意”原则，推测有关分数的关键词为“score”，全文搜索发现，记录分数的是这个变量“default.score”。就像这里：

还有这里：

我们可以将等式右边的数字加大，这样就可以达到增加分数的目的。

不过，这种增大分数的方法最好仅限于大家发朋友圈截图，最好不要影响大家游戏的体验和乐趣。

5. 修改图片

替换图片应该是魔改大西瓜中最有乐趣的了，我已经看过网上现在有很多个魔改的版本，比如合成硬币、合成校徽、合成大胸、合成二次元、合成XX等，都很有创意。

但其实，改图片的原理非常简单！

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

将目录在电脑上这样显示出来会更容易查找一些。

三、发布上线

项目都改好了以后，如何才能让别人可以访问得到呢？

我们可以在公网服务器中，通常是Linux操作系统，在Linux操作系统中搭建nodejs的环境，然后通过npm工具在Linux操作系统中安装serve工具，具体步骤和上面Windows中搭建环境的步骤大同小异。

下面来详细介绍具体步骤：

1. 安装node环境

1.1 检查是否已经安装

whereis nodejs
whereis npm

如果没有找到相关的路径说明没有安装。

1.2 下载nodejs编译包

在Windows系统中我们只需要下载.exe文件然后双击打开即可安装，但是在Linux系统上和在Windows系统上nodejs的安装不太一样。

我们进入到nodejs的官网http://nodejs.cn/download/，拿到Linux下64位node的下载链接：https://npm.taobao.org/mirrors/node/v14.15.4/node-v14.15.4-linux-x64.tar.xz

然后进入Linux系统，推荐使用wget下载：

wget -c https://npm.taobao.org/mirrors/node/v14.15.4/node-v14.15.4-linux-x64.tar.xz

ls查看一下文件

可以发现已经node编译包已经下载好了。

解压：

tar -xvf node-v14.15.4-linux-x64.tar.xz

然后我们将解压出来的文件夹重命名为nodejs，以方便后面的操作：

mv node-v14.15.4-linux-x64 nodejs

重命名后我们查看一下nodejs的bin文件夹有什么可执行文件

可以看到有npm、node和npx三个，这三个都是可执行文件.

接下来，我们需要把nodejs文件夹移动到/usr/sbin/目录下

mv /root/nodejs/ /usr/sbin/
# /root/nodejs/ 替换为您的nodejs路径

1.3 配置软连接

为了使nodejs能够全局使用，我们需要配置一下软链接（类似于快捷方式，如果安装的路径在/usr/local/bin/下不需要这一步操作），当然也是软连接到用户目录下/usr/local/bin/

软链接的命令很简单： ln -s 源文件目标路径

ln -s /usr/sbin/nodejs/bin/node  /usr/local/bin/
ln -s /usr/sbin/nodejs/bin/npm  /usr/local/bin/

上面两句命令就是把node和npm可执行文件链接到/usr/local/bin/目录下，相当在全局环境中加了两个快捷方式（也可以理解成系统变量）

完成后我们查看node和npm是否安装成功：

成功输出版本信息即为安装成功。

1.4 安装serve工具

npm install serve
ln -s /usr/sbin/nodejs/bin/serve  /usr/local/bin/

原理同上，不细讲了。

2. 编写后台启动脚本文件

环境搭好了以后，进入到Linux上的项目目录下，执行下面的操作：

cd '项目目录'   # 切换到项目目录
touch run.sh   # 创建一个空文件
vi run.sh      # 进入vi编辑页面

进入vi编辑页面后写入nohup serve &后，保存退出。

然后为脚本文件赋权，并执行脚本文件：

chmod 777 run.sh  # 为脚本文件赋权
./run.sh          # 执行脚本文件

执行脚本文件后，在脚本所在文件夹下会出现一个nohup.out文件，这是后台启动serve的日志，可以查看当前正在运行的程序的一些状态。

cat nohup.out# INFO: Accepting connections at http://localhost:5000
# 端口为5000
# 通过http://ip:5000进行访问

3. 完成

到这里，整个项目已经部署完成，快叫上你的小伙伴来体验一把合成大西瓜的乐趣吧！

四、引用

本文部分内容参考了文章https://www.jianshu.com/p/21e42cd362e7

作者：MsgSS

感谢大佬！