全程保姆式教你怎么玩转小游戏 “合成大西瓜” ，给你带来无限的乐趣

本文链接：https://blog.youkuaiyun.com/qq_53614788/article/details/115150735

步骤一：下载源代码

从 GitHub 上下载源代码，网上源码下载很多，点击Download ZIP
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210324004000170.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUzNjE0Nzg4,size_16,color_FFFFFF,t_70

步骤二：本地运行游戏代码

2.1：直接双击打开游戏代码会进不去，受到浏览器同源安全限制，地址协议是file而不是http，因此需要本地web服务器，这里使用serve

2.2：安装Node.js,下载网址：http://nodejs.cn/,进入下载安装包，一路下一步安装即可，下载完 Node 后会自动安装 npm 命令

2.3：进入下载好的代码文件夹，cmd启动命令，输入 npm -v 命令，如果输出了版本号则表示安装成功

在这里插入图片描述

2.4：输入 npm i -g serve 命令，安装serve 命令，帮我们在本地启动web服务器

2.5：输入serve命令，即可启动。复制网址到浏览器中就可以在本地运行游戏了在这里插入图片描述

步骤三：网站发布

3.1：推荐 vercel（提供免费服务器和域名），浏览器推荐谷歌浏览器

3.2：使用GitHub登录velcel，如果没有GitHub，还需要用邮箱注册vercel

3.3：进入代码文件夹目录，输入cmd，输入 npm i -g vercel 命令安装vercel（安装时需要稍微等待一会）

3.4: 输入 vercel - v 命令，显示版本号则表示安装成功
在这里插入图片描述

3.5：继续输入命令，输入 vercel login 命令，登录邮箱，然后去邮箱验证，如果验证成功，会其中显示 congratulations! 提示

3.6：最后，接着输入 vercel 命令，会让你填写一些发布选项，一路回车到底就行了，网站就成功发布啦

3.7：复制链接，可以将复制的链接分享给小伙伴啦！还可以打开vercel网站自定义域名等操作。
在这里插入图片描述

步骤四：修改游戏，增加乐趣

4.1：代码目录结构

此游戏是使用cocos2d开发的，看到文件目录，并不复杂，结构清晰明了，我们只需要了解几个重要文件就行：

index.html，整个项目的主页面
main.js ,是主启动文件
project.js，项目核心代码，游戏逻辑都在这里
settings.js，项目配置文件
res 目录，存放图片和音频等资源
src 目录存放最重要的游戏逻辑和配置，也是主要的修改点

4.2：修改图片

修改图片的原理非常简单，直接在 res 资源目录下，找到原有的图片，然后用相同名称、相同格式、相同尺寸的图片进行替换即可。
修改圆形图片：使用工具—ps软件
（1）：进入ps，点击：文件—打开—选择你要替换掉的水果照片（图片在res文件夹里），然后将你想换的照片直接拖拽进来，然后ctrl+T 调整图片大小，使两张图片大小差不多一样大

（2）：使用磁性套索工具或者魔棒工具，将水果的圆边选择出来，如图：

然后ctrl+j复制图层，如图：

（3）：然后点击文件—存储为—图片改成PNG格式—确定替换—完成
（4）：复制本地创建好的网址到浏览器中就能看到水果已经被替换了

4.3：修改背景音乐

在 index.html 文件内，在标签内添加这两行代码即可：
在这里插入图片描述

代码说明：

autoplay=“autoplay”，背景音乐在音网页打开后自动播放。点击并拖拽以移动
controls=“controls”，为了在页面内显示显示控件，如播放按钮
使用"loop=“loop”，为了是背景音乐重复播放
使用preload=“auto”，音频在页面加载的同时进行加载，并预备播放
使用src=“保存的绝对路径”，即是在""内加入背景音乐的保存路径，如：src=“res\TTTYL.mp3”（把照片保存在res文件夹中）
注：若是想播放按钮隐藏，则使用以下语句：
直接使用css 的display控制audio标签的显示：

<style type="text/css">
     audio{
             display: none;
         }
</style>

注意：加了背景音乐后，手机进入游戏网页加载可能会慢一些

4.5：修改其他

游戏的过程是：

点击鼠标 => 水果下落 => 水果碰撞 => 计算分数 => 展示分数

除了上面两种改法，还有无敌模式、控制水果生成、由大水果合成小水果、让水果更 Q 弹、改游戏分数等