欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript canvas實(shí)現(xiàn)俄羅斯方塊游戲

 更新時(shí)間：2021年07月26日 15:41:19   作者：ccessl  
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)俄羅斯方塊游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

俄羅斯方塊是個(gè)很經(jīng)典的小游戲，也嘗試寫了一下。不過我想用盡量簡(jiǎn)潔邏輯清晰的代碼實(shí)現(xiàn)。不用過多的代碼記錄下落方塊的模型，或者記錄每一個(gè)下落方塊的x,y。想了下面的思路，然后發(fā)現(xiàn)這樣很寫很簡(jiǎn)明。

俄羅斯方塊的7種基本模型：

要記錄這些模型有很多種辦法，可以用記錄其相對(duì)位置，記錄每一個(gè)方塊的x,y坐標(biāo)等。自己想了一種思路來記錄這7種模型，很簡(jiǎn)潔，在寫左移，右移，旋轉(zhuǎn)功能的時(shí)候也方便使用。下面這個(gè)數(shù)組記錄了這些模型。

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]];

思路：

 一個(gè)5*5的表格，從0開始標(biāo)號(hào)。標(biāo)號(hào)為12的點(diǎn)即是中心點(diǎn)。模型每個(gè)用其標(biāo)號(hào)記錄下來，比如第一種模型就為[6,7,12,13]。

以表格的左上角為參考點(diǎn)，有這樣的規(guī)律，假設(shè)表格中的數(shù)為value，有value除以5的余數(shù)就是該點(diǎn)相對(duì)于參考點(diǎn)x的偏移，value除以5的整數(shù)部分就是該點(diǎn)相對(duì)于參考點(diǎn)的y偏移。旋轉(zhuǎn)的時(shí)候也很簡(jiǎn)單，以中心12旋轉(zhuǎn)，也可以找到一些規(guī)律。

var movex=cubeNow[i]%5;
var movey=Math.floor(cubeNow[i]/5);

用一個(gè)循環(huán)繪制一個(gè)模型  

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)
        }
}

旋轉(zhuǎn)模型：

當(dāng)前位子和下一個(gè)旋轉(zhuǎn)位置之間的關(guān)系，通過這個(gè)數(shù)組可以很方便的實(shí)現(xiàn)模型的旋轉(zhuǎn)。比如說標(biāo)號(hào)為0的位子，按順時(shí)針旋轉(zhuǎn)，下一個(gè)位子是4。標(biāo)號(hào)為6的位子，下一個(gè)位子是8.下面這個(gè)數(shù)組可以由前一個(gè)位子找到下一個(gè)位子。

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);  //第一個(gè)參數(shù)要加引號(hào)
    }
    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);//隨機(jī)生成
            downInfor.cubeNow=cubeArr[index].concat();
            downInfor.index=index;
            downInfor.prepoint=[5,-1];
            downInfor.point=[5,-1];
            drawEle(colorArr[downInfor.index]);
    }
    function movedown()
    {
        //判斷下一個(gè)位置是否合理
        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//不能移動(dòng)的時(shí)候
        {
            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()//處理旋轉(zhuǎn)
    {
        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()//檢測(cè)是否有一行滿了
    {
        var isFullLine=true,index=0,changeScore=false;
        for(var i=0;i<canWidth/cubeW;i++)
        {
            if(staticCube[i][0]==1)
            {
                alert('游戲結(jié)束!');
                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>

效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 用javascript實(shí)現(xiàn)畫板的代碼

    用javascript實(shí)現(xiàn)畫板的代碼

    用javascript實(shí)現(xiàn)畫板的代碼...
    2007-09-09
  • JavaScript中concat復(fù)制數(shù)組方法淺析

    JavaScript中concat復(fù)制數(shù)組方法淺析

    在本篇文章里小編給大家總結(jié)了關(guān)于JavaScript中concat復(fù)制數(shù)組方法知識(shí)點(diǎn)，有需要的朋友們可以學(xué)習(xí)下。
    2019-01-01
  • JavaScript類的繼承多種實(shí)現(xiàn)方法

    JavaScript類的繼承多種實(shí)現(xiàn)方法

    這篇文章主要介紹了JavaScript類的繼承多種實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • Three.js中的紋理圖像應(yīng)用和屬性調(diào)整方法

    Three.js中的紋理圖像應(yīng)用和屬性調(diào)整方法

    在three.js中紋理貼圖是用來給物體表面添加圖案、顏色或者其他視覺效果的一種技術(shù),這篇文章主要給大家介紹了關(guān)于Three.js中紋理圖像應(yīng)用和屬性調(diào)整的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • JS如何獲取URL中的Query參數(shù)

    JS如何獲取URL中的Query參數(shù)

    這篇文章主要介紹了JS如何獲取URL中的Query參數(shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • 一個(gè)非常全面的javascript URL解析函數(shù)和分段URL解析方法

    一個(gè)非常全面的javascript URL解析函數(shù)和分段URL解析方法

    本文詳細(xì)介紹了一個(gè)非常全面的javascript URL解析函數(shù)，可以解析一個(gè)URL中的協(xié)議、主機(jī)、查詢字符串甚至錨鏈接，非常實(shí)用，一并總結(jié)了js自帶的分段URL解析方法,需要的朋友可以參考下
    2014-04-04
  • Echarts柱狀圖實(shí)現(xiàn)同時(shí)顯示百分比+原始值+匯總值效果實(shí)例

    Echarts柱狀圖實(shí)現(xiàn)同時(shí)顯示百分比+原始值+匯總值效果實(shí)例

    echarts是一款功能強(qiáng)大、靈活易用的數(shù)據(jù)可視化庫,它提供了豐富的圖表類型和樣式,包括柱狀圖,這篇文章主要給大家介紹了關(guān)于Echarts柱狀圖實(shí)現(xiàn)同時(shí)顯示百分比+原始值+匯總值效果的相關(guān)資料,需要的朋友可以參考下
    2024-08-08
  • uni-app使用微信小程序云函數(shù)的步驟示例

    uni-app使用微信小程序云函數(shù)的步驟示例

    這篇文章主要介紹了uni-app使用微信小程序云函數(shù)的步驟示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • ES6基礎(chǔ)之字符串和函數(shù)的拓展詳解

    ES6基礎(chǔ)之字符串和函數(shù)的拓展詳解

    這篇文章主要介紹了ES6基礎(chǔ)之字符串和函數(shù)的拓展,結(jié)合實(shí)例形式分析了ES6字符串與函數(shù)擴(kuò)展的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
    2019-08-08
  • BootStrap 附加導(dǎo)航組件

    BootStrap 附加導(dǎo)航組件

    Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下來通過本文給大家介紹BootStrap 附加導(dǎo)航組件的知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
    2016-07-07

最新評(píng)論