Js实践之俄罗斯方块

前言

快到春节假期了，最近工作上没什么事情，浏览技术文章的时候看见关于俄罗斯方块相关的内容，才会起意实现下俄罗斯方块，主要目的有如下几条：

回顾下Js部分的知识
学习理解俄罗斯方块游戏的具体实现思想

具体实现

实现看下具体的实现效果，实现效果如下：

本次实现是简易版的俄罗斯方块包含基本俄罗斯方块的基本功能，本次实现的俄罗斯方块的基本功能有：

形状变换
满行消除
下一个形状提示
计分
等级

上面都是一个俄罗斯方块最基本的功能，本篇文章主要是说明在实现其功能中关键的几点，我认为对于初次实现该游戏没有思路的人来说下面几点是比较困惑的：

形状显示
形状变换
形状累积

形状显示

本次实现是Html+CSS+JS，对于形状的显示实际上就是定义特定的CSS class来显示的，在本次实现中游戏区域screen中由span节点组成，span节点如下：

// html
<span class="cell"></span>

而游戏区域呈现上图中样式，就是设置cell类的样式来实现的，具体的CSS类如下：

// css
.cell {}
.cell::before {}
.cell::after {}

现在类似于棋局就有了，接下来就要处理形状的形成以及下落了。

构建形状
形状的构建默认是一个二维数据，在这个二位数据中存储只有0或1，如下所示：

{
    I: [[1, 1, 1, 1]],
    J: [[1, 0, 0], [1, 1, 1]],
    T: [[0, 1, 0], [1, 1, 1]],
    L: [[0, 0, 1], [1, 1, 1]],
    Z: [[1, 1, 0], [0, 1, 1]],
    O: [[1, 1], [1, 1]],
    S: [[0, 1, 1], [1, 1, 0]]
 }

1表示该位置需要显示，借此实现形状的显示。

形状移动
通过上面的二维数据会渲染出形状，数据中每一个存在1的数组项会通过特定的方法生成对应的坐标(x,y)，而形状的左右以及向下移动都是通过设置x以及y的值来实现的。

将整个游戏区域看成以及坐标系，左上角第一块区域的坐标为(0, 0)依次类推，那么每一个cell都会存在一个坐标，形状的显示以及形状移动都是改变坐标以及替换对应坐标对应的DOM节点的class类来实现的。
（在本次实现中使用class类 on来实现形状的显示）

形状变化

形状的变化实际上就是改变其坐标来实现的，核心的处理代码如下：

let x = origin[0] - origin[1] + cell.y;
let y = origin[0] + origin[1] - cell.x;

上面的代码中origin表示变化中心，cell则是构成形状的所有坐标点。

形状累积

实际上是在内部维持了一个数组，该数组中对应每一个cell，值1表示显示，0表示不显示需要清除，形状的累积以及移动都依赖该数组。

结束

本篇文章并不会很详细将实现的每一步都介绍，只是提出几个关键点做一说明，详细注释的代码会上传到我的Github上。