# pvz-shoot

**Repository Path**: studyzy/pvz-shoot

## Basic Information

- **Project Name**: pvz-shoot
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-31
- **Last Updated**: 2026-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 戴夫的后院 · Dave's Backyard

植物大战僵尸风格的 3D 第一人称射击小游戏，纯 Web 实现，iPhone / iPad / 电脑浏览器都能直接玩。

你是戴夫，手里拿的不是枪，而是一株株会射击的植物；冲上来的是成群的僵尸。

## 在线试玩

<https://studyzy.github.io/pvz-shoot/>

推送到 `main` 后由 GitHub Actions 自动构建并发布到 GitHub Pages（工作流：`.github/workflows/deploy.yml`）。

## 僵尸图鉴

主菜单右上角的「僵尸图鉴」会打开独立页面（`gallery.html`）：列出普通 / 路障 / 铁桶 / 橄榄球 / 气球 / 骷髅 / 巨型骷髅 7 种僵尸，默认循环播放**游戏内的走路动画**；可以拖动旋转、滚轮 / 双指缩放，或使用 3/4、正面、侧面、背面、俯视按钮切换机位。

## 性能压测台

主菜单右上角的「压测台」会打开独立页面（`stress.html`）：选僵尸类型、拖同屏数量（0–64 只），实时看 FPS、帧时间 P95、draw call 与三角面。
点「自动测极限」会从 2 只开始逐档加量，掉到 45fps 以下自动停下，直接告诉你这台手机 / iPad 大概能撑多少只。
压测页刻意**不启用**游戏的自动降分辨率，读到的就是设备的真实开销；阴影、骨骼动画、2× 像素比都能单独开关，方便判断瓶颈在哪。

## 夜之森林 · 月光童话战场

90×90米的奇幻夜景：月心古树、菌菇林、营地、古墓和兽巢通过主路与环路相连。首波3哥布林+2史莱姆；族群轮换、粉史莱姆分裂、蜘蛛预警和幽灵穿树，让不同区域有不同的战斗选择。
巨人砸地、蘑菇王蹲姿减伤、巨龙与蝙蝠落地窗口已实装；免费豌豆可以抓住低落窗口，不依赖随机对空补给。森林休整可点「准备好了」或按Enter提前继续，双人由房主确认。完整数值见 [玩法说明](docs/GAMEPLAY.md)。

## 快速开始

```bash
npm install
npm run dev
```

启动后终端会打印局域网地址（例如 `http://192.168.1.8:5173/`）。
手机 / iPad 与本机连同一个 Wi-Fi，用 Safari 打开这个地址即可。

生产构建：

```bash
npm run build     # 输出到 dist/
npm run preview   # 本地预览构建产物
```

`dist/` 是一份纯静态站点，丢到任意静态托管（Nginx、GitHub Pages、Vercel……）都能跑。

> 注意：不能直接双击 `dist/index.html` 用 `file://` 打开，浏览器的模块 / 音频限制会拦截，必须用 HTTP 服务。

## 双人联机（实验）

当前是 **M0/M1 + M2 input / 僵尸 / 命中 / 救援**：自动配对、邀请链接、多场并发、断线重连；僵尸由房主模拟并同步，客人的命中由房主裁决，共享阳光值、个人分与倒地救援已接。共享补给 / 阳光球同步 / 结算页 / 断线 resync 还在开发中。

```bash
npm install
npm run build
npm run server    # 默认 8080，同时托管 dist/ 和 /ws
```

打开 `http://<服务器>:8080/`，点「双人联机」；等待时点「复制邀请链接」发给朋友，朋友打开即加入。开发时用 `npm run dev`（5173）+ `npm run server`（8080）。部署、环境变量、systemd/Caddy 见 [server/README.md](server/README.md)。

## 操作方式（自动识别设备）

进入游戏时自动判断：粗指针 / 无 hover 设备（iPhone、iPad）用虚拟触屏控制；
有鼠标的设备（电脑）自动切换成经典 FPS 键鼠，并隐藏屏幕上的虚拟按键。

**横屏游戏**：手机 / iPad 竖屏打开会显示「请横屏游玩」的全屏提示，把设备横过来（并关闭系统竖屏锁定）即可进入；支持全屏方向锁的浏览器可以点提示里的「尝试全屏横屏」。电脑端请把窗口拉宽。

**iPhone / iPad（横屏）**
- 左下 **固定摇杆**：按住摇杆拖动移动（松开自动回中）
- 右半屏拖动：转动视角瞄准（带触屏辅助瞄准）
- 右下大号 **开火**：按住连射；**跳跃**在开火正上方
- 开火左侧的植物栏：点一下切换，玉米炮 / 樱桃需要消耗阳光
- 地上的植物走上去就会自动拾取，拾取后出现在第 5 格战利品位

**电脑**
- `W A S D` 移动，鼠标瞄准，左键射击，空格跳跃
- `1 2 3 4` 或点击底部植物栏切换植物；`5` / `Q` 切回捡到的战利品
- 点击开始后自动锁定鼠标；按 `Esc` 暂停，暂停界面的「继续战斗」会重新锁定

两种输入可以同时用（接键盘的 iPad 也能 WASD）。

## 玩法

- 进入游戏先选地图：**戴夫的后院**（经典草地）或 **雪地**（按 CS 的 fy_iceworld 复刻：田字四根高柱、两侧可跳矮墙、两端基地与成排地面武器）。
- 一波一波的僵尸从场地四周的泥土里钻出来，清完一波进入下一波，每 5 波出现一次巨人僵尸。
- 击杀僵尸掉落阳光，靠近会自动吸附并拾取；阳光是寒冰、樱桃和玉米加农炮的弹药。
- 地图上散落着会发光的植物，走上去就能拾取，附带一包弹药，打空后自动换回豌豆射手；越大的地图刷得越多。
- 生命值不会自动回满：脱战 7 秒后缓慢回复，每清一波额外回血。
- 爆头造成双倍伤害；击杀得分，清波有额外奖励。
- 死亡后进入结算界面，可以直接再来一局，也可以点「换地图」回主菜单。

| 植物 | 获取 | 特点 |
| --- | --- | --- |
| 豌豆射手 | 初始 | 免费，无限弹药 |
| 寒冰射手 | 初始 | 3 阳光/发，命中减速 |
| 樱桃炸弹 | 初始 | 22 阳光/发，抛投爆炸 |
| 玉米加农炮 | 初始 | 40 阳光/发，即时命中 |
| 双发射手 | 地面拾取 | 一次两发，70 发 |
| 三线射手 | 地面拾取 | 三向散射，48 发 |
| 机枪射手 | 地面拾取 | 超高射速，140 发 |
| 仙人掌 | 地面拾取 | 一发穿透三只，40 发 |
| 西瓜投手 | 地面拾取 | 大范围爆炸，10 发 |
| 火爆辣椒 | 地面拾取 | 引燃一片，6 发 |

僵尸：普通僵尸、路障僵尸、铁桶僵尸、橄榄球僵尸、气球僵尸、雪地骷髅，以及第 5 / 10 / 15… 波出现的巨型骷髅 Boss（顶部有独立血条）。

## 二次开发

给 AI Agent / 开发者的项目速览、架构约定、常见改动路径与验收清单，见 **[AGENTS.md](AGENTS.md)**。

## 详细数值与图鉴

武器伤害、冷却、消耗、波次构成、僵尸属性与掉落等完整数据，见 **[docs/GAMEPLAY.md](docs/GAMEPLAY.md)**。

## 技术说明

- Three.js 实时 3D。僵尸使用外部 glb 模型（普通=炼金模型、橄榄球=AIGC 模型、骷髅=KayKit、路障/铁桶/气球=Quaternius），带骨骼动画与程序化头盔/铁桶/木棒配件；场景与植物模型程序化建模，音效为 WebAudio 实时合成。
- 移动端适配：强制横竖屏布局、安全区、动态摇杆、多点触控、DPR 上限与自动降分辨率。
- 触屏辅助瞄准：准星进入目标锥形范围会自动吸附，准星变金色表示已锁定。
- 雪地的高低差：中央四根 9 × 9 米、约 3.6 米高的方形冰柱按田字排开，挡住视线且跳不上去；两侧矮墙约 0.85 米，可以跳上去站稳；四角砖台可以直接踏步走上去。
- 性能：约 110～250 个 draw call（同屏最多 14 只，普通僵尸约 1 万三角面；各类型的 draw call 与三角面可在压测台里看）；桌面 / iPad 开实时阴影，帧率不足时自动降低渲染分辨率。

## 目录

```
index.html          页面结构 + HUD
gallery.html        僵尸图鉴页入口
stress.html         性能压测页入口
src/style.css       全部界面样式
src/gallery/        图鉴页场景、类型数据与样式
src/stress/         压测页场景、帧率统计与样式
src/main.js         入口
src/Game.js         主循环、状态机、波次与镜头
src/config.js       数值、植物、僵尸、波次配置
src/world/          后院 / 雪地场景、地图注册表、材质与程序化贴图
src/entities/       玩家、僵尸、僵尸波次管理、阳光、地面武器拾取
src/weapons/        手持植物、射击、弹道与爆炸
src/fx/             粒子与爆炸特效
src/audio/          音效（CC0 采样 + 程序化合成）
public/audio/       CC0 音效素材（构建时内嵌，见 LICENSE-audio.txt）
src/input/          键鼠 + 触屏输入、模式识别
src/ui/             HUD
public/textures/    文生图生成的僵尸皮肤 / 布料 / 金属贴图
```

## 小贴士

- iPhone 上建议「添加到主屏幕」再打开，可以全屏、没有地址栏，体验更接近 App。
- 首次点击「开始保卫后院」时才解锁音频（iOS 的限制），所以不要静音启动。
- 觉得难度不够？`src/config.js` 里可以调僵尸血量、速度、波次预算和植物伤害。