俄罗斯方块是一款风靡全球的电视游戏机和掌上游戏机游戏，它曾经造成的轰动与造成的经济价值可以说是游戏史上的一件大事。这款游戏看似简单但却变化无穷，游戏过程仅需要玩家将不断下落的各种形状的方块移动、翻转，如果某一行被方块充满了，那就将这一行消掉；而当窗口中无法再容纳下落的方块时，就宣告游戏结束。
可见俄罗斯方块的需求如下。
(1) 由移动的方块和不能动的固定方块组成。
(2) 一行排满消除。
(3) 能产生多种方块。
(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 屏幕网格
屏幕由20行10列的网格组成，为了存储游戏画面中的已固定方块采用二维数组lines，当相应的数组元素值非零(数组元素值为0，表示此单元格无方块)，则绘制一个对应彩色小方块。在窗口面板中显示一个俄罗斯方块形状，只需要把面板中相应的单元格绘制为彩色方块即可，如图6所示的面板中显示一个L形方块，只需要按照L形方块形状数组定义，将它的数据用Paint()函数绘制到窗口面板即可。
而方块下落的基本处理方式就是当前方块下移一行，然后根据当前方块的数组的数据和存储的固定方块的面板二维数组lines，重新绘制一次屏幕即可，如图6所示。所以要使用一个坐标(row，col)记录当前方块形状所在的行号row和列号col。
■ 图6 L形方块下落前和下落后
定位和旋转形状
1． 定位
上面说到每个形状都是在自己的坐标系里面描述的，另外还有一个屏幕上的全局坐标系，用来给形状定位，这样就需要一个方法将形状的4个点从自身坐标系转换到屏幕上的全局坐标系，从而给形状定位。
假如S形在自身坐标系中4个点的坐标为：［［0，-1］,［0，0］,［-1，0］,［-1，1］］。它当前在屏幕上全局坐标系位置为：［12,8］，则4个点转换为全局坐标系的坐标为：［［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）为当前形状原点在屏幕中的位置。
function translate(data,row,col)(
var copy=[];
for(var i= 0;i每种形状向右旋转就会形成一个新的形状，rotate(data)函数可以得到当前形状的方块旋转后的坐标数组。
//向右旋转形状:x'= y，y'= -xfunction rotate(data)!
var copy=[[],[],[][]];for(var i= 0;i3． 游戏流程
俄罗斯方块游戏就是用一个定时器控制方块下落并重绘的过程，用户可以利用键盘输入改变方块状态。每隔一定的时间就重画当前下落方块和lines存储的固定方块，从而看到动态游戏效果。
俄罗斯方块下落过程中可能遇到种种情况。例如，是否需要消行，是否需要终止下落并且产生新的形状的方块等。具体的判断流程如下：首先判断是否可以继续下落，可以下落则row++即可；如果方块不能够继续下落，则将当前形状的方块添加到面板二维数组lines中，界面产生新的形状的方块。然后，判断是否需要消行。最后，请求重新绘制屏幕。
02、俄罗斯方块游戏设计的步骤
游戏页面index.html
你的浏览器不支持 audio 标记
你的浏览器不支持 Canvas 标记,请使用 Chrome 览器或者 Eirefox 浏览器/canvas>
你的浏览器不支持 Canvas 标记,请使用 Chrome 浏览器或者 Erefox 浏览器/canvas>分数
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
相关推荐: BUUCTF：[极客大挑战 2019]BabySQL
题目地址：https://buuoj.cn/challenges#[%E6%9E%81%E5%AE%A2%E5%A4%A7%E6%8C%91%E6%88%98%202019]BabySQL 简单测试之后发现有些字符被过滤，初步判断这里的过滤是指特殊字符被替换为…
