# magic

**Repository Path**: ns2250225/magic

## Basic Information

- **Project Name**: magic
- **Description**: 解压的魔法小游戏
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-02
- **Last Updated**: 2026-10-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Pixel Spell Lab · 像素魔法练习场

一个以 **2D 像素魔法特效** 为核心的纯网页小游戏。扮演左侧的像素魔法师，选择法术、
按住蓄力、看魔法阵层层展开、松手把法术轰向右侧永远打不坏的稻草人。

所有美术（角色、场景、魔法阵、粒子、图标）与音效均为 **程序化生成**，零外部素材。

## 运行

```bash
npm install
npm run dev      # http://127.0.0.1:5173
npm run build    # 产物在 dist/
```

## 玩法

| 操作 | 说明 |
| --- | --- |
| 点击法术图标 / 数字键 `1`-`6` | 选择法术（火 / 冰 / 雷 / 风 / 暗 / 奥术） |
| 按住「按住蓄力」按钮 / `Space` / 按住画面 | 蓄力 0~3 秒，魔法阵与粒子随蓄力连续增强 |
| 松开 | 释放当前蓄力等级的法术 |

蓄力越满：魔法阵越大越亮、粒子越密、弹体越大、爆炸越猛、屏幕震动越强。
满蓄力瞬间会有 MAX CHARGE 闪光提示，可以一直按住不释放。
法术之间互不等待 —— 火球还在飞就可以接着蓄雷击，全部同时生效。

## 移动端

- **竖屏**：画布置顶，下方为操控台 —— 3×2 大号法术格 + 104px 释放按钮，左手选术、右手施法；也可直接按住画面任意处蓄力。
- **横屏**：全屏画面 + 底部紧凑覆盖 HUD（自动压缩图标与按钮）。
- 缩放规则：大屏整数倍放大保持像素锐利，手机屏幕用小数缩放铺满；适配刘海安全区（`viewport-fit=cover`），禁用双击缩放/长按菜单/橡皮筋滚动。
- 性能：帧率自适应降级（1500 → 800 → 400 粒子上限），音效在首次触摸时解锁（iOS 兼容）。

## 六种法术

- **火球术** — 压缩火球 + 火星尾迹，命中白闪 → 巨型爆炸 → 冲击波 → 地面余火
- **冰锥术** — 最多 7 连冰锥齐射，命中冰晶爆裂并短暂冻结稻草人
- **雷击术** — 地面电流爬行 → 天空变暗 → 巨型落雷，满蓄力三连雷 + 白昼闪爆
- **风刃术** — 高速半月气刃，满蓄力三刃交叉，卷起灰尘与速度线
- **暗影弹** — 吸收光线的黑核，命中空间塌缩后紫色冲击波爆开
- **奥术飞弹** — 身后浮现浮游魔法阵，大量贝塞尔弹幕齐射

## 技术

Vue 3 + TypeScript + PixiJS 7 + Vite。蓄力、魔法阵、Hit Stop、屏幕震动、
时间减速、对象池粒子（约 2000 上限）、视差夜景、WebAudio 合成音效、帧率自适应降级。
游戏逻辑渲染为 480×270 逻辑分辨率，按整数倍放大并保持 `image-rendering: pixelated`。

```text
src/game/
├── Game.ts            # 主循环 / 蓄力状态机 / 震动 / HitStop / 闪光
├── Audio.ts           # WebAudio 程序化音效
├── textures.ts        # 程序化像素贴图与图标
├── data/spells.ts     # 法术配置表
├── world/             # 背景 / 魔法师 / 稻草人
├── effects/           # 粒子系统 / 魔法阵 / 爆炸 / 冲击波
└── spells/            # 六种法术实现（SpellInstance 独立并行）
```