最近合成大西瓜这个游戏很火，最近几天都看到朋友圈有很多小伙伴在挑战合成大西瓜。
但是因为合成大西瓜的难度太大了，极少概率能合成大西瓜，无奈只能刷到高分数。
这篇文章就带大家合成一个大西瓜，顺便魔改一下这个游戏，玩起来更加有趣。
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
代码语言：javascript复制G:nginx-1.17.9nginx-1.17.9>nginx.exe3、访问
访问一下端口，浏览器切换成手机模式，成功进入了：
但是这游戏玩法确实简单，拿分数容易，但是合成大西瓜难，我试了好几次都没有合成大西瓜，不知道大西瓜长什么样子。
4、魔改
在开源代码的基础上，鱼皮、GJhuxiao、xiaopengand 三位大佬已经魔改了代码，原来的版本是很枯燥的，只有分数和普通模式。
GitHub大佬GJhuxiao魔改了许多模式，让游戏变得更有趣，而且还魔改了分数，发一下朋友圈还挺有意思的~
这里的暴力吃瓜是直接出现通过出现 大瓜 半圆西瓜 合成的：
我还是喜欢鱼皮大佬的魔改，我在他的基础上修改了另外一些地方。
打开project.js文件，我这里修改三个地方：
1、 让水果更加有弹性，下落的时候可以弹到其他水果周围，带动其他水果滚动，这样就能更加好玩。
这里是下落的速度：
代码语言：javascript复制//fruitSlowDownSpeed 大于0的常数，值越大，代表阻力越大，下落越慢
n.getComponent(cc.RigidBody).linearDamping = fruitSlowDownSpeed;我这里改成0.9
2、这里是水果和水果、水果与底部的弹性：
代码语言：javascript复制 // 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
或者公众号后台直接回复 【大西瓜】 ，即可获取链接。
最后正经地玩一次原版，终于成功了一次：
最后祝大家吃瓜顺利，奥利给！
