前言

? ? ? ?本期視頻點(diǎn)贊目標(biāo)達(dá)成，已經(jīng)把分步拆解的文字版本和視頻版本發(fā)到知識(shí)星球（英雄算法聯(lián)盟）里，但是有同學(xué)反饋免費(fèi)體驗(yàn)券無(wú)法查看（其實(shí)是需要下載app），如果不想下載app，可以跟著這篇文章進(jìn)行學(xué)習(xí)，如果執(zhí)意要在星球里學(xué)習(xí)，可以嘗試下掃下文末的免費(fèi)體驗(yàn)券，注意無(wú)需付費(fèi)！??！由于B站文章的代碼格式不支持，所以代碼的部分采用圖片的方式，這樣也可以避免大家復(fù)制粘貼，逼著大家自己寫(xiě)，何嘗不是一種倒逼。

? ? ? ?B站不能上傳文件，所以源碼可以在公眾號(hào)：夜深人靜寫(xiě)算法，回復(fù)?tetris 直接獲取。

第01步、安裝編碼環(huán)境

1、下載Python

? ? ? ?百度輸入 "Python3下載"，右鍵打開(kāi)官網(wǎng)，找到一個(gè)相對(duì)較新的版本，點(diǎn)擊下載，看到 recommended 字樣，不由自主的選擇了這個(gè)，右鍵打開(kāi)，等它下載完。

2、安裝Python

? ? ? ?雙擊安裝，不要點(diǎn)取消，安裝完成。

3、下載安裝VSCode

? ? ? ?百度輸入 "vscode"，點(diǎn)擊官網(wǎng)，點(diǎn)擊下載，點(diǎn)擊 windows，就下載好了，直接雙擊，咦怎么沒(méi)有找到？嘶……哦哦哦哦哦，點(diǎn)擊保留，點(diǎn)擊打開(kāi)文件，點(diǎn)擊我愿意，下一步，下一步，創(chuàng)建桌面快捷方式，下一步，安裝，完成。

4、第一個(gè)Python程序

? ? ? ?新建一個(gè)文件，選擇Python類型，隨便寫(xiě)一段代碼，按 F5 運(yùn)行，調(diào)出來(lái)的框選擇確認(rèn)，安裝Python解釋器，選它，第一個(gè)Python程序就出來(lái)了。

? ? ? ?分步視頻：https://t.zsxq.com/117C1FekV

第02步、安裝游戲環(huán)境

? ? ? ? 找到Python的安裝目錄，右鍵打開(kāi)命令行，把 pip3 拖進(jìn)來(lái)，緊接著輸入 "install pygame"，看到絢麗的進(jìn)度條，我的內(nèi)心泛起了漣漪，至此我們的游戲環(huán)境就搭好了。

??? ???分步視頻：https://t.zsxq.com/11GDpn3TK

第03步、運(yùn)行例子

? ? ? ?按住 shift，右鍵窗口空白處，打開(kāi) Power Shell 控制臺(tái)，把 Python 的可執(zhí)行文件拖進(jìn)來(lái)，輸入：pygame.examples.aliens，按下回車：

??? ???分步視頻：https://t.zsxq.com/11oPrEMgU

第04步、新建文件夾

? ? ? ? 接下來(lái)我們自己來(lái)做一個(gè)游戲。右鍵新建文件夾，輸入pic用來(lái)放圖片。再新建一個(gè)文件夾，輸入code用來(lái)放代碼，把老婆給我們準(zhǔn)備好的圖片，Ctrl+C, Ctrl+V。

? ? ? 沒(méi)有老婆的話可以找女朋友要。在 code 目錄中新建一個(gè)文件，選擇Python，Ctrl + S，命名 main.py 代表游戲主文件。

? ? ? ?分步視頻：https://t.zsxq.com/11VH2swXp

第05步、初始化pygame

? ? ? ?分步視頻：https://t.zsxq.com/11AnfcLzZ

第06步、主循環(huán)

? ? ? ?分步視頻：https://t.zsxq.com/110jZesoz

第07步、創(chuàng)建畫(huà)面

? ? ? ?分步視頻：https://t.zsxq.com/11rsA6ReC

第08步、顯示圖片

? ? ? ?分步視頻：https://t.zsxq.com/11CylfiAR

第09步、讓圖片動(dòng)起來(lái)

? ? ? ?分步視頻：https://t.zsxq.com/11IFaReOB

第10步、去掉殘影

? ? ? ?分步視頻：https://t.zsxq.com/11sRZuvBa

第11步、控制移動(dòng)

? ? ? ?分步視頻：https://t.zsxq.com/1104ZVHvx

第12步、增加上下方向

? ? ? ?分步視頻：https://t.zsxq.com/111e7uCEM

第13步、實(shí)現(xiàn)方塊類

? ? ? ?現(xiàn)在只有一個(gè)方塊，想要有多個(gè)方塊，最好的方法就是把方塊設(shè)計(jì)成一個(gè)類，利用面向?qū)ο蟮乃枷?，接下?lái)我們實(shí)現(xiàn)一個(gè)方塊類 Block，處理好圖片和它的位置，以及玩家控制的代碼，再封裝一個(gè)渲染的函數(shù)，像這樣：

生成一個(gè)類的實(shí)例，刪掉剛才的測(cè)試代碼，調(diào)用更新和渲染的函數(shù)。

? ? ? ?分步視頻：https://t.zsxq.com/11HVnWQJn

第14步、多實(shí)例

1、定義方塊類型

? ? ? ?既然已經(jīng)封裝成了類，自然就可以多個(gè)實(shí)例運(yùn)行，定義 blockType，紅橙黃綠青藍(lán)紫，像這樣：

2、定義方塊資源路徑

? ? ? ?每種類型的資源位置寫(xiě)下來(lái)，一氣呵成，沒(méi)有技巧，全是感情，唯手熟爾，你也可以：

3、方塊初始化參數(shù)

? ? ? ? 對(duì) Block 加入初始化參數(shù)，方塊類型和位置，把原有的常量，替換成變量：

4、實(shí)例化方塊

? ? ? ? 生成兩個(gè)方塊的實(shí)例（也就是對(duì)象的意思），像這樣：

5、調(diào)用更新和渲染函數(shù)

? ? ? ? 調(diào)用方塊的 update 和 draw 函數(shù)。

? ? ? ?分步視頻：https://t.zsxq.com/11DrHRwC2

第15步、拆分文件

? ? ? ?分步視頻：https://t.zsxq.com/114prI5hu

第16步、邏輯和表現(xiàn)分離

? ? ? 重新實(shí)現(xiàn)block的初始化函數(shù)，可以根據(jù)類型、行坐標(biāo)、列坐標(biāo)、寬高，以及相對(duì)位置來(lái)實(shí)現(xiàn)多態(tài)，根據(jù)傳參來(lái)確定采用哪張圖片、實(shí)際的尺寸、以及確定位置。把之前的初始化函數(shù)刪掉。

? ? ? ?分步視頻：https://t.zsxq.com/11hSGSoaw

第17步、組合方塊

1、增加方塊配置

? ? ? ?在 const 文件中，增加四種形狀的配置，放在 BLOCK_SHAPE 中，用局部坐標(biāo)來(lái)表示，有方形、長(zhǎng)條形、z字型、飛機(jī)型，像這樣：

2、隨機(jī)生成方塊組

? ? ? ?然后新建一個(gè)文件 blockGroup.py，實(shí)現(xiàn)通過(guò)配置實(shí)例化方塊組的接口，一個(gè)blockGroup代表一個(gè)方塊組：

3、實(shí)例化方塊組

? ? ? ?將方塊組存儲(chǔ)在 blocks 列表中，實(shí)現(xiàn)渲染函數(shù)，遍歷blocks進(jìn)行渲染。

? ? ? ?分步視頻：https://t.zsxq.com/11oUTfLOS

第18步、模擬下落

? ? ? ?分步視頻：https://t.zsxq.com/11qZF4tvO

第19步、框架代碼

? ? ? ?分步視頻：https://t.zsxq.com/11HjoTcnd

第20步、確定游戲主邏輯

? ? ? ?抽象來(lái)說(shuō)，俄羅斯方塊這個(gè)游戲就是：一個(gè)靜態(tài)的 BlockGroup 和 一個(gè)下落的 BlockGroup完成碰撞的過(guò)程，下落的 BlockGroup 在和靜態(tài)的 BlockGroup 產(chǎn)生碰撞以后，就會(huì)被合并到靜態(tài)的 BlockGroup 去，而靜態(tài)的 BlockGroup 從下往上判斷。是否有一整行填充的方塊，播放一個(gè)消去的動(dòng)畫(huà)，直到找不到整行的為止，則繼續(xù)生成下落的方塊的過(guò)程。

? ? ? ? 當(dāng)靜態(tài)的 blockGroup 到達(dá)一定高度，則游戲失敗。

? ? ? ?分步視頻：https://t.zsxq.com/1106GAXIK

第21步、BlockGroup 的多態(tài)

1、增加 BlockGroup 類型

? ? ? ? ?在 const.py 文件中添加兩種類型，一種是靜態(tài)的，一種是下落的：

2、定義方塊寬高

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

3、初始化 BlockGroup

? ? ? ?給每個(gè)方塊組加上類型，像這樣：

4、下落調(diào)整

? ? ? ? 如果類型是下落類型，才執(zhí)行時(shí)間判定。

5、游戲邏輯調(diào)整

? ? ? ?在 game 文件中，將 固定類型方塊組 fixedBlockGroup 以及 下落類型方塊組 dropBlockGroup 都實(shí)例化出來(lái)，update 函數(shù)就是執(zhí)行兩者的 update，并且如果沒(méi)有下落類型，則隨機(jī)生成一個(gè)。渲染函數(shù)也是類似寫(xiě)就可以了。

? ? ? ?分步視頻：https://t.zsxq.com/11uqzAUGW

第22步、模擬碰撞

1、碰撞的概念

? ? ? ?在這個(gè)場(chǎng)景下，碰撞的概念其實(shí)就是：計(jì)算固定的 blockGroup 和 下落的 blockGroup 的交集，如果兩個(gè)方塊集合才產(chǎn)生交集，則認(rèn)為發(fā)生了碰撞。

2、block 坐標(biāo)封裝

? ? ? 對(duì)每個(gè) block 實(shí)現(xiàn) 獲取當(dāng)前坐標(biāo) 和 獲取下落后的坐標(biāo) 的函數(shù)，像這樣：

3、blockGroup 坐標(biāo)封裝

? ? ? 在 blockGroup 中用列表進(jìn)行一次封裝，像這樣：

4、blockGroup 增刪改接口

? ? ? ?再實(shí)現(xiàn)一些增刪改的函數(shù)，以便不時(shí)之需：

5、碰撞檢測(cè)

? ? ? ?在 game.py 文件中，實(shí)現(xiàn)碰撞檢測(cè)，首先將固定的 ?blockGroup 中所有的方塊映射到 哈希表中，然后取下落的 blockGroup 中所有方塊，下落后的位置，去哈希表中進(jìn)行查詢，一旦找到，這個(gè)函數(shù)返回 True；否則如果超過(guò)游戲給定的行數(shù)，也返回 True，都代表產(chǎn)生了碰撞。

? ? ? ?分步視頻：https://t.zsxq.com/11XOLtzAE

第23步、控制左右移動(dòng)

1、左右移動(dòng)接口

? ? ? ?將之前 block 中控制方塊移動(dòng)的代碼去掉，定義一些邊界值以及控制方塊左右移動(dòng)時(shí)需要修改的變量，比如左邊界判定，右邊界判定，方塊左移和方塊右移。

2、左右移動(dòng)按鍵響應(yīng)

? ? ? ?然后在blockGroup 中實(shí)現(xiàn)左右移動(dòng)。如果方塊組中有任意一個(gè)方塊在左邊界，則無(wú)法左移，否則可以，直接執(zhí)行；如果方塊組中有任意一個(gè)方塊在右邊界，則無(wú)法右移，否則可以。

3、按鍵調(diào)用

? ? ? ?在 blockGroup 的 update 函數(shù)中，調(diào)用按鍵相應(yīng)接口，像這樣：

? ? ? ?分步視頻：https://t.zsxq.com/11ypi1oje

第24步、控制左右移動(dòng)速度

1、增加時(shí)間函數(shù)

? ? ? ? 新建一個(gè) utils.py 文件，寫(xiě)一個(gè)基礎(chǔ)獲取時(shí)間的函數(shù)，獲取毫秒級(jí)別的時(shí)間像這樣：

2、增加時(shí)間檢測(cè)函數(shù)

? ? ? ?然后實(shí)現(xiàn)一個(gè)檢測(cè)上次按下時(shí)間的函數(shù)，這樣的話，會(huì)更加的流暢：

3、調(diào)用事件檢測(cè)函數(shù)

? ? ? ?在按鍵按下的同時(shí)，調(diào)用這個(gè)函數(shù)：

? ? ? ?分步視頻：https://t.zsxq.com/114uD07pC

第25步、控制下落速度

? ? ? ?分步視頻：https://t.zsxq.com/11hkC9Fmm

第26步、方塊旋轉(zhuǎn)

1、旋轉(zhuǎn)多維列表

? ? ? ?由于傳給 block 的是實(shí)際的下標(biāo)，相當(dāng)于在世界坐標(biāo)系做操作，而旋轉(zhuǎn)最好是局部坐標(biāo)系，所以 block 應(yīng)該記錄局部坐標(biāo)。我們把 BLOCK_SHAPE 進(jìn)行改造

? ? ? ?第一維代表形狀，第二維代表各種旋轉(zhuǎn)的情況，第三維代表局部坐標(biāo)

? ? ? ?方形旋轉(zhuǎn)90度還是它本身、長(zhǎng)條旋轉(zhuǎn)90度變成這樣、z字型旋轉(zhuǎn)交換后變成這樣、而飛機(jī)旋轉(zhuǎn)四次是四種形狀，自己畫(huà)個(gè)圖就明白了。

2、改造 block 初始化

? ? ? ?通過(guò) 形狀、旋轉(zhuǎn) 以及相對(duì)下標(biāo)就可以確定每個(gè)方塊的絕對(duì)下標(biāo)，左右移動(dòng)，下落都應(yīng)該是操作 相對(duì)下標(biāo)。

3、修改方塊的坐標(biāo)獲取

4、處理左移和右移

5、處理下落

6、修改生成配置的函數(shù)

7、實(shí)現(xiàn)旋轉(zhuǎn)函數(shù)

? ? ? ?分步視頻：https://t.zsxq.com/11GXvlJYx

第27步、方塊消除

1、記錄閃爍狀態(tài)和次數(shù)

? ? ? ? 消除的時(shí)候，需要讓方塊進(jìn)行閃爍，所以給每個(gè) block 增加一個(gè)閃爍狀態(tài)，記錄閃爍的次數(shù)。

2、實(shí)現(xiàn)閃爍接口

? ? ? ?實(shí)現(xiàn)一個(gè)開(kāi)始閃爍的接口，并且在 update 的時(shí)候更新閃爍次數(shù)。

3、執(zhí)行更新函數(shù)

? ? ? ?在 blockGroup 中遍歷所有的方塊，執(zhí)行 update 函數(shù)。

4、執(zhí)行渲染函數(shù)

? ? ? ?并且在 block 的渲染函數(shù)中，判斷如果是閃爍狀態(tài)，并且閃爍次數(shù)為奇數(shù)，則不進(jìn)行繪制，這樣就能看到 bilibili 的效果啦。

5、實(shí)現(xiàn)消除的邏輯

? ? ? ? 然后實(shí)現(xiàn)一個(gè)執(zhí)行消除的邏輯，傳參是第 row 行，將第 row 行的所有方塊，映射到哈希表中，如果發(fā)現(xiàn)某個(gè)方塊的下標(biāo)在哈希表中，則執(zhí)行閃爍效果。

? ? ? ?分步視頻：https://t.zsxq.com/11SbjBs4y

第28步、結(jié)束消除

? ? ? ?分步視頻：https://t.zsxq.com/11W2NnE0x

第29步、失敗判定

? ? ? ?分步視頻：https://t.zsxq.com/11X8za27U

第30步、計(jì)分規(guī)則

? ? ? ?分步視頻：https://t.zsxq.com/11mPFbLEh

第31步、下個(gè)方塊

? ? ? ?分步視頻：https://t.zsxq.com/11UW7VWpz

? ? ? 英雄算法聯(lián)盟免費(fèi)體驗(yàn)券，免費(fèi)掃碼，可查看分步視頻：