俄罗斯方块设计

视图部分是一个二维数组，1代表已经下降的格子，2代表正在下降的格子，0代表空白格子

写了一个旋转方法，初步测试旋转效果还可以，就是遇到途中有旋转阻碍的时候会有点小问题。还需要解决

感觉这部分代码太多重复了，想着把重复的代码做成一个方法，然后传递不同的参数过来，也能达到相同效果。初步测试和老师代码效果一样，目前没有报错。

html和js分离开来，并且使用了面向对象的思想，个人认为主要的核心算法是判断消除一行，以及整体的一个分布和代码思维培养，很不错的一个视频

js分块结构图

俄罗斯方块结构图

var refreshNext = function(){

for(var i=0; i<nextData.length; i++){

for(var j=0; j<nextData[0].length; j++) {

if(nextData[i][j] == 0){

nextDivs[i][j].className = 'none';

}

else if(nextData[i][j] == 1){

nextDivs[i][j].className = 'done';

}

else if(nextData[i][j] == 2){

nextDivs[i][j].className = 'current';

}

}

}

}

注意代码nextDivs 编辑器自动联想打错为 nextData

界面与数据分离！数据驱动刷新页面！

面向对象编程，维护简单

// 检测点是否合法

var checkMove = function(cur,pos){

var flag = true;

var dx = pos.origin.x-cur.origin.x;

var dy = pos.origin.y-cur.origin.y;

for(var j=0; j<cur.data.length;j++){

for(var i=0; i<cur.data[j].length;i++){

if(cur.data[j][i] >= 1){//只需要判断方块中有数据的点

if(pos.origin.x + i <0 || pos.origin.y + j <0){

return false;

}else if(pos.origin.x + i >= gameData[0].length){

return false;

}else if(pos.origin.y + j >= gameData.length){

return false;

}else if(gameData[pos.origin.y+j][pos.origin.x+i] >= 1){

if(dy+j >= cur.data.length || dx+i >= cur.data[0].length){

return false;

}

}

}

}

}

return flag;

}

box-sizing:属性