JavaScript canvas实现俄罗斯方块游戏

俄罗斯方块是个很经典的小游戏，也尝试写了一下。不过我想用尽量简洁逻辑清晰的代码实现。不用过多的代码记录下落方块的模型，或者记录每一个下落方块的x,y。想了下面的思路，然后发现这样很写很简明。

俄罗斯方块的7种基本模型：

要记录这些模型有很多种办法，可以用记录其相对位置，记录每一个方块的x,y坐标等。自己想了一种思路来记录这7种模型，很简洁，在写左移，右移，旋转功能的时候也方便使用。下面这个数组记录了这些模型。

var cubeArr=[[6,7,12,13],[7,8,11,12],[6,7,11,12],[7,12,17,8],[7,12,16,17],[7,12,17,22],[7,11,12,13]];

思路：

 一个5*5的表格，从0开始标号。标号为12的点即是中心点。模型每个用其标号记录下来，比如第一种模型就为[6,7,12,13]。

以表格的左上角为参考点，有这样的规律，假设表格中的数为value，有value除以5的余数就是该点相对于参考点x的偏移，value除以5的整数部分就是该点相对于参考点的y偏移。旋转的时候也很简单，以中心12旋转，也可以找到一些规律。

var movex=cubeNow[i]%5;
var movey=Math.floor(cubeNow[i]/5);

用一个循环绘制一个模型 

function drawEle(color)
    {
        ctx.fillStyle=color;
        ctx.strokeStyle='#fff';
        for(var i=0;i<4;i++)
        {
            var movex=downInfor.cubeNow[i]%5;
            var movey=Math.floor(downInfor.cubeNow[i]/5);
            ctx.fillRect(cubeW*(downInfor.point[0]+movex),cubeW*(downInfor.point[1]+movey),cubeW,cubeW);
            ctx.strokeRect(cubeW*(downInfor.point[0]+movex),cubeW*(downInfor.point[1]+movey),cubeW,cubeW)
        }
}

旋转模型：

当前位子和下一个旋转位置之间的关系，通过这个数组可以很方便的实现模型的旋转。比如说标号为0的位子，按顺时针旋转，下一个位子是4。标号为6的位子，下一个位子是8.下面这个数组可以由前一个位子找到下一个位子。

var rotateArr=[4,9,14,19,24,3,8,13,18,23,2,7,12,17,22,1,6,11,16,21,0,5,10,15,20];

代码：

    
    



    

     
    
    

    得分:0
     

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。