JS實現俄羅斯方塊

在80後、90後的兒時記憶裏,俄羅斯方塊是必備的消遣小遊戲,它的玩法很是簡單基本你們都懂,但如何用編程語言開發一款兒時同款「俄羅斯方塊」,恐怕知道的同窗就不多啦。html

位置掩碼和旋轉掩碼

俄羅斯方塊遊戲中的格子通常是10列20行(10*20),咱們稱之爲世界地圖。編程

 

30分鐘,學會經典小遊戲編程!

通常都是這種豎屏的界面數組

10*20的空間是用來盛放方塊的,當方塊落定以後位置便不能再改變。這個時候它會被保存到地圖的狀態中,咱們給地圖狀態設計一個二維的數組。編程語言

方塊有7種樣式組成,最大的長寬是4個方格,爲了在邏輯上比較好的處理全部類型的方塊,咱們構建了一個4x4的邏輯區域,用來統一描述全部類型的方塊,包括顯示、旋轉等。這一區域就成爲了它自身的空間總體,而方塊被放到世界地圖中時,也是以這樣的總體加入進去的。post

咱們給方塊定義了四種屬性,分別是方向、顏色、種類以及在世界地圖中的座標。設計

方塊能夠作旋轉,每通過四次旋轉便會回到原始的狀態,分別用0123來表示方塊的四個方向,新產生的方塊設定的是默認方向。3d

下圖中的數值表明它在本身的空間內,哪些格子是有方塊的,哪些是沒有的。這是一個二進制的16位的顯示掩碼,0x4444表明的就是第一行第三列,第二行的第三列,第三行的第三列和第四行的第三列。htm

 

30分鐘,學會經典小遊戲編程!

 

若是你沒有作過數碼管的顯示,我用數字的角度來講明下:每一個圖是四行,分別用四個數字表示,數字使用十六進制;每行的四個方塊從右到左表示一、二、四、8;那麼你就明白了0x4444表示的圖像了。blog

旋轉掩碼是用一個16bit的數據表示的,每一個旋轉掩碼後面跟着的是一個16bit的顯示掩碼。遊戲

咱們以S型方塊做爲參考來介紹,方向爲零的時候它佔據第一行的第二列第三列,第二行的第四列第三列,當它作一次旋轉,方向由0到1這個過程當中,它的旋轉是會掃過這些位置,變成方向1的狀態。在旋轉過程當中,若是它掃過的位置有其餘方塊佔住,那麼它便不能旋轉。

 

30分鐘,學會經典小遊戲編程!

 

 

還有,若是方塊到達邊緣的時候,旋轉時超出了世界地圖的範圍,也是失敗的,會繼續維持如今這種狀態。

旋轉掩碼和顯示掩碼組合在一塊兒,旋轉掩碼的意義是,當前方向值下的方塊,旋轉到下一個方向值的時候,須要參考的障礙區域有哪些,以上就是位置掩碼以及旋轉掩碼的介紹。

 

遊戲中的主要邏輯

接下來咱們來看下游戲中的主要邏輯判斷。

移動邏輯

遊戲中產生的方塊,在產生以後,作週期性的下落運動。

同一時刻地圖中只會有一個方塊處於活動狀態,能夠在地圖中作移動、旋轉等操做,方塊每次自由下落都會作一個下落判斷,判斷是否已經觸底。

觸底指的是,方塊不能再往下移動,致使方塊不能再往下移動的緣由有2種,第一種是方塊的下邊緣已經在世界地圖的邊緣;第二種是方塊再往下更新的位置,被其餘已經落定的方塊佔據了。

30分鐘,學會經典小遊戲編程!

如圖上代碼所示,方塊移動的位置被其餘方塊所佔據

方塊觸底以後,狀態就由活動狀態切換到了落定狀態。此時方塊的顯示掩碼中標註的全部可顯示的塊,都將會寫入地圖的狀態中,以用來代表,這些塊已經被佔據了,寫入地圖狀態中的值有兩項屬性:哪些塊被佔據了,已經被佔據的塊的顏色值。

假定方塊當前的座標是(x1,y2),從方塊的當前移動方向中,咱們能夠獲得方塊等待判斷是否能夠移動過去的更新座標(x2, y2)。

例如,方塊向左移動,則:x2 = x1 - 1, y2 = y1;方塊向右移動,則:x2 = x1 + 1, y2 =y1;方塊向下移動,則:x2 = x1, y2 = y1 + 1;

 

30分鐘,學會經典小遊戲編程!

 

 

 

那怎麼判斷方塊是否能夠移動成功呢?

根據方塊的類型以及當前的方向值,從掩碼錶中能夠拿到方塊當前的顯示掩碼,方塊是否能放置到新位置,只須要判斷顯示掩碼中標明須要顯示出來的位置,是否已經有其餘方塊佔據,掩碼中全部須要顯示出來的位置,只要有一個位置被其餘方塊佔據,本次移動判斷失敗,方塊維持原有座標

 

旋轉邏輯

可以旋轉涉及到一個方塊是否改變它的方向,x、y是方塊在世界地圖中的座標,block是它的狀態值。

咱們取它的種類、方向這兩個屬性,在4×4的空間裏,計算出每一格對應到世界中的座標。

「isBoxRotateMaskEmpty」這個表明什麼意思呢?這是旋轉掩碼在旋轉過程當中要參照的點,方塊旋轉掃過的點,以及它落定以後的這幾個點,這些點就是它的旋轉掩碼。

 

30分鐘,學會經典小遊戲編程!

 

 

轉寫掩碼值用一個七行四列的數組來保存,分別對應七種方塊樣式以及四個方向對應的值。它的高16位是旋轉掩碼,低16位是顯示掩碼。

 

30分鐘,學會經典小遊戲編程!

方塊的掩碼錶

方塊是否可以旋轉,先要看它的旋轉掩碼裏面是爲空,掩碼爲空則能夠旋轉,旋轉完以後,須要判斷方塊新的座標是否還在世界地圖裏,若是它超出邊緣超出底線,那確定是旋轉不了的。

還有就是判斷當前格子在世界地圖中是否被其餘的方塊給佔了,若是被佔了的話,也是旋轉不了的,這就是基本的旋轉斷定邏輯。

得分邏輯

方塊落定以後,根據方塊落定是的邏輯座標,從上往下依次遍歷地圖中的4行狀態值,當某一行的全部地圖塊的狀態都是被佔據狀態,該行被斷定爲得分行,得分行會被消掉,當消完全部的得分行以後,得分行上方的全部未得分行,依次向下平移。

咱們控制遊戲難度的時候也是以這個爲參考,玩家得到的分數越多,遊戲難度越大。

咱們能夠經過修改方塊出現的時間間隔,以及下落速度,來控制整個遊戲的難度。

當玩家拿的分數越多,每消除一行的等級就會加一,分數是遞增100,方塊降低的速度是經過5的取模方式從1秒裏面去扣,最小值是0.6秒。

 

30分鐘,學會經典小遊戲編程!

 

 

若是某一行格子只要有一個空着的話,消除便失敗。某一行的方塊所有被消掉以後,上面的方塊會向下平移,對應的行數須要刷新。

這即是關於得分的判斷邏輯 。

遊戲流程圖

最後再來看下整個遊戲玩的流程圖。

30分鐘,學會經典小遊戲編程!

 

遊戲的核心邏輯是時間間隔,玩家點開始以後,每隔一段時間會調度一次,若是遊戲沒有結束,判斷當前是屬於暫停狀態,沒有說暫停的話,就作一個moveBlock。

固然,moveBlock有多是玩家點了操縱的方向鍵,若是沒點的話直接就返回了。緊接着處理方塊的下落過程,判斷它落定的時候是否結束了。

沒有結束暫停的話,就處理移動,移動處理完以後,再去處理下落,若是恰好時間間隔已經到了,那它就會往下落一次,往下落的話有可能成功,也有可能失敗。

判斷結束後會出現遊戲結束界面,能夠選擇是否重來一次,若是再來一次便會作一次重置。

這裏須要作一個關於世界地圖的補充說明,這裏補充了一個地圖的座標系,遊戲地圖的座標系X軸沿着水平方向向右,Y軸是沿着垂直方向向下增加,座標系的原點是在左上角。

方塊在邏輯空間中的座標,是以左上角爲參考點的,方塊的座標隨着而改變。

 

 

出處:http://www.javashuo.com/article/p-wxiyfzoq-z.html

相關文章
相關標籤/搜索