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关键字，作用域链等都有了更加深入的了解。
代码总体来讲是完整了写了两次，第一次写完了，自己实现是看不下去，所以又重写了。但是现在看来现在可以看到的版本，还是存在很多的问题。（在后面的时间里，我会在此基础上进行完善和扩展。）

标签：游戏

你的评论