魔改一波合成大西瓜！代码已开源~

不念不忘少年蓝@ 2021-07-17 00:50 403阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdfZ2Vl_size_16_color_FFFFFF_t_70_pic_center][]

**周末了，总是忍不住想放飞下自己**。于是就试玩了一会大西瓜合成的小游戏，结果愣是停不下来，有点上头啊。

![45e703dfe50e315a5773c46712de0523.gif][]

这小游戏很有特点啊，界面第一次打开的时候只有 loading，竟然没有广告，良心了。说白了，**这款小游戏就是俄罗斯方块、2048、水果忍者的结合体**（可不只是题主说的 2048 的翻版），通过控制水果的下落，两个相同的水果碰撞到一块的时候就会合成更大的水果，同时迸发出溅射的效果。

第一次合成大西瓜的时候界面效果简直亮瞎了我的双眼。不过说句实在话，可能有戏还不太完善，我第一把就卡死了，可能得分太高了吧！

六天前就有朋友在安利这款小游戏，第一次看到的时候我想，这破游戏有什么好玩的，不就是合成个大西瓜嘛，对此不屑一顾。

直到昨天我看到鱼皮老弟分享了一篇《[魔改大西瓜][Link 1]》的文章，就忍不住也想自己魔改下，毕竟**吃瓜群众玩合成大西瓜，吃瓜程序员当然要玩源码**，这才是正确的姿势嘛。

![4723f34d7a769a8ee464bc26a4b9ed68.png][]

整个代码目录并不复杂，是基于 cocos2d 游戏引擎开发的。

*  index.html，游戏的主页面
 *  project.js，核心代码，游戏逻辑都在这里面
 *  settings.js，配置文件
 *  res 目录，存放图片和音频等资源

我以为直接双击 index.html 就可以在本地运行，结果卡在了 99% 的 loading 上。

![fc4aa8c04bac74629b92d296e4448d3f.png][]

原因也很简单，双击网页文件的访问协议是 file，而不是 HTTP，导致一些资源无法加载。解决方案是本地搭建一个 Web 服务器，怎么搭呢？

第一步，安装 Node.js，可以通过下面的路径下载安装包。

> http://nodejs.cn/download/

安装完成后通过 `npm -v` 查看是否安装成功。npm 是 Node.js 的模块管理器，功能及其强大。

第二步，安装 Vue CLI，一个基于 Vue.js 进行快速开发的完整系统，提供了一个运行时依赖。文档见一下路径：

> https://cli.vuejs.org/zh/guide/

安装完成后通过 `vue --version` 查看是否安装成功。

第三步，安装 serve 服务，可通过 `npm i serve -g` 命令进行安装，如果 npm 安装比较慢的话，可以通过 `cnpm` 来安装。cnpm 是淘宝提供的一个 npm 的镜像，国内访问的速度更快。

如果出现 `Error: EACCES: permission denied` 表示没有权限，需要在命令前面加上 `sudo`，我在《[Shell，牛逼][Shell]》 这篇内容里有解释。

安装完成后通过 `serve -v` 查看是否安装成功。

第四步，进入到合成大西瓜的源码包下，执行 `serve` 启动本地 Web 服务。

![c62cab6a42295b57c28d5b802c181ecd.png][]

第五步，在浏览器地址栏键入本地或者网络可以访问的地址就可以启动 Web 服务器了。趁机玩了一把，舒服了。

![bc971b6fb8d5437f133cd1cf9ad8daf6.gif][]

我也知道，最近娱乐圈八卦多，西瓜多，吃到撑爆，确实给这款小游戏的传播带来了一定的契机。但站在程序员的角度来看，这款游戏好玩才是它火起来的本质，这是我从作者的源码得出来的结论。

如果你恰好也是程序员，想从源码里学点东西，可以点击下面的链接：

> [https://github.com/itwanger/daxigua][https_github.com_itwanger_daxigua]

好了，祝各位周末愉快，玩得开心！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbmdfZ2Vl_size_16_color_FFFFFF_t_70_pic_center]: /images/20210716/9ccd13b8afe442008d9373617394775f.png
[45e703dfe50e315a5773c46712de0523.gif]: /images/20210716/a5bfba50d94d41dfbc3fea883213ff34.png
[Link 1]: https://juejin.cn/post/6923047027475644430
[4723f34d7a769a8ee464bc26a4b9ed68.png]: /images/20210716/95fd24c588ac40889fb520ca1ad828d3.png
[fc4aa8c04bac74629b92d296e4448d3f.png]: /images/20210716/a660a77f07dd429f854697f733132c5c.png
[Shell]: https://mp.weixin.qq.com/s/oEo8N3nE0wR1zl7qD4nh3w
[c62cab6a42295b57c28d5b802c181ecd.png]: /images/20210716/c93d0bca7401421387422aa9fc3ccee6.png
[bc971b6fb8d5437f133cd1cf9ad8daf6.gif]: /images/20210716/87ad62ad3441441facac15bc27ffc5c8.png
[https_github.com_itwanger_daxigua]: https://github.com/itwanger/daxigua