用JavaScript做的俄罗斯方块[转]-优快云博客

本文介绍了一个使用HTML和JavaScript实现的简单俄罗斯方块游戏。通过定义游戏网格、方块类型及移动旋转逻辑，实现了基本的游戏功能。玩家可以通过键盘控制方块的移动和旋转。

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>俄罗斯方块</TITLE>
<METANAME="Generator"CONTENT="EditPlus">
<METANAME="Author"CONTENT="">
<METANAME="Keywords"CONTENT="">
<METANAME="Description"CONTENT="">
<style>
span.btn
{
BORDER-RIGHT:#7b9ebd1pxsolid;PADDING-RIGHT:2px;BORDER-TOP:#7b9ebd1pxsolid;PADDING-LEFT:2px;FONT-SIZE:12px;FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);BORDER-LEFT:#7b9ebd1pxsolid;CURSOR:hand;COLOR:black;PADDING-TOP:2px;BORDER-BOTTOM:#7b9ebd1pxsolid
}
</style>
<scriptlanguage=javascript>
vargrid=
[
[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]
];

vargridBuf=
[
[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]
];

varboxdata=
[
[
[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]
]
];

varcolors=["black","#A0A0A0","red","green","yellow","pink"];
vargotLine=0;
varbox;
varbGameOver=false;
functiongetHeight(arr)
{
vari,j;
for(i=3;i>=0;i--)
for(j=0;j<4;j++)
if(arr[i][j])returni;
}

functiongetWidth(arr)
{
vari,j;
for(i=3;i>=0;i--)
for(j=0;j<4;j++)
if(arr[j][i])returni;
}

functionBox(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(varj=0;j<=this.h;j++)
for(vari=0;i<=this.w;i++)
if(this.arr[j][i]>0)grid[this.y+j][this.x+i]=0;
}
this.putNewBox=function()
{
for(varj=0;j<=this.h;j++)
for(vari=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()
{
vartmp=[[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];
varnewBox=newBox(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(varj=0;j<=this.h;j++)
for(vari=0;i<=this.w;i++)
{
if(grid[y+j][x+i]!=0&&this.arr[j][i]!=0){returnfalse;}
}
returntrue;
}

}

functiondrawGrid()
{
for(varj=0;j<=15;j++)
for(vari=0;i<=10;i++)
{
if(grid[j][i]!=gridBuf[j][i])
{
paintCell(j,i,grid[j][i]);
}
gridBuf[j][i]=grid[j][i];

}
}

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

}
functioninit()
{
varhtml='<tableid="TetrisGrid"cellspacing=1style="background-color:green"><tbody>';
for(vari=0;i<=15;i++)
{
html+='<tr>';
for(varj=0;j<=10;j++)
{

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

}

functioncheckLineFull()
{
varfull,i,j,i2;
vary3=box.y+box.h;
vary4=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();
}

functioncheckGameOver()
{
varbOver=false;
for(varj=1;j<10;j++)
if(grid[1][j]>0){bOver=true;break;}

if(!bOver){
box=newBox(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();
}
}
functiondocument_onkeydown()
{
if(bGameOver)return;
switch(event.keyCode)
{
case37:
box.moveLeft();
break;
case39:
box.moveRight();
break;
case38:
box.rotate();
break;
case40:
box.moveDown();
break;
}
}

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

functionstartGame()
{

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

<SCRIPTLANGUAGE=javascriptFOR=documentEVENT=onkeydown>

</SCRIPT>
</HEAD>

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