魔改《合成大西瓜》——附试玩链接

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

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

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

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;	
        }
    }

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

大家可以直接去体验一下（复制以下发送，微信可直接打开），地址分别是：

1、Q弹蘑菇头版

https://watermelon1.baimuxym.cn

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

https://watermelon2.baimuxym.cn

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

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

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