注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

东南隅

wantnon的blog

 
 
 

日志

 
 
 
 

javascript俄罗斯方块  

2009-07-31 01:22:45|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

初学javascript,写了个简单的俄罗斯方块,但是有个问题一直解决不了,就是响应速度超慢。。

这究竟是为什么呢?

javascript没有给提供绘图的api,就学着网上的做法用talbe来画图,恰好俄罗斯方块绘图简单,而且所有图形都是方块组成的,于是每个方格用一个table。莫非是由于不断重绘这些talbe导致了程序速度如此之慢?

当初用mfc写过一个类似的方块,同样的重绘频率,但程序速度很快。当然,用api绘图与用talbe来冒充速度应该是不一样的。

不知道速度慢是否还有其它原因。

那么,该怎么做才能提高速度呢?

代码:

<HTML>
<HEAD >
    <title>俄罗斯方块</title>
<mce:script Language="javascript"><!--
function Cshape(mat,x,y,color)//方块对象
{
        this.x=x;
        this.y=y;
        this.color=color;
    this.mat=mat;
    this.rot=rotfunc;//顺时针旋转
        this.revrot=revrotfunc;//逆时针旋转
        this.mov=movfunc;//移动
        this.show=showshapefunc;
}
function Cbackground(m,n,x,y)//背景对象
{
    this.mat=[];
    //生成this.mat
      for(i=0;i<=m-1;i++)
    {
        this.mat[i]=new Array(n);
        this.mat[i][0]=1;
        this.mat[i][n-1]=1;
    }
    for(j=0;j<=n-1;j++)
    {
        this.mat[m-1][j]=1;
    }
    this.x=x;
    this.y=y;
    this.show=showbackgroundfunc;
}
function rotfunc()//顺时针旋转
{
    tmat=[];
        for(i=0;i<=this.mat[0].length-1;i++)
    {
        tmat[i]=new Array(this.mat.length);
    }
        for(i=0;i<=this.mat.length-1;i++)
    {
        for(j=0;j<=this.mat[i].length-1;j++)
        {
            tmat[j][this.mat.length-1-i]=this.mat[i][j];  ;   
        }
    }
        this.mat=tmat;
}
function revrotfunc()//逆时针旋转
{
        tmat=[];
        for(i=0;i<=this.mat[0].length-1;i++)
    {
        tmat[i]=new Array(this.mat.length);
    }
        for(i=0;i<=this.mat.length-1;i++)
    {
        for(j=0;j<=this.mat[i].length-1;j++)
        {
            tmat[this.mat[0].length-1-j][i]=this.mat[i][j];  ;   
        }
    }
        this.mat=tmat;
}
function movfunc(dx,dy)//移动
{
    this.x+=dx;
    this.y+=dy;   
}
function showshapefunc()//显示方块
{
    for(i=0;i<=this.mat.length-1;i++)
    {
         for(j=0;j<=this.mat[i].length-1;j++)
        {
            if(this.mat[i][j]==1)
            {
                drawbrick(this.x+j*15,this.y+i*15,this.color,15);
            }
        }
    }
}
function showbackgroundfunc()//显示背景
{
        for(i=0;i<=this.mat.length-1;i++)
    {
         for(j=0;j<=this.mat[i].length-1;j++)
        {
            if(this.mat[i][j]==1)
            {
                drawbrick(this.x+j*15,this.y+i*15,"#aaffdd",15);
            }
        }
    }
}
function drawbrick(x,y,color,size)//画方格,每个方格用一个table
{
    document.body.innerHTML+="<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+(size-1)+" height="+(size-1)+"></td></tr></table>";
}
function onTimefunc()//每次timer触发时执行的动作
{
    curshape.mov(0,15);//下降一格
    if(isgameover())
    {
        clearInterval(timer);
        active=false;
    }
    if(cover()==true)
       {
        curshape.mov(0,-15);//退回
        freeze();//冻结
                dec();//消层
        //以后备方块作为当前方块
        curshape=nxtshape;
        curshape.x=180;
        curshape.y=0;
        //生成新后备方块
        colorI=Math.floor(Math.random()*color.length);
        shapeI=Math.floor(Math.random()*7);
        nxtshape=new Cshape(shape[shapeI].mat,300,60,color[colorI]);
        }
    draw();   
}
function isgameover()//判断游戏是否结束
{
    for(i=1;i<=background.mat[1].length-2;i++)
    {
        if(background.mat[1][i]==1)
        {
            return true;
        }
    }   
    return false;   
}
function dec()//消层
{
    count=0;
    for(i=background.mat.length-2;i>=0;i--)
    {
        //看background.mat[i]是不是全为1
        alleq=true;
        for(j=0;j<=background.mat[i].length-1;j++)
        {
            if(background.mat[i][j]!=1)
            {
                alleq=false;
                break;
            }
        }//得到alleq   
        if(alleq==true)
        {
            count++;
        }else
        {
            //background.mat[i]填充给background.mat[i+count];
                        for(j=0;j<=background.mat[i].length-1;j++)
            {
                background.mat[i+count][j]=background.mat[i][j];
            }
        }
    }
    score+=count;
}
function freeze()//冻结,当方块下落到底部时冻结
{
    //curshape.mat[0][0]与background.mat[I][J]重合
    I=(curshape.y-background.y)/15;
    J=(curshape.x-background.x)/15;
        if(I<0||J<0)return false;
    for(i=0;i<=curshape.mat.length-1;i++)
    {
        for(j=0;j<=curshape.mat[i].length-1;j++)
        {
            if(curshape.mat[i][j]==1)
            {
                background.mat[I+i][J+j]=1;
            }   
        }   
    }
}
function cover()//判断是否发生覆盖
{
        //curshape.mat[0][0]与background.mat[I][J]重合
    I=(curshape.y-background.y)/15;
    J=(curshape.x-background.x)/15;
        if(I<0||J<0)return false;
    for(i=0;i<=curshape.mat.length-1;i++)
    {
        for(j=0;j<=curshape.mat[i].length-1;j++)
        {
            if(curshape.mat[i][j]==1&&background.mat[I+i][J+j]==1)
                        {
                return true;
                        }   
        }   
    }
        return false;
}
function draw()//绘制画面
{
        //首先清屏
        document.body.innerHTML="";
        //画后备方块
        nxtshape.show();
        //画当前方块
        curshape.show();
    //画背景
        background.show();
        //提示文字
    if(active==false)
    {
        document.body.innerHTML+="<table border='1'><tr><td>GameOver!</td></tr></table>";
        str="score:"+score;
                  document.body.innerHTML+="<table border='1'><tr><td>"+str+"</td></tr></table>";   
        document.body.innerHTML+="<table border='1'><tr><td>按B重新开始</td></tr></table>";
    }else
    {
        document.body.innerHTML+="<table border='1'><tr><td>A:暂停/继续</td></tr></table>";
            document.body.innerHTML+="<table border='1'><tr><td>B:新开始</td></tr></table>";
           document.body.innerHTML+="<table border='1'><tr><td>←↓→:左下右</td></tr></table>";
               document.body.innerHTML+="<table border='1'><tr><td>↑:旋转</td></tr></table>";
        if(pause==true)
        {       
            document.body.innerHTML+="<table border='1'><tr><td>状态:暂停</td></tr></table>";   
        }else
        {
            document.body.innerHTML+="<table border='1'><tr><td>状态:进行中</td></tr></table>";   
        }
        str="score:"+score;
            document.body.innerHTML+="<table border='1'><tr><td>"+str+"</td></tr></table>";
    }
}
function onKeyDownfunc()//处理键盘事件
{
     switch(event.keyCode)
    {
        case 37:{    //left
        if(pause==true)return;
        curshape.mov(-15,0);
        if(cover()==true)
           {
            curshape.mov(15,0);//退回
                 }
            break;}
        case 38:{    //up   
        if(pause==true)return;
                curshape.rot();//旋转
        if(cover()==true)
        {
            curshape.revrot();//反向旋回
        }
            break;}
        case 39:{    //right
        if(pause==true)return;
        curshape.mov(15,0);
                if(cover()==true)
        {
            curshape.mov(-15,0);
        }
            break;}
        case 40:{    //down
        if(pause==true)return;
            curshape.mov(0,15);
        if(cover())
        {
                    curshape.mov(0,-15);
        }
            break;}
     case 65:{    //A   暂停/继续
        if(active==false)return;//只有active时才起作用
                if(pause==true)
        {
             timer=setInterval('onTimefunc()',100);
            pause=false;
        }else
        {
            clearInterval(timer);
            pause=true;       
        }
        break;}
    case 66:{    //B   重新开始
        //生成最初状态
        //生成当前方块
        colorI=Math.floor(Math.random()*color.length);//随机生成颜色下标
        shapeI=Math.floor(Math.random()*7);//随机生成形状下标
        curshape=new Cshape(shape[shapeI].mat,180,0,color[colorI]);
        curshape.show();
        //生成后备方块
        colorI=Math.floor(Math.random()*color.length);
        shapeI=Math.floor(Math.random()*7);
        nxtshape=new Cshape(shape[shapeI].mat,300,60,color[colorI]);
        nxtshape.show();
        //生成背景
        background=new Cbackground(16,10,120,0);
        background.show();
        //
                clearInterval(timer);
        timer=setInterval('onTimefunc()',100);
                active=true;
        pause=false;
        score=0;
        break;}
        }
    draw();
}
//七种方块
shape=[];
shape[0]=new Cshape([[1,1],[1,1]],0,0,"red");//方块
shape[1]=new Cshape([[1,1,1,1]],0,0,"red");//长条
shape[2]=new Cshape([[1,1,0],[0,1,1]],0,0,"red");//Z
shape[3]=new Cshape([[0,1,1],[1,1,0]],0,0,"red");//反Z
shape[4]=new Cshape([[0,0,1],[1,1,1]],0,0,"red");//L
shape[5]=new Cshape([[1,0,0],[1,1,1]],0,0,"red");//反L
shape[6]=new Cshape([[0,1,0],[1,1,1]],0,0,"red");//T
//方块的可用颜色
color=[];
color[0]="red";
color[1]="yellow";
color[2]="blue";
color[3]="green";
// --></mce:script>
</HEAD>
<body  onkeydown="return onKeyDownfunc()">
<mce:script Language="javascript"><!--
//全局变量
curshape="";//当前活动方块
nxtshape="";//下一方块预览
background="";//背景
score=0;
timer="";//计时器
pause=false;//是否处于暂停状态
active=false;//是否处于游戏中,还是已经over
//alert("hi");
// --></mce:script>
<!--最初界面-->
<table border='1'><tr><td>按B开始游戏</td></tr></table>
</body>
</HTML>

  评论这张
 
阅读(94)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018