来自：JS版俄罗斯方块代码详细解说
书写过程中的难点
方块变形算法的实现
边界检测和占用检测
方块旋转算法及BUG修复的两种方式
首先说明一下，方块我们是用一维数组来存储四个对象来实现的。方块表示代码如下：
switch (t){
case 0:{ //"田"字形
this.shape[0] = {x:0, y:0};
this.shape[1] = {x:1, y:0};
this.shape[2] = {x:0, y:1};
this.shape[3] = {x:1, y:1};
break;
}
case 1:{ //"|"字形
this.shape[0] = {x:0, y:0};
this.shape[1] = {x:0, y:1};
this.shape[2] = {x:0, y:2};
this.shape[3] = {x:0, y:3};
break;
}
case 2:{ //反"z"字形
this.shape[0] = {x:0, y:0};
this.shape[1] = {x:0, y:1};
this.shape[2] = {x:1, y:1};
this.shape[3] = {x:1, y:2};
break;
}
case 3:{ //"z"字形
this.shape[0] = {x:1, y:0};
this.shape[1] = {x:1, y:1};
this.shape[2] = {x:0, y:1};
this.shape[3] = {x:0, y:2};
break;
}
case 4:{ //"┖"字形
this.shape[0] = {x:0, y:0};
this.shape[1] = {x:0, y:1};
this.shape[2] = {x:1, y:1};
this.shape[3] = {x:2, y:1};
break;
}
case 5:{ //"┛"字形
this.shape[0] = {x:0, y:1};
this.shape[1] = {x:1, y:1};
this.shape[2] = {x:2, y:1};
this.shape[3] = {x:2, y:0};
break;
}
case 6:{ //"┻"字形
this.shape[0] = {x:1, y:0};
this.shape[1] = {x:0, y:1};
this.shape[2] = {x:1, y:1};
this.shape[3] = {x:2, y:1};
break;
}
}
而上面的x,y代表着他的位置，看起来还真像数学里面学习的二维坐标系。那现在我们就先用数学方法来模拟旋转。请看下图：
俄罗斯广场旋转算法详解 向量CA = (X1 – X, Y1 - Y) 把向量CA顺时针旋转90度，得到向量CB，由（CA * CB =0）可知： 向量CB = (Y1 - Y, X – X1) 又由于 向量CB = (X2 – X , Y2 - Y) 故得X2= X – Y + Y1 Y2 = X + Y –X1 由以上的旋转方法，我们就可以对方块进行变形处理。代码如下：（以下是以逆时针方向旋转为基础）
block.prototype.rotate = function(){
this.copy();
//复制当前activeBlock方块,当旋转不符合要求时,可以还原方块
this.board.eraserActblock();
var cx = 0,cy = 0;
for(var i=0; i<this.shape.length; i++){
cx += this.shape[i].x;
cy += this.shape[i].y;
}
cx = Math.round(cx/this.shape.length);
cy = Math.round(cy/this.shape.length);
if(this.blockType == 4 || this.blockType == 5 || this.blockType == 6){
//对方块类型进行判断
for(i = 0; i<this.shape.length; i++){
//旋转方块
this.shape[i].x = cx + cy - this.backShape[i].y;
this.shape[i].y = cy - cx + this.backShape[i].x;
}
} else if(this.max("x")-this.min("x") == 1 || this.max('x')- this.min('x') == 3) {
for(i = 0; i<this.shape.length; i++){
//旋转方块
this.shape[i].x = cx + cy - this.backShape[i].y-1;
this.shape[i].y = cy - cx + this.backShape[i].x;
}
} else {
for(i = 0; i<this.shape.length; i++){
//旋转方块
this.shape[i].x = cx + cy - this.backShape[i].y;
this.shape[i].y = cy - cx + this.backShape[i].x;
}
}
if(!this.isIllegal()){
//旋转后的方块不符合要求,则还原方块
for( i=0; i< this.shape.length; i++){
this.shape[i].x = this.backShape[i].x;
this.shape[i].y = this.backShape[i].y;
}
}
this.board.paintActblock();
}
你可以查看DEMO（点击查看演示DEMO），里面也是用逆时针方向来实现的旋转。其中bug，你一看就会知道。（产生的具体原因就自行分析吧！） 旋转算法引起水平偏移BUG的两种解决方案：
进行类型分析，不同类型单独处理（具体代码见上）
方块移动方向改为向下（即可以把旋转方向改为顺时针方向，具体算法实现见上讲旋转算法处），从而达到隐藏bug偏移产生的bug。
方块的边界检测和合法性检测
其实怎么说呢？合法性和边界这两个特性是分不开的。因为边界性如果检测不通过的话，那么合法性也就更不用说了。 边界检测就是检测board对象shape属性保存的数组中对象x、y的值是否在面板内。而占用检测也就是看当前board对象中shape属性保存的数组中对象x、y所对就面板的小方块不否为1，要是为1的话，证明已经被占用，相反则没有占用。实现的代码如下：
block.prototype.isIllegal = function(checkObj){//这个里面放被检测的对象
var checkObj = checkObj || this.shape;
for(var i=0; i<checkObj.length; i++){
if(checkObj[i].x < 0 || checkObj[i].x > (this.board.w-1) || checkObj[i].y<0 || this.board.status[checkObj[i].y][checkObj[i].x] ==1 ){
return false;
}
}
return true;
};
欲看详源代码，请请试玩“俄罗斯方块重写”，并占击右键查看源代码。此版本会一直保存，后序版本将会在此版本上进行扩展。并最终实现在手机，电脑上都可以玩。 小结： 第一次利用原生的Javascript来写小游戏。感受颇多！
JavaScript真的很强大。只要你想得到，它几乎都能做得到（可能说的是有点夸张了）。
原来写JS代码多是面向过程来写的。而这次也是尝试着来用面向对象的方法来写，也就使得我对this关键字，作用域链等都有了更加深入的了解。
代码总体来讲是完整了写了两次，第一次写完了，自己实现是看不下去，所以又重写了。但是现在看来现在可以看到的版本，还是存在很多的问题。（在后面的时间里，我会在此基础上进行完善和扩展。）
