教你js写的俄罗斯方块

＜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==0)return;
            for(i=0;i＜4;i++)if(getClass(BX-1,BY)=="SB")return;
            for(i=0;i＜4;i++)setClass(BX,BY,"BK");
            for(i=0;i＜4;i++)BX=BX-1;
            for(i=0;i＜4;i++)setClass(BX,BY,"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=Math.round(cx-cy+BY);
                preMBarY=Math.round(cx+cy-BX);
                if(preMBarX＜0 ¦¦ preMBarX＞9 ¦¦ preMBarY＜0 ¦¦ preMBarY＞15)return;
                if(getClass(preMBarX,preMBarY)=="SB")return;
            }
            for(i=0;i＜4;i++)setClass(BX,BY,"BK");
            for(i=0;i＜4;i++){
                BX=preMBarX;
                BY=preMBarY;
            }
            for(i=0;i＜4;i++)setClass(BX,BY,"MB");
            break;}
        case 39:{    //right
            for(i=0;i＜4;i++)if(BX==9)return;
            for(i=0;i＜4;i++)if(getClass(BX+1,BY)=="SB")return;
            for(i=0;i＜4;i++)setClass(BX,BY,"BK");
            for(i=0;i＜4;i++)BX=BX+1;
            for(i=0;i＜4;i++)setClass(BX,BY,"MB");
            break;}
        case 40:{    //down
            moveBar();
            break;}
    }
}

function delLine()
{
    for(i=0;i＜4;i++)setClass(BX,BY,"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==15)dropLine=false;
    if(dropLine)for(i=0;i＜4;i++)if(getClass(BX,BY+1)=="SB")dropLine=false;
    if(!dropLine){
        window.clearInterval(mTimer);
        delLine();
        return;
    }
    for(i=0;i＜4;i++)setClass(BX,BY,"BK");
    for(i=0;i＜4;i++)BY=BY+1;
    for(i=0;i＜4;i++)setClass(BX,BY,"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=PX;
            BY=PY;
        }
    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.className="BK";
        }
    }
    for(i=0;i＜4;i++)previewBar.children[PY].children[PX-3].className="MB";
    for(i=0;i＜4;i++){
        if(getClass(BX,BY)!="BK"){
            alert("Game Over!");
            window.clearInterval(mTimer);
            Play.disabled=false;
            gameState=0;
            return;
        }
    }
    for(i=0;i＜4;i++)setClass(BX,BY,"MB");
}
// --＞
＜/script＞
＜/HEAD＞
＜BODY bgcolor=Black＞
＜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"＞＜/td＞＜/tr＞
    ＜tr＞＜td＞＜input type=button id="Pause" style="width:100px" value="Pause"＞＜/td＞＜/tr＞
    ＜tr＞＜td＞＜input type=button id="Preview" style="width:100px" value="Preview"＞＜/td＞＜/tr＞
    ＜tr＞＜td＞＜input type=button id="Replay" style="width:100px" value="Replay"＞＜/td＞＜/tr＞
    ＜tr＞＜td＞＜input type=button id="Quit" style="width:100px" value="Quit"＞＜/td＞＜/tr＞
＜/table＞
＜div style="position:absolute;left:590px;top:390px;color:white;font-size:9pt"＞如有问题请与我＜a href="mailto:sor@263.net"＞＜font color=white＞联系＜/font＞＜/a＞＜/div＞
＜/BODY＞
＜/HTML＞
＜script＞
function unSel()
{
    document.execCommand("Unselect");
    window.setTimeout("unSel()",10);
}
unSel();

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

＜/script＞