31步學會寫《俄羅斯方塊》

    來源: 嗶哩嗶哩2023-08-25 19:34:32
      

    前言

    本期視頻點贊目標達成,已經把分步拆解的文字版本和視頻版本發到知識星球(英雄算法聯盟)里,但是有同學反饋免費體驗券無法查看(其實是需要下載app),如果不想下載app,可以跟著這篇文章進行學習,如果執意要在星球里學習,可以嘗試下掃下文末的免費體驗券,注意無需付費!!!由于B站文章的代碼格式不支持,所以代碼的部分采用圖片的方式,這樣也可以避免大家復制粘貼,逼著大家自己寫,何嘗不是一種倒逼。

    B站不能上傳文件,所以源碼可以在公眾號:夜深人靜寫算法,回復?tetris 直接獲取。


    (相關資料圖)

    第01步、安裝編碼環境

    1、下載Python

    百度輸入 "Python3下載",右鍵打開官網,找到一個相對較新的版本,點擊下載,看到 recommended 字樣,不由自主的選擇了這個,右鍵打開,等它下載完。

    2、安裝Python

    雙擊安裝,不要點取消,安裝完成。

    3、下載安裝VSCode

    百度輸入 "vscode",點擊官網,點擊下載,點擊 windows,就下載好了,直接雙擊,咦怎么沒有找到?嘶……哦哦哦哦哦,點擊保留,點擊打開文件,點擊我愿意,下一步,下一步,創建桌面快捷方式,下一步,安裝,完成。

    4、第一個Python程序

    新建一個文件,選擇Python類型,隨便寫一段代碼,按 F5 運行,調出來的框選擇確認,安裝Python解釋器,選它,第一個Python程序就出來了。

    分步視頻:/117C1FekV

    第02步、安裝游戲環境

    找到Python的安裝目錄,右鍵打開命令行,把 pip3 拖進來,緊接著輸入 "install pygame",看到絢麗的進度條,我的內心泛起了漣漪,至此我們的游戲環境就搭好了。

    分步視頻:/11GDpn3TK

    第03步、運行例子

    按住 shift,右鍵窗口空白處,打開 Power Shell 控制臺,把 Python 的可執行文件拖進來,輸入:,按下回車:

    分步視頻:/11oPrEMgU

    第04步、新建文件夾

    接下來我們自己來做一個游戲。右鍵新建文件夾,輸入pic用來放圖片。再新建一個文件夾,輸入code用來放代碼,把老婆給我們準備好的圖片,Ctrl+C, Ctrl+V。

    沒有老婆的話可以找女朋友要。在 code 目錄中新建一個文件,選擇Python,Ctrl + S,命名 代表游戲主文件。

    分步視頻:/11VH2swXp

    第05步、初始化pygame

    分步視頻:/11AnfcLzZ

    第06步、主循環

    分步視頻:/110jZesoz

    第07步、創建畫面

    分步視頻:/11rsA6ReC

    第08步、顯示圖片

    分步視頻:/11CylfiAR

    第09步、讓圖片動起來

    分步視頻:/11IFaReOB

    第10步、去掉殘影

    分步視頻:/11sRZuvBa

    第11步、控制移動

    分步視頻:/1104ZVHvx

    第12步、增加上下方向

    分步視頻:/111e7uCEM

    第13步、實現方塊類

    現在只有一個方塊,想要有多個方塊,最好的方法就是把方塊設計成一個類,利用面向對象的思想,接下來我們實現一個方塊類 Block,處理好圖片和它的位置,以及玩家控制的代碼,再封裝一個渲染的函數,像這樣:

    生成一個類的實例,刪掉剛才的測試代碼,調用更新和渲染的函數。

    分步視頻:/11HVnWQJn

    第14步、多實例

    1、定義方塊類型

    既然已經封裝成了類,自然就可以多個實例運行,定義 blockType,紅橙黃綠青藍紫,像這樣:

    2、定義方塊資源路徑

    每種類型的資源位置寫下來,一氣呵成,沒有技巧,全是感情,唯手熟爾,你也可以:

    3、方塊初始化參數

    對 Block 加入初始化參數,方塊類型和位置,把原有的常量,替換成變量:

    4、實例化方塊

    生成兩個方塊的實例(也就是對象的意思),像這樣:

    5、調用更新和渲染函數

    調用方塊的 update 和 draw 函數。

    分步視頻:/11DrHRwC2

    第15步、拆分文件

    分步視頻:/114prI5hu

    第16步、邏輯和表現分離

    重新實現block的初始化函數,可以根據類型、行坐標、列坐標、寬高,以及相對位置來實現多態,根據傳參來確定采用哪張圖片、實際的尺寸、以及確定位置。把之前的初始化函數刪掉。

    分步視頻:/11hSGSoaw

    第17步、組合方塊

    1、增加方塊配置

    在 const 文件中,增加四種形狀的配置,放在 BLOCK_SHAPE 中,用局部坐標來表示,有方形、長條形、z字型、飛機型,像這樣:

    2、隨機生成方塊組

    然后新建一個文件 ,實現通過配置實例化方塊組的接口,一個blockGroup代表一個方塊組:

    3、實例化方塊組

    將方塊組存儲在 blocks 列表中,實現渲染函數,遍歷blocks進行渲染。

    分步視頻:/11oUTfLOS

    第18步、模擬下落

    分步視頻:/11qZF4tvO

    第19步、框架代碼

    分步視頻:/11HjoTcnd

    第20步、確定游戲主邏輯

    抽象來說,俄羅斯方塊這個游戲就是:一個靜態的 BlockGroup 和 一個下落的 BlockGroup完成碰撞的過程,下落的 BlockGroup 在和靜態的 BlockGroup 產生碰撞以后,就會被合并到靜態的 BlockGroup 去,而靜態的 BlockGroup 從下往上判斷。是否有一整行填充的方塊,播放一個消去的動畫,直到找不到整行的為止,則繼續生成下落的方塊的過程。

    當靜態的 blockGroup 到達一定高度,則游戲失敗。

    分步視頻:/1106GAXIK

    第21步、BlockGroup 的多態

    1、增加 BlockGroup 類型

    在 文件中添加兩種類型,一種是靜態的,一種是下落的:

    2、定義方塊寬高

    方塊的寬高定義成常量,都是32像這樣。

    3、初始化 BlockGroup

    給每個方塊組加上類型,像這樣:

    4、下落調整

    如果類型是下落類型,才執行時間判定。

    5、游戲邏輯調整

    在 game 文件中,將 固定類型方塊組 fixedBlockGroup 以及 下落類型方塊組 dropBlockGroup 都實例化出來,update 函數就是執行兩者的 update,并且如果沒有下落類型,則隨機生成一個。渲染函數也是類似寫就可以了。

    分步視頻:/11uqzAUGW

    第22步、模擬碰撞

    1、碰撞的概念

    在這個場景下,碰撞的概念其實就是:計算固定的 blockGroup 和 下落的 blockGroup 的交集,如果兩個方塊集合才產生交集,則認為發生了碰撞。

    2、block 坐標封裝

    對每個 block 實現 獲取當前坐標 和 獲取下落后的坐標 的函數,像這樣:

    3、blockGroup 坐標封裝

    在 blockGroup 中用列表進行一次封裝,像這樣:

    4、blockGroup 增刪改接口

    再實現一些增刪改的函數,以便不時之需:

    5、碰撞檢測

    在 文件中,實現碰撞檢測,首先將固定的 ?blockGroup 中所有的方塊映射到 哈希表中,然后取下落的 blockGroup 中所有方塊,下落后的位置,去哈希表中進行查詢,一旦找到,這個函數返回 True;否則如果超過游戲給定的行數,也返回 True,都代表產生了碰撞。

    分步視頻:/11XOLtzAE

    第23步、控制左右移動

    1、左右移動接口

    將之前 block 中控制方塊移動的代碼去掉,定義一些邊界值以及控制方塊左右移動時需要修改的變量,比如左邊界判定,右邊界判定,方塊左移和方塊右移。

    2、左右移動按鍵響應

    然后在blockGroup 中實現左右移動。如果方塊組中有任意一個方塊在左邊界,則無法左移,否則可以,直接執行;如果方塊組中有任意一個方塊在右邊界,則無法右移,否則可以。

    3、按鍵調用

    在 blockGroup 的 update 函數中,調用按鍵相應接口,像這樣:

    分步視頻:/11ypi1oje

    第24步、控制左右移動速度

    1、增加時間函數

    新建一個 文件,寫一個基礎獲取時間的函數,獲取毫秒級別的時間像這樣:

    2、增加時間檢測函數

    然后實現一個檢測上次按下時間的函數,這樣的話,會更加的流暢:

    3、調用事件檢測函數

    在按鍵按下的同時,調用這個函數:

    分步視頻:/114uD07pC

    第25步、控制下落速度

    分步視頻:/11hkC9Fmm

    第26步、方塊旋轉

    1、旋轉多維列表

    由于傳給 block 的是實際的下標,相當于在世界坐標系做操作,而旋轉最好是局部坐標系,所以 block 應該記錄局部坐標。我們把 BLOCK_SHAPE 進行改造

    第一維代表形狀,第二維代表各種旋轉的情況,第三維代表局部坐標

    方形旋轉90度還是它本身、長條旋轉90度變成這樣、z字型旋轉交換后變成這樣、而飛機旋轉四次是四種形狀,自己畫個圖就明白了。

    2、改造 block 初始化

    通過 形狀、旋轉 以及相對下標就可以確定每個方塊的絕對下標,左右移動,下落都應該是操作 相對下標。

    3、修改方塊的坐標獲取

    4、處理左移和右移

    5、處理下落

    6、修改生成配置的函數

    7、實現旋轉函數

    分步視頻:/11GXvlJYx

    第27步、方塊消除

    1、記錄閃爍狀態和次數

    消除的時候,需要讓方塊進行閃爍,所以給每個 block 增加一個閃爍狀態,記錄閃爍的次數。

    2、實現閃爍接口

    實現一個開始閃爍的接口,并且在 update 的時候更新閃爍次數。

    3、執行更新函數

    在 blockGroup 中遍歷所有的方塊,執行 update 函數。

    4、執行渲染函數

    并且在 block 的渲染函數中,判斷如果是閃爍狀態,并且閃爍次數為奇數,則不進行繪制,這樣就能看到 bilibili 的效果啦。

    5、實現消除的邏輯

    然后實現一個執行消除的邏輯,傳參是第 row 行,將第 row 行的所有方塊,映射到哈希表中,如果發現某個方塊的下標在哈希表中,則執行閃爍效果。

    分步視頻:/11SbjBs4y

    第28步、結束消除

    分步視頻:/11W2NnE0x

    第29步、失敗判定

    分步視頻:/11X8za27U

    第30步、計分規則

    分步視頻:/11mPFbLEh

    第31步、下個方塊

    分步視頻:/11UW7VWpz

    英雄算法聯盟免費體驗券,免費掃碼,可查看分步視頻:

    關鍵詞:

    責任編輯:sdnew003

    相關新聞

    版權與免責聲明:

    1 本網注明“來源:×××”(非商業周刊網)的作品,均轉載自其它媒體,轉載目的在于傳遞更多信息,并不代表本網贊同其觀點和對其真實性負責,本網不承擔此類稿件侵權行為的連帶責任。

    2 在本網的新聞頁面或BBS上進行跟帖或發表言論者,文責自負。

    3 相關信息并未經過本網站證實,不對您構成任何投資建議,據此操作,風險自擔。

    4 如涉及作品內容、版權等其它問題,請在30日內同本網聯系。