俄罗斯方块 (Tetris Game)

一个功能完整、视觉酷炫的俄罗斯方块游戏，采用原生JavaScript和Canvas开发，包含10个挑战关卡。

项目简介

这是一个纯前端实现的俄罗斯方块游戏，使用ES6模块化开发，具有流畅的动画效果、粒子系统和渐进式难度系统。游戏包含10个不同难度的关卡，从新手村到终极挑战，每个关卡都有独特的背景色和速度设置。

功能特性

• ✨ 酷炫视觉效果

  • 3D方块渲染效果
  • 发光边框和阴影
  • 动态背景渐变
  • 粒子消除特效
  • 流畅的动画过渡

• 🎮 完整游戏功能

  • 标准俄罗斯方块玩法
  • SRS旋转系统（Super Rotation System）
  • 幽灵方块预测落点
  • 方块保持功能（Hold）
  • 硬降落和软降落
  • 暂停/继续功能

• 🏆 10个挑战关卡

  1. 新手村 - 1000ms
  2. 初级挑战 - 900ms
  3. 进阶之路 - 800ms
  4. 高手对决 - 700ms
  5. 极限速度 - 600ms
  6. 疯狂模式 - 500ms
  7. 地狱难度 - 400ms
  8. 传说之境 - 300ms
  9. 神话领域 - 200ms
  10. 终极挑战 - 100ms

• 📊 完善的统计系统

  • 实时得分统计
  • 消除行数记录
  • 关卡进度显示
  • 游戏结束统计

技术栈

• 原生JavaScript (ES6+) - 模块化开发
• HTML5 Canvas - 游戏渲染
• CSS3 - 现代化UI设计
• 动画系统 - requestAnimationFrame

项目结构

tetris/
├── index.html              # 主页面
├── css/
│   └── style.css          # 样式文件
├── js/
│   ├── config.js          # 游戏配置（方块形状、关卡设置等）
│   ├── game.js            # 游戏核心逻辑
│   ├── renderer.js        # 渲染系统（视觉效果）
│   ├── level.js           # 关卡管理系统
│   └── main.js            # 主程序入口
├── .gitignore             # Git忽略配置
└── README.md              # 项目说明

快速开始

直接运行

1. 克隆或下载项目到本地
2. 直接用浏览器打开 index.html 文件即可开始游戏

使用本地服务器

# 使用Python
python -m http.server 8000

# 使用Node.js
npx serve

# 使用PHP
php -S localhost:8000

然后在浏览器中访问 http://localhost:8000

游戏操作

按键	功能
⬅️ 左箭头	向左移动
➡️ 右箭头	向右移动
⬆️ 上箭头	旋转方块
⬇️ 下箭头	加速下落（软降落）
空格键	硬降落（瞬间落地）
C 键	保持当前方块
ESC 键	暂停/继续游戏

游戏规则

基础规则

• 控制下落的方块，填满一行即可消除
• 消除行数越多，得分越高
• 方块堆到顶部游戏结束

得分系统

• 消除1行：100分 × 关卡等级
• 消除2行：300分 × 关卡等级
• 消除3行：500分 × 关卡等级
• 消除4行（Tetris）：800分 × 关卡等级
• 软降落：每格1分
• 硬降落：每格2分

关卡系统

• 每消除10行升一级
• 关卡越高，方块下落速度越快
• 每个关卡都有独特的背景色
• 最高10级，速度从1000ms降至100ms

方块类型

游戏包含7种经典俄罗斯方块：

• I型 - 青色，直线方块
• O型 - 黄色，正方形方块
• T型 - 紫色，T字形方块
• S型 - 绿色，S字形方块
• Z型 - 红色，Z字形方块
• J型 - 蓝色，J字形方块
• L型 - 橙色，L字形方块

特色功能

幽灵方块

半透明显示方块的预测落点，帮助玩家精确定位

方块保持

按C键可以保存当前方块，稍后使用（每次落地后可使用一次）

SRS旋转系统

采用标准的超级旋转系统，支持踢墙操作，让旋转更加灵活

粒子特效

消除行时会产生炫酷的粒子爆炸效果

动态背景

背景色随关卡变化，营造不同的游戏氛围

浏览器兼容性

• ✅ Chrome (推荐)
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Opera

建议使用最新版本的现代浏览器以获得最佳体验。

开发说明

代码规范

• 使用ES6模块语法（import/export）
• 采用解构导入方式
• 代码包含中文注释
• 遵循模块化设计原则

核心模块

config.js - 游戏配置

• 定义游戏常量
• 方块形状数据
• 关卡配置
• 得分规则

game.js - 游戏逻辑

• 方块移动和旋转
• 碰撞检测
• 行消除逻辑
• 得分计算

renderer.js - 渲染系统

• Canvas绘制
• 视觉特效
• 粒子系统
• 动画效果

level.js - 关卡管理

• 关卡进度跟踪
• 难度调整
• 关卡信息管理

main.js - 主程序

• 游戏循环
• 事件处理
• UI更新
• 游戏状态管理

未来计划

• 添加音效和背景音乐
• 实现本地最高分记录
• 添加AI对战模式
• 支持触屏操作（移动端）
• 添加更多视觉主题
• 实现在线排行榜
• 添加成就系统

贡献

欢迎提交Issue和Pull Request！

许可证

MIT License

作者

systiger

---

⭐ 如果你喜欢这个项目，欢迎给个Star！

🎮 祝你游戏愉快，挑战成功！