class Shape {
transform(){//二维矩阵变换
var m =this.m,
l = m.length,
c = Math.ceil(l/2),
x = m[c],
y = m[c+1],
cos = Math.cos(Math.PI/180 * 90),
sin = Math.sin(Math.PI/180 * 90); for (var i=0;i<l;i=i+2){
if(i == c) continue;
var mx = m[i]- x,
my = m[i+1] - y,
nx = mx*cos - my*sin,
ny = my*cos + mx*sin;
m[i]=x+nx;
m[i+1]=y+ny;
}
return this;
}
边界条件
主要包括如下三个方面
方块位置不能超出界面的判断；
方块到达底部或放置完成的判断；
游戏结束的判断。
遍历数组 （1）任意一个点y坐标为19时表示到达了底部；（2）获取该坐标的y+1位置在maps的信息，如果为1表示已经填充。这两种情况下，运动方块的周期结束，将该方块的坐标填充到maps对应的数组里面即可。
如果坐标的y+1已经有填充，同时当前坐标小于1，即已经在界面的顶部了，那么表示游戏结束。
var isEnd = false,isOver=false,x,y;
for(var i=0,sl=that.shape.m.length;i<sl;i=i+2){
x=that.shape.m[i];
y=that.shape.m[i+1];
if(y >= 19){ // 到了底部
isEnd = true;break;
}
if(that.maps[y+1][x]==1){ // y+1位置已经填充
isEnd = true;
if(y <= 1){isOver=true;} // 游戏结束
break;
}
}方块运动周期结束时检测每一层是否满格，以及满格后的处理。某项数组全部元素都为1则表示已经满格，那么删除该项数组，同时列表头再压入一项每个元素都为0的数组即可。
checkPoint(){
var that = this,
maps = that.maps; for(var i=0,l=maps.length;i<l;i++){
if(Math.min.apply(null,maps[i]) == 1){// 表示该层已经满格
that.maps.splice(i,1);
that.score+=10; // 增加分数
that.maps.unshift([0,0,0,0,0,0,0,0,0,0,0,0]);
}
}
return this;
}
绑定事件
主要就是绑定keydown事件，要注意的是左移和右移事件包括了边界判断
bindEvent(){
var that = this;
document.addEventListener('keydown',function(e){
switch(e.keyCode){
case 13: //enter
cancelAnimationFrame(that.timer);
that.init().update();
break;
case 80: //p
that.pause = !that.pause;
break;
case 40: //down
that.d = 0.5;
break;
case 37: //left
var over = false,
maps = that.maps,
shape = that.shape,
m = shape.m;
for(var i=0,l=m.length;i<l;i=i+2){
if(m[i]<=0 || maps[m[i+1]][m[i]-1] == 1){
over = true;break;
}
}
if(!over) shape.move(-1,0);
break;
case 39: //right
var over = false,
shape = that.shape,
maps = that.maps,
m = shape.m;
