纯 HTML/CSS/JS 单页策略网页游戏:从乡镇科员到联邦总统的 15 级仕途天梯,含六大城市指标博弈、12 张政策卡、17 个随机事件、干部管理(德能勤绩廉五维 × 6 岗位)、4 种败局与通关结算。进度存 localStorage。
npm install
npm run dev # vite,CLI 的 --port/--host 参数可直接透传桌面 ≥1280px 三栏布局;<768px 为移动端单列(顶部状态条 + 底部 Tab:天梯/干部/要情)。
manifest.webmanifest(standalone、墨黑 theme)+sw.js(离线缓存)+icons/(印章风 4 枚,tools/make_icons.py生成)- 手机浏览器打开线上地址 →「添加到主屏幕」即全屏离线可玩
⚠️ 改任何被缓存的文件(game.js / style.css / poster.js 等)后,必须递增sw.js里的CACHE_VERSION,否则用户端一直吃旧缓存
通关结算页「生成通关海报」→ poster.js Canvas 绘制 1080×1440 海报(称号 + 六维雷达 + 战绩 + 印章),手机长按保存、桌面下载 PNG。称号评定与时长统计复用 game.js 全局函数,勿复制第二份。
- 线上地址:https://zc790-hub.github.io/shuizhuchenfu/ (GitHub Pages,仓库 zc790-hub/shuizhuchenfu,分支 main 根目录)
- 更新流程:把
index.html/style.css/game.js复制到../shuizhuchenfu-publish/(该目录即 Pages 的 git 仓库),commit + push 即上线。 - 注意:本机访问 github.com 需走代理
http://127.0.0.1:33210(git 需git config http.proxy,curl/gh 需HTTPS_PROXY环境变量)。 - 妙搭备用:app_id
app_17aq4gqpfzx,但「创意模式」HTML 应用的可见范围 API 改不了公开(只能在妙搭后台手动改),所以主用 GitHub Pages。
index.html— 开始界面、三栏主界面、事件/考察/红头任命/结局/海报模态style.css— 「深夜党政档案室」视觉(墨黑 + 印泥朱红 + 鎏金),含响应式区块game.js— 全部游戏逻辑(约 1200 行)poster.js— 通关海报 Canvas 绘制与模态sw.js/manifest.webmanifest/icons/— PWA 三件套(图标由tools/make_icons.py生成)test/sim.js— DOM 桩 + 模拟玩家自动对局自测:node test/sim.js(80 局基线:约 79% 通关、四种败局均触发)