2024年HTML5 游戏开发实战 ｜ 俄罗斯方块_俄罗斯方块h5(1)

(4) 玩家可以看到游戏的积分。

本文开发俄罗斯方块游戏程序，俄罗斯方块游戏的运行界面如上图所示。

01、俄罗斯方块游戏设计的思路

俄罗斯方块形状设计

游戏中下落的方块有着各种不同的形状，要在游戏中绘画不同形状的方块，就需要使用合理的数据表示方式。常见的俄罗斯方块拥有 7 种基本的形状以及它们旋转以后的变形体，具体的形状如图 1 所示。

■ 图 1 俄罗斯方块形状

每种形状都是由不同的黑色小方格组成的，如图 2 所示，在屏幕上只需要显示必要的黑色小方格就可以表现出各种形状，每一形状都是由 4 个小方格组成的，完全可以用 4 个点来表示。

■ 图 2 俄罗斯方块示意图

4 个点的坐标分别是什么呢？每个形状都有一个自己的坐标系。例如，S 形可以如图 3 表示。

■ 图 3 S 形形状坐标系

S 形的数据模型可以表示为 4 个点组成的数组：[ [0，-1]，[0，0]，[-1，0]，[-1，1] ]。

如图 4 所示，T 形的数据模型可以表示为 4 个点组成的数组：[ [-1，0]，[0，0]，[1，0]，[0，1] ]。

■ 图 4 T 形形状坐标系

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

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

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

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

// 各种形状的编号,0 代表没有形状 NoShape = 0;
// z 形 // s 形
ZShape = 1;
SShape = 2;
LineShape = 3;
// 竖条形 // T 形
T 斤爱败化仓臂氨尺暗隘肮伴唉懊碍艾蔼巴艾菠蔼懊胺报稗氨 = 4;
// 正方形 // L 形 // 反 L 形
SquareShape = 5 ;
LShape = 6;
MirroredLShape = 7
// 各种形状的颜色
Colors =("black""fuchsia""# cff""red""orange","agua","green","yellow"];
[1,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,21]
[-1,1],[0,1],[1,0],[0, 1]
[1, 1],[0,1],[0,0],[0,1]
[1,-1],[0,-1],[0，0],[0,1]

俄罗斯方块游戏面板屏幕

游戏的面板是由一定的行数和列数的单元格组成的，游戏窗口面板屏幕如图 5 所示。

■ 图 5 屏幕网格

屏幕由