您的位置：首页 > Web前端 > JavaScript

俄罗斯方块:一段Javascript代码

2011-01-06 16:36 375 查看
<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);//BX, BY store the GameBar'block style

var BY=new Array(4);//PX, PY store the previewBar'block style

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);//clearInterval()方法停止指定的定时器。

    mTimer=window.setInterval("moveBar()",outTime);  //返回值：定时器的ID值，定时器的标识。

 //window.setInterval()返回的就是window.clearInterval的参数

}

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; //static block, can't move to lest

            for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");    // clear the old block color

            for(i=0;i<4;i++)BX[i]=BX[i]-1;       //BY[i]  not changed

            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");//将不能再下落得block的style设为：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--)  //delete the line:cover the line use the above line

                for(l=0;l<10;l++)

                    setClass(l,k,getClass(l,k-1));

            for(l=0;l<10;l++)setClass(l,0,"BK"); //clear the first line

        }

    }

    randBar();

    speed=Math.floor(score/3000)+1; //3000 score speed add 0.1second.

    outTime=1100-speed*100;

    scoreBar.innerHTML="Score : " + score; //update score

    speedBar.innerHTML="Speed : " + speed;

    window.clearInterval(mTimer);

    mTimer=window.setInterval("moveBar()",outTime); //update speed

}

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

function setClass(x,y,cName){GameBar.children[y].children[x].className=cName;}  //Tbody id=GameBar

                    //children[y] tr

                    //children[x] td

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){  //dropline = false; can't move down.

        window.clearInterval(mTimer); // stop timer

        delLine();  

        return;

    }

    for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");//can move down

    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"){//event.srcElement 捕获当前事件作用的对象

        gameState=2;

        event.srcElement.value="Continue";

        window.clearInterval(mTimer); //clear timer

    }

    else{

        gameState=1;

        event.srcElement.value="Pause";

        mTimer=window.setInterval("moveBar()",outTime);// oper timer

    }

}

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";//clear previewBar

        }

    }

    for(i=0;i<4;i++)previewBar.children[PY[i]].children[PX[i]-3].className="MB";//previewBar每行只有4格，所以要减去3

    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;// window.onunload 是当离开页面的时候触发.   

     //使用它的时候一定要注意.不只是关闭该页面时触发.回发页面也会触发该事件.

function rel()//离开页面时 清空资源， 好习惯   

{

    location.reload();//location 地址对象 它描述的是某一个窗口对象所打开的地址

    return false;

}

</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  class function button timer border
相关文章推荐
新的分享
章节导航