俄罗斯方块

俄罗斯方块_总览

(19:17)

  1. 演示：通过键盘快捷键或鼠标点击

  2. matrix屏幕和二维数组映射关系

  3. 7种方块blocks、当前方块currB、下一方块nextB、运动位置xy

  4. 状态: 就绪ready、下落fall、结束over、暂停paused

  5. 得分规则：
    难度级别越高移动速度越快，下落和消除的得分也越高
    下落得分：1 * 级别
    消除得分：Math.pow(2, 消除行数) * 级别 * 10

俄罗斯方块_初始化与场景复原

(30:28)

  1. 电子表

  2. onResize

  3. localStorage获取与存储

  4. matrix，array(20, array(10))

  5. 保存/复原 visibilitychange

俄罗斯方块_UI与事件

(31:10)

  1. 按钮与keyCode映射，预先选择好元素

  2. 事件，onKeyDown/Up，onMouseDown/Up，onTouchStart/End

  3. 就绪状态下设置初始行数和难度级别，恐龙动画，最高分与上轮得分交替显示

  4. 音效，$audio.open()，$audio.start()

  5. 暂停，图标闪烁

俄罗斯方块_开始下落

(31:06)

  1. 播放音乐

  2. 在底部给每个起初行填充后随机挖空若干

  3. 随机挑选一个方块作为下一方块

  4. 把下一方块设为当前方块置于顶部中间位置

  5. 开始下落，Y轴加一，移动速度，循环

  6. 碰撞检查，some()嵌套检查Y轴X轴

  7. 碰撞颜色高亮动画，加分

  8. 检查哪些行（不包含0的行）可以消除

  9. 播放消除行声音及颜色高亮动画

  10. 添加得分

  11. 累计已消除行数

俄罗斯方块_按钮

(41:03)

  1. 左右移动，边界检查

  2. 旋转，先临时行列对调、摆正位置，碰撞检查OK后再实施

  3. 速降，按住循环执行，每步渲染

  4. 掉落，循环执行直到碰撞或触底，无渲染（事件完成后平台自动渲染）

  5. 下落、下移和掉落通过$v.fall和$l.fall来排他执行

  6. 重玩，计算最高分，清屏动画

由众触低代码平台生成和驱动