首頁  >  文章  >  web前端  >  JavaScript 實作俄羅斯方塊

JavaScript 實作俄羅斯方塊

高洛峰
高洛峰原創
2016-11-26 13:11:581234瀏覽

[html]
 


俄羅斯方塊
 
    身體{寬度:530px;背景:#F7F7F7;邊距:20px 自動}  # :崩潰;浮動:左;} 
    table#gameBoard td{ 寬度:30px;高度:30px;邊框:1px 點線#0cc;} 
    div#gameControl{ widows:160; 浮動:右; -height: 200px;} 
    .font{ font-family:'微軟雅黑';字體大小:18px; text-align:center;} 
    div{ width: 60px; > 
 
     
 
    var T = 俄羅斯方塊= { 
               [0xCC00],  
            [0x8888, 0xF, 00],    [0x8888, 0xF, 00], 0x6C00],  
            [0x4C80, 0xC600],  
            [0x44C0, 0x8E00 , 0xC880, 0xE200],  
            [0x88C0, 0xE800, 0xC440, 0x2E00],  
            [0x4E00, 0x8C80, 0xE400, 0x4C40] 
        ],                                                                    // 代表所有塊的形狀數 
        init : function(){ 
            this. oDomBoard = document.getElementBy     this. oDomBo omScore = document.getElementById("score"); 
            this.aBoardGrids = new Array(18); 
for (var rows = 0 ; rows                 this.aBoardGrids[rows] = new Array10)    this.aBoardGrids[rows] = new Array0 = this.oDomBoard.insertRow(-1); 
                for (var cols = 0 ; cols                     this.aBoardGrids[rows][cols] = 0;    this.aBoardGrids[rows][cols] = 0;    this.aBoardGrids[rows][cols] = 0; DomTr.insertCell(cols); 
                } 
          tion(keyEvent){ 
                keyEvent = keyEvent ||窗口.事件; 
                var ikeyNum = keyEvent.which || keyEvent.keyCode; 
                    個案37://← 
                        T.oBlock.move("左"); 
                        休息中; 
                          T.oBlock.rotate((function (){ 
           = T.aShapes[T.iShapeIdx][ (++T.index)%T.aShapes[T.iShapeIdx ].length ]; 
                         var sShape              
                       + sShape;    
                         T. }    
                         )());  //變形 
                        中斷; 
                      案例 39://→ 
           
                        休息; 
                         T.oBlock.move("down"); 
                        休息; 
                } 
            } 
        }, 
        下一個:函數 (){ 
            
            this.iShapeIdx = parseInt(Math.random() * this.aShapes.length); 
            this.index      = 0; 
            var vShape      = this.aShapes[this.iShapeIdx][this.index]; 
            var sShape      = vShape.toString(2);                               //將16轉換轉換為二進位 
            sShape          = new Array(17 - sShape.length).join(0) + sShape;   //不夠16位,前面用0補全
this.matrix     = sShape.match(/d{4}/g);                        this.oBlock = new TETRIS.Block(this.matrix); 
                     //註冊定時器 
            T.timer = setInterval(function (){ 
            }, 1000); 
             
            
alert("Game Over~"); 
                clearInterval(T.timer); 
             
            } 
             
        }, 
        updateBoard : function (){      //更新面板 
            for(var i = 0 ; i                 this.aBoardGrids[T.oBlock.shape[i].y][T.oBlock.shape[i].x]   }, 
        eraseLines : function (){ 
            var iLines = 0;         var iLines = 0; 
for(var j = 17 ; j >= 0 ; j--){ 
                var num = 0; 
                      if(this.aBoardGrids[j][i] }== 1) 
                        num++; 
           if(num == 10){ 
                     ; m                         for(var n = j ; n > 0 ; n--){ 
                                               T.oDomBoard.rows[n].cells[m].style.background = T .oDomBoard.rows[n-1].cells[m].style.background; 
                           this.aBoardGrids[0][m] = 0; 
                    }                     j++; 
                } 
           ,   }, 
        setScore : 函數 (iLines){ 
            var i分數 = parseInt(this.oDomScore.in     var i分數 = parseInt(this.oDomScore.ininnerHTML). 
            if(iLines == 1){ 
               且為 iScore += 100; 
            } else if(iLines == 2){ 
              
            } else if(iLines == 3){ 
              
            } else if(iLines == 4){ 
              
            } 
            this.oDomScore.innerHTML = iScore; 
        } 
    } 
     
    TETRIS.Block = 函數(矩陣           
            var aShape = []; 
       { 
               var sValue = 矩陣[i]; 
                       if(sValue.charAt(j) == "1"){ 
             }: j+3 , y : i }); 
                   }   🎠        }   🎠     } 
             
               
        this.draw(); 
    } 
     
    TETRIS.Block.prototype.move = 函數(方向){//行動 
         this.draw("clear"); 
            for(var i = 0 ; i                 case "left"://←  
                       此.shape[i ].x--; 
                        休息; 
        this.shape[i].x++; 
                        休息; 
                     大小寫“向下”: 
                        this.shape[i].y++; 
                        休息; 
                } 
            } 
            this.draw(); 
        } else { 
            if (方向==「向下」){ 
                this.draw(); 
                    var iLines = T.eraseLines(); 
                
                
                 .setScore(iLines); 
                     
                } 
                 
                T.next();           //重新生成一個新的塊 
            } 
        } 
         
    } 
    TETRIS.Block.prototype.rotate = function (matrix){//變形 

        this.shape = (function( oBlock){ 
              
            for(var i = 0 ; i                aX.push(oBlock.shape[ i].x); 
                aY.push(oBlock.shape[ i].y); 
   MinX = aX.getMin(); 
           var iMinY = aY.getMin(); 
                   var aShape = [ ]; 
            for(var i = 0 ; i                var sValue = 矩陣[i]; 
                        if(sValue.charAt(j) == "1" ){ 
aShape.push({ x : j+iMinX , y : i+iMinY }); 
                    }   
                } 
            } 
            if( !( oBlock.checkBlock(aShape)) ) 
                return o塊.形狀; 
            oBlock.draw( "clear"); 
            返回aShape; 
             this.draw(); 
    } 
 
    TETRIS.Block.prototype.draw = function (opt){//繪圖 
      = 0 ; i             var oShape = this.shape[i] ; 
   = (opt ==undefined?"#09F":""); 
        } 
    } 
    TETRIS.Block.proto形狀; 
        for(var i = 0 ; i            if(shape[i].x == 0 || T.aBoardGrids[shape[i] . y][形狀[i].x - 1] == 1){ 
                         } 
            } else if(方向== "右"){
            T.aBoardGrids[shape[i].y][shape[i].x + 1] == 1){ 
                        } 
            } else if(方向== "下"){
       shape[i].y == 17 || T.aBoardGrids[shape[i].y + 1][shape[i].x] ==1){ 
                          } 
             } 
     i].x 9 || shape[i].y 17)
             s[shape[ i].y][shape[i].x] == 1){ 
                返回false; 
          回傳true; 
         
    } 
    Array.prototype.getMin = function (this 0]; 
        for(var i = 0 ; i             if(this[i]                 iMin = this[i]; 
        } 
        回 iMin; 
    } 
    window.onload = function(){ 
     
        T.init(); 
         
        var oBtnPlay = document.getElementById("btnPlay"); 
        oBtnPlay.onclick = function(){ 
            if(this.value == 
                this.value = "over"; 
            } else { 
                this.value = "begin"; 
               alert("遊戲結束~"); 
               clearInterval(T.timer); 
            }  
         
       "); 
        oBtnPause.onclick = function (){ 
            if(this.value == "pause"){  N mer); 
                this.value = "恢復"; 
            } else { 
               )     T.oBlock.move("插入"); 
                }, 1000); 
                this.value = "暫停"; 
            } 
        } 
 
    } 
 

頭> 
 
 
   
 
   
 
//>> 
       
     
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn