用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>

</SCRIPT>
</HEAD>

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

推荐给大家！
以前在网上还见过有人用js做了个星际争霸，javascript真是门很不错的语言。

-----------------------------------------------------------------