easy-tetris 简易版俄罗斯方块

学校课设作业：写一个微信小程序的游戏。 因为没有用到微信权限相关的 api，所以相当于一个全前端的 html/css/js 项目了。想在小程序中运行的话只需要加载这些代码到小程序环境中即可。

整体思路

• 在canvas画布中画出格子背景

• 实现不同形状的俄罗斯方块 以L型方块为例（以下都是）：

  var Lblock = [[1,0,0],[1,1,1]];

• 实现不同（顺时针旋转）状态的俄罗斯方块 每个形状的俄罗斯方块都有四个状态，通过旋转更改状态

  var LblockArr = [
  [[1, 0, 0],[1, 1, 1]],
  [[1, 1],[1, 0],[1, 0]],
  [[1, 1, 1],[0, 0, 1]],
  [[0, 1],[0, 1],[1, 1]]
  ];

• 当前移动的方块的状态的记录 俄罗斯方块类的基本参数

  key	comment
  x	x轴偏移格子个数
  y	y轴偏移格子个数
  renderArr	渲染数组(包含四种状态)
  color	方块填充色
  borderColor	方块瞄边色
  curArr	当前绘制使用的数组
  wblocks	方块横向占格数
  status	当前旋转状态

• 增加事件监听、按键行为

• 规则判定函数的编写

• 不再下降的方块的位置记录 用一个与canvas画布背景格数相同的数组来存储状态，每个格子存储1/0（有无方块）及颜色信息。方块下方有方块/碰底时触发数据存储。

• 界面优化

预览

预览地址：https://kuro-p.github.io/Easy-Tetris/tetris