俄罗斯方块是一款风靡全球的视频游戏机和掌上游戏机游戏。 它所引起的轰动和所带来的经济价值可以说是游戏史上的一件大事。 这个游戏看似简单，却有着无穷的变化。 游戏过程只需要玩家移动、翻转各种形状的下落方块即可。 如果某一行被方块填满，则该行将被消除； 而当窗口不能再有下落的方块时，游戏就结束了。
可以看出，俄罗斯方块的需求如下。
(1)由移动块和不可移动的固定块组成。
（2）一行满了就被淘汰。
(3)可生产多种砌块。
(4)玩家可以看到游戏积分。
本文开发了一个俄罗斯方块游戏程序。 俄罗斯方块游戏的运行界面如上图所示。
01
俄罗斯方块游戏设计理念
俄罗斯方块形状设计
游戏中掉落的方块有各种形状。 要在游戏中绘制不同形状的块，需要使用合理的数据表示方法。 常见的俄罗斯方块有7种基本形状及其旋转后的变形。 具体形状如图12-2所示。
■图12-2 俄罗斯方块形状
每个形状都是由不同的黑色小方块组成，如图12-3所示。 只需要在屏幕上显示必要的黑色小方块即可表达各种形状。 每个形状由 4 个小方块组成，可以用 4 个点来表示。
■图12-3 俄罗斯方块示意图
这四个点的坐标是多少？ 每个形状都有自己的坐标系。 例如，S 形可以如图 12-4 所示。
■图12-4 S形形状坐标系
S形数据模型可以表示为四个点的数组：[[0,-1], [0,0], [-1,0], [-1,1]]。
如图12-5所示，T形数据模型可以表示为四个点的数组：[[-1,0], [0,0], [1,0], [0,1]] 。
■图12-5T形形状坐标系
可以用同样的方法构建其他形状的数组模型，然后将这7种形状的数组模型组合起来形成一个大数组。
此外，每个形状可以是纯色的或有自己的颜色。 添加颜色会增加编程复杂性，但不会增加太多，因此在此模型中也考虑了颜色。
最后，最好为每个形状指定一个数字，这样可以更轻松地将它们应用到形状数组和颜色数组中。
完成上述分析后，可以给出形状数据模型的代码。
俄罗斯方块游戏面板屏幕
游戏面板由具有一定行数和列数的单元格组成。 游戏窗口面板屏幕如图12-6所示。
■图12-6 屏幕网格
屏幕由20行10列的网格组成。 为了存储游戏屏幕中的固定块，使用了二维数组lines。 当对应的数组元素值为非零时（数组元素值为0，表示该单元格中没有块），则绘制对应的彩色小方块。 要在窗口面板中显示俄罗斯方块形状，只需将面板中相应的单元格绘制为彩色方块即可。 要在面板中显示如图12-7所示的L形块，只需遵循L形块形状数组即可。 定义，只需使用Paint()函数将其数据绘制到窗口面板即可。
处理下落方块的基本方法就是将当前方块下移一行游戏开发实战，然后根据当前方块数组的数据和固定方块面板存储的二维数组行来重绘屏幕，如图12-7。 因此，用一个坐标(row,col)来记录当前正方形所在的行号row和列号col。
■图12-7 L形块跌落前后
定位和旋转形状
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
请注意，正方形没有旋转。
根据上面的分析，可以使用两种全局方法来对形状进行全局定位和旋转。
translate(data.row.col) 函数将形状本身的坐标系转换为屏幕的全局坐标系。 (row,col) 是屏幕上当前形状的原点位置。
每个形状向右旋转时都会形成一个新形状。 rotate(data)函数可以获取当前形状的旋转块的坐标数组。
3.游戏流程
俄罗斯方块游戏使用计时器来控制方块的下落和重画。 用户可以使用键盘输入来更改块的状态。 当前下落的方块和行中存储的固定方块会定期重绘，以查看动态的游戏效果。
俄罗斯方块在掉落时可能会遇到各种情况。 例如是否需要消除行、是否需要终止下落并生成新的块形状等。具体判断过程如下：首先判断是否可以继续下落。 如果能继续跌下去，row++也行。 如果方块无法继续下落，则将方块当前形状添加到面板的二维数组线中，界面会生成新的方块形状。 然后再判断是否需要剔除。 最后，请求重绘屏幕。
02
俄罗斯方块游戏设计步骤
游戏页面index.html
设计脚本
1.设计区块类型Block
块的类型ID在块类Block中定义，块的形状和颜色存储在二维数组data中。 translate(row, col) 函数旨在将形状本身的坐标系转换为屏幕的坐标系。 参数(row, col)是屏幕Map中当前形状正方形的原点位置。 rotate()函数可以获得当前形状块的旋转后的坐标数组。
另外，程序中对每个块形状进行了编号：Z形编号1、S形编号2、竖条编号3、T形编号4、方形编号5、L形编号6、倒L形编号数字 7. 所有块的形状都存储在 Shapes 数组中。 从数组Shapes中按数字获取块的形状信息。
2.设计游戏容器Map类
游戏容器Map类是一个游戏实例。 你应该首先定义游戏面板的大小，并存储游戏面板中所有块的“容器”——二维数组线。 最初，每个元素存储为NoShape(0)，表示该网格中没有Shape。 块。
isFullLine(row)函数判断某行是否被完全占用（full row），如果单元格为NoShape则返回False。
提前移动或旋转形状，调用isCollide(data)函数分析形状中的四个点是否存在如下碰撞条件。
(1) colthis． width，表示超出左右边界。
(2) row==this． 高度，表明形状已到达底部。
(3) 如果任意点的shape_id不是NoShape，就会发生碰撞。
如果发生碰撞，则放弃移动或旋转。
形状在向下移动时发生碰撞。 appendShape=function (shape_id, data) 将形状添加到线条容器并修复它。
3.设计游戏逻辑GameModel
游戏逻辑类GameModel实现游戏控制。 它首先定义游戏面板地图、当前俄罗斯方块currentBlock、下一个俄罗斯方块nextBlock以及当前俄罗斯方块位置。
其次，调用CreateNewBlock()函数生成一个新的俄罗斯方块。 它首先复制下一个形状。 nextBlock，然后生成下一个俄罗斯方块块。
下面是控制形状块的左右移动、旋转和向下移动，保证左右移动时不与线条中存储的固定块和边界发生碰撞。 如果发生冲突，数据将恢复并放弃移动。
它还确保它在旋转过程中不会与存储在行中的固定块和边界发生碰撞。 如果发生碰撞，恢复数据并放弃旋转。
当一个方块落下时，需要判断它是否已经“触底”或者是否接触到了其他落下的方块。 如果它“触底”人物立绘，它就会固定在游戏板上。 此时需要处理满行和游戏结束的判断，同时生成新的俄罗斯方块。
4.游戏主程序
在定时事件中，完成投放功能。
下面是消息事件处理。
下面是真正的绘制代码游戏策划，调用clearline(row)函数绘制清除行的暂停效果。
调用paint()函数绘制游戏画面。 它将所有按行存储的固定块绘制到游戏面板中，同时将当前块绘制到游戏面板中，将下一个块绘制到游戏面板右侧的提示预览区域中。
至此，俄罗斯方块游戏就完成了。
04
相关书籍
HTML5网页游戏设计从基础到开发（第二版·微课程视频版）
