前言
回顧下js部分的知識
學習理解俄羅斯方塊遊戲的具體實現思想
具體實現
實現看下具體的實現效果,實現效果如下:
本次實現是簡易版的俄羅斯方塊包含基本俄羅斯方塊的基本功能,本次實現的俄羅斯方塊的基本功能有:
形狀顯示
形狀變換
形狀累積
形狀顯示
本次實現是html+css+js,對於形狀的顯示實際上就是定義特定的css class來顯示的,在本次實現中遊戲區域screen中由span節點組成,span節點如下:
// html
class="cell">span>
而遊戲區域呈現上圖中樣式,就是設定cell類的樣式來實現的,具體的css類如下:
// css
.cell {}
.cell::before {}
.cell::after {}
現在類似於棋局就有了,接下來就要處理形狀的形成以及下落了。
構建形狀
形狀的構建預設是乙個二維資料,在這個二位資料中儲存只有0或1,如下所示:
1表示該位置需要顯示,藉此實現形狀的顯示。
形狀移動
通過上面的二維資料會渲染出形狀,資料中每乙個存在1的陣列項會通過特定的方法生成對應的座標(x,y),而形狀的左右以及向下移動都是通過設定x以及y的值來實現的。
將整個遊戲區域看成以及座標系,左上角第一塊區域的座標為(0, 0)依次類推,那麼每乙個cell都會存在乙個座標,形狀的顯示以及形狀移動都是改變座標以及替換對應座標對應的dom節點的class類來實現的。
(在本次實現中使用class類 on來實現形狀的顯示)
形狀變化
形狀的變化實際上就是改變其座標來實現的,核心的處理**如下:
let x = origin[0] - origin[1] + cell.y;
let y = origin[0] + origin[1] - cell.x;
上面的**中origin表示變化中心,cell則是構成形狀的所有座標點。
形狀累積
實際上是在內部維持了乙個陣列,該陣列中對應每乙個cell,值1表示顯示,0表示不顯示需要清除,形狀的累積以及移動都依賴該陣列。
結束本篇文章並不會很詳細將實現的每一步都介紹,只是提出幾個關鍵點做一說明,詳細注釋的**會上傳到我的github上。
俄羅斯方塊高階 AI俄羅斯方塊
前文回顧 致青春 python實現俄羅斯方塊 人工智慧大火的今天,如果還是自己玩俄羅斯方塊未免顯得太low,為什麼不對遊戲公升級,讓機器自己去玩俄羅斯方塊呢?有了這個想法之後利用週六週日兩天的時間去蒐集了大量的資料,在電腦宕機好多次之後終於將ai俄羅斯方塊實現了。所謂讓機器自己去玩俄羅斯方塊,就是讓...
俄羅斯方塊
俄羅斯方塊 tetris,俄文 是一款風靡全球的電視遊戲機 和掌上遊戲機遊戲,它由俄羅斯人阿列克謝 帕基特諾夫 發明,故得此名。俄羅斯方塊的基本規則是移動 旋轉和擺放遊戲自動輸出的各種方塊,使之排列成完整的一行或多行並且消除得分。由於上手簡單 老少皆宜,從而家喻戶曉,風靡世界。俄羅斯方塊的開發者是阿...
俄羅斯方塊
include include include include includeusing namespace std include include define mem a,b memset a,b,sizeof a const int sudu 40 const int dir 4 2 cons...