Js實踐之俄羅斯方塊

2021-08-15 12:57:32 字數 1358 閱讀 8656

前言

回顧下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...