俄罗斯方块游戏 🎮

一个使用 HTML5 + JavaScript 实现的现代化俄罗斯方块游戏，完全响应式设计，支持 PC 和手机设备。

✨ 特性

• 🎯 完整的俄罗斯方块规则 - 支持7种标准方块形状
• 📱 完全响应式设计 - 适配 PC、平板和手机屏幕
• 🎮 多种控制方式
  • 键盘控制（PC）
  • 触屏按钮（手机/平板）
• 📊 完整的游戏系统
  • 分数计算系统（消除1/2/3/4行不同分数）
  • 等级升级系统（每消除10行升一级）
  • 速度递增机制（等级越高，下落速度越快）
• 👀 下一个方块预览
• ⏸️ 暂停功能
• 🎨 现代化的渐变色UI设计

🎮 游戏控制

键盘控制 (PC)

按键	功能
← →	左右移动
↓	下移
↑	旋转
空格	快速下落

触屏控制 (手机/平板)

• ← 左移 - 方块向左移动
• → 右移 - 方块向右移动
• ↓ 下移 - 方块下移一格
• ↻ 旋转 - 方块旋转
• ↓ 快速下落 - 方块快速下落到底部

按钮操作

• 开始游戏 - 开始新游戏
• 暂停 - 暂停/继续游戏
• 重新开始 - 重置游戏

🏆 计分规则

• 消除1行 - 40 × 等级 分
• 消除2行 - 100 × 等级 分
• 消除3行 - 300 × 等级 分
• 消除4行 - 1200 × 等级 分

📈 等级系统

• 每消除10行自动升一级
• 等级越高，方块下落速度越快
• 最高等级无限制

🚀 快速开始

方式一：直接打开

1. 克隆或下载此仓库
2. 在浏览器中打开 index.html 文件
3. 点击"开始游戏"按钮开始游玩

方式二：使用 Live Server（推荐）

1. 在 VS Code 中安装 "Live Server" 扩展
2. 右键点击 index.html → "用 Live Server 打开"
3. 游戏将在本地服务器上运行

方式三：GitHub Pages 部署

本项目已部署到 GitHub Pages，可直接在线游玩： 点击这里在线游玩

📁 文件说明

.
├── index.html       # 游戏主页面结构
├── style.css        # 游戏样式和响应式设计
├── tetris.js        # 游戏逻辑核心
└── README.md        # 本说明文档

index.html

• 定义游戏的 HTML 结构
• 包含游戏信息显示（分数、等级、消除行数）
• 包含 PC 和触屏控制按钮

style.css

• 现代化的渐变色设计
• 完全响应式布局
• 支持小屏幕（400px）到大屏幕的自适应

tetris.js

• TetrisGame 类：游戏主类
• 方块生成和旋转逻辑
• 碰撞检测和位置验证
• 游戏循环和渲染系统
• 分数和等级计算

🎨 技术栈

• HTML5 Canvas - 游戏渲染
• 原生 JavaScript - 游戏逻辑
• CSS3 - 样式和响应式设计
• 无外部依赖 - 零依赖实现

🔧 核心算法

旋转系统

• 矩阵旋转算法
• 支持墙踢(Wall Kick)机制：旋转失败时会自动尝试左右移动后再旋转

碰撞检测

• 逐像素碰撞检测
• 边界检测
• 已固定方块检测

游戏循环

• 基于 requestAnimationFrame 实现高效渲染
• 帧率无关的游戏速度控制

📱 响应式断点

• 大屏幕 (>600px) - 标准布局
• 中屏幕 (400px-600px) - 压缩布局
• 小屏幕 (<400px) - 极简布局

🐛 已知问题

目前没有已知问题。如发现 bug，欢迎提交 Issue。

💡 后续改进方向

• 添加音效和音乐
• 实现本地存储排行榜
• 添加不同难度模式
• 实现更多方块皮肤
• 支持本地多人对战（分屏）
• PWA 支持，离线游玩

📄 许可证

MIT License

👨‍💻 作者

neross666

🤝 贡献

欢迎 Fork 和提交 Pull Request！

---

祝游戏愉快！ 🎮🎉