javascript實現俄羅斯方塊遊戲的想法與方法

觀摩一下《程式設計之美》：「程式雖然很難寫，卻很美妙。要想把程式寫好，需要寫好一定的基礎知識，包括程式語言、資料結構與演算法。程式寫得好，需要纈密的邏輯思考能力和良好的梳理基礎，而且熟悉程式設計環境和程式設計工具。話說，沒有嘗試自己寫過一個遊戲，不算是熱愛程式設計。

俄羅斯方塊曾經造成的轟動與造成的經濟價值可以說是遊戲史上的一件大事，它看似簡單但卻變化無窮，令人上癮。相信大多數同學，曾經為它痴迷得茶不思飯不想。

遊戲規則

1、一個用於擺放小型正方形的平面虛擬場地，其標準大小：行寬為10，列高為20，以每個小正方形為單位。

2、一組由4個小型正方形組成的規則圖形，英文稱為Tetromino，中文通稱為方塊共有7種，分別以S、Z、L、J、I、O、T這7個字母的形狀來命名。

I：一次最多消除四層

J（左右）：最多消除三層，或消除二層

L：最多消除三層，或消除二樓

O：消除一至二層

S（左右）：最多二層，容易造成孔洞

Z （左右）：最多二層，容易造成孔洞

T：最多二層

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

分析與解法

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

1）旋轉到適當的方向

2）水平移動到某一列

3）垂直下落到底部

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

方塊一共7種，每種有4種方向。定義activeBlock[4]，在編譯之前這個陣列的值預定算好，在程式中直接使用。

困難

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）旋轉, 需要數理邏輯, 一個點相對另外一個點旋轉90度的問題。

3）定時與監聽鍵盤事件機制讓遊戲自動運作下去。

//开始 
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; 
//生产方块形状, 有7种基本形状。 
function generateBlock(){ 
  activeBlock = null; 
  activeBlock = new Array(4); 
  //随机产生0-6数组，代表7种形态。
  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; 
    } 
  } 
  //检查刚生产的四个小方格是否可以放在初始化的位置. 
  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=0; k--){ 
        area[k+1] = area[k]; 
      } 
    } 
    area[0] = generateBlankLine(); 
    } 
  } 
  return lines; 
}

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

有待最佳化

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

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

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

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

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

【相關教學推薦】

1.

JavaScript影片教學

2. JavaScript線上手冊
3. bootstrap教學