legendary-smith

Imported from luster422/legendary-smith (AGENTS.md). Install upstream with npx skills add luster422/legendary-smith. Copyright stays with the author.

你是一名资深前端游戏工程师，请帮我从 0 开始设计并实现一个网页端 2D 横版动作闯关游戏 Demo。

项目名称： Legendary Smith / 传奇铁匠

项目定位： 这是一个基于 Next.js + Phaser + TypeScript 开发的网页端 2D 横版动作闯关游戏。玩法类似造梦西游早期横版清怪闯关模式。当前阶段只做最小可玩 Demo，不需要接入 AI，不需要登录，不需要数据库，不需要多人。

后续版本会加入 AI 武器锻造系统，所以本阶段的武器系统必须数据驱动，方便以后把预设武器替换成 AI 生成武器。

技术栈要求：

• Next.js App Router
• TypeScript
• Phaser 3
• React
• Tailwind CSS
• Zustand
• 不使用后端数据库
• 不接 AI
• 不接支付
• 不接登录
• 使用 public/assets 存放本地素材
• 可以先用简单几何图形或占位图片代替正式美术资源

核心目标： 实现一个可以运行的横版 2D 闯关 Demo，包含：

1. 一个玩家角色
2. 四个横版房间
3. 三种普通敌人
4. 三把预设武器
5. 一个宝箱奖励
6. 一个 Boss
7. 血量、能量、当前武器 UI
8. 背包和装备切换
9. 通关与死亡重开流程

游戏流程： 玩家进入关卡后，依次通过四个房间。

房间 1：教学房

• 刷 2 个史莱姆
• 玩家学习移动、跳跃和普通攻击
• 清怪后进入房间 2

房间 2：战斗房

• 刷 3 个史莱姆和 1 个飞蝠
• 清怪后出现宝箱
• 宝箱奖励“月牙镰刀”
• 玩家可以立即装备或放入背包
• 然后进入房间 3

房间 3：精英房

• 刷 1 个骷髅兵和 2 个史莱姆
• 清怪后奖励“火焰法杖”
• 然后进入 Boss 房

房间 4：Boss 房

• 出现 Boss“石像守卫”
• Boss 有两阶段
• 击败 Boss 后显示 Victory 通关界面

操作方式：

• A / D：左右移动
• W / Space：跳跃
• J：普通攻击
• K：技能攻击
• Shift：闪避
• E：交互 / 开宝箱
• I：打开或关闭背包
• Esc：暂停

玩家能力：

• 左右移动
• 跳跃
• 普通攻击
• 技能攻击
• 闪避
• 受击
• 死亡
• 装备武器
• 切换武器

玩家基础属性：

• hp: 100
• maxHp: 100
• mana: 50
• maxMana: 50
• speed: 220
• jumpVelocity: -460
• dashSpeed: 420
• dashDuration: 160ms
• invincibleDuration: 600ms

敌人类型：

1. 史莱姆 Slime

• hp: 30
• damage: 8
• speed: 60
• 行为：地面巡逻，玩家靠近后追击
• 被攻击后击退

2. 飞蝠 Bat

• hp: 22
• damage: 6
• speed: 90
• 行为：空中缓慢靠近玩家
• 不受重力影响

3. 骷髅兵 Skeleton

• hp: 60
• damage: 12
• speed: 75
• 行为：地面追击，靠近后近战攻击
• 比史莱姆更耐打

Boss：石像守卫 Stone Guardian

• hp: 300
• damage: 18
• speed: 55
• 阶段 1：
  • 慢速靠近玩家
  • 近距离挥拳攻击
• 阶段 2：
  • 当 hp 小于 50% 时进入阶段 2
  • 增加跳砸攻击
  • 每隔一段时间召唤 2 个史莱姆
• Boss 需要顶部 Boss 血条

武器系统： 本阶段必须做成数据驱动，后续 AI 生成武器会复用同样结构。

武器类型：

• sword
• scythe
• staff

攻击模式：

• short_slash
• wide_sweep
• magic_projectile

三把预设武器：

1. 铁剑 Iron Sword

• id: iron_sword
• type: sword
• pattern: short_slash
• damage: 12
• range: 1.2
• cooldown: 350ms
• knockback: 120
• manaCost: 0
• 描述：一把平衡的基础武器
• 默认装备

2. 月牙镰刀 Moon Scythe

• id: moon_scythe
• type: scythe
• pattern: wide_sweep
• damage: 18
• range: 2.0
• cooldown: 650ms
• knockback: 180
• manaCost: 0
• 描述：攻击范围大，但挥动较慢
• 房间 2 宝箱获得

3. 火焰法杖 Fire Staff

• id: fire_staff
• type: staff
• pattern: magic_projectile
• damage: 10
• range: 4.0
• cooldown: 800ms
• knockback: 80
• manaCost: 10
• 描述：发射火球，适合远程攻击
• 房间 3 清怪奖励

攻击表现：

• short_slash：玩家前方短距离矩形 hitbox
• wide_sweep：玩家前方较大范围弧形或大矩形 hitbox
• magic_projectile：发射一个向前飞行的火球 projectile

战斗反馈：

• 敌人受击时闪白或变色
• 敌人被击退
• 显示伤害数字
• 击杀敌人后消失
• 玩家受击后短暂无敌闪烁
• 攻击命中时可以有轻微屏幕震动
• Boss 受击时血条下降

UI 要求： 使用 React 做游戏外层 UI，Phaser 只负责游戏画面。

HUD 显示：

• 玩家 HP 条
• 玩家 Mana 条
• 当前装备武器名称
• 当前房间编号
• 剩余敌人数量
• 技能冷却状态

弹窗：

1. 武器奖励弹窗

• 显示武器名称
• 显示武器描述
• 显示伤害、范围、冷却、击退、耗蓝
• 按钮：立即装备
• 按钮：放入背包

2. 背包弹窗

• 按 I 打开 / 关闭
• 显示已获得武器列表
• 当前装备武器高亮
• 点击武器可以装备
• 显示武器详情

3. 暂停弹窗

• 按 Esc 打开
• 继续游戏
• 重新开始

4. 死亡弹窗

• 显示 Game Over
• 重新开始按钮

5. 通关弹窗

• 显示 Victory
• 显示通关时间
• 重新开始按钮

React 和 Phaser 通信： 请实现一个 EventBus，用于 Phaser 和 React 通信。

Phaser 发给 React 的事件：

• player-hp-change
• player-mana-change
• weapon-reward
• room-change
• enemy-count-change
• game-over
• victory
• open-inventory
• pause-game

React 发给 Phaser 的事件：

• equip-weapon
• close-reward-modal
• restart-game
• resume-game

项目目录结构请尽量按照以下设计：

src/ app/ page.tsx game/ page.tsx

components/ game/ GameCanvas.tsx ui/ Hud.tsx WeaponRewardModal.tsx InventoryPanel.tsx PauseMenu.tsx GameOverModal.tsx VictoryModal.tsx

game/ config.ts events/ EventBus.ts scenes/ BootScene.ts PreloadScene.ts StageScene.ts entities/ Player.ts Enemy.ts Boss.ts Chest.ts Projectile.ts combat/ HitboxSystem.ts DamageText.ts weapons/ WeaponTypes.ts WeaponData.ts WeaponRuntime.ts levels/ StageOne.ts RoomManager.ts effects/ SlashEffect.ts input/ InputManager.ts

store/ gameStore.ts inventoryStore.ts

types/ weapon.ts enemy.ts level.ts

public/ assets/ characters/ enemies/ weapons/ effects/ ui/

Next.js 与 Phaser 集成要求：

• Phaser 只能在客户端运行
• GameCanvas 组件必须使用 'use client'
• 在 Next.js 页面中使用 dynamic import 禁用 SSR
• 避免在服务端直接访问 window、document、Phaser

GameCanvas 要求：

• 挂载 Phaser.Game
• 页面卸载时 destroy Phaser 实例
• 画布自适应窗口
• 背景黑色
• 游戏分辨率建议 1280x720
• 使用 Phaser.Scale.FIT 或 RESIZE

Phaser 场景要求：

1. BootScene

• 初始化全局配置
• 跳转 PreloadScene

2. PreloadScene

• 加载占位素材
• 如果没有真实素材，可以用 Phaser Graphics 生成简单占位纹理
• 加载完成后进入 StageScene

3. StageScene

• 主游戏场景
• 创建玩家
• 创建地面平台
• 创建房间管理器
• 创建敌人
• 处理碰撞
• 处理攻击
• 处理房间切换
• 处理胜利和死亡

美术资源策略： 当前阶段不需要正式素材。 如果缺少图片，请用 Phaser Graphics 创建占位纹理，例如：

• 玩家：蓝色矩形
• 史莱姆：绿色圆形
• 飞蝠：紫色椭圆
• 骷髅兵：灰色矩形
• Boss：大型深灰色矩形
• 宝箱：黄色矩形
• 火球：橙色圆形
• 斩击：半透明白色或粉色矩形/弧形

地图策略： MVP 不需要 Tiled 或 LDtk。 先用代码生成简单横版房间。 每个房间宽度 1280，高度 720。 四个房间横向排列，或者用房间切换时重置场景内容。 地面是一个静态平台。 可以加入少量平台，但不要复杂。

房间推进规则：

• 每个房间开始时生成敌人
• 敌人全部死亡后，设置 roomCleared = true
• 如果该房间有奖励，则生成宝箱或弹出奖励
• 玩家走到右侧门区域后进入下一房间
• Boss 房击败 Boss 后触发 victory

代码质量要求：

• 使用 TypeScript 类型
• 避免把所有逻辑写在一个文件里
• 玩家、敌人、Boss、武器、房间管理分模块
• 武器攻击逻辑数据驱动
• 不要在 React state 中保存每一帧的玩家坐标
• React 只保存 UI 需要的状态
• Phaser 负责实时游戏逻辑
• 给关键类和函数添加简短注释

性能要求：

• 不要频繁创建大量对象
• projectile 和 damage text 可以简单销毁
• hitbox 可以用 Phaser overlap 检测
• 不需要复杂物理引擎，使用 Phaser Arcade Physics

交付目标： 请直接生成可以运行的初版代码。 要求 npm install 后可以启动。 运行方式： npm run dev 访问： /game

验收标准：

1. 页面可以正常打开游戏
2. 玩家可以左右移动和跳跃
3. 玩家可以普通攻击和技能攻击
4. 敌人可以被打死
5. 敌人可以伤害玩家
6. 玩家清怪后能进入下一个房间
7. 玩家可以开宝箱获得月牙镰刀
8. 玩家可以装备不同武器
9. 不同武器攻击范围、伤害、冷却不同
10. 玩家可以打 Boss
11. 击败 Boss 后显示 Victory
12. 玩家死亡后显示 Game Over
13. 背包可以打开并切换武器
14. 整个 MVP 不需要 AI，不需要后端，不需要数据库

请先输出项目结构，然后输出核心代码文件。 如果代码太多，请优先实现可运行版本，而不是完美架构。