JavaScript canvas实现俄罗斯方块游戏

程序员文章站 2022-03-27 08:06:03

俄罗斯方块是个很经典的小游戏，也尝试写了一下。不过我想用尽量简洁逻辑清晰的代码实现。不用过多的代码记录下落方块的模型，或者记录每一个下落方块的x,y。想了下面的思路，然后发现这样很写很简明。俄罗斯方块...

俄罗斯方块是个很经典的小游戏，也尝试写了一下。不过我想用尽量简洁逻辑清晰的代码实现。不用过多的代码记录下落方块的模型，或者记录每一个下落方块的x,y。想了下面的思路，然后发现这样很写很简明。

俄罗斯方块的7种基本模型：

要记录这些模型有很多种办法，可以用记录其相对位置，记录每一个方块的x,y坐标等。自己想了一种思路来记录这7种模型，很简洁，在写左移，右移，旋转功能的时候也方便使用。下面这个数组记录了这些模型。

var cubearr=[[6,7,12,13],[7,8,11,12],[6,7,11,12],[7,12,17,8],[7,12,16,17],[7,12,17,22],[7,11,12,13]];

思路：

一个5*5的表格，从0开始标号。标号为12的点即是中心点。模型每个用其标号记录下来，比如第一种模型就为[6,7,12,13]。

以表格的左上角为参考点，有这样的规律，假设表格中的数为value，有value除以5的余数就是该点相对于参考点x的偏移，value除以5的整数部分就是该点相对于参考点的y偏移。旋转的时候也很简单，以中心12旋转，也可以找到一些规律。

var movex=cubenow[i]%5;
var movey=math.floor(cubenow[i]/5);

用一个循环绘制一个模型

function drawele(color)
    {
        ctx.fillstyle=color;
        ctx.strokestyle='#fff';
        for(var i=0;i<4;i++)
        {
            var movex=downinfor.cubenow[i]%5;
            var movey=math.floor(downinfor.cubenow[i]/5);
            ctx.fillrect(cubew*(downinfor.point[0]+movex),cubew*(downinfor.point[1]+movey),cubew,cubew);
            ctx.strokerect(cubew*(downinfor.point[0]+movex),cubew*(downinfor.point[1]+movey),cubew,cubew)
        }
}

JavaScript canvas实现俄罗斯方块游戏

旋转模型：

当前位子和下一个旋转位置之间的关系，通过这个数组可以很方便的实现模型的旋转。比如说标号为0的位子，按顺时针旋转，下一个位子是4。标号为6的位子，下一个位子是8.下面这个数组可以由前一个位子找到下一个位子。

var rotatearr=[4,9,14,19,24,3,8,13,18,23,2,7,12,17,22,1,6,11,16,21,0,5,10,15,20];

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>俄罗斯方块</title>
</head>
<body>
<div>
    <div style="display:inline-block">
     <canvas id="can" height="480" width="300" style="border:3px solid black;"></canvas>
    </div>
    <div id="info" style="display:inline-block;height:600px;vertical-align: top;font-family: tmb;  font-size:14pt; color:green;">
    <span>得分:</span><span id="score">0</span>
     </div>
</div>
<script type="text/javascript">
    var cubew=20;
    var cubearr=[[6,7,12,13],[7,8,11,12],[6,7,11,12],[7,12,17,8],[7,12,16,17],[7,12,17,22],[7,11,12,13]];
    var colorarr=['#ffc0cb','#dda0dd','#9370db','#6495ed','#fa8072','#ff8c00','#008000'];
    var rotatearr=[4,9,14,19,24,3,8,13,18,23,2,7,12,17,22,1,6,11,16,21,0,5,10,15,20];
    var canvas=document.getelementbyid('can');
    var ctx=canvas.getcontext('2d');
    var score=document.getelementbyid('score');
    var canwidth=canvas.width;
    var canheight=canvas.height;
    var downinfor={}, staticcube=[];
    var myinter;
    window.οnlοad=function() //初始化
    {
        drawline();
        for(var i=0;i<(canwidth/cubew);i++)
        {
            staticcube[i]=[];
            for(var j=0;j<(canheight/cubew);j++)
            {
                staticcube[i][j]=0;
            }
        }
        initcube();
        myinter=setinterval('movedown()',200);  //第一个参数要加引号
    }
    function drawline()
    {
        ctx.linewidth=1;
        ctx.strokestyle='#ddd';
        for(var i=0;i<(canwidth/cubew);i++)
        {
          ctx.moveto(cubew*i,0);
          ctx.lineto(cubew*i,canheight);
        }
        ctx.stroke();
        for(var j=0;j<(canheight/cubew);j++)
        {
            ctx.moveto(0,cubew*j);
            ctx.lineto(canheight,cubew*j);
        }
        ctx.stroke();
    }
    function initcube()
    {
           var index=math.floor(math.random()*cubearr.length);//随机生成
            downinfor.cubenow=cubearr[index].concat();
            downinfor.index=index;
            downinfor.prepoint=[5,-1];
            downinfor.point=[5,-1];
            drawele(colorarr[downinfor.index]);
    }
    function movedown()
    {
        //判断下一个位置是否合理
        var length,isempty=true,px,py,movex,movey,max=0;
        for(var i=0;i<4;i++)
        {
            if(max<downinfor.cubenow[i])
                max=downinfor.cubenow[i];
        }
        length=math.ceil(max/5);
        for(var i=0;i<4;i++)
        {
            px=downinfor.point[0]+downinfor.cubenow[i]%5;
            py=downinfor.point[1]+1+math.floor(downinfor.cubenow[i]/5);
            if(staticcube[px][py]==1)
            {
                isempty=false;
                break;
            }
        }
        if((downinfor.point[1]+length)<(canheight/cubew)&&isempty)
        {
            downinfor.prepoint=downinfor.point.concat();//注意引用类型
            downinfor.point[1]=downinfor.point[1]+1;
            clearele();
            drawele(colorarr[downinfor.index]);
        }
        else//不能移动的时候
        {
            for(var i=0;i<4;i++)
            {
                px=downinfor.point[0]+downinfor.cubenow[i]%5;
                py=downinfor.point[1]+math.floor(downinfor.cubenow[i]/5);
                staticcube[px][py]=1;
            }
            drawele('#555');
            checkfullline();
        }
 
    }
    function moveleft()
    {
        var leftroom=4,isempty=true,px,py,movex,movey;
        for(var i=0;i<4;i++)
        {
            px=downinfor.point[0]-1+downinfor.cubenow[i]%5;
            py=downinfor.point[1]+math.floor(downinfor.cubenow[i]/5);
            if((downinfor.cubenow[i]%5)<leftroom)
                leftroom=downinfor.cubenow[i]%5;
            if(staticcube[px][py]==1)
            {
                isempty=false;
                break;
            }
        }
        if((downinfor.point[0]+leftroom)>=0&&isempty)
        {
            downinfor.prepoint=downinfor.point.concat();
            downinfor.point[0]=downinfor.point[0]-1;
            clearele();
            drawele(colorarr[downinfor.index]);
        }
    }
    function moveright()
    {
        var rightroom=0,isempty=true,px,py,movex,movey;
        for(var i=0;i<4;i++)
        {
            px=downinfor.point[0]+1+downinfor.cubenow[i]%5;
            py=downinfor.point[1]+math.floor(downinfor.cubenow[i]/5);
            if((downinfor.cubenow[i]%5)>rightroom)
                rightroom=downinfor.cubenow[i]%5;
            if(staticcube[px][py]==1)
            {
                isempty=false;
                break;
            }
        }
        if((downinfor.point[0]+rightroom+1)<(canwidth/cubew)&&isempty)
        {
            downinfor.prepoint=downinfor.point.concat();
            downinfor.point[0]=downinfor.point[0]+1;
            clearele();
            drawele(colorarr[downinfor.index]);
        }
    }
    function moverotate()//处理旋转
    {
        var isempty=true,px,py,movex,movey, temprotate=[0,0,0,0];
        for(var i=0;i<4;i++)
        {
            temprotate[i]=rotatearr[downinfor.cubenow[i]];
        }
        for(var i=0;i<4;i++)
        {
            px=downinfor.point[0]+temprotate[i]%3;
            py=downinfor.point[1]+math.floor(temprotate[i]/3);
            if(staticcube[px][py]==1)
            {
                isempty=false;
                break;
            }
        }
        if(isempty)
        {
            downinfor.prepoint=downinfor.point.concat();
            clearele();
            downinfor.cubenow=temprotate.concat();
            drawele(colorarr[downinfor.index]);
        }
 
    }
    function drawele(color)
    {
        ctx.fillstyle=color;
        ctx.strokestyle='#fff';
        for(var i=0;i<4;i++)
        {
            var movex=downinfor.cubenow[i]%5;
            var movey=math.floor(downinfor.cubenow[i]/5);
            ctx.fillrect(cubew*(downinfor.point[0]+movex),cubew*(downinfor.point[1]+movey),cubew,cubew);
            ctx.strokerect(cubew*(downinfor.point[0]+movex),cubew*(downinfor.point[1]+movey),cubew,cubew)
        }
    }
    function clearele()
    {
        ctx.linewidth=1;
        ctx.strokestyle='#ddd';
        for(var i=0;i<4;i++)
        {
            var movex=downinfor.cubenow[i]%5;
            var movey=math.floor(downinfor.cubenow[i]/5);
            ctx.clearrect(cubew*(downinfor.prepoint[0]+movex),cubew*(downinfor.prepoint[1]+movey),cubew,cubew);
            ctx.strokerect(cubew*(downinfor.prepoint[0]+movex),cubew*(downinfor.prepoint[1]+movey),cubew,cubew)
        }
    }
    function checkfullline()//检测是否有一行满了
    {
        var isfullline=true,index=0,changescore=false;
        for(var i=0;i<canwidth/cubew;i++)
        {
            if(staticcube[i][0]==1)
            {
                alert('游戏结束!');
                clearinterval(myinter);
                return;
            }
        }
        for(var i=canheight/cubew-1;i>=0;i--)
        {
            isfullline=true;
            for(var j=0;j<(canwidth/cubew);j++)
            {
                if(staticcube[j][i]==0)
                {
                    isfullline=false;
                }
            }
            if(isfullline)//加一分
            {
                score.innerhtml=parseint(score.innertext)+1;
                changescore=true;
                for(var s=i;s>=0;s--) {
                    for (var j = 0; j < (canwidth / cubew); j++) {
                        (s- 1) >= 0 ? staticcube[j][s] = staticcube[j][s - 1] : staticcube[j][s] = 0;
                    }
                }
            }
        }
        if(changescore)
        {
            ctx.clearrect(0,0,canwidth,canheight);
            drawline();
            ctx.fillstyle='555';
            ctx.strokestyle='#fff';
            for(var i=0;i<(canwidth/cubew);i++)
            {
                for(var j=0;j<(canheight/cubew);j++)
                {
                    if(staticcube[i][j]==1)
                    {
                        ctx.fillrect(cubew*i,cubew*j,cubew,cubew);
                        ctx.strokerect(cubew*i,cubew*j,cubew,cubew);
                    }
                }
            }
        }
        initcube();
    }
    window.οnkeydοwn=function (evt)
    {
       switch(evt.keycode)
       {
           case 37: //左
               moveleft();
               break;
           case 38: //上
               moverotate();
               break;
           case 39: //右
               moveright();
               break;
           case 40: //下
               movedown();
               break;
       }
    }
</script>
</body>
</html>

效果：

JavaScript canvas实现俄罗斯方块游戏

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

JavaScript canvas实现俄罗斯方块游戏

思路：

基于C#实现俄罗斯方块游戏

canvas实现俄罗斯方块的方法示例

canvas实现飞机打怪兽射击小游戏的示例代码

JavaScript+HTML5 canvas实现放大镜效果完整示例

JS和canvas实现俄罗斯方块

JavaScript实现打地鼠小游戏

H5 canvas实现贪吃蛇小游戏

pygame实现俄罗斯方块游戏

pyqt5实现俄罗斯方块游戏

基于C#实现俄罗斯方块游戏