nanocode/happy-games/games/tetris

🎮 俄罗斯方块游戏

经典俄罗斯方块游戏实现，遵循FC/Game Boy标准规则。

🎯 游戏特性

核心规则

• 场地尺寸: 10列 × 20行标准网格
• 方块类型: 7种标准四连方块 (I, O, T, L, J, S, Z)
• 控制方式: 虚拟按钮 + 键盘控制
• 分辨率: 540×720竖屏 (优化显示效果)

游戏机制

1. 方块生成: 纯随机生成7种方块
2. 移动控制: 左右移动、旋转、软降
3. 消行规则: 单行100分、双行300分、三行500分、四行800分
4. 等级系统: 每消除10行升1级，速度逐渐加快
5. 游戏结束: 新方块无法放置时结束

🎮 控制方式

虚拟按钮 (移动设备)

• ← 左移: 向左移动方块
• → 右移: 向右移动方块
• ↓ 软降: 加速下落 (每格+1分)
• ↻ 旋转: 顺时针旋转方块

键盘控制 (桌面设备)

• ← / →: 左右移动
• ↓: 软降加速
• ↑ / 空格: 旋转方块
• P: 暂停/继续游戏

触摸控制 (移动设备)

• 左右滑动: 水平移动
• 向下滑动: 软降加速
• 向上滑动: 旋转方块

📊 游戏界面

布局设计 (移动优化)

┌─────────────────────┐
│     游戏画布        │
│   (540×720像素)     │
├─────────────────────┤
│   虚拟控制按钮       │
│ [开始] [↻旋转] [重来] │
│    [←][↓][→]       │
├─────────────────────┤
│  游戏信息面板        │
│ 分数 | 等级 | 消行 | 速度 │
└─────────────────────┘

控制按钮特点

• 第一行: 开始(左) | 旋转(中) | 重来(右)
• 第二行: 方向按钮紧凑排列 ← ↓ → (间距5px)
• 按钮大小: 65×65像素，适合手指操作
• 布局优化: 方向按钮紧密排列，操作更便捷

控制按钮布局

• 第一行: 开始按钮 (左) | 旋转按钮 (中) | 重来按钮 (右)
• 第二行: 方向控制按钮 (← ↓ →)
• 开始按钮: 动态状态 (开始/暂停/继续/重新开始)
• 重来按钮: 立即重置游戏，重新开始

信息面板 (虚拟键盘下方)

• 分数: 当前游戏得分 (大字体显示)
• 等级: 当前游戏等级 (0-20)
• 消行: 已消除的行数
• 速度: 当前下落速度倍数

信息面板 (虚拟键盘下方)

• 分数: 当前游戏得分 (大字体显示)
• 等级: 当前游戏等级 (0-20)
• 消行: 已消除的行数
• 速度: 当前下落速度倍数

设计特点:

• 信息面板位于虚拟键盘下方，方便查看
• 水平排列，节省垂直空间
• 大字体显示，易于阅读
• 视觉增强：阴影、边框、间距优化

游戏状态

• 游戏进行中: 正常游戏状态
• 游戏暂停: 点击画布或按P键暂停
• 游戏结束: 显示最终得分和统计

🔧 技术实现

技术栈

• 游戏引擎: PlayCanvas (WebGL 2.0/WebGPU)
• SDK集成: Poki SDK (游戏状态管理)
• 分辨率: 540×720竖屏优化
• 响应式: 自适应不同屏幕尺寸

代码结构

TetrisGame类
├── 游戏初始化 (initGame)
├── 方块管理 (spawnNewPiece, rotatePiece, movePiece)
├── 碰撞检测 (checkCollision)
├── 消行逻辑 (clearLines, updateScore)
├── 游戏循环 (startGameLoop)
├── 渲染系统 (render, drawBlock, drawRect, drawLine)
└── 控制管理 (setupControls, setupUI)

关键算法

1. 碰撞检测: 实时检测边界和方块重叠
2. 旋转算法: 4×4矩阵转置实现90度旋转
3. 消行检测: 遍历每行检查是否填满
4. 分数计算: 基础分 × 等级倍数
5. 速度控制: 等级越高下落间隔越短

🚀 快速开始

访问方式

1. 通过游戏门户: http://129.211.173.87:8895/
2. 直接访问: http://129.211.173.87:8895/games/tetris/

开发测试

# 进入游戏目录
cd /home/ubuntu/nanocode/happy-games/games/tetris/

# 查看游戏文件
ls -la

# 编辑游戏配置
vim index.html

📈 游戏策略

新手技巧

1. 保持平整: 尽量填平底部，避免出现深坑
2. 预留空间: 为I型方块留出4格空间完成Tetris
3. 优先消行: 尽快消除行数提升等级
4. 控制速度: 高等级时提前规划方块位置

高级技巧

1. T-Spin准备: 虽然经典版无T-Spin，但可预留T型位置
2. 连消规划: 一次性消除多行获得更高分数
3. 速度适应: 随着等级提升调整操作节奏

🔄 更新日志

v1.2.0 (2026-04-03)

• ✅ 移动开始/重来按钮到底部控制行
• ✅ 布局优化：开始(左) | 旋转(中) | 重来(右)
• ✅ 方向按钮紧凑排列 (←↓→ 间距5px)
• ✅ 保持动态开始按钮状态 (开始/暂停/继续/重新开始)
• ✅ 保持快速游戏重置功能

v1.1.0 (2026-04-03)

• ✅ 优化移动端布局：信息面板移到虚拟键盘下方
• ✅ 改进信息面板设计：水平排列 + 大字体显示
• ✅ 增强视觉体验：阴影、边框、间距优化

v1.0.0 (2026-04-03)

• ✅ 实现经典俄罗斯方块核心规则
• ✅ 添加虚拟控制按钮系统
• ✅ 集成PlayCanvas游戏引擎
• ✅ 添加Poki SDK支持
• ✅ 实现分数和等级系统
• ✅ 优化540×720竖屏显示
• ✅ 添加游戏暂停/继续功能
• ✅ 集成到小游戏中心门户

📝 规则参考

详细规则请参考: 经典俄罗斯方块（标准复古版）规则.md

🎨 设计说明

视觉设计

• 色彩方案: 每种方块有独特颜色，易于区分
• 网格显示: 清晰显示10×20游戏场地
• 预览系统: 显示方块最终下落位置
• 高光阴影: 方块立体效果增强视觉体验

用户体验

• 响应控制: 虚拟按钮即时反馈
• 状态提示: 清晰显示游戏状态
• 信息展示: 实时更新分数和等级
• 错误处理: 无效操作无响应，避免误操作

🔗 相关链接

• 小游戏中心主页
• PlayCanvas文档
• Poki SDK文档
• 俄罗斯方块维基百科