方塊會從區(qū)域上方開始緩慢繼續(xù)落下。玩家可以以90度為單位旋轉方塊，以格子為單位左右移動方塊，讓方塊加速落下。方塊移到區(qū)域最下方或是著地到其他方塊上無法移動時，就會固定在該處，而新的方塊出現(xiàn)在區(qū)域上方開始落下。當區(qū)域中某一列橫向格子全部由方塊填滿，則該列會消失并成為玩家的得分。同時刪除的列數(shù)越多，得分指數(shù)上升。

分析與解法

每塊方塊落下的過程中，我們可以做：

1）旋轉到合適的方向

2）水平移動到某一列

3）垂直下落到底部

首先，需要用一個二維數(shù)組，area[18][10]表示18*10的游戲區(qū)域。其中，數(shù)組中值為0表示空，1表示有方塊。

方塊一共7種，每種有4種方向。定義activeBlock[4]，在編譯之前這個數(shù)組的值預定算好，在程序中直接使用。

難點

1）邊界檢查。

//檢查左邊界,嘗試著朝左邊移動一個,看是否合法。
function checkLeftBorder(){ 
  for(var i=0; i<activeBlock.length; i++){ 
    if(activeBlock[i].y==0){ 
      return false; 
    } 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y-1)){ 
      return false; 
    } 
  } 
  return true; 
} //同理，需要檢測右邊界和底邊界

2）旋轉, 需要數(shù)理邏輯, 一個點相對另外一個點旋轉90度的問題。
3）定時和監(jiān)聽鍵盤事件機制讓游戲自動運行下去。

//開始 
function begin(e){ 
  e.disabled = true; 
  status = 1; 
  tbl = document.getElementById("area"); 
  if(!generateBlock()){ 
    alert("Game over!"); 
    status = 2; 
    return; 
  } 
  paint(); 
  timer = setInterval(moveDown,1000); 
} 
document.onkeydown=keyControl;

程序過程

1）用戶點開始->構造一個活動圖形, 設置定時器。

//當前活動的方塊, 它可以左右下移動, 變型。當它觸底后, 將會更新area; 
var activeBlock; 
//生產(chǎn)方塊形狀, 有7種基本形狀。 
function generateBlock(){ 
  activeBlock = null; 
  activeBlock = new Array(4); 
  //隨機產(chǎn)生0-6數(shù)組，代表7種形態(tài)。
  var t = (Math.floor(Math.random()*20)+1)%7; 
  switch(t){ 
    case 0:{ 
      activeBlock[0] = {x:0, y:4}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:0, y:5}; 
      activeBlock[3] = {x:1, y:5}; 

      break; 
    } 
    //省略部分代碼..............................
    case 6:{ 
      activeBlock[0] = {x:0, y:5}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:1, y:5}; 
      activeBlock[3] = {x:1, y:6}; 
      break; 
    } 
  } 
  //檢查剛生產(chǎn)的四個小方格是否可以放在初始化的位置. 
  for(var i=0; i<4; i++){ 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y)){ 
        return false; 
      } 
    } 
  return true; 
}

2）每次向下移動后, 都檢查是否觸底, 如果觸底了, 則嘗試消行。

//消行 
function deleteLine(){ 
  var lines = 0; 
  for(var i=0; i<18; i++){ 
    var j=0; 
    for(; j<10; j++){ 
      if(area[i][j]==0){ 
        break; 
    } 
  } 
  if(j==10){ 
    lines++; 
    if(i!=0){ 
      for(var k=i-1; k>=0; k--){ 
        area[k+1] = area[k]; 
      } 
    } 
    area[0] = generateBlankLine(); 
    } 
  } 
  return lines; 
}

3）完了之后再構造一個活動圖形, 再設置定時器。

效果圖

有待優(yōu)化

1）設置不同形狀方塊的顏色。

　　思路：在創(chuàng)建方塊函數(shù)內(nèi)，設定activeBlockColor顏色，七種不同形態(tài)方塊顏色各異（除了修改generateBlock方法之外，還需要修改paintarea方法。因為一開始考慮不周全，消除一行后，重繪方塊的同時將顏色統(tǒng)一，因此可以考慮移除表格n行，然后在頂部增添n行，以保證沒消除方塊的完整性）。

2）當當前方塊下落時，可以提前查看下一個方塊。

　　思路：將generateBlock方法拆分成兩部分，一部分用于隨機嘗試下一個方塊，一部分用于緩存當前所要描繪的方塊。當當前方塊碰到底部被固定后，下一方塊開始描繪，同時又再次隨機產(chǎn)生新方塊。如此反復。

以上所述就是本文給大家分享的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: