“史上最短小精悍”俄罗斯方块-解析

转载自 CK博客

这段代码是很久之前大神分享的，但我前段日子才下载的。

记录一下，如此牛X的代码。

 

在线游戏

 

一、变量的定义及初始化

var map=eval(“["+Array(23).join("0x801,")+"0xfff]“);
var tatris=[[0x6600],[0x2222,0xf00],[0xc600,0x2640],[0x6c00,0x4620],[0x4460,0x2e0,0x6220,0x740],[0x2260,0xe20,0x6440,0x4700],[0x2620,0x720,0x2320,0x2700]];
var char={x:”\u3000″,s:”\u25a0″,t:”\u25a1″};
var keycom={“38″:”rotate(1)”,”40″:”down()”,”37″:”move(2,1)”,”39″:”move(0.5,-1)”,”32″:”0;pause=!pause”};
var dia, pos, bak, run, next, pause=false, info={speed:1,lines:0,score:0};

 

map：游戏地图，数组型变量，前23行都是0x801，最后一行是0xfff。那么可得游戏地图如下：

100000000001
100000000001
100000000001
….省略18行….
100000000001
100000000001
111111111111

大概可以猜想到0代表空位，1代表占位，初始的1代表边界。也就是说这个游戏设计是按位操作。

 

tatris：砖块，二维数组，代表着7种形态。第二维是每种形态的旋转。可以称为“块码”。举例如下：

0x6600- 0110             0xc600- 1100            0x2640- 0010
0110                           0110                          0110
0000                           0000                          0100
0000                           0000                          0000

 

char：字符(砖块的表达)，unicode编码，\u3000 (空)，\u25a1 □，\u25a0 ■

keycom：键盘键码及映射函数。

dia, pos, bak, run, next,游戏内部变量。

pause=false  暂停标记。

info={speed:1,lines:0,score:0};游戏提供给用户的信息。

---

二、函数分析

开始游戏和结束游戏函数

function start(){

dia=next.d;//dia当前块

bak=pos={fk:[],y:0,x:4,s:next.s};//bak前一位置，pos当前位置

nextdia();//随机生成砖块

document.getElementById(“next”).innerHTML=(next.d[next.s%next.d.length]|0x10000).toString(2).slice(-16).replace(/…./g,”$&<br/>”).replace(/1/g,char.t).replace(/0/g,char.x);//提示栏：正则表达式来替换块： 1-□ 0-空

document.getElementById(“text”).innerHTML=”SCORE:”+info.score+”<br/><br/>LINES:”+info.lines+”<br/><br/>SPEED:”+info.speed;//正则表达式显示游戏信息

rotate(0);//设置初始旋转数

run=setInterval(“pause||down()”,~~(Math.pow(1.3,12-info.speed)*30+20));

}

 

function over(){

document.οnkeydοwn=null;

alert(“GAME OVER”);//游戏结束

}

 

 

随机生成块函数

function nextdia(){

next={d:tatris[~~(Math.random()*7)],s:~~(Math.random()*4)};//随机生成next块 – d元素：块种类；s元素：块旋转

}

 

帧更新函数

function update(t){

bak={fk:pos.fk.slice(0),y:pos.y,x:pos.x,s:pos.s};

if(t) return;

for(var i=0,a2=””; i<22; i++)

a2+=map[i].toString(2).slice(1,-1)+”<br/>”;//将地图信息存储到a2中

for(var i=0,n; i<4; i++)

if(/([^0]+)/.test(bak.fk[i].toString(2).replace(/1/g,char.t)))//运动的bak块

a2=a2.substr(0,n=(bak.y+i+1)*15-RegExp.$_.length-4)+RegExp.$1+a2.slice(n+RegExp.$1.length);//bak块的更新

document.getElementById(“box”).innerHTML=a2.replace(/1/g,char.s).replace(/0/g,char.x);//显示整个map

}

 

function is(){

for(var i=0; i<4; i++)

if((pos.fk[i]&map[pos.y+i])!=0) return pos=bak;//判断当前块是否与地图中有重叠，若有重叠返回上一位置bak

}

 

运动函数

function rotate(r){

var f=dia[pos.s=(pos.s+r)%dia.length];//选定块旋转

for(var i=0; i<4; i++)

pos.fk[i]=(f>>(12-i*4)&15)<<pos.x;//将块码分解成4×4二进制来表达

update(is());//更新块位置并确保旋转时不被地图妨碍

}

 

function down(){

++pos.y;//十进制y坐标

if(is()){

for(var i=0, r=0; i<4 && pos.y+i<22; i++)

if((map[pos.y+i]|=pos.fk[i])==0xfff){//行满

map.splice(pos.y+i,1), map.unshift(0x801);//行满map消除

++info.lines%20==0 && info.speed++, r++;//条件运算以及逗号”,”运算符

}

clearInterval(run);

if(map[1]!=0x801) return over();//map第一行若不是0x801则游戏结束

info.score+=~~(Math.pow(r,1.5)*10)+2;

start();//重新生成块

}

update();//无论如何的更新

}

function move(t,k){

pos.x+=k;//十进制的x坐标

for(var i=0; i<4; i++)

pos.fk[i]*=t;//位运算的左移x2，右移x0.5

update(is());//更新块位置并确保左右移动不被地图妨碍

}

 

---

三、游戏逻辑分析

1.首先运行 nextdia(); 来生成“下一个”(第一个)块

2.start初始化，并继续调用nextdia();真正的生成下一个块然后setInterval();来标志着游戏的开始

3.运行中的游戏比较重要的几点

(1)逻辑主要围绕运动中的块和map数组进行判断的。

(2)运动的块着陆后，才属于map数组中。最重要的区别是运动的块和map的块的颜色是有差别的，运动的块是空心的 □ ，map数组的块是实心的 ■ 。这也是这个游戏的精妙之处。

(3)利用is()函数判断：旋转是否越界，左右移是否越界，以及向下是否着陆。也就是为什么rotate()和move()中的update要调用is()，而down()中的update不要调用is()

(4)块着陆后，会调用start()进行游戏轮回。

(5)update()函数作为主要的更新屏幕的函数，也就是显示函数。

 

总结：

优点：巧妙利用位运算。结构清晰。整体易于理解。

不足：为了使代码更短，使用了难于理解的正则长语句。但不影响整体可读性。