好久沒使用canvas了，於是通過寫小遊戲「俄羅斯方塊」再次熟悉下canvas，如果有一定的canvas基礎，要實現還是不難的。
原理詳解
看遊戲最終介面，可知需要實現以下關鍵功能：
介面的實現
整個面板就是以左上角（0,0）為原點的座標系，右上角（12,0）左下角（0,20）右下角（12,20），每個點的座標位置都可以確定。是否已經填充方塊，我們可以將每個方格看成乙個陣列元素，0表示沒有，1表示已經填充。12 * 20 的面板使用兩層陣列，即用20個長度為12的陣列實現。
var maps = [[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,1,0], ...];
畫出面板的**，用最基礎的canvas的api就能實現
//格仔
for(var i=0;i<12;i++)}}
//邊框
ctx.linewidth=4;
ctx.strokestyle='hsla(0,100%,0%,.3)';
ctx.moveto(0,0);
ctx.lineto(0,20*40);
ctx.lineto(12*40,20*40);
ctx.lineto(12*40,0);
ctx.stroke();
ctx.restore();
方塊的實現
遊戲中用到以下 7 種圖形
結合上面介紹的座標系，陣列 [x1, y1, x2, y2, x3, y3, x4, y4] 就是上面圖形中4個點座標的資料表現形式，7 種圖形的座標分別如下：
var arr = [[4,0,4,1,5,1,6,1],[4,1,5,1,6,1,6,0],[4,0,5,0,5,1,6,1],[4,1,5,0,5,1,6,0],
[5,0,4,1,5,1,6,1],[4,0,5,0,6,0,7,0],[5,0,6,0,5,1,6,1]];
方塊的移動，遍歷整個陣列，加上位移向量就行，非常簡單
class shape
move(x,y)
return this;
}方塊的旋轉，俄羅斯方塊裡面方塊除了左右和上下運動，還會旋轉，不是嗎？稍微思考下就知道，這不過就是矩陣變換而已，也就是每次圖形繞中心點旋轉90度。我這裡用陣列第三個點作為圖形變換的中心點，當然這樣處理不夠完善。
class shape
if(that.maps[y+1][x]==1) // 遊戲結束
break;}}
方塊運動週期結束時檢測每一層是否滿格，以及滿格後的處理。某項陣列全部元素都為1則表示已經滿格，那麼刪除該項陣列，同時列表頭再壓入一項每個元素都為0的陣列即可。
checkpoint()
}if(!over) shape.move(-1,0);
break;
case 39: //right
var over = false,
shape = that.shape,
maps = that.maps,
m = shape.m;
for(var i=0,l=m.length;i=11 || maps[m[i+1]][m[i]+1] == 1)
}if(!over) shape.move(1,0);
break;
case 32: //space
that.shape.transform();
break;
}},false);}總結
這裡面實現了俄羅斯方塊的最基本功能，還有關卡等功能點並沒有實現，同時該demo仍然有不完善的地方需要修正。
本文標題: canvas實現俄羅斯方塊的方法示例
本文位址:
Canvas 遊戲 俄羅斯方塊
我第三個動畫遊戲終於可以玩了，demo 由於 wikipedia 的素材很像磚塊，我 裡就把 tetromino 稱為了磚塊 brick 整個拼板稱為牆面 wall 分別對應了遊戲中玩家控制目標和地圖。變形首先觀察 j 形狀轉置 t 和旋轉 r 的圖形，零表示空心部位，非零實心部位 j 1,0,0 ...
俄羅斯方塊高階 AI俄羅斯方塊
前文回顧 致青春 python實現俄羅斯方塊 人工智慧大火的今天，如果還是自己玩俄羅斯方塊未免顯得太low，為什麼不對遊戲公升級，讓機器自己去玩俄羅斯方塊呢？有了這個想法之後利用週六週日兩天的時間去蒐集了大量的資料，在電腦宕機好多次之後終於將ai俄羅斯方塊實現了。所謂讓機器自己去玩俄羅斯方塊，就是讓...
俄羅斯方塊
俄羅斯方塊 tetris,俄文 是一款風靡全球的電視遊戲機 和掌上遊戲機遊戲，它由俄羅斯人阿列克謝 帕基特諾夫 發明，故得此名。俄羅斯方塊的基本規則是移動 旋轉和擺放遊戲自動輸出的各種方塊，使之排列成完整的一行或多行並且消除得分。由於上手簡單 老少皆宜，從而家喻戶曉，風靡世界。俄羅斯方塊的開發者是阿...