HTML5边玩边学（九）-俄罗斯方块之数据模型篇

要写一个俄罗斯方块小游戏，我们先来一块考虑一下下面几个问题：

1、用什么表示方块

2、怎么设置或者改变方块的颜色

3、怎么移动方块

4、怎么消除方块

请考虑一分钟后再继续向下看。。。。。。

如果你对上面几个问题思考，每一个答案都和界面、控件、平台有关的话，就是说假如你是用 .Net 的，你的每一个答案都是围绕着如何利用控件、如何使用窗体、在控件的哪个事件里面改变哪个属性等等，那么说明你被微软的 RAD 开发环境毒害的不浅，我建议你立刻扔掉 Visual Studio，改用其他轻量级的编程语言和开发平台，这样你可以更多的关注问题的本身，而不是控件。

记住：程序 = 数据结构 + 算法

界面只是数据的表象，而数据才是问题的本质。

下面，我们将一步一步建立一个俄罗斯方块小游戏的数据模型，当整个模型建立完毕后，我们会发现，虽然没有界面，仍然不妨碍这是一个功能完整的俄罗斯方块游戏，因为发生的每一件事情都很清楚，我们只是没把它画而已。当然，后面我们会给出一个操作简易的界面，等到下一篇，会专门探讨界面的问题。

二、“形状”的数据模型

俄罗斯方块是一个经久不衰的小游戏，最常见的版本中一般有七个形状，分别是：

直线型、S型、Z型、L型、反L型、T型、方形等，如下图：

那么我们在程序中如何表示这七个形状呢？我们发现每一形状都是四个小方块组成的，我们完全可以用四个点表示。

但是问题又来了，四个点的坐标分别是什么呢？我查到的方法是：每个形状都有一个自己的坐标系，比如S型，可以入下图表示：

这样，S型的数据模型可以表示为四个点组成的数组：[ [ 0, -1 ], [ 0, 0 ], [ -1, 0 ], [ -1, 1 ] ] 。

我们可以用同样的方法建立其他形状的数组模型，然后再将这七个形状的数组模型合起来组成一个大的数组。

另外，每个形状可以是单色，也可以有自己的颜色。增加颜色会增加编程的复杂度，但是也增加不了多少，所以我们的模型中也会考虑颜色。

最后，我们最好给每个形状一个编号，这样方便在形状数组和颜色数组中应用他们。

完成上面的分析后，我们就可以给出形状数据模型的代码了：

形状模型的代码 



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->//各种形状的编号，0代表没有形状
NoShape=0;
ZShape=1;
SShape=2;
LineShape=3;
TShape=4;
SquareShape=5;
LShape=6;
MirroredLShape=7

//各种形状的颜色
Colors=["black","fuchsia","#cff","red","orange","aqua","green","yellow"];

//各种形状的数据描述
Shapes=[
    [ [ 0, 0 ],   [ 0, 0 ],   [ 0, 0 ],   [ 0, 0 ] ],
    [ [ 0, -1 ],  [ 0, 0 ],   [ -1, 0 ],  [ -1, 1 ] ],
    [ [ 0, -1 ],  [ 0, 0 ],   [ 1, 0 ],   [ 1, 1 ] ],
    [ [ 0, -1 ],  [ 0, 0 ],   [ 0, 1 ],   [ 0, 2 ] ],
    [ [ -1, 0 ],  [ 0, 0 ],   [ 1, 0 ],   [ 0, 1 ] ],
    [ [ 0, 0 ],   [ 1, 0 ],   [ 0, 1 ],   [ 1, 1 ] ],
    [ [ -1, -1 ], [ 0, -1 ],  [ 0, 0 ],   [ 0, 1 ] ],
    [ [ 1, -1 ],  [ 0, -1 ],  [ 0, 0 ],   [ 0, 1 ] ]
];

三、定位和旋转形状

1、定位

我们上面说到每个形状都是在自己的坐标系里面描述的，另外还有一个全局坐标系，用来给形状定位，这样我们就需要一个方法将形状的四个点从自身坐标系转换到全局坐标系，从而给形状定位。

假如S型在自身坐标系中四个点的坐标为：[ [ 0, -1 ], [ 0, 0 ], [ -1, 0 ], [ -1, 1 ] ]

它当前在全局坐标系位置为：[12,8]

则，四个点转换为全局坐标系的坐标为：[ [ 0+12, -1+8 ], [ 0+12, 0+8 ], [ -1+12, 0+8 ], [ -1+12, 1+8 ] ]

这样，我们就完成了 S型 的全局坐标转换。

这里需要注意一个问题，形状自身坐标系是用 (x,y) 描述的，而全局坐标系为了逻辑上更直观，是用 (row,col) 描述的，所以我们在实际编程中并不是向上面那样转换的，而是：

[ [ -1+12, 0+8 ], [ 0+12, 0+8 ], [ 0+12, -1+8 ], [ 1+12, -1+8 ] ]

即：先将 x 变为 col ，y 变为 row ，再转换为全局坐标系。

2、旋转

旋转是在形状的自身坐标系中，并围绕形状的原点完成的，公式很简单，每个点旋转后的坐标与旋转前坐标的关系如下（向右旋转）：

x' = y

y' = -x

注意：方块形状不发生旋转。

有了上面的分析，我们就可以给出两个全局方法，他们用来对形状进行全局定位和旋转：

全局定位和旋转的代码 



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->//将形状自身的坐标系转换为  Map 的坐标系，row col 为当前形状原点在 Map 中的位置
function translate(data,row,col){
    var copy=[];
    for(var i=0;i<4;i++){
        var temp={};
        temp.row=data[i][1]+row;
        temp.col=data[i][0]+col;
        copy.push(temp);
    }
    return copy;
}

//向右旋转一个形状：x'=y, y'=-x
function rotate(data){
    var copy=[[],[],[],[]];
    for(var i=0;i<4;i++){
        copy[i][0]=data[i][1];
        copy[i][1]=-data[i][0];
    }
    return copy;
}

四、移动空间

前面我们说过，形状是由四个点组成的，而形状的移动空间也是由 m * n 个点组成的一个二维数组。

这里为了更直观的描述，我将 n 个点组成一条线 Line，再将 m 条 Line 组成形状的移动空间，我把它叫做 Map 。

我们有了这 m * n 个点有什么用呢？用处很简单，就是保存形状的编号，如果一个点没有被形状占用，则编号为 NoShape。这就是前面给出形状编号的用处，同时也是为什么要有一个 NoShape 编号的原因。

Map 应该具有什么功能呢？下面我列举了一些：

1、构造函数：这不用说了，n 个点组成一行 Line， m 行 Line 组成Map，每个点初始化成 NoShape

2、newLine：生成新的一行。为什么需要这个方法呢，因为除了构造函数中，游戏运行过程中我们也需要用到它，当一行或者几行被消除以后，我们需要在顶部假如一行或者几行新的Line

3、isFullLine(row)：这个方法用来判断第 row 行是否满了，每次一个形状落地后，就需要对每一行进行这个判断，满了当然是消除了。

4、isCollide(data): data 是一个定位后的形状数据，这样我们就可以检查这些数据是否超出移动空间的上下左右边界，另外还检查数据的四个点是否已经被占用，这就是碰撞检测。

5、appendShape(shape_id,data)：当一个形状落地以后，我们就应该将运行空间中某些点的值改变为这个形状的编号，我把这称为占用。

6、消除操作：这个功能没有单独列为一个方法，我把它放在 appendShape 方法中了。消除操作也很简单，发现某一行 isFullLine 了以后，在 lines 数组中移除这一行，并在 lines 数组的顶部加入一个空行即可。

有了上面的分析，我们就可以给出移动空间的代码了：

移动空间的代码 



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->/*
 * 说明：由 m 行 Line 组成的格子阵
 */
function  Map(w,h){
    //游戏区域的长度和宽度
    this.width=w;
    this.height=h;
    //生成 height 个 line 对象，每个 line 宽度为 width
    this.lines=[];
    for(var row=0;row<h;row++)
        this.lines[row]=this.newLine();
}

//说明：间由 n 个格子组成的一行
Map.prototype.newLine=function(){
    var shapes=[];
    for(var col=0;col<this.width;col++)
        shapes[col]=NoShape;
    return shapes;
}

//判断一行是否全部被占用
//如果有一个格子为 NoShape 则返回 false
Map.prototype.isFullLine=function(row){
    var line=this.lines[row];
    for(var col=0;col<this.width;col++)
        if(line[col]==NoShape)
            return false
    return true;
}
/*
 * 预先移动或者旋转形状，然后分析形状中的四个点是否有碰撞情况：
 *      1：col<0 || col>this.width 超出左右边界
 *      2：row==this.height ，说明形状已经到最底部
 *      3：任意一点的 shape_id 不为 NoShape ，则发生碰撞
 *  如果发生碰撞则放弃移动或者旋转
 */
Map.prototype.isCollide=function(data){
    for(var i=0;i<4;i++){
        var row=data[i].row;
        var col=data[i].col;
        if(col<0 || col==this.width) return true;
        if(row==this.height) return true;