js写的俄罗斯方块

原创 2001年08月20日 14:11:00
<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>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</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>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td></tr><tr><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</td><td class=BK>&nbsp;</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>
<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>

JS写俄罗斯方块完美注释版

JS写俄罗斯方块完美注释版/************************************************************* JS俄罗斯方块完美注释版 v 1.01* 作者:...
  • sunxing007
  • sunxing007
  • 2008年11月19日 00:35
  • 14536

纯js实现俄罗斯方块详解与源码

对于小白来说用js实现俄罗斯方块还是有难度的,网上找了很多代码看,有的很长难懂,有的短小精悍,但不只用到了js还用到了框架,对于还未接触框架的小白宝宝,也只能无奈自己是小白了,自己写不出来那就找一篇纯...
  • d1105260363
  • d1105260363
  • 2017年08月23日 17:54
  • 457

[前端 3]纯Js制作俄罗斯方块游戏

导读:在别人文章里看到了,然后写了一遍。结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法。忘了在 哪一篇上面看的了,就贴不出来链接地址。原谅。呃,真没自己的东西,权当练打字了吧。其实,...
  • u013034889
  • u013034889
  • 2016年04月10日 00:08
  • 2022

JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码

原文:JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码 源代码下载地址:http://www.zuidaima.com/share/1882054152457216....
  • yaerfeng
  • yaerfeng
  • 2016年12月15日 10:17
  • 1338

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码,代码下载地址:http://www.zuidaima.com/share/1759652641295360.htm...
  • yaerfeng
  • yaerfeng
  • 2014年04月28日 09:52
  • 52374

用Java写俄罗斯方块

假期闲着无事,就用一周多的时间看了百度java吧的一位大神(alwing)发布的视频,学着用java写了一个俄罗斯方块,在此就以发布源代码以及必要讲解的形式来感谢他的帮助。当然我这里也是做了一些改动,...
  • new_one_object
  • new_one_object
  • 2016年01月29日 12:03
  • 4610

带AI的俄罗斯方块源码

好久没写俄罗斯方块的游戏了。从学习编程到现在,相继用Win32 API、MFC、C、C#、JS、iOS写过大约二十款左右的俄罗斯方块游戏。最近用Cocos2d-x写了一下,第一次完全将游戏逻辑与UI层...
  • yjh4866
  • yjh4866
  • 2015年05月12日 22:27
  • 4978

js版俄罗斯方块设计思想及实现

俄罗斯方块方块是小时候的一个回忆,从最开始的掌上的黑白游戏机,到电视游戏机,到电脑,无不有它的痕迹,今天我们来一起重温它的一种实现方法,也算是整理一下我的思路吧...... 1.以中心点坐标代替整个...
  • luqin1988
  • luqin1988
  • 2013年01月18日 09:50
  • 4157

【jquery】jquery写<俄罗斯方块>

闲来无事,蛋疼了一下,于是..... 纯属娱乐,没啥技术含量   var tab=null; var score=0;//得分 var speds=1000;//下落速度 $(functio...
  • zzvnzz
  • zzvnzz
  • 2012年06月20日 12:14
  • 2871

Python写的俄罗斯方块

在公司实习。公司推崇Python和Django框架,所以也得跟着学点。 简单瞅了下Tkinter,和Canvas配合在一起,还算是简洁的界面开发API。threading.Thread创建新的线程,...
  • rongyongfeikai2
  • rongyongfeikai2
  • 2013年05月06日 22:30
  • 4431
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js写的俄罗斯方块
举报原因:
原因补充:

(最多只允许输入30个字)