步骤一:下载源代码
从 GitHub 上下载源代码,网上源码下载很多,点击Download ZIP
步骤二:本地运行游戏代码
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 弹、改游戏分数等