电脑技术学习

用javascript编写的俄罗斯方块小游戏

dn001

<HTML>
<HEAD>
<title>俄罗斯方块</title>
<style>
<!--
BODY
{
}
.MB
{
BACKGROUND-COLOR: firebrick;
CURSOR: default;
HEIGHT: 22px;
WIDTH: 22px
}
.SB
{
BACKGROUND-COLOR: slategray;
CURSOR: default;
HEIGHT: 22px;
WIDTH: 22px
}
.BK
{
BACKGROUND-COLOR: white;
CURSOR: default;
HEIGHT: 22px;
WIDTH: 22px
}
.GT
{
BORDER-BOTTOM: deepskyblue thin solid;
BORDER-LEFT: deepskyblue thin solid;
BORDER-RIGHT: deepskyblue thin solid;
BORDER-TOP: deepskyblue thin solid;
CURSOR: default
}
-->
</style>
<script>
<!--
var BX=new Array(4);
var BY=new Array(4);
var PX=new Array(4);
var PY=new Array(4);
var mTimer
var firstView

function beginGame()
{
gameState=0;
speed=1;
outTime=1100-speed*100;
score=0;
if(gameState!=0)return;
firstView=true;
for(j=0;j<16;j++)
for(i=0;i<10;i++)
setClass(i,j,"BK");
randBar();
gameState=1;
Play.disabled=true;
window.clearInterval(mTimer);
mTimer=window.setInterval("moveBar()",outTime);
}

function keyControl()
{
if(gameState!=1)return;
switch(event.keyCode){
case 37:{;//left
for(i=0;i<4;i++)if(BX[i]==0)return;
for(i=0;i<4;i++)if(getClass(BX[i]-1,BY[i])=="SB")return;
for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
for(i=0;i<4;i++)BX[i]=BX[i]-1;
for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
break;}
case 38:{;//up
var preMBarX=new Array(4);
var preMBarY=new Array(4);
var cx=Math.round((BX[0]+BX[1]+BX[2]+BX[3])/4);
var cy=Math.round((BY[0]+BY[1]+BY[2]+BY[3])/4);
for(i=0;i<4;i++){
preMBarX[i]=Math.round(cx-cy+BY[i]);
preMBarY[i]=Math.round(cx+cy-BX[i]);
if(preMBarX[i]<0 || preMBarX[i]>9 || preMBarY[i]<0 || preMBarY[i]>15)return;
if(getClass(preMBarX[i],preMBarY[i])=="SB")return;
}
for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
for(i=0;i<4;i++){
BX[i]=preMBarX[i];
BY[i]=preMBarY[i];
}
for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
break;}
case 39:{;//right
for(i=0;i<4;i++)if(BX[i]==9)return;
for(i=0;i<4;i++)if(getClass(BX[i]+1,BY[i])=="SB")return;
for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
for(i=0;i<4;i++)BX[i]=BX[i]+1;
for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
break;}
case 40:{;//down
moveBar();
break;}
}
}

function delLine()
{
for(i=0;i<4;i++)setClass(BX[i],BY[i],"SB");
for(j=0;j<16;j++){
dLine=true;
for(i=0;i<9;i++){
if(getClass(i,j)!="SB"){
dLine=false;
break;
}
}
if(dLine){
score=score+100;
for(k=j;k>0;k--)
for(l=0;l<10;l++)
setClass(l,k,getClass(l,k-1));
for(l=0;l<10;l++)setClass(l,0,"BK");
}
}
randBar();
speed=Math.floor(score/3000)+1;
outTime=1100-speed*100;
scoreBar.innerHTML="Score : " + score;
speedBar.innerHTML="Speed : " + speed;
window.clearInterval(mTimer);
mTimer=window.setInterval("moveBar()",outTime);
}

function getClass(x,y){return GameBar.children[y].children[x].className;}
function setClass(x,y,cName){GameBar.children[y].children[x].className=cName;}

function moveBar()
{
if(gameState!=1)return;
dropLine=true;
for(i=0;i<4;i++)if(BY[i]==15)dropLine=false;
if(dropLine)for(i=0;i<4;i++)if(getClass(BX[i],BY[i]+1)=="SB")dropLine=false;
if(!dropLine){
window.clearInterval(mTimer);
delLine();
return;
}
for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
for(i=0;i<4;i++)BY[i]=BY[i]+1;
for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
}

function pauseGame()
{
if(gameState==0)return;
if(event.srcElement.value=="Pause"){
gameState=2;
event.srcElement.value="Continue";
window.clearInterval(mTimer);
}
else{
gameState=1;
event.srcElement.value="Pause";
mTimer=window.setInterval("moveBar()",outTime);
}
}

function fMnu(){return false;}
document.oncontextmenu=fMnu;

function preview()
{
if(previewBar.style.display!="none")
previewBar.style.display="none";
else
previewBar.style.display="block";
}

function replayGame()
{
if(gameState!=1)return;
if(!confirm("真的要重新开始?"))return;
gameState=0;
window.clearInterval(mTimer);
beginGame();
}
function randBar()
{
randNum=Math.floor(Math.random()*20)+1;
if(!firstView)
for(i=0;i<4;i++){
BX[i]=PX[i];
BY[i]=PY[i];
}
switch(randNum){
case 1:{
PX[0]=4;
PY[0]=0;
PX[1]=4;
PY[1]=1;
PX[2]=5;
PY[2]=1;
PX[3]=6;
PY[3]=1;
break;}
case 2:{
PX[0]=4;
PY[0]=0;
PX[1]=5;
PY[1]=0;
PX[2]=4;
PY[2]=1;
PX[3]=4;
PY[3]=2;
break;}
case 3:{
PX[0]=4;
PY[0]=0;
PX[1]=5;
PY[1]=0;
PX[2]=6;
PY[2]=0;
PX[3]=6;
PY[3]=1;
break;}
case 4:{
PX[0]=5;
PY[0]=0;
PX[1]=5;
PY[1]=1;
PX[2]=5;
PY[2]=2;
PX[3]=4;
PY[3]=2;
break;}
case 5:{
PX[0]=6;
PY[0]=0;
PX[1]=6;
PY[1]=1;
PX[2]=4;
PY[2]=1;
PX[3]=5;
PY[3]=1;
break;}
case 6:{
PX[0]=4;
PY[0]=0;
PX[1]=4;
PY[1]=1;
PX[2]=4;
PY[2]=2;
PX[3]=5;
PY[3]=2;
break;}
case 7:{
PX[0]=4;
PY[0]=0;
PX[1]=4;
PY[1]=1;
PX[2]=5;
PY[2]=0;
PX[3]=6;
PY[3]=0;
break;}
case 8:{
PX[0]=4;
PY[0]=0;
PX[1]=5;
PY[1]=0;
PX[2]=5;
PY[2]=1;
PX[3]=5;
PY[3]=2;
break;}
case 9:{
PX[0]=4;
PY[0]=0;
PX[1]=5;
PY[1]=0;
PX[2]=5;
PY[2]=1;
PX[3]=6;
PY[3]=1;
break;}
case 10:{
PX[0]=5;
PY[0]=0;
PX[1]=5;
PY[1]=1;
PX[2]=4;
PY[2]=1;
PX[3]=4;
PY[3]=2;
break;}
case 11:{
PX[0]=4;
PY[0]=1;
PX[1]=5;
PY[1]=1;
PX[2]=5;
PY[2]=0;
PX[3]=6;
PY[3]=0;
break;}
case 12:{
PX[0]=4;
PY[0]=0;
PX[1]=4;
PY[1]=1;
PX[2]=5;
PY[2]=1;
PX[3]=5;
PY[3]=2;
break;}
case 13:{
PX[0]=4;
PY[0]=0;
PX[1]=5;
PY[1]=0;
PX[2]=6;
PY[2]=0;
PX[3]=5;
PY[3]=1;
break;}
case 14:{
PX[0]=4;
PY[0]=0;
PX[1]=4;
PY[1]=1;
PX[2]=4;
PY[2]=2;
PX[3]=5;
PY[3]=1;
break;}
case 15:{
PX[0]=5;
PY[0]=0;
PX[1]=5;
PY[1]=1;
PX[2]=4;
PY[2]=1;
PX[3]=6;
PY[3]=1;
break;}
case 16:{
PX[0]=5;
PY[0]=0;
PX[1]=5;
PY[1]=1;
PX[2]=5;
PY[2]=2;
PX[3]=4;
PY[3]=1;
break;}
case 17:{
PX[0]=4;
PY[0]=0;
PX[1]=5;
PY[1]=0;
PX[2]=4;
PY[2]=1;
PX[3]=5;
PY[3]=1;
break;}
case 18:{
PX[0]=4;
PY[0]=0;
PX[1]=5;
PY[1]=0;
PX[2]=4;
PY[2]=1;
PX[3]=5;
PY[3]=1;
break;}
case 19:{
PX[0]=3;
PY[0]=0;
PX[1]=4;
PY[1]=0;
PX[2]=5;
PY[2]=0;
PX[3]=6;
PY[3]=0;
break;}
case 20:{
PX[0]=5;
PY[0]=0;
PX[1]=5;
PY[1]=1;
PX[2]=5;
PY[2]=2;
PX[3]=5;
PY[3]=3;
break;}
}
if(firstView){
firstView=false;
randBar();
return;
}
for(i=0;i<4;i++){
for(j=0;j<4;j++){
previewBar.children[j].children[i].className="BK";
}
}
for(i=0;i<4;i++)previewBar.children[PY[i]].children[PX[i]-3].className="MB";
for(i=0;i<4;i++){
if(getClass(BX[i],BY[i])!="BK"){
alert("Game Over!");
window.clearInterval(mTimer);
Play.disabled=false;
gameState=0;
return;
}
}
for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
}
// -->
</script>
</HEAD>
<BODY bgcolor=Black onkeydown="return keyControl();">
<center>
<P><b><font color=red>俄罗斯方块</font></b></P>
<table cellspacing=0 cellpadding=0 class=gt border=1 bordercolor="LightYellow " style="position:absolute;left:220px;top:53px;">
<Tbody id=GameBar>
<tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK>
</td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK>
</td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK>
</td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK>
</td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK>
</td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK>
</td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr>
</tbody>
</table>
</center>
<table style="position:absolute;top=100px;left:50px">
<tr><td id=scoreBar style="color:white">Score : 0</td></tr>
<tr><td id=speedBar style="color:white">Speed : 1</td></tr>
</table>

<table cellspacing=0 cellpadding=0 class=gt border=1 bordercolor="LightYellow " style="position:absolute;left:570px;top:53px;">
<Tbody id=previewBar>
<tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr>
</tbody>
</table>
<table style="position:absolute;left:570px;top:180px;">
<tr><td><input type=button id="Play" style="width:100px" value="Play" onclick="return beginGame();"></td></tr>
<tr><td><input type=button id="Pause" style="width:100px" value="Pause" onclick="return pauseGame();"></td></tr>
<tr><td><input type=button id="Preview" style="width:100px" value="Preview" onclick="preview();"></td></tr>
<tr><td><input type=button id="Replay" style="width:100px" value="Replay" onclick="replayGame();"></td></tr>
<tr><td><input type=button id="Quit" style="width:100px" value="Quit" onclick="window.close();"></td></tr>
</table>
</BODY>
</HTML>
<script>
function unSel()
{
document.execCommand("Unselect");
window.setTimeout("unSel()",10);
}
unSel();

window.onunload=rel;
function rel()
{
location.reload();
return false;
}

</script>

上一篇 javascript实现函数重载的深入探索

下一篇 好玩!仿DOS的HTML代码

相关文章