OpenGame游戏模板架构PhaserViteTailwind如何支撑可玩Web游戏【免费下载链接】OpenGameOpenGame: Open Agentic Coding for Games项目地址: https://gitcode.com/gh_mirrors/op/OpenGameOpenGameOpen Agentic Coding for Games是一个让 AI 智能体从零到可玩的开源游戏项目它用一套标准化的Phaser 3 Vite Tailwind CSS游戏模板配合分类器、GDD 生成器和素材管线把一句自然语言需求变成浏览器里真正能跑、能玩、能过关卡的 Web 游戏。对新手来说最值得关注的是这套模板架构——它把 Phaser 里最容易踩的坑封装成工具函数把关卡流程收敛成一张清单让 AI 和人类开发者都能快速产出可玩成品。为什么游戏需要模板架构AI 生成游戏代码最大的敌人是不稳定同样的需求两次生成可能结构完全不同导致无法测试、无法复用。OpenGame 的解法是双知识架构Dual-Knowledge GDD Architecture先由分类器判断游戏类型横版动作 / 俯视角 / 网格逻辑 / 塔防 / 重 UI复制对应模板骨架生成设计文档GDD、素材与配置最后才读取全部模板代码进行实现与调试。整个工作流在 agent-test/docs/README.md 中有完整说明其核心思想是在编码之前保持上下文轻量所有重模板的读取都发生在动手写代码的前一刻。用户输入 → 分类 → 脚手架 → GDD → 素材 → 配置 → 编码 → 验证第一层Vite 开发环境——秒级迭代的游戏脚手架模板的入口工程位于 agent-test/templates/core/用 Vite 驱动三步即可启动一个可玩的 Phaser 游戏骨架npm install npm run dev # 本地开发服务器默认 8080 端口 npm run build # 类型检查 生产构建几个关键配置值得新手留意package.json锁定Phaser 3.90.0、Vite 6、Tailwind CSS 3.4并内置 Vitest 测试脚本npm run testvite.config.js把phaser别名直接指向浏览器构建版本phaser/dist/phaser.js避免打包器走 Node 构建导致的报错同时配置 jsdom 环境让游戏逻辑可以被单元测试覆盖游戏分辨率默认1152×76816:9 的 3/4由 gameConfig.json 统一管理而非硬编码。第二层Phaser 场景骨架——游戏主流程的主轴打开 main.ts会发现整款游戏的主流程其实是一张严格的场景注册清单场景职责模板文件Preloader自动启动加载全部资源Preloader.tsTitleScreen开始界面TitleScreen.tsLevelXScene具体关卡开发者自行添加—UIScene游戏内 HUD血量、分数UIScene.tsVictory / GameOver / GameComplete / Pause各类结算与暂停界面scenes/这条主线的生命周期是固定的Preloader → TitleScreen → 关卡场景 UIScene 并行 → 胜利进入下一关 → 全部通关回到标题。关卡顺序则收敛在 LevelManager.ts 的一个数组里static readonly LEVEL_ORDER: string[] [Level1Scene];新增关卡只需三件事创建场景类、在main.ts注册、把场景 key 加进LEVEL_ORDER。胜利/失败界面会自动根据这张表决定进入下一关还是回到标题。更关键的是 utils.ts——模板文档把它标记为CRITICAL禁止修改因为它解决了一批 Phaser 的著名怪癖initScale()统一处理精灵缩放、resetOriginAndOffset()修复动画播放后的锚点偏移、addCollider()保证碰撞回调参数顺序不颠倒。对新手而言这相当于把 Phaser 社区的经验教训打包成了标准库。所有可调参数血量、速度、屏幕尺寸、像素风开关统一存放在 gameConfig.json 中并采用{ value: X, type: ..., description: ... }的自描述包装格式——AI 改数值、人类读注释各得其所。第三层Tailwind CSS 打造像素风游戏 UIPhaser 负责画游戏世界DOM Tailwind负责游戏界面标题、血条、按钮。styles/tailwind.css 在 Canvas 之上叠加 UI 层而 tailwind.config.js 中用matchUtilities扩展出了一整套游戏专用组件game-pixel-container-*像素风容器、可点击按钮、进度条槽位用 9-slice 贴图border-image做出复古边框game-3d-container-*立体卡通风容器同一套命名法切另一套贴图。开发者写 UI 时只需要game-pixel-container-clickable-blue-500这样一行类名就能得到与 8-bit 画风一致的按钮——这就是模板能把界面也纳入 AI 自动化范围的原因UI 是声明式的、可枚举的。五大玩法模块从横版动作到塔防核心模板之上templates/modules/ 预置了五种游戏原型的半成品AI 生成游戏时按类型复制对应模块模块玩法方向预置能力platformer/横版动作 / 跑酷射击移动、跳跃、近战、远程、巡逻/追击 AI、终极技能冲刺、AOE、光束等top_down/俯视角射击双摇杆操控、敌人行为、弹幕系统grid_logic/棋盘 / 消除 / 回合制BoardManager、TurnManager、AnimationQueuetower_defense/塔防敌人波次、塔实体、路径系统ui_heavy/重 UI 游戏问答、卡牌对话、战斗与流程组件以 platformer 为例behaviors/ 目录把会走路的角色拆成可插拔的行为组件PlatformerMovement含土狼时间、跳跃缓冲、二段跳、MeleeAttack、RangedAttack、PatrolAI、ChaseAI再加 9 种终极技能行为。完整 API 列表见 platformer.md设计层面的规则见同目录的 design_rules.md——怎么设计好玩与代码怎么实现被刻意分成两份文档分别喂给设计模型和编码模型。下面三个成品分别来自不同模块的生成管线从模板到可玩成品一条完整的自动化管线模板架构的真正价值在于它服务于一条可重复验证的生成管线详见 QUICKSTART.md阶段动作依赖的模板能力1. 分类 脚手架判断游戏类型复制 core 模块骨架templates/2. 生成 GDD读取core.mddesign_rules.mdtemplate_api.mddocs/gdd/core.md3. 生成素材按 asset_protocol.md 产出asset-pack.json/animations.jsonPreloader 清单式加载4. 更新配置写gameConfig.json数值自描述 JSON 格式5. 编码实现读取全部Base*.ts模板类后实现关卡场景/行为/系统骨架6. 验证调试按 debug_protocol.md 跑构建与测试Vitest 类型检查测试用例覆盖了全部五种类型test-cases/game-test.ts金属Slug式横版射击、漫威格斗、星战俯视角、鱿鱼游戏红灯绿灯、猫咪塔防、皮卡чу网格解谜等——每跑通一个用例就证明模板架构在对应玩法上是可被 AI 稳定复用的。总结好模板 AI 的安全护栏回到开头的问题Phaser Vite Tailwind 如何支撑可玩 Web 游戏Vite提供即时热启动与可测试性让每次生成都能秒级验证Phaser的场景系统被收敛成固定生命周期 清单式关卡AI 只需填格子而不是发明结构Tailwind把像素风 UI 变成声明式类名界面同样可以被自动化生成而 utils.ts 与行为组件库则把 Phaser 的经验陷阱挡在了模板之外。这正是 OpenGame 模板架构的精髓它不是一个游戏项目而是让 AI 写游戏不出错的护栏系统。如果你想亲手体验从 templates/core/README.md 的 Quick Start 三步开始即可在本地跑起第一个可玩的 Phaser 游戏骨架。【免费下载链接】OpenGameOpenGame: Open Agentic Coding for Games项目地址: https://gitcode.com/gh_mirrors/op/OpenGame创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考