行空板Python入門教程第七課：舒爾特方格小游戲

注意力是一切學(xué)習(xí)的根本，是大腦進(jìn)行感知、學(xué)習(xí)、思維等認(rèn)知活動(dòng)的基本條件。然而，無(wú)論是孩子還是成年人，我們常常會(huì)因開小差、注意力無(wú)法集中而困擾。此時(shí)，找到一個(gè)合適的方法來(lái)訓(xùn)練我們的注意力勢(shì)在必行。

舒爾特方格訓(xùn)練法，是全世界范圍內(nèi)最簡(jiǎn)單，最有效也是最科學(xué)的注意力訓(xùn)練方法之一。

舒爾特方格 (Schulte Grid) 是在一張方形卡片上畫上 1cm*1cm 的 25 個(gè)方格，格子內(nèi)任意填寫上阿拉伯?dāng)?shù)字1 ~ 25 等共 25 個(gè)數(shù)字。訓(xùn)練時(shí)，要求被測(cè)者用手指按 1 ~ 25 的順序依次指出其位置，同時(shí)誦讀出聲，施測(cè)者一旁記錄所用時(shí)間。數(shù)完 25 個(gè)數(shù)字所用時(shí)間越短，注意力水平越高。

讓我們一起用DFRobot行空板設(shè)計(jì)一個(gè)舒爾特方格小游戲來(lái)訓(xùn)練一下自己的注意力吧！

舒爾特方格小游戲

任務(wù)目標(biāo)

在屏幕上進(jìn)行舒爾特方格小游戲。

知識(shí)點(diǎn)

1、學(xué)習(xí)使用pygame庫(kù)加載圖片的方法

2、學(xué)習(xí)使用pygame庫(kù)播放音效的方法

3、學(xué)習(xí)使用pygame庫(kù)實(shí)現(xiàn)鼠標(biāo)交互的方法

材料清單

硬件清單：

開源硬件行空板x1

Type-C&Micro二合一USB線x1

USB小喇叭x1

軟件使用：Mind+編程軟件x1

知識(shí)儲(chǔ)備

1、pygame庫(kù)image模塊中的常用方法

pygame庫(kù)image模塊主要用于對(duì)于圖像的處理。在編程時(shí)，可通過(guò)“模塊名.方法名()”的形式來(lái)實(shí)現(xiàn)功能。

（1）load()方法加載圖像文件

load()方法可以實(shí)現(xiàn)從指定位置加載圖像

screen.blit(pygame.image.load("pic/start-5.png"), (30, 190)) # 在(30,190)坐標(biāo)位顯示圖片start-5.png

其中，"pic/start-5.png"，表示的是具體的圖像的路徑和文件名，這里指來(lái)自pic文件夾下名稱為start-5.png的圖像文件，在加載好圖像后，我們可通過(guò)blit方法將其顯示在指定的位置。

2、pygame庫(kù)music模塊中的常用方法

pygame庫(kù)music模塊在使用時(shí)與mixer模塊緊密相連，可實(shí)現(xiàn)對(duì)于音頻和聲音的控制。

（1）load()方法加載音頻文件

load()方法可以實(shí)現(xiàn)對(duì)于音頻文件的加載。

wavFileName = 'sounds/fire.wav' # 設(shè)置音效文件路徑

sndTrack = pygame.mixer.music.load(wavFileName) # 加載音效文件

其中，wavFileName指的是具體路徑下的音頻文件。sndTrack是個(gè)變量，用于存儲(chǔ)加載的音頻對(duì)象。

（2）play()方法播放音頻

play()方法可以實(shí)現(xiàn)對(duì)于加載后的音頻文件的播放。

pygame.mixer.music.play() # 播放音樂

3、pygame庫(kù)mouse模塊中的常用方法

pygame庫(kù)mouse模塊可以用來(lái)獲取鼠標(biāo)設(shè)備的當(dāng)前狀態(tài)，這個(gè)游戲中我們通過(guò)觸摸屏幕來(lái)模擬鼠標(biāo)的控制。在編程時(shí)，可通過(guò)“模塊名.方法名()”的形式來(lái)實(shí)現(xiàn)功能。

（1）get_pos()方法獲取鼠標(biāo)的位置

get_pos()方法可以實(shí)現(xiàn)對(duì)于鼠標(biāo)所在位置的x、y坐標(biāo)的獲取。

t_x, t_y = pygame.mouse.get_pos() # 獲取鼠標(biāo)的x和y坐標(biāo)位,存儲(chǔ)到變量t_x, t_y中

其中，t_x,和t_y是兩個(gè)變量，用來(lái)存儲(chǔ)獲取到的鼠標(biāo)所在的橫縱坐標(biāo)。

4、pygame庫(kù)中的鼠標(biāo)事件以及事件檢測(cè)

鼠標(biāo)是計(jì)算機(jī)最重要外接設(shè)備之一，同時(shí)它也是游戲玩家必不可少的工具之一，比如游戲中對(duì)于圖片的按下，松開等操作，這些都需要鼠標(biāo)來(lái)配合實(shí)現(xiàn)。
Pygame 提供了三個(gè)鼠標(biāo)事件，分別是鼠標(biāo)移動(dòng)（MOUSEMOTION）、鼠標(biāo)按下（MOUSEBUTTONDOWN）、鼠標(biāo)釋放（MOUSEBUTTONUP），不同事件類型對(duì)應(yīng)著不同的成員屬性。
而對(duì)于三個(gè)鼠標(biāo)事件，pygame都提供了一個(gè)pos 屬性，即相對(duì)于窗口左上角，鼠標(biāo)的當(dāng)前坐標(biāo)值（x,y）。

因此，要想實(shí)現(xiàn)鼠標(biāo)控制游戲的進(jìn)行，那么我們就需要先檢測(cè)事件，再對(duì)事件進(jìn)行判別。

if event.type == pygame.MOUSEBUTTONUP and 30 <= t_x <= 200 and 190 <= t_y <= 250: # 如果鼠標(biāo)被釋放且橫縱坐標(biāo)在“開始游戲”圖片的范圍內(nèi)

其中，event.type表示事件的類型，pygame.MOUSEBUTTONUP表示鼠標(biāo)釋放事件， 30 <= t_x <= 200 and 190 <= t_y <= 250表示鼠標(biāo)的橫坐標(biāo)在30-300之間，縱坐標(biāo)在190-250之間。

5、什么是numpy庫(kù)及常見函數(shù)

Numpy是Python中的一個(gè)科學(xué)計(jì)算庫(kù),一般用于數(shù)組的處理。編程時(shí)，通過(guò)“import numpy”導(dǎo)入庫(kù)后可采用“numpy.函數(shù)名()”的形式來(lái)實(shí)現(xiàn)功能。

（1）array()函數(shù)創(chuàng)建一個(gè)數(shù)組

通過(guò)array()函數(shù)我們創(chuàng)建一個(gè)數(shù)組。

Xpts = [0, 48, 96, 144, 192] # x坐標(biāo)

Ypts = [0, 48, 96, 144, 192] # y坐標(biāo)

ha = itertools.product(Xpts, Ypts) # 將x、y的坐標(biāo)進(jìn)行全排列,得到25組數(shù)據(jù)

haha = list(ha) # 通過(guò)list函數(shù)將全排列后的數(shù)據(jù)轉(zhuǎn)換為列表形式

'''得到:[(0, 0), (0, 48), (0, 96), (0, 144), (0, 192), (48, 0), (48, 48), (48, 96), (48, 144),

(48, 192), (96, 0), (96, 48), (96, 96), (96, 144), (96, 192), (144, 0), (144, 48), (144, 96),

(144, 144), (144, 192), (192, 0), (192, 48), (192, 96), (192, 144), (192, 192)]'''

map = np.array(haha) # 把列表中數(shù)據(jù)轉(zhuǎn)換為數(shù)組形式

這里，我們先創(chuàng)建了兩組列表Xpts和Ypts，分別存儲(chǔ)數(shù)據(jù)來(lái)表示x、y坐標(biāo)值，之后我們通過(guò)Python內(nèi)置的itertools庫(kù)中的product()函數(shù)，將兩組列表中的數(shù)值進(jìn)行了全排列并將結(jié)果轉(zhuǎn)換為列表形式，最后我們通過(guò)numpy庫(kù)中的array()函數(shù)將其再轉(zhuǎn)換成數(shù)組形式，并存儲(chǔ)到變量map中。

6、time庫(kù)time()函數(shù)檢測(cè)當(dāng)前時(shí)間

time庫(kù)中的time()函數(shù)可以用來(lái)檢測(cè)時(shí)間并返回當(dāng)前時(shí)間的時(shí)間戳。

time_start = time.time() # 開始計(jì)時(shí)

time_end = time.time() # 結(jié)束計(jì)時(shí)

time_c = round(time_end - time_start, 1) # 計(jì)算運(yùn)行所花時(shí)間，保留1位小數(shù)

這里，我們先后通過(guò)time.time()記錄下的當(dāng)前的時(shí)間，之后將兩者進(jìn)行做差運(yùn)算，得到時(shí)間差。

動(dòng)手實(shí)踐

任務(wù)描述1：創(chuàng)建游戲窗口與開始界面

通過(guò)pygame庫(kù)創(chuàng)建一個(gè)游戲窗口并在其上顯示游戲開始界面。

1、硬件搭建

通過(guò)USB連接線將行空板連接到計(jì)算機(jī)

2、程序編寫

STEP1：創(chuàng)建與保存項(xiàng)目文件

啟動(dòng)Mind+,另存項(xiàng)目并命名為“007、舒爾特方格小游戲”。

STEP2：創(chuàng)建與保存Python文件

創(chuàng)建一個(gè)Python程序文件“main1.py”，雙擊打開。

STEP3：導(dǎo)入素材

在項(xiàng)目文件夾中導(dǎo)入兩個(gè)素材文件夾，包括圖片及音效。具體操作如下。

（1）將素材依次拖入項(xiàng)目文件夾中

Tips：素材下載鏈接可見附錄1。

（2）拖入后可見

STEP4：程序編寫

(1) 導(dǎo)入所需功能庫(kù)

在這個(gè)任務(wù)中，我們需要使用pygame庫(kù)來(lái)繪制游戲窗口，因此，我們須先導(dǎo)入它。

(2) 初始化游戲并創(chuàng)建指定尺寸的游戲窗口

在使用pygame進(jìn)行游戲時(shí)，我們需先對(duì)其進(jìn)行初始化操作，之后，為了能和行空板的屏幕一致，我們創(chuàng)建一個(gè)大小為（240，320）的游戲窗口。

(3) 定義游戲開始頁(yè)面

創(chuàng)建好游戲窗口后，我們?cè)俣x一個(gè)游戲開始的頁(yè)面。在這開始頁(yè)面上，我們需要遍歷所有的事件，設(shè)定點(diǎn)擊關(guān)閉窗口后退出游戲的功能，同時(shí)，在其上顯示一張“開始游戲”的背景圖。

(4) 顯示游戲開始頁(yè)面

之后，為了能使得開始頁(yè)面始終保持顯示，我們通過(guò)一個(gè)變量來(lái)記錄開始頁(yè)面的狀態(tài)，并將其初始時(shí)的狀態(tài)設(shè)定為True，之后結(jié)合循環(huán)來(lái)永久顯示它。

Tips：完整示例程序如下：

3、程序運(yùn)行

STEP1：遠(yuǎn)程連接行空板

STEP2：點(diǎn)擊右上方的運(yùn)行按鈕

STEP3：觀察效果

觀察行空板，可以發(fā)現(xiàn)行空板的屏幕上出現(xiàn)了“開始游戲”四個(gè)字，這就是我們?cè)O(shè)定的進(jìn)入游戲前的開始頁(yè)面。

Tips：長(zhǎng)按行空板Home鍵5秒，可退出程序。

任務(wù)描述2：進(jìn)入游戲界面

上述的開始頁(yè)面始終是靜態(tài)的圖片，為了完善游戲，接下來(lái)，我們將在其上添加動(dòng)態(tài)效果，使得將手指（鼠標(biāo)）移動(dòng)至文字區(qū)域后內(nèi)容變成綠色，并且在點(diǎn)擊后進(jìn)入游戲界面。

1、程序編寫

STEP1：創(chuàng)建與保存項(xiàng)目文件

新建一個(gè)Python程序文件“main2.py”，雙擊打開。

Step2：程序編寫

（1）導(dǎo)入所需功能庫(kù)并創(chuàng)建游戲窗口

（2）設(shè)定圖片坐標(biāo)位

在這個(gè)游戲中，我們將按順序點(diǎn)擊25張帶有數(shù)字符號(hào)的圖片。因此，為了能將這25張數(shù)字圖片顯示在屏幕上，我們需要確定25個(gè)坐標(biāo)位。

這里，我們?cè)O(shè)定每張數(shù)字圖片的尺寸大小48*48像素，因此，在屏幕橫向上，正好可以顯示5張圖片，縱向上亦是每列5張。并且，每一列數(shù)字圖片的橫坐標(biāo)皆分別為48 的0-4倍，縱坐標(biāo)亦是如此。

因此在編程時(shí)，我們可以通過(guò)將兩組[0，48，96，144，192]列表全排列，得到25組數(shù)據(jù)，再將其最終以數(shù)組形式呈現(xiàn)，來(lái)代表25張數(shù)字圖片的坐標(biāo)位。

（3）定義準(zhǔn)備函數(shù),用于確定圖片

在確定好25張數(shù)字圖片的坐標(biāo)位后，如何才能確定要隨機(jī)顯示的圖片呢？

這里，我們采用一個(gè)小技巧，將25張初始時(shí)要顯示的數(shù)字圖片按順序命名為pic0.png-pic24.png，再將被點(diǎn)擊后要顯示的圖片命名為qic0.png-qic24.png。

這樣命名之后，我們可以通過(guò)相同的前綴名pic/qic+0至24不同的序號(hào)+png格式，來(lái)分別表示兩組圖片，每張圖片獨(dú)一無(wú)二，而這0-24的序號(hào)在編程時(shí)，我們可以以列表的形式來(lái)表示。

因此，在這里，我們將創(chuàng)建一個(gè)列表，并將其中的元素隨機(jī)排序，以便在后續(xù)以此表示圖片名稱中的序號(hào)部分。

（4）檢測(cè)鼠標(biāo)位置

接下來(lái)，我們?cè)陂_始頁(yè)面中添加獲取鼠標(biāo)位置的功能，并設(shè)定當(dāng)手（鼠標(biāo)）移動(dòng)到“開始游戲”這張圖片上后，切換另一張相同文字，不同顏色的圖片，使得看上去文本變換了顏色。

（5）檢測(cè)鼠標(biāo)事件

接下來(lái)，我們?cè)僭陂_始頁(yè)面中添加鼠標(biāo)檢測(cè)事件。并設(shè)定當(dāng)鼠標(biāo)被釋放且移動(dòng)到“開始游戲”圖片的范圍內(nèi)時(shí)，進(jìn)入游戲頁(yè)面，同時(shí)退出開始頁(yè)面。

這里，我們通過(guò)兩個(gè)變量start_page和game_page來(lái)標(biāo)記開始頁(yè)面和游戲頁(yè)面的進(jìn)入與退出這兩個(gè)狀態(tài)。

（6）定義游戲界面

之后，我們?cè)俣x游戲界面，設(shè)定狀態(tài)為進(jìn)入后，則顯示25張初始時(shí)的數(shù)字圖片。這里的圖片我們通過(guò)前綴名+列表中的序號(hào)+png格式后綴來(lái)表示，圖片的坐標(biāo)則是以數(shù)組的形式表示。

同時(shí)，再通過(guò)一個(gè)變量 pic_zero來(lái)記錄數(shù)字顯示的狀態(tài)，1為待顯示，0為無(wú)需顯示。

（7）循環(huán)執(zhí)行

最后，我們?cè)O(shè)定初始時(shí)的start_page和game_page的狀態(tài)為True，并在循環(huán)中調(diào)用它們以便保存窗口一直顯示。

Tips：完整示例程序如下：

2、程序運(yùn)行

STEP1：遠(yuǎn)程連接行空板

STEP2：運(yùn)行程序并觀察效果

點(diǎn)擊運(yùn)行后，觀察行空板，可以看到當(dāng)手指帶動(dòng)光標(biāo)移動(dòng)到“開始游戲”的圖標(biāo)上時(shí)，文字由藍(lán)色變?yōu)榫G色，移開后又恢復(fù)藍(lán)色。而當(dāng)手指點(diǎn)擊綠色的“開始游戲”圖標(biāo)后，則進(jìn)入了游戲的界面，顯示出一組灰色隨機(jī)排序的1-25的數(shù)字圖片。

Tips：長(zhǎng)按行空板Home鍵5秒，可退出程序。

任務(wù)描述3：設(shè)定游戲機(jī)制

接下來(lái)，我們將設(shè)定完整的游戲機(jī)制，實(shí)現(xiàn)當(dāng)按順序點(diǎn)擊數(shù)字圖片后，圖片切換顏色，同時(shí)記錄點(diǎn)擊完所需的時(shí)間，時(shí)間越短，注意力越集中。

1、程序編寫

STEP1：創(chuàng)建與保存項(xiàng)目文件

新建一個(gè)Python程序文件“main3.py”，雙擊打開。

STEP2：程序編寫

（1）添加音效和文字對(duì)象

這里，為了能進(jìn)一步優(yōu)化游戲效果，我們?cè)谏厦娉绦虻幕A(chǔ)上添加背景音效，當(dāng)未按順序點(diǎn)擊數(shù)字圖片時(shí)，觸發(fā)背景音。同時(shí)，我們創(chuàng)建一個(gè)字體對(duì)象，以便在后續(xù)顯示所消耗的時(shí)間。

（2）開始計(jì)時(shí)

為了能及時(shí)記錄時(shí)間，我們?cè)陂_始頁(yè)面的程序中，補(bǔ)充設(shè)定當(dāng)進(jìn)入游戲界面后，就開始記錄時(shí)間。同時(shí)為了確保只在游戲結(jié)束后顯示時(shí)間，這里我們給屏幕填充黑色。

（3）設(shè)定機(jī)制

接下里，我們?cè)谟螒蚪缑嫣砑訖C(jī)制，實(shí)現(xiàn)當(dāng)數(shù)字圖片被點(diǎn)擊后，在同一位置切換另一張相同數(shù)字不同顏色的圖片。

（4）顯示時(shí)間

之后，當(dāng)最后一張數(shù)字圖片25被點(diǎn)擊后，我們?cè)谄聊簧巷@示記錄的時(shí)間，這里，為了使文字顯示能居中對(duì)齊，我們先創(chuàng)建一個(gè)以給定位置為中心的文字填充矩形，隨后再在其上顯示時(shí)間文本。

（5）重新開始游戲

當(dāng)一輪游戲結(jié)束后，我們?cè)O(shè)定再次顯示開始游戲的界面，以便重新開始。

（6）循環(huán)調(diào)用

最后，我們補(bǔ)充添加音效，使得在未按順序點(diǎn)擊數(shù)字后，播放背景音。

Tips：完整示例程序如下：

2、程序運(yùn)行

STEP1：遠(yuǎn)程連接行空板

STEP2：連接USB小喇叭

將小喇叭連接在行空板的側(cè)邊USB口上。

STEP3：運(yùn)行程序并觀察效果

點(diǎn)擊運(yùn)行后，觀察行空板，當(dāng)手指點(diǎn)擊綠色的“開始游戲”圖標(biāo)后，則進(jìn)入了游戲的界面，之后按順序點(diǎn)擊數(shù)字圖片，被點(diǎn)擊的數(shù)字變成了粉紅色，而當(dāng)我們未能按順序點(diǎn)擊時(shí)，小喇叭播放出了背景音。

并且，當(dāng)我們結(jié)束一次游戲后，可在屏幕上再點(diǎn)擊一下，顯示出“開始游戲”的字樣后又可以繼續(xù)進(jìn)行游戲啦。

行空板游戲運(yùn)行效果

行空板游戲運(yùn)行效果

行空板游戲運(yùn)行效果

挑戰(zhàn)自我

1、和自己比一比，看看連續(xù)三次游戲，需要花費(fèi)多少時(shí)間吧！

2、自己從網(wǎng)上下載一首音樂，作為背景音添加進(jìn)來(lái)吧，想一想，程序該怎么調(diào)整呢？

更多行空板Python入門教程請(qǐng)關(guān)注“蘑菇云創(chuàng)客”公眾號(hào)。

審核編輯：符乾江