H5小游戏从修改到发布--无编程基础修改版

H5小游戏从修改到发布–无编程基础修改版
合成哈工大

流程来源于程序员鱼皮合成大西瓜魔改版
原教程链接
合成大西瓜源码

素材获取：h5小游戏源码

注册登录，直接下载压缩包版本的源代码，网页还有其他游戏版本

主要分为如下几个步骤：

1. 下载源代码及本地运行
2. 动手修改及原理分析
3. 发布上线

1、下载源代码及本地运行

源代码下载目录如图

本地运行

如果直接双击 index.html，是无法运行游戏的，会卡在 99%或者完全打不开。因为直接双击网页文件，访问协议是 file，而不是 http，会导致一些资源无法请求，缺失文件。
因此，我们需要在本地搭建一个 web 服务器，以支持 http 协议访问。

最简单的方式就是使用 serve 工具。只需三步，就能使用，已完成的步骤可以直接跳过：

1、安装 Node 和 npm

Node 是服务器端运行 Js 代码的引擎；npm 则是依赖包管理工具，可以轻松安装工具和代码类库。

进入 Node 中文网，下载 Node.js，会自动安装 npm。

安装成功后，进入命令行 cmd，输入命令来判断 npm 是否安装成功：

npm -v

输出版本号，则安装成功：

2、一行命令安装 serve 工具：

npm i -g serve

3、进入源代码目录，启动 serve：

serve

启动成功后，打开浏览器访问 localhost:5000 即可！

动手修改及原理分析

拿到源代码后，怎么最快的定位要修改哪里呢？
project.js 就是影响游戏逻辑的核心文件。
要修改游戏中的分数、逻辑等数据需要在文件中找到相应的代码进行修改，需要对js语法有一定了解

图片修改

图片修改则不需要代码基础，只要能熟练使用photo即可完成修改，原理简单
发挥的空间也更大，合成大西瓜就可以变成合成哈工大、合成泰勒斯等等各种玩法，并且适用于其他各种h5游戏的修改
直接在 res 资源目录下，找到原有的图片，然后用相同名称、相同格式、相同尺寸的图片进行替换即可！

发布访问

1、使用命令行控制vercel发布网页
Vercel 是免费网站托管平台，可以帮我们部署网站，并生成可访问的简短网址，还能够和自己购买的域名进行绑定。
先在命令行通过 npm 命令安装 Vercel：

npm install -g vercel

安装完成后，进入 index.html 所在目录，使用 vercel 命令发布网站：

vercel --prod

然后会让你输入一些选项，比如项目名称、是否修改配置等，一路回车就可以了~
发布成功，会得到一个网址，打开就可以看到游戏啦，还可以把网址分享给别人！

2、在网页端部署vercel发布网页
（1）注册github账号
将h5游戏文件夹部署至github

（2）访问vercel官网
注册账号

点击new project创建新项目
Import Third-Party Git Repository
导入第三方Git存储库，将github仓库地址复制进去

最后deploy就可以发布了
需要更改网页内容只需要修改github库中的文件即可。