魔改《合成大西瓜》—

最近合成大西瓜这个游戏很火，最近几天都看到朋友圈有很多小伙伴在挑战合成大西瓜。

但是因为合成大西瓜的难度太大了，极少概率能合成大西瓜，无奈只能刷到高分数。

这篇文章就带大家合成一个大西瓜，顺便魔改一下这个游戏，玩起来更加有趣。

1、初识合成大西瓜

这是一个类似于《2048》的游戏，每种水果都代表不同的等级，2个同类水果相碰即可合体，成为更高等级的新水果，最高级别的水果就是大西瓜。

玩家只需控制好水果掉落的位置，让相同的水果合成另一种体积较大的新水果，如果水果填满了屏幕，游戏就结束，最后会显示你的分数和击败的人数。

看到知乎有人说这是个充满哲学的游戏，果然万物皆哲学：

但是我觉得肯定是2021年太多瓜了，所以作者才会做这么一款游戏，全民吃瓜。

事实证明，随便玩都能有一个很高的分数。♐️

但是，分数不是最重要的，最重要的是要合成大西瓜！

但我是个正经的技术号主，我是来研究代码的，不是来吃瓜的！

2、研究源码

合成大西瓜的代码已经开源了，GitHub可以找到。

在这里十分感谢全栈大佬鱼皮、 B 站 UP GJhuxiao 提供的源码。

首先把代码clone下来，它的代码结构是这样的：

项目是前端代码，看着这一大串的JS，我…

这里还是要感谢上面两位开源的大佬，按照他们的思路，可以初步知道这个游戏的门路：

1、游戏基于 cocos2d 游戏引擎开发，project.js 是项目核心代码，游戏逻辑都在这里。

2、一共10种水果，由小到大分别是葡萄、樱桃、橘子、柠檬、猕猴桃、西红柿、桃、菠萝、椰子、半西瓜、大西瓜。

3、分数可以控制，在 default.score 有一个分数的统计值，代码如下：

t.node.getComponent("fruitData").getNumber() && (a.default.score += this.fruitNumber + 1)

默认两个最低等级的水果合成就加1分，依次往上累计。

3、试玩

既然是html文件，打开index.html直接试玩一下：

但是直接报错了：

Access to XMLHttpRequest at

这里说的是不能提供文件的协议访问，只能提供http的协议访问，所以无法进入。

好吧，我这里起个Nginx作为web服务，正向代理一下这个项目：

1、修改一下nginx.conf

server {listen       5000;server_name  localhost;root   G:/源码/合成大西瓜/daxigua/;index  index.html;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

2、启动Nginx

G:\nginx-1.17.9\nginx-1.17.9>nginx.exe

3、访问

访问一下端口，浏览器切换成手机模式，成功进入了：

但是这游戏玩法确实简单，拿分数容易，但是合成大西瓜难，我试了好几次都没有合成大西瓜，不知道大西瓜长什么样子。

4、魔改

在开源代码的基础上，鱼皮、GJhuxiao、xiaopengand 三位大佬已经魔改了代码，原来的版本是很枯燥的，只有分数和普通模式。

GitHub大佬GJhuxiao魔改了许多模式，让游戏变得更有趣，而且还魔改了分数，发一下朋友圈还挺有意思的~

这里的暴力吃瓜是直接出现通过出现大瓜+半圆西瓜合成的：

我还是喜欢鱼皮大佬的魔改，我在他的基础上修改了另外一些地方。

打开project.js文件，我这里修改三个地方：

1、让水果更加有弹性，下落的时候可以弹到其他水果周围，带动其他水果滚动，这样就能更加好玩。

这里是下落的速度：

//fruitSlowDownSpeed 大于0的常数，值越大，代表阻力越大，下落越慢
n.getComponent(cc.RigidBody).linearDamping = fruitSlowDownSpeed;

我这里改成0.9

2、这里是水果和水果、水果与底部的弹性：

 // fruitElasticity  0~1，大于零的常数，越大弹性越大n.getComponent(cc.PhysicsCircleCollider).restitution = fruitElasticity;

我这里改成0.5。

3、其次是修改水果的形状，合成一个蘑菇头。

感谢鱼皮的整理：https://docs.qq.com/sheet/DS0d2VVVJYmpvZ0pZ?tab=BB08J2

找到图片132ded82-3e39-4e2e-bc34-fc934870f84c.png，也就是猕猴桃，替换成自己的图片。

可以试试把大西瓜换成女朋友的照片，这也是一件很有意思的事情。

以下是修改后的演示，水果更有弹性了，还有魔性的蘑菇头：

5、上线

修改完了，当然要分享给大家玩了，于是我啪一声，申请了两个域名和SSL，最后配置一下Nginx，就把项目部署到了我的服务器。

不过这里的nginx.conf配置稍微复杂一点：

   server {listen       80; #监听端口server_name  watermelon1.baimuxym.cn watermelon2.baimuxym.cn; #请求域名return      301 https://$host$request_uri; #重定向至https访问。}# 大西瓜专用，Q弹蘑菇头版server {listen 443 ssl;server_name     watermelon1.baimuxym.cn; # 改为绑定证书的域名ssl on;ssl_certificate /usr/local/nginx/watermelon1.baimuxym.cn/Nginx/1_watermelon1.baimuxym.cn_bundle.crt; # 改为自己申请得到的 crt 文件的名称或者 pem文件的名称ssl_certificate_key /usr/local/nginx/watermelon1.baimuxym.cn/Nginx/2_watermelon1.baimuxym.cn.key; # 改为自己申请得到的 key 文件的名称ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;ssl_prefer_server_ciphers on;location / {root  /var/www/web/daxigua/daxigua_me/;index index.html;  }}# 大西瓜专用，自定义分数、模式版server {listen 443 ssl;server_name    watermelon2.baimuxym.cn; # 改为绑定证书的域名ssl on;ssl_certificate /usr/local/nginx/watermelon2.baimuxym.cn/Nginx/1_watermelon2.baimuxym.cn_bundle.crt; # 改为自己申请得到的 crt 文件的名称或者 pem文件的名称ssl_certificate_key /usr/local/nginx/watermelon2.baimuxym.cn/Nginx/2_watermelon2.baimuxym.cn.key; # 改为自己申请得到的 key 文件的名称ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;ssl_prefer_server_ciphers on;location / {root  /var/www/web/daxigua/daxigua/;index index.html; }}

两个版本我都部署到服务器了，希望我的带宽扛得住吧~

大家可以直接去体验一下（复制以下发送，微信可直接打开，电脑端要使用F12手机模式打开），地址分别是：

1、Q弹蘑菇头版

https://watermelon1.baimuxym.cn

2、暴力版，多模式、多分数加成

https://watermelon2.baimuxym.cn

或者公众号搜索【HelloCoder】后台直接回复【大西瓜】，即可获取链接。

最后正经地玩一次原版，终于成功了一次：

最后祝大家吃瓜顺利，奥利给！

分享一波自己的个人博客和Java资料：
HaC是个程序员的个人博客