HTML5游戏开发之俄罗斯方块

最近刚开始学习HTML5和Javascript，感觉还是先找一个游戏实战一下比较好，最后就挑了俄罗斯方块。这个游戏主要借鉴了博客作者左洸的成果，在此特表感谢。他的博客链接：点击打开链接。他基本上给出了实现原理和具体实现方法，但有些地方还是被有意给略去了，后来我自己慢慢摸索自己实现了，不过感觉还是有点半成品的感觉，希望有高手看到能不吝赐教，有空我也再仔细改改。不过为了方便自己以后复习，还是先把这个游戏的实现贴出来。这里的很多表述和图片都借用了他博客里的内容。

一、从数据出发还是从界面出发

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

1、用什么表示方块

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

3、怎么移动方块

4、怎么消除方块

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

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

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

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

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

二、俄罗斯方块的数据模型

最常见的版本中有七个形状，分别为：S型、Z型、直线型、T型、方块型、反L型、L型。（如上图所示）那么我们如何在程序中表示这七个形状呢？我们可以看到，每个形状都由四个小方块组成，我们完全可以用4个点表示。但接着问题就来了，四个点的坐标怎么表示呢？我查到的方法是：每个形状都有一个自己的坐标系，比如S型，可以如下图表示：

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

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

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

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

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

Spacing=20;//每一格的间距，也即一个小方块的尺寸
Width=200; //背景的宽
Height=400;//背景的高

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

//各种形状的颜色
Colors=["white","fuchsia","chocolate","firebrick","orange","cyan","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.定位