H5 游戏集合

一个包含多个HTML5游戏的集合，包括3D魔方游戏和愤怒的小鸟游戏。所有游戏都使用纯JavaScript和CSS实现。

🎮 可用游戏

1. 🧊 魔方游戏

一个功能完整的3D魔方游戏，支持6面旋转和自动求解。

2. 🐦 愤怒的小鸟

一个物理引擎驱动的弹弓射击游戏，包含碰撞检测和粒子效果。

🚀 快速开始

启动游戏集合

# 方法1: 直接双击 index_new.html 文件
# 方法2: 使用本地服务器（推荐）
python3 -m http.server 8080
# 然后访问 http://localhost:8080/index_new.html

选择游戏

在游戏选择界面点击对应的游戏卡片即可开始游戏。

---

📦 游戏详情

🧊 魔方游戏

文件: rubiks.html

功能特性

• 完整3D魔方：27个小方块组成的3x3x3魔方
• 6面旋转：U/D/L/R/F/B六个面的顺时针/逆时针旋转
• 打乱功能：随机旋转打乱魔方
• 自动求解：通过回溯移动历史自动还原魔方
• 游戏统计：步数计数和计时器
• 胜利检测：自动检测魔方是否已还原

交互控制

• 鼠标拖拽：360度旋转魔方视角
• 键盘控制：U/D/L/R/F/B键快速旋转各面
• Shift组合：Shift+字母进行逆时针旋转
• 触摸支持：移动设备触摸操作
• 按钮控制：清晰的UI按钮布局

技术实现

• CSS3 3D Transforms (transform-style: preserve-3d)
• JavaScript ES6+ 类结构
• 完整的单元测试覆盖

---

🐦 愤怒的小鸟

文件: angry-birds.html

功能特性

• 弹弓机制：拖拽瞄准的卡通弹弓
• 物理模拟：重力、碰撞、反弹
• 结构破坏：木质方块可以被击碎
• 小猪目标：5只小猪作为攻击目标
• 粒子效果：击碎时的动画效果
• 分数系统：根据表现计算得分
• 游戏状态：剩余小鸟数、生命值显示

交互控制

• 鼠标/触摸：拖拽弹弓瞄准和蓄力
• 键盘：空格键发射，R键重新开始
• 按钮：重新开始、下一个小鸟、返回菜单

技术实现

• 原生Canvas 2D渲染
• 自定义物理引擎（速度、重力、碰撞）
• 圆形与矩形碰撞检测
• 粒子系统
• 实时游戏循环

📂 项目结构

init-test/
├── index_new.html      # 🎮 游戏选择主菜单
├── menu.css            # 主菜单样式
│
├── rubiks.html         # 🧊 魔方游戏页面
├── rubiks-style.css    # 魔方游戏样式
├── cube.js             # RubiksCube核心逻辑类
├── controller.js       # 魔方游戏控制器
│
├── angry-birds.html    # 🐦 愤怒的小鸟页面
├── bird-style.css      # 愤怒的小鸟样式
├── bird.js             # 愤怒的小鸟游戏逻辑
│
├── test.html           # 浏览器端测试页面
├── test.js             # Node.js单元测试
├── README.md           # 项目文档
└── CHANGELOG.md        # 版本历史

🎮 游戏操作说明

魔方游戏

1. 旋转视角：在魔方上按住鼠标左右拖动
2. 旋转面：点击按钮或按键盘（U/D/L/R/F/B）
3. 逆时针旋转：Shift + 字母键
4. 打乱：点击"打乱"按钮
5. 重置：恢复到初始状态
6. 求解：自动还原魔方

愤怒的小鸟

1. 瞄准：在弹弓位置按住鼠标向后拖拽
2. 发射：释放鼠标或按空格键
3. 力度：拉拽距离决定发射力度
4. 目标：击碎所有小猪获胜
5. 下一只：当前小鸟停止后点击"下一个小鸟"

键盘控制（魔方）

• U/Shift+U : 上层面 顺时针/逆时针
• D/Shift+D : 下层面 顺时针/逆时针
• L/Shift+L : 左面 clockwise/逆时针
• R/Shift+R : 右面 clockwise/逆时针
• F/Shift+F : 前面 clockwise/逆时针
• B/Shift+B : 后面 clockwise/逆时针

键盘控制（愤怒的小鸟）

• 空格 : 发射当前小鸟
• R : 重新开始游戏
• N : 切换到下一只小鸟

🔧 技术栈

• HTML5：语义化标签和Canvas API
• CSS3：3D变换、动画、响应式设计
• JavaScript ES6+：类、箭头函数、模板字符串
• Canvas 2D：愤怒的小鸟渲染
• Git：版本控制

🧪 测试

运行单元测试

node test.js

预期输出

✅ 14/14 tests passed (100% success rate)

测试覆盖魔方游戏的核心逻辑，包括旋转、状态管理、求解算法等。

🚀 技术实现 (魔方游戏)

RubiksCube 核心类

• rotateFace(face, clockwise) : 旋转指定面
• shuffle(numMoves) : 随机打乱
• reset() : 重置到解决状态
• isSolved() : 检查是否已解决
• getState() / importState() : 状态序列化
• getMoveHistory() / replayMoves() : 移动历史管理
• solve() : 自动求解

CubeController 游戏控制器

• 3D渲染和场景管理
• 用户输入处理（鼠标、键盘、触摸）
• 游戏状态管理（步数、计时、胜利检测）

🌐 浏览器兼容性

• Chrome/Edge: ✅ 完全支持
• Firefox: ✅ 完全支持
• Safari: ✅ 完全支持
• 移动浏览器: ✅ 支持触摸操作

需要现代浏览器支持：

• CSS3 3D 变换 (transform-style: preserve-3d)
• ES6+ JavaScript 特性
• Canvas API（愤怒的小鸟）

📄 许可证

MIT License