# angrybird

**Repository Path**: jasydong/angrybird

## Basic Information

- **Project Name**: angrybird
- **Description**: 愤怒的小鸟
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-17
- **Last Updated**: 2026-07-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🐦 愤怒的小鸟 — Angry Birds Web Edition

一个用 HTML5 Canvas + Matter.js 物理引擎构建的类「愤怒的小鸟」Web 游戏。无需构建步骤，开箱即玩。

![tech](https://img.shields.io/badge/HTML5-Canvas-e34f26?logo=html5&logoColor=white)
![tech](https://img.shields.io/badge/Matter.js-0.19-4b5562)
![tech](https://img.shields.io/badge/JavaScript-Vanilla-f7df1e?logo=javascript&logoColor=black)
![license](https://img.shields.io/badge/license-MIT-green)

---

## ✨ 功能特性

- 🎮 **弹弓发射机制** — 拖拽小鸟到弹弓后方，松手发射；支持鼠标和触摸
- 📈 **实时弹道预测** — 拖动时显示白色预测轨迹点，与物理引擎同步（含重力 + 空气阻力）
- 💥 **基于速度的碰撞伤害** — 碰撞越猛烈伤害越高；小鸟直接撞击伤害 ≈ 碎片砸伤的 2.5 倍
- 🧱 **三种可破坏材质** — 木头、冰块、石头，各有独立血量、密度、纹理与破坏粒子
- 🐷 **小猪敌人系统** — 带 HP 血条，受伤闪红，消灭时爆出绿色粒子并加分
- 🎯 **4 个递进关卡** — 入门 → 木屋 → 冰塔 → 堡垒
- 🏆 **完整游戏循环** — 胜利/失败判定、剩余小鸟奖励分、关卡切换、重玩
- 🎨 **丰富视觉效果** — 屏幕震动、粒子飞溅、渐变天空、远近山峦、云朵、愤怒小鸟表情
- 📱 **响应式自适应** — 自动缩放适配桌面与移动端屏幕

---

## 🚀 快速开始

### 方式一：本地服务器（推荐）

```bash
cd angrybird
python3 -m http.server 8000
```

浏览器打开 [http://localhost:8000](http://localhost:8000)。

> 也可用 `npx serve`、`php -S localhost:8000` 等任意静态服务器。

### 方式二：直接打开

双击 `index.html` 用浏览器打开。

> 注意：部分浏览器在 `file://` 协议下会限制 CDN 资源加载。如遇 Matter.js 无法加载，请改用方式一。

---

## 🎯 玩法说明

| 操作 | 说明 |
|------|------|
| **按住小鸟拖动** | 向弹弓**左下方**拖动，拉伸越远力度越大（最大 130 像素） |
| **松手发射** | 沿拉伸反方向飞出，拖动时可见白色预测点 |
| **目标** | 消灭所有绿猪即可通关 |
| **奖励** | 通关时每只未使用的小鸟额外加 1000 分 |

### 发射角度建议

```
        ╱ 60°（打得高，打远处高处目标）
       ╱
      ╱ 45°
     ╱
    ╱ 30°（打得远，推荐清理地面目标）
   ╱
  🐦━━━━ 弹弓
```

- **30–45°** 射程最远，适合清理地面目标
- **高角度** 适合打击高处塔顶的猪
- 试试用石头/冰块碎片砸落造成连锁破坏！

---

## 📦 项目结构

```
angrybird/
├── index.html      # 页面结构，引入 Matter.js CDN
├── style.css       # UI 样式（天空背景、弹窗、按钮、HUD）
├── game.js         # 全部游戏逻辑（~1090 行）
└── README.md       # 本文档
```

文件分工清晰，无第三方构建工具依赖。

---

## 🏗️ 技术架构

### 技术选型

| 组件 | 技术 | 用途 |
|------|------|------|
| 渲染 | HTML5 Canvas 2D | 自定义绘制小鸟、猪、方块、背景 |
| 物理 | [Matter.js](https://brm.io/matter-js/) 0.19 | 刚体动力学、碰撞检测、堆叠 |
| 逻辑 | 原生 JavaScript (ES6) | 游戏状态机、输入处理、伤害系统 |

### 核心模块（`game.js`）

```
game.js
├── 常量 & 配置         (L9-29)   世界尺寸、物理参数、材质表
├── 关卡数据 LEVELS     (L31-129) 4 个关卡的方块/猪/弹弓坐标
├── Game 全局状态对象    (L131-163) 引擎、实体列表、状态机字段
├── init / resize       (L165-231) 初始化、自适应缩放
├── loadLevel           (L233-301) 关卡加载、实体生成
├── setupInput          (L323-405) 鼠标/触摸拖拽发射
├── computeTrajectory   (L407-430) 弹道预测（与引擎同步）
├── 碰撞 & 伤害         (L432-495) handleCollisionStart / applyDamage
├── 粒子 & 震动         (L497-531) 视觉反馈
├── 胜负判定            (L533-588) checkWin / checkLose
├── 主循环 loop         (L604-660) 物理步进 + 状态更新
└── 渲染层              (L662-1090) 背景/地面/弹弓/实体绘制
```

### 物理参数

```javascript
const WORLD_W     = 1280;    // 逻辑世界宽
const WORLD_H     = 720;     // 逻辑世界高
const GROUND_H    = 80;      // 地面高度
const G_STEP      = 0.278;   // 每步重力增量 = gravity.y × gravity.scale × (1000/60)²
const AIR_DRAG    = 0.99;    // 空气阻力 = 1 - frictionAir(0.01)
const MAX_DRAG    = 130;     // 弹弓最大拉伸距离（像素）
const LAUNCH_POWER = 0.16;   // 初速 = 拉伸距离 × 系数（像素/步）
```

> 轨迹预测算法与 Matter.js 的物理积分保持一致，因此白色预测点与实际飞行轨迹高度吻合。

### 材质配置

| 材质 | 颜色 | 血量 | 密度 | 特点 |
|------|------|------|------|------|
| 🪵 木头 wood | `#c89a5b` | 60 | 0.0016 | 中等平衡，带木纹 |
| 🧊 冰块 ice | `#a8d8f0` | 30 | 0.0010 | 脆弱、半透明、易碎 |
| 🪨 石头 stone | `#9aa0a6` | 140 | 0.0035 | 坚固沉重，难破坏 |

### 伤害计算

```
碰撞速度 speed = |相对速度|（像素/步）
若 speed < 3 → 忽略（轻碰不算）

小鸟直接撞击：  dmg = speed × 5.0（猪） / 4.5（方块）
碎片/其他撞击：dmg = speed × 2.2（猪） / 1.8（方块）
```

---

## 🎮 关卡一览

| 关卡 | 名称 | 小鸟 | 方块 | 小猪 | 难度 |
|:----:|------|:----:|:----:|:----:|:----:|
| 1 | 入门 | 3 | 3 | 3 | ⭐ |
| 2 | 木屋 | 4 | 6 | 3 | ⭐⭐ |
| 3 | 冰塔 | 4 | 10 | 4 | ⭐⭐⭐ |
| 4 | 堡垒 | 5 | 12 | 6 | ⭐⭐⭐⭐ |

右上角控制按钮可自由切换关卡（◀ ▶）或重玩（↻）。

---

## 🛠️ 自定义与扩展

### 添加新关卡

在 `game.js` 的 `LEVELS` 数组末尾追加一个关卡对象：

```javascript
{
    birds: 4,                                   // 小鸟数量
    slingshot: { x: 220, y: WORLD_H - GROUND_H - 80 },
    blocks: [
        // { x, y, w, h, material }  —— 坐标为方块中心点
        { x: 900, y: WORLD_H - GROUND_H - 40, w: 40, h: 80, material: 'wood' },
        { x: 1000, y: WORLD_H - GROUND_H - 40, w: 40, h: 80, material: 'stone' },
        { x: 950, y: WORLD_H - GROUND_H - 95, w: 160, h: 25, material: 'wood' },
    ],
    pigs: [
        // { x, y, r }  —— r 为半径
        { x: 950, y: WORLD_H - GROUND_H - 25, r: 26 },
    ]
}
```

**坐标系**：左上角为原点 `(0,0)`，向右为 +x，向下为 +y。地面顶部 y = `WORLD_H - GROUND_H` = 640。

### 调整游戏难度

修改 `game.js` 顶部的常量：

| 想要的效果 | 修改参数 |
|-----------|---------|
| 小鸟飞得更远/更近 | `LAUNCH_POWER` 调大/调小 |
| 拉得更长 | `MAX_DRAG` 调大 |
| 重力更强/更弱 | 改 `Game.engine.gravity.y`（默认 1） |
| 方块更耐打 | `MATERIALS[*].hp` 调大 |
| 小鸟撞击更猛 | `applyDamage` 中的 `birdHit` 倍率 |

---

## ✅ 测试

使用 jsdom 进行了无头逻辑测试，覆盖以下场景（均通过）：

- ✅ Matter.js 加载与 `Game` 对象初始化
- ✅ 4 个关卡数据完整加载（实体数量正确）
- ✅ 发射机制（初速方向正确、物理模拟正常）
- ✅ 碰撞伤害（高速撞击让猪掉血并消灭）
- ✅ 胜利判定（消灭所有猪后弹出"胜利！"）
- ✅ 失败判定（小鸟用尽仍有猪时弹出"失败！"）
- ✅ 重玩按钮（关闭弹窗并重载关卡）

---

## 🌐 浏览器兼容性

- ✅ Chrome / Edge 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ 移动端浏览器（支持触摸操作）

需要支持 Canvas 2D 和 ES6 语法。

---

## 📄 许可证

MIT License — 可自由使用、修改、分发。

## 🙏 致谢

- 物理引擎：[Matter.js](https://brm.io/matter-js/) by Liam Brummitt
- 灵感来源：Rovio Entertainment 的《愤怒的小鸟》

---

> 🎮 准备好了吗？拉满弹弓，发射！