快速编程JS初级教程3-3 数组、函数和DIV：俄罗斯方块

效果和技术原理：

代码：

<script>
// http://www.w3school.com.cn
var over=false;

var o = document.body; 
var gframe;
///////////////////////
var shapes=new Array();
shapes[0]=[0,1,1,1,2,1,3,1]; //line 
shapes[1]=[1,0,1,1,1,2,2,2]; // L
shapes[2]=[2,0,2,1,2,2,1,2]; // 左L
shapes[3]=[0,1,1,1,1,2,2,2]; // z
shapes[4]=[1,2,2,2,2,1,3,1]; // 右z
shapes[5]=[1,1,2,1,1,2,2,2]; // square
shapes[6]=[0,2,1,2,1,1,2,2]; // T

var s=new Array();
var divs=new Array();
var x=5;
var y=0;
var turn=0;
 

var map=new Array();
var mapdivs=new Array();
for(var i=0;i<20;i++){           
          map[i]=new Array();     
          for(var j=0;j<10;j++){       
             map[i][j]=0;
       }
}
 
 function create(){
        var elm=document.createElement("div");
        elm.style='margin :1px;width:19px;height:19px;background:red;position:absolute;z-index:5';
        gframe.appendChild(elm);
        return elm;
}
		
//修改20x10的某一个div
function draw(tx,ty,value)
{
color= value==1?"green":"blue";
 var t=mapdivs[ty*10+tx];
 divx=tx*20;
 divy=ty*20;
 t.style='margin :1px;width:19px;height:19px;background:'+color+';position:absolute;visibility:visible;left:'+divx+'px;top:'+divy+'px'; 
}
///////////////////////////////////////////////
function init()
{
	gframe = document.createElement("div"); 
	gframe.style = 'background-color:#0070a0;width:200px; height : 400px;position:relative;overflow:hidden'; 
	gframe.id="game1";
	o.appendChild(gframe);	
	 
	
	divs[0]=create();
	divs[1]=create();
	divs[2]=create();
	divs[3]=create();
	s=shapes[turn];
	
	for(var i=0;i<20;i++){                      
          for(var j=0;j<10;j++){       
            var div=document.createElement("div");
			div.style='margin :1px;width:19px;height:19px;background:blue;position:absolute;visibility:visible;left:0px;top:0px';
			gframe.appendChild(div); 
			mapdivs.push(div);
       }
	}
}
 
 function show()
{		
	for(var i=0;i<20;i++){           
        for(var j=0;j<10;j++)
		{    draw(j, i, map[i][j]);			 
       }	
	}	   
	 
	  for(var i in  divs){
                 divs[i].style.left = (s[i*2] + x)*20+'px';
                 divs[i].style.top = (s[i*2+1] + y)*20+'px'; 
				 //console.log( divs[i].style.left+","+ divs[i].style.top);
	}
 }

 function reset( ){
	if(over)return;
  
	turn++;
	turn=turn%7;
	 s=shapes[turn];
	 x=5;
	 y=0;	 
 }
 function fixShape(s,x,y){
	for(var i=0;i<8;i+=2){           
		m=x+s[i];
		n=y+s[i+1];
          map[n][m]=1;
		  console.log( "fixshape "+n+","+m);
       }	   
 }
 function checkv(s, x, y){
			 for(var i=0;i<8;i+=2){
				m=x+s[i];
				n=y+s[i+1];
				if(n==19 || map[n+1][m]==1)
					return "not";					
			 }
			  return "ok";
}
function checkh(s,x,y,step){
			 for(var i=0;i<8;i+=2){
				m=x+s[i];
				n=y+s[i+1];
				if(m+step<0 || m+step>9 || map[n][m+step]==1)
					return "not";					
			 }
			  return "ok";
}	
 function vMove(){
            if( checkv(s,x,y )=="ok"){
                y++;
            }
            else{
                 fixShape(s,x,y);
				 findFull();
				 if(y>0)
					reset();
				else{
					over=true;
					alert('game over');
				 }
             }
			
}
 function hMove(step){
            if( checkh(s,x,y,step)=="ok"){
                x+= step;
            }           
		}			
		
		 
function rotate()
{
	var newShape=[3-s[1],s[0],3-s[3],s[2],3-s[5],s[4],3-s[7],s[6]];
	 if( checkh(newShape,x,y,0)=="ok"){
                s=newShape;
     }   
}
function gameupdate()
{
	if(over)
		return;
	
	 show();
	 vMove();
}

 function findFull(){
            for(var i=0;i<20;i++){
                var s=0;
                for(var j=0;j<10;j++){
                    s+= map[i][j];
		}
                if(s== 10){
                    removeLine(i);
		}
	}
}
 function removeLine(line){
            for(var j=0;j<10;j++){
                map[line][j] =0;
			}
            for(var l=line;l>0;l--){
                for(var j=0;j<10;j++){
					map[l][j] =map[l-1][j] ;
                     }
			}
}

init();
var int=self.setInterval("gameupdate()",500);

 document.onkeydown = function(e){
        if(over)return;
        var e = window.event ? window.event : e;
        switch(e.keyCode){
        case 38: //up
            rotate();
            break;
        case 40: //down
            vMove();
            break;
        case 37: //left
            hMove(-1);
            break;
        case 39: //right
            hMove(1);
            break;}
		gameupdate();
		}
</script>

网上有其他的写法，如果使用编程技巧、更多的条件运算，甚至JS的面向对象编程，可以让程序更少，但是不适合初学者学习。

这篇程序，只用数组和函数，每个函数都很短，适合阅读和教学。