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

推荐给大家！
以前在网上还见过有人用js做了个星际争霸，javascript真是门很不错的语言。
posted @ 2007-08-21 16:10  小y  阅读(2407)  评论(2)  编辑  收藏  举报