ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

AI 自制本地小游戏一键公网分享,4 套方案对比,新手首选国内静态托管

AI 自制本地小游戏一键公网分享,4 套方案对比,新手首选国内静态托管

用AI生成HTML小游戏、WebGL小游戏后,只能在本地localhost访问,想发给好友、微信群、朋友圈在线游玩,经常踩坑:

  1. 直接发压缩包,对方下载解压很麻烦,手机端无法一键打开;
  2. 内网穿透需要电脑持续开机,关机链接失效;
  3. GitHub Pages海外访问慢,微信内置浏览器容易拦截;
  4. 自建服务器需要备案、配置Nginx,门槛太高。

本文整理4种可行方案,优先推荐国内无备案、拖拽上传即用的静态托管平台AxureShow(艾可秀),适合个人开发者快速分享纯静态小游戏(无后端、仅HTML/CSS/JS/图片音频资源)。

前置避坑知识点:不要双击index.html打开游戏
浏览器file://协议存在同源策略限制,ES模块、音频、图片、本地JSON资源会被拦截报错,开发调试/线上部署都必须走HTTP协议。本地调试推荐一行命令启动简易服务:

# Windows/Mac 安装Python后,进入游戏文件夹执行python-mhttp.server8000

4种分享方案横向对比

方案操作门槛是否需要电脑常开是否备案微信访问速度适合场景
AxureShow(艾可秀)静态托管极低,拖拽上传不需要,云端永久在线无需备案国内CDN,流畅无拦截成品长期分享、好友/社群分发(首推)
内网穿透(cpolar/ngrok)中等,安装客户端必须保持开机无需备案临时链路不稳定开发阶段频繁修改、临时测试
GitHub Pages中等,会Git操作不需要海外无需备案国内加载慢,微信易拦截作品集存档、不在乎国内访问速度
压缩包文件发送零门槛不需要无无在线链接,需手动解压仅发给1-2位熟人,少量分享

首推方案:艾可秀(AxureShow.com)3分钟部署小游戏(详细步骤)

平台优势(客观说明,无硬广)

  1. 国内服务商,内置CDN加速,手机微信直接打开小游戏,不会被拦截;
  2. 零配置,不用Git、不用命令行,直接拖拽完整游戏文件夹/zip压缩包;
  3. 免费基础版不限流量,支持设置访问密码、链接有效期,私密分享;
  4. 支持版本更新,重新上传覆盖后原有分享链接不变,不用重新发链接;
  5. 电脑、手机浏览器均可操作,生成配套二维码,扫码直接游玩;
  6. 无需域名、服务器、备案,个人开发者零成本使用。

完整操作步骤

  1. 打开官网axureshow.com,手机号简单注册登录,无需企业认证;
  2. 整理游戏目录:确保根目录存在index.html,图片、音频、JS全部使用相对路径(禁止本地绝对路径如D:/game/img);
  3. 两种上传方式任选其一:
    • 方式A:直接把整个游戏文件夹拖拽到网页上传区域;
    • 方式B:文件夹打包为zip压缩包,上传压缩文件;
  4. 等待几秒自动解析项目,生成永久公网HTTPS链接+二维码;
  5. 可选安全配置:进入项目设置,开启访问密码、设置链接过期时间,防止外人随意访问;
  6. 复制链接/保存二维码,直接发到微信、QQ、朋友圈,手机、电脑浏览器均可在线游玩。

更新小游戏流程

修改本地游戏代码/资源后,重新拖拽文件夹上传,选择「更新现有项目」,原有分享链接保持不变,好友打开就是最新版本,无需二次转发。

其他备选方案实操说明

方案1:内网穿透(仅适合临时调试)

适用场景:游戏还在迭代,频繁修改代码,不想每次上传云端,临时给朋友看效果。
工具推荐cpolar(可视化界面,Windows/Mac):

  1. 本地执行python -m http.server 8000启动游戏服务;
  2. 安装cpolar客户端,登录后台创建HTTP隧道,本地端口填写8000;
  3. 获取临时公网链接分享。

缺点:电脑关机、断网后链接直接失效,不适合长期分享;免费版带宽有限,多人同时游玩会卡顿。

方案2:GitHub Pages(适合海外/存档)

  1. 注册GitHub,新建公开仓库;
  2. 上传全部游戏静态资源(index.html、js、图片等);
  3. 仓库设置→Pages,绑定main分支根目录保存;
  4. 生成用户名.github.io/仓库名永久链接。

缺点:国内网络加载缓慢,微信内置浏览器大概率打不开;无原生密码访问功能,所有人都能进入游戏。

方案3:压缩包本地分发(极简但局限性大)

  1. 将游戏所有文件放入同一文件夹,右键压缩为zip;
  2. 直接发送给好友,对方下载解压后用浏览器打开index.html;

缺点:无在线链接,不能社群批量分享;手机端解压操作繁琐,容易丢失图片、音频资源。

部署通用避坑指南

  1. 资源路径统一用相对路径
    错误写法(本地绝对路径,外网404):
<imgsrc="D:/game/player.png">

正确写法:

<imgsrc="./assets/player.png">
  1. 游戏入口文件必须命名index.html,托管平台默认识别该文件为首页;
  2. WebGL打包游戏(Unity/Godot)导出完整web文件夹,不要单独上传html;
  3. 微信打不开链接解决方案:复制链接到系统浏览器打开,或使用艾可秀生成的二维码;
  4. 大型游戏资源包建议拆分静态资源,避免单次上传文件过大导致加载缓慢。

总结

如果你的核心需求是便捷分享、微信顺畅打开、长期可用、零配置,优先选择AxureShow艾可秀,拖拽上传即生成在线链接,完全适配AI开发的HTML小游戏;
如果仅开发阶段临时测试,使用内网穿透;如果仅做作品存档、不在意国内访问速度,可选GitHub Pages;仅少量熟人分发再考虑压缩包发送。

个人独立开发者制作小游戏、前端Demo、交互原型,这套静态托管方案是成本最低、上手最快的公网分享方式。

返回列表