用JavaScript做的俄罗斯方块[转]

  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
< HTML >  
< HEAD >  
< TITLE >  俄罗斯方块 </ TITLE >  
< META  NAME ="Generator"  CONTENT ="EditPlus" >  
< META  NAME ="Author"  CONTENT ="" >  
< META  NAME ="Keywords"  CONTENT ="" >  
< META  NAME ="Description"  CONTENT ="" >  
< style >  
span.btn 
{  
BORDER-RIGHT :  #7b9ebd 1px solid ;  PADDING-RIGHT :  2px ;  BORDER-TOP :  #7b9ebd 1px solid ;  PADDING-LEFT :  2px ;  FONT-SIZE :  12px ;  FILTER :  progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde) ;  BORDER-LEFT :  #7b9ebd 1px solid ;  CURSOR :  hand ;  COLOR :  black ;  PADDING-TOP :  2px ;  BORDER-BOTTOM :  #7b9ebd 1px solid 
}  
</ style >  
< script  language =javascript >  
var  grid =  
[ 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ] 
]; 

var  gridBuf =  
[ 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], 
[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ] 
]; 

var  boxdata =  
[ 
[ 
[ 1 , 1 , 1 , 1 ], 
[ 0 , 0 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ] 
], 
[ 
[ 1 , 1 , 1 , 0 ], 
[ 1 , 0 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ], 

], 
[ 
[ 1 , 1 , 1 , 0 ], 
[ 0 , 1 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ] 
], 
[ 
[ 1 , 1 , 1 , 0 ], 
[ 0 , 0 , 1 , 0 ], 
[ 0 , 0 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ] 
], 
[ 
[ 1 , 1 , 0 , 0 ], 
[ 0 , 1 , 1 , 0 ], 
[ 0 , 0 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ] 
], 
[ 
[ 0 , 1 , 1 , 0 ], 
[ 1 , 1 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ] 
], 
[ 
[ 1 , 1 , 0 , 0 ], 
[ 1 , 1 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ], 
[ 0 , 0 , 0 , 0 ] 
] 
]; 

var  colors = [ " black " , " #A0A0A0 " , " red " , " green " , " yellow " , " pink " ]; 
var  gotLine = 0 ; 
var  box; 
var  bGameOver = false ; 
function  getHeight(arr) 
{ 
var  i,j; 
for (i = 3 ;i >= 0 ;i -- ) 
for (j = 0 ;j < 4 ;j ++ )  
if (arr[i][j])  return  i; 
} 


function  getWidth(arr) 
{ 
var  i,j; 
for (i = 3 ;i >= 0 ;i -- ) 
for (j = 0 ;j < 4 ;j ++ )  
if (arr[j][i])  return  i; 
} 

function  Box(x,y,arr,color) 
{ 
this .arr = arr; 
this .x = x; 
this .y = y; 
this .w = getWidth(arr); 
this .h = getHeight(arr); 
this .color = color; 
this .active = true ; 
this .clearOldBox = function () 
{ 
for ( var  j = 0 ;j <= this .h;j ++ ) 
for ( var  i = 0 ;i <= this .w;i ++ ) 
if ( this .arr[j][i] > 0 ) grid[ this .y + j][ this .x + i] = 0 ; 
} 
this .putNewBox = function () 
{ 
for ( var  j = 0 ;j <= this .h;j ++ ) 
for ( var  i = 0 ;i <= this .w;i ++ ) 
if ( this .arr[j][i] > 0 ) grid[ this .y + j][ this .x + i] = this .color; 

} 

this .moveLeft = function () 
{ 
this .clearOldBox(); 
var  _x = this .x - 1 ; 
if ( this .canMove(_x, this .y))  this .x = _x; 
this .putNewBox(); 
drawGrid(); 

} 
this .moveRight = function () 
{ 
this .clearOldBox(); 
var  _x = this .x + 1 ; 
if ( this .canMove(_x, this .y))  this .x = _x; 
this .putNewBox(); 
drawGrid(); 
} 

this .moveDown = function () 
{ 
this .clearOldBox(); 
var  _y = this .y + 1 ; 
if ( this .canMove( this .x,_y)) 
{ 
this .y = _y; 
this .putNewBox(); 
drawGrid(); 
} 
else  
{ 
this .putNewBox(); 
drawGrid(); 
checkLineFull(); 
return ; 

} 

} 

this .rotate = function () 
{ 
var  tmp = [[ 0 , 0 , 0 , 0 ],[ 0 , 0 , 0 , 0 ],[ 0 , 0 , 0 , 0 ],[ 0 , 0 , 0 , 0 ]]; 
  for (j = 0 ;j <= this .h;j ++ ) 
for (i = 0 ;i <= this .w;i ++ ) 
tmp[ this .w - i][j] = this .arr[j][i]; 
var  newBox = new  Box( this .x, this .y,tmp, this .color); 
this .clearOldBox(); 
if ( !  newBox.canMove( this .x, this .y))  this .putNewBox(); 
else  
{ 
box = newBox; 
box.putNewBox(); 
drawGrid(); 
} 
} 
this .canMove = function (x,y) 
{ 
for ( var  j = 0 ;j <= this .h;j ++ ) 
for ( var  i = 0 ;i <= this .w;i ++ ) 
{ 
if (grid[y + j][x + i] != 0   &&   this .arr[j][i] != 0 ){  return   false ; } 
} 
return   true ; 
} 

} 

function  drawGrid() 
{ 
for ( var  j = 0 ;j <= 15 ;j ++ ) 
for ( var  i = 0 ;i <= 10 ;i ++ ) 
{ 
if ( grid[j][i] != gridBuf[j][i]) 
{ 
paintCell(j,i,grid[j][i]); 
} 
gridBuf[j][i] = grid[j][i]; 

} 
} 

function  paintCell(i,j,color) 
{ 
var  htmlGrid = document.getElementById( " TetrisGrid " ).firstChild; 
htmlGrid.childNodes[i].childNodes[j].style.backgroundColor = colors[color]; 

} 
function  init() 
{ 
var  html = ' < table id = " TetrisGrid "  cellspacing = 1  style = " background-color:green " >< tbody > '; 
for ( var  i = 0 ;i <= 15 ;i ++ ) 
{ 
html += ' < tr > '; 
for ( var  j = 0 ;j <= 10 ;j ++ ) 
{ 

html += ' < td width = " 20 "  height = " 20 "  style = " background-color:'+colors[grid[i][j]]+'; " ></ td > '; 
} 
html += ' </ tr >  /r/n'; 
} 
html += ' </ tbody ></ table > '; 
document.write(html); 

} 

function  checkLineFull() 
{ 
var  full,i,j,i2; 
var  y3 = box.y + box.h; 
var  y4 = box.y; 
for (i = y3;i >= y4;) 
{ 
  full = 1 ; 
   for (j = 1 ;j < 10 ;j ++ ) 
if (grid[i][j] == 0 ){full = 0 ;  break ;} 
   if (full == 0 ){  -- i;  continue ;} 
   for (i2 = i; i2 > 0 ;i2 -- ) 
for (j = 1 ;j < 10 ;j ++ ) 
grid[i2][j] = grid[i2 - 1 ][j]; 
  drawGrid();  
  y4 ++ ;  
  gotLine ++ ; 
} 
checkGameOver(); 
} 

function  checkGameOver() 
{ 
var  bOver = false ; 
for ( var  j = 1 ;j < 10 ;j ++ ) 
if (grid[ 1 ][j] > 0 ){ bOver = true ;  break ;} 

if ( ! bOver){ 
box = new  Box( 1 , 1 ,boxdata[Math.floor(Math.random() * 7 )],Math.floor(Math.random() * 5 ) + 1 ); 
box.putNewBox(); 
} 
else  
{ 
bGameOver = true ; 
msg.innerHTML = " 游戏结束! 您的得分为 " + gotLine * 100 ; 
window.clearInterval(); 
} 
} 
function  document_onkeydown() 
{ 
if (bGameOver)  return ; 
switch (event.keyCode) 
{ 
case   37 :  
box.moveLeft(); 
break ; 
case   39 : 
box.moveRight(); 
break ; 
case   38 : 
box.rotate(); 
break ; 
case   40 : 
box.moveDown(); 
break ; 
} 
} 

function  moveDownBox() 
{ 
var  interval = 1000 - 10 * (gotLine > 80 ? 80  :gotLine); 
msg.innerHTML = " 等级： " + Math.floor(gotLine / 10 ) + "   得分: " + gotLine * 100 ; 
box.moveDown(); 
window.setTimeout('moveDownBox()',interval); 
} 

function  startGame() 
{ 

init(); 
window.setTimeout('moveDownBox()', 1000 ); 
bGameOver = false ; 
box = new  Box( 1 , 1 ,boxdata[Math.floor(Math.random() * 7 )],Math.floor(Math.random() * 5 ) + 1 ); 
box.putNewBox(); 
drawGrid(); 
} 
</ script >  

< SCRIPT  LANGUAGE =javascript  FOR =document  EVENT =onkeydown >  
<!--  
  if  (document.all)document_onkeydown() 

// --> 
</ SCRIPT >  
</ HEAD >  

< BODY  LANGUAGE =javascript  onLoad ="window.focus()" >  
< span  class ="btn"  style ="width:254;background-color:#F0C0C0;color:#0000FF;text-align:center" > sunnisdu 山东大学    < a  href ="javascript:window.location.reload();" > 开始 </ a ></ span >< br />  
< span  style ="background-color:black;width:22" ></ span >< span  id ="msg"  style ="width:232;background-color:black;color:#00FF00;" > 俄罗斯方块 </ span >  
< script  language =javascript >  
startGame(); 
</ script >  
</ BODY >  
</ HTML >