俄罗斯方块教学版

第一天

Tasking

• 用户进入游戏的时候可以看到游戏开始页面

  • 思考实现底层
    • 程序 = 数据结构（二维数组）+ 算法
  • setup 项目
  • vue3 + vite + jest + ts
  • 构建游戏页面

• 可以看到掉落的方块

  • 让方块先渲染到视图上

  • 方块可以掉落

• 方块掉落到最下面边界的时候就会停下来

  • 获取 box 的底部所有的点
  • 检测是否超出游戏范围（row col）

第二天

Tasking

• 方块掉落到底部的时候就停下来了

  • 重构底部的碰撞检测逻辑

• 方块掉落的停下来的时候就会有新的方块掉下来

• 方块掉落到其他方块的时候也会停下来

  • 和其他方块的碰撞检测
    • 需要筛选出边界点

• 用户用方块凑满了一行的话，会消除当前凑满的行，并且会看到上面的行会掉落下来？

  • 获取满行的索引
  • 基于满行的索引消除

• 新的方块是随机生成的

• 用户可以操作空格键来旋转正在掉落的方块?

  • 逆时针 90 度

    • 列 = 行

    • 行 = n -1 - 列（j）;

      • n 表示总行数

第三天

Tasking

• 用户点击 startGame 才可以开始游戏

• 用户可以看到对手的游戏界面

• 用户通过对手的游戏界面看到的掉落的方块需要和对手正在掉落的方块一样

• 用户可以看到对手的所有游戏操作

  • 方块的向下移动

  • 方块的向左移动

  • 方块的向右移动

  • 方块旋转