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