一起魔改大西瓜！

发布时间：2021-02-06 20:59:05来源：GitChat精品课

作者：沉默王二

来源：沉默王二（ID：cmower）

大家好，我是沉默王二。

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

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

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

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

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

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

index.html，游戏的主页面

project.js，核心代码，游戏逻辑都在这里面

settings.js，配置文件

res目录，存放图片和音频等资源

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

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

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

http://nodejs.cn/download/

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

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

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

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

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

如果出现Error:EACCES:permissiondenied表示没有权限，需要在命令前面加上sudo。

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

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

‍‍

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

我知道你在看哟