Canvas 遊戲 俄羅斯方塊

2022-04-29 19:39:07 字數 2611 閱讀 5018

我第三個動畫遊戲終於可以玩了,^_^。

demo:

由於 wikipedia 的素材很像磚塊,我**裡就把 tetromino 稱為了磚塊(brick),整個拼板稱為牆面(wall)——分別對應了遊戲中玩家控制目標和地圖。

變形首先觀察 " j " 形狀轉置(t)和旋轉(r)的圖形,零表示空心部位,非零實心部位:

j =>

1,0,0

1,1,1

t =>

1,10,1

0,1r =>

1,11,0

1,0

轉置即每一行變成了目標的每一列。再比較轉置和旋轉的圖形,可以發現,它們的區別在於每一行的元素順序是相反的,這對應的陣列方法很明晰了,即 pop 和 unshift ,實現:

// 用二維陣列表示'形狀'

var shape_array =

[ [1,0,0],

[1,1,1],

]// 轉置,行列交換

var transpose = function(ary))

}) return ret;

}// 向右旋轉(順時針),每行生成列元素時順序相反

var rotate = function(ary))

}) return ret;

}

這時,再看看向左旋轉的圖形,與轉置圖形比較可以顯然看出來,把轉置後行的順序逆轉就可以了,即可用現成的陣列的 reverse 方法:

/* 逆時針旋轉圖示

0,10,1

1,1*/

// 逆時針旋轉演算法

var rotate_anticlockwise = function(ary)

我開始的遊戲是用的逆時針旋轉,我以為這更自然。試玩了一下網上其他的遊戲實現,結果都是順時針的 =_= 。

磚塊定義

我定義了三個主要屬性:

/*

* 以乙個形狀(二維陣列)的左下角為參照位置,把它對映成乙個位置列表(一維陣列)。零為空位,全部捨棄

* @pos

* @shape

*/var mapshape = function(pos,shape) );

});return ret;

}

若某磚塊的參照座標為vector[3,4],shape 為上面演示的 j,它的 parts 則為:

// parts = mapshape( v([3,4]), shape_ary ) =>

[ vector[3,4], vector[4,4], vector[5,4], vector[3,3] ]

有了恰當的屬性定義之後,移動和拼到牆面就是輕而易舉的了。

地圖地圖關係儲存及碰撞部分,結構也和上面的形狀一樣,使用二維陣列。

首先要注意的是螢幕上的座標系統和陣列不是直接對應的:

screen : 

┏━━━x┃ y

array : [x][y]

┏━━━y

┃ x

螢幕上的點轉置才能對應上陣列的元素。

我遊戲的前半程是這樣儲存的:

map[p.x][p.y] = type;
點 p 與地圖陣列元素一 一對應,這樣用起來很爽,但是有兩個缺點:

因此,在後半程,改正了過來:

map[p.y][p.x] = type;
消行

我用的一種相當簡易的做法,毫無特效——直接刪除一行,再用充滿零元素的模板行塞到地圖頭部:

function eraserow(idx)
碰撞

es5 的 some 方法最適合處理這個,直接接受上面的 parts 引數就好:

function collidewith(vectors) )

}

遊戲**後期改用 amd 方式組織,載入器挑選了國人寫的 seajs 。

amd 是 commonjs 倡議的模組定義方式,乾掉了老套的用全域性變數做命名空間的形式。

與老式的命名空間相比,amd 的方式更加容易組織**,結構也更乾淨、更一致。

這個遊戲花了我幾個小時來做轉換,總結:

seajs 實際使用上,可能會碰到的問題:

// 網格單位長度, 預設 40

// tetrisgame.unit = 20;

// 顯示網格線, 預設 true

// tetrisgame.showgrid = false;

// 主題型別 ["classic", "window", "bubble"], 預設 classic

// tetrisgame.theme = 'window';

// canvas,列數,行數,縮放

tetrisgame.init('#tetris-game',10,20,1);

// tetrisgame.init('#tetris-game',10,20,.5);

俄羅斯方塊遊戲

大二上學期前兩周的課程設計寫 更多的是借鑑 了乙個500多行的俄羅斯方塊遊戲,畢竟也是花了兩天時間把被人的看懂,然後花了兩天多的時間敲出來,又花了兩天時間寫了4000多字的專案報告,所有有必要在部落格中寫下來以留作紀念。struct block blocks 7 i 口 l 反l z 反z t 用十...

俄羅斯方塊高階 AI俄羅斯方塊

前文回顧 致青春 python實現俄羅斯方塊 人工智慧大火的今天,如果還是自己玩俄羅斯方塊未免顯得太low,為什麼不對遊戲公升級,讓機器自己去玩俄羅斯方塊呢?有了這個想法之後利用週六週日兩天的時間去蒐集了大量的資料,在電腦宕機好多次之後終於將ai俄羅斯方塊實現了。所謂讓機器自己去玩俄羅斯方塊,就是讓...

C 俄羅斯方塊遊戲

俄羅斯方塊是一款非常經典的老遊戲,相比現在的網路遊戲和大型遊戲而言,俄羅斯方塊非常小。不要看似小,要實現俄羅斯方塊的全部功能也不容易。先說說涉及的知識點 繼承 不同的方塊繼承於方塊類 多型 每種方塊都可以旋轉 初始化,但是每種方塊的旋轉都不一樣,採用抽象方法定義 簡單工廠設計模式 由工廠隨機建立方塊...