下载原版大西瓜源码后，如何在本地运行（小白手把手式教程）：

原版下载：

链接：https://pan.baidu.com/s/1xOTSwsAy365SFrRCjHwtLA
提取码：0zgb

运行：

直接双击 index.html，是无法运行游戏的，会一直卡在100%的页面。因为直接双击.html文件，访问是 file 协议，而不是 http协议，会导致一些资源无法请求，缺失文件。

原因：开始通过file协议直接访问index.html，在index.html中静态引入main.js，在main.js中import **.js。在import的过程中需要http服务器去解析es6语法并添加header头信息去跨域引入**.js，但是file协议相当于通过资源管理器静态访问index.html，中间的过程没有http服务器参与解析，所以无法识别es6的import语法。

两者的区别：File协议和Http协议

因此，我们需要在本地搭建一个 web 服务器，以支持 http 协议访问。

最简单的方式就是使用 serve 工具。只需三步，就能使用：

安装 Node 和 npm

Node 是服务器端运行 Js 代码的引擎；npm 则是依赖包管理工具，可以轻松安装工具和代码类库。
下载 Node.js :
https://nodejs.org/zh-cn/download/

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

npm -v

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

安装 serve 工具：

npm i -g serve

可能遇到的问题及解决方法：

npm i 命令长时间卡住的解决办法

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

记住是index.html所在目录：

serve

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

然而打开后只显示上半部分：

因为这个游戏是基于手机平台进行玩耍的，只有在手机模式下我们才能正常的显示和操作游戏界面。所以我们需要将浏览器设置为手机模式：

按F12打开开发者模式：

然后点击上图圈起来的那3个点，选择左右视图：

然后点击手机图标：

最后，一定记住要点刷新网页！

然后就可以愉快的玩耍啦！

用VS Code快速打开：

VS Code 如何运行.html文件（VS Code 如何安装插件）（open with live serve和open in default browser）

魔改部署自己专属的合成大西瓜（二：魔改篇）

魔改部署自己专属的合成大西瓜（三：上线篇）

魔改部署自己专属的合成大西瓜（一：运行篇）相关推荐

魔改部署自己专属的合成大西瓜（三：上线篇＜踩坑篇＞）
魔改部署自己专属的合成大西瓜(一:运行篇) 魔改部署自己专属的合成大西瓜(二:魔改篇) 一.Vercel Vercel 是免费网站托管平台,可以帮我们部署网站,并生成可访问的简短网址,还能够和自己购买 ...
魔改和上线你的合成大西瓜，最全教程！
本文是从 0 到 1 的教程,让小白也能够魔改和上线发布属于你的合成大西瓜! 最近,一款名为『合成大西瓜』的游戏突然火了!看来真的是大家吃瓜吃太多了,这个小游戏深抓人心! 当然,游戏本身非常有趣, ...
西瓜大作战java 源码_魔改和上线你的合成大西瓜，最全教程！
本文是从 0 到 1 的教程,让小白也能够魔改和上线发布属于你的合成大西瓜! 最近,一款名为『合成大西瓜』的游戏突然火了!看来真的是大家吃瓜吃太多了,这个小游戏深抓人心! 当然,游戏本身非常有趣, ...
对合成大西瓜修改图片的实践
文章目录结果与成品主要实践步骤的参考实践过程中遇到的问题以及解决的办法调用cmd安装serve的时候就出现了报错调用npm install命令安装vercel,遇到了npm ERR! cb( ...
云开发版合成大西瓜小游戏微信小程序源码微信游戏小程序附带流量主功能
这是一款云开发版的合成大西瓜小游戏微信小程序源码,微信游戏小程序源码.该小游戏玩法简单,只需要拖动同样的水果落下合成新品众的水果,最终合成大西瓜,玩法酷似俄罗斯方块,相当于换一种形式的俄罗斯方块,简单 ...
魔改合成大西瓜，从源码到部署，步骤详细
现在有一款火爆全网的小游戏<合成大西瓜>,据官方数据显示,目前参与合成西瓜的游玩人次已经多达六千多万,可见广大网友已经不仅仅满足于在娱乐圈吃瓜了,现在更喜欢自己创造大西瓜,哈哈哈. 前一段 ...
魔改《合成大西瓜》——附试玩链接
最近合成大西瓜这个游戏很火,最近几天都看到朋友圈有很多小伙伴在挑战合成大西瓜. 但是因为合成大西瓜的难度太大了,极少概率能合成大西瓜,无奈只能刷到高分数. 这篇文章就带大家合成一个大西瓜,顺便魔改一下 ...
魔改合成大西瓜--11张图片定制（速度最快版）
上线个人定制版合成大西瓜 1.下载合成大西瓜的源码: (1)从github上下载合成大西瓜的源码: 地址:https://github.com/liyupi/daxigua 下载压缩包即可. 解压到本 ...
合成大西瓜自定义图片及部署
合成大西瓜自定义图片(改图片)及发布访问(无需编程基础) 首先关于服务器扣费问题,需要勾选免费用量弹窗(注意销毁服务器一个天最多两次,一个月四次) 首先新建: 然后选择空或者nodejs,然后下一步 ...

魔改部署自己专属的合成大西瓜（一：运行篇）