合成大西瓜开发源码手把手教你运行和部署大西瓜游戏项目(附源码)

最近合成大西瓜非常火，很多编程爱好者将大西瓜改成了各种版本，非常魔性，哈哈。

如果你也想魔改大西瓜，或者想研究一下项目怎么玩的，下面的教程从下载到游戏项目部署一条龙搞定。

步骤一：下载大西瓜源代码

贴心的我已经将各种版本的代码整理到百度网盘了，大家可以按需下载：

链接: https://pan.baidu.com/s/1DfRdj2s2yGW_XbQhhjSM1w

提取码: 4t3d

步骤二：尝试运行大西瓜游戏项目

下载的源码结构如下图

如果你双击打开 index.html 文件可能卡在98%或者99%不动：

按 F12打开 chrome 浏览器的开发者调试模式发现，有大量的报错：

这是因为本地打开是文件是静态的，是 file 协议，并不是 http。所以我们需要在本地跑一个 WEB 服务器。

步骤三：安装 nodejs

如果本地没有安装 nodejs 工具，先装一下 nodejs，主要是要通过 npm 安装 serve

nodejs 下载地址：http://nodejs.cn/download/

不同的系统选择不一样的包。

安装完成打开终端命令行工具，执行 npm -v 命令：

npm -v

如果返回版本号表示安装成功。

6.14.10

步骤四：安装 serve 工具

注意是 serve 不是 server 哦，别打错了。

npm i -g serve --registry=https://registry.npm.taobao.org

返回版本号表示安装成功

+ serve@11.3.2
updated 41 packages in 3.083s

步骤五：运行本地大西瓜游戏项目

通过终端命令行cd 进入到上面下载的游戏源码中，直接执行 serve 命令就可以启动服务了，如下图所示：

上面图中有两个地址，第一个是可以在电脑浏览器本地访问的，第二是可以通过手机浏览器远程访问的，你可以拿手机试试哈。

温馨提醒：由于游戏主要适配的手机端，如果你要通过电脑浏览器玩，需要切到手机屏幕模式。

打开 chrome 浏览器，F12打开控制台，我把控制台放右边了，默认是在下边。

步骤六：部署大西瓜游戏项目到远程服务器

在本地运行会有一个限制，关了电脑手机就不能玩了，那女朋友岂不是要生气啦

有没有办法将游戏部署到远程服务器呢？当然有啦。

是不是很贵啊？我下面会介绍一个免费的方式，超级好用。

主角就是 vercel ，可能很多人没有听说话，没关系，简单来说这个系统提供了静态网站项目的托管服务，有付费也有免费的，我们使用免费的就足够了。

1. 注册 vercel 账号

先登录 Github 官网：

https://github.com

这里有个坑需要规避一下，如果你的 Github 账号是绑定的 QQ 邮箱，建议你换成其他邮箱，Vercel 不支持 QQ 邮箱，这个比较坑

然后打开另外一个页面开始注册 vercel 账号

https://vercel.com/ 建议直接使用 Github 账号登录。

注册完了之后就可以进行下一步了。

2. 安装 vercel 命令行工具

我们需要将项目部署到 vercel 系统，通过使用命令行工具比较方便。

在命令行终端中执行命令：

npm install -g vercel --registry=https://registry.npm.taobao.org

返回 vercel 版本号就表示安装成功了。

3. 开始部署到 vercel 系统

cd 到源码根目录然后执行： vercel --prod

第一次需要验证邮件，如下图：

验证完之后可以继续执行 vercel --prod

如果图所示项目就发布成功了，远程访问地址是： https://daxigua01.vercel.app/

这个地址是我发布的地址，大家可以点击试玩， 这个地址是可以分享给其他朋友一起玩， 手机浏览器打开效果更加哦。

注意：vercel 的地址已经被微信屏蔽了，大家可以将生成的地址拷贝到手机浏览器中运行。

到此这篇关于合成大西瓜开发源码手把手教你运行和部署大西瓜游戏项目(附源码)的文章就介绍到这了,更多相关合成大西瓜开发源码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 合成大西瓜开发源码手把手教你运行和部署大西瓜游戏项目(附源码)

    合成大西瓜开发源码手把手教你运行和部署大西瓜游戏项目(附源码)

    最近合成大西瓜非常火,很多编程爱好者将大西瓜改成了各种版本,非常魔性,哈哈. 如果你也想魔改大西瓜,或者想研究一下项目怎么玩的,下面的教程从下载到游戏项目部署一条龙搞定. 步骤一:下载大西瓜源代码 贴心的我已经将各种版本的代码整理到百度网盘了,大家可以按需下载: 链接: https://pan.baidu.com/s/1DfRdj2s2yGW_XbQhhjSM1w 提取码: 4t3d 步骤二:尝试运行大西瓜游戏项目 下载的源码结构如下图 如果你双击打开 index.html 文件可能卡在98%或

  • 50个优秀经典PHP算法大集合 附源码

    50个优秀经典PHP算法大集合 附源码

    简介: 实际PHP开发工作当中,只需要使用官方提供的函数即可满足,不需要研究算法,不过算法研究是一个很有意义的事情, 每个算法都是一种思想的结晶 , 学习优秀的思想 , 可以开拓思维. 立即下载源码 总结 到此这篇关于50个优秀经典PHP算法大集合 附源码的文章就介绍到这了,更多相关PHP算法大集合内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • Java实现贪吃蛇大作战小游戏(附源码)

    Java实现贪吃蛇大作战小游戏(附源码)

    目录 1.开发环境及游戏展示 1.1 游戏主界面 1.2 移动界面 1.3 奖励界面 1.4 F加速功能界面 1.5 死亡界面 2.需求分析 3.系统设计 3.1 系统总体功能设计 3.2 系统总体流程设计 4.功能设计 4.1 贪吃蛇移动及加速功能设计 4.2 贪吃蛇吃食物加速及死亡判定功能的设计 4.3 贪吃蛇主动加速功能的设计 4.4 贪吃蛇奖励机制功能的设计 5.项目结构与项目实现 5.1 项目结构及类间关系 5.2 项目完整源码 1.开发环境及游戏展示 贪吃蛇大作战在设计与实验的过程中

  • jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用. 效果展示        源码下载 HTML 由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源. <link rel="stylesheet" hre

  • 用React-Native+Mobx做一个迷你水果商城APP(附源码)

    用React-Native+Mobx做一个迷你水果商城APP(附源码)

    前言 最近一直在学习微信小程序,在学习过程中,看到了 wxapp-mall 这个微信小程序的项目,觉得很不错,UI挺小清新的,便clone下来研究研究,在看源码过程中,发现并不复杂,用不多的代码来实现丰富的功能确实令我十分惊喜,于是,我就想,如果用react-native来做一个类似这种小项目难不难呢,何况,写一套代码还能同时跑android和ios(小程序也是...),要不写一个来玩玩?有了这个想法,我便直接 react-native init 一个project来写一下吧(๑•̀ㅂ•́)و✧

  • 使用Java实现天天酷跑(附源码)

    使用Java实现天天酷跑(附源码)

    首先,写一个需求文档: 一.项目名称:<天天酷跑>(RunDay) 二.功能介绍: 闯关类游戏,玩家登录后,选择进入游戏,通过键盘控制玩家的上下左右移动,来躲避 障碍物和吃金币,玩家躲避的障碍物越多跑酷距离越远,玩家吃的金币越多,得分越高. 三.功能模块: 1.登录界面 用户名(输入框,明文) 密码(输入框,密文) 登录.取消按钮 2.菜单选择界面 开始游戏按钮(图片按钮) 帮助按钮 退出按钮 3.缓冲加载界面 自动加载进度条,加载完毕之后,跳转到下一界面 4.游戏主界面 移动的背景图片.动态

  • Java实现天天酷跑小游戏完整代码(附源码)

    Java实现天天酷跑小游戏完整代码(附源码)

    目录 首先,写一个需求文档: 一.登录界面 1.界面 2.登录 3.退出 二.开始游戏界面 三.缓冲加载游戏界面 四.游戏主界面 五.结束界面 上代码 首先,写一个需求文档: 一.项目名称:<天天酷跑>(RunDay) 二.功能介绍: 闯关类游戏,玩家登录后,选择进入游戏,通过键盘控制玩家的上下左右移动,来躲避 障碍物和吃金币,玩家躲避的障碍物越多跑酷距离越远,玩家吃的金币越多,得分越高. 三.功能模块: 1.登录界面 用户名(输入框,明文) 密码(输入框,密文) 登录.取消按钮 2.菜单选择

  • C++实现四叉树效果(附源码下载)

    C++实现四叉树效果(附源码下载)

    什么是四叉树? 如图,设想, 红框表示地图,星星表示单位,黄框表现范围, 要处理地图中范围内的单位,最直接的做法是筛选所有单位. 通过上图可以看到一个显而易见的问题,大部分单位都不需要被处理. 如果把地图分成块,只筛选范围覆盖的块中的单位,这样就可以减少很多不必要的筛选. 四叉树可以有效解决这个问题. 树的每一层都把地图划分四块,根据地图尺寸来决定树的层数,层数越大划分越细. 当需要对某一范围的单位筛选时,只需要定位到与范围相交的树区域,再对其区域内的对象筛选即可. 四叉树的实现 #pragma

  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

  • 超详细的php用户注册页面填写信息完整实例（附源码）

    超详细的php用户注册页面填写信息完整实例（附源码）

    注册页面是大多数网站必备的页面,所以很有必要对自己的注册页面做些精心的设计.下面三张图,第一张是注册的展示页面,第二张思维导图就一个简单的逻辑,第三张是通过firebug查看调用的JS文件. 一.给每个输入框写下说明 在用户看到这个输入框的时候,就能非常清晰的明白这个输入框是做啥用的,最大限度的降低他们产生疑惑的可能性.我们需要假设用户毫不了解注册需要输入的内容,随后给他们足够的信息以便帮助他们理解.  二.小图标icon Icon是增强内容的工具,而且能给访客一个很好的暗示.以前使用小图标都是

随机推荐