App Inventor學習記錄203-貪食蛇(三),畫出蛇的身體以及讓它動起來

這一篇延續貪食蛇(一),背景配置貪食蛇(二),20×20網格編號改成22×22,增加貪食蛇的邊界繼續往下做。

記錄一下:
App Inventor學習記錄203-貪食蛇(三),畫出蛇的身體以及讓它動起來


這次範例的完成品如下。

按下按鈕7之後,就會畫出貪食蛇一開始的身體。然後就沿著原本的方向一直前進。
我們再按下左轉或是右轉的按鈕的話,就會讓它轉彎。


這次新增的程式方塊如下。


第 1部份新增的程式方塊。

建立清單_可以前進的方向,它的值就是 上、下、左、右這四個方向。
建立清單_移動一格數字的偏移量,用 list from csv row方塊來做,它的值是 -22,22,-1,1
這個數字對應如下
往上移動,蛇頭的數字編號 -22
往下移動,蛇頭的數字編號 +22
往左移動,蛇頭的數字編號 -1
往右移動,蛇頭的數字編號 +1
請對照著編號圖看一下,就清楚了。

建立變數_目前的前進方向,預設值是
我們等一下會用計時器來判斷這個變數的值,然後依照這個值,再移動蛇頭的位置。

建立清單_蛇頭的初始位置,它的預設值是 250,249,248這三個編號的位置。
同樣請對著編號表看一下。


新增第 2部份的程式方塊記錄。

建立把蛇畫出來程式。
先呼叫上一篇我們建立的格子填滿程式,用 select list item清單方塊,選擇清單_蛇的初始位置中的第 1項,也就是 250,把 250這個編號的顏色塗成橘色。

接著再用 for each number方塊,把清單_蛇的初始值中,剩下 的2個編號的格子,塗成綠色。
因為我們清單中的第 1項,已經處理過,所以在 for each number中,from的參數,就代入 2,從第 2項開始處理。to的長度可以代入 3的值,因為我們清單的長度只有 3。
但這裡會用 length of list清單方塊來取清單_蛇的初始位置的長度來做。原因我們下一篇再來解釋。


新增第 3部份的程式方塊記錄。

建立移動蛇的位置程式。
在這個程式中,我們會拉一個區域變數_偏移量偏移量的數值會用 index in list這個清單方塊,去判斷出變數_目前前進的方向是在清單_可以前方向中的第幾項,再用 select list item清單方塊,去取清單_移動一個數字的偏移量的第幾項,來當它的值。

舉例如下:
目前的前進方向為左時,位在清單_可以前進的方向中的第 1項,所以偏移量為 -1
目前的前進方向為上時,位在清單_可以前進的方向中的第 1項,所以偏移量為 -22

然後,我們把蛇頭的位置,加上偏移量之後,我們就可以得到一個新的編號。我們再用 instert list item,把這個新的編號插入到清單_蛇的初始位置中的第 1項。
接著用 remove list item方塊,把清單_蛇的初始位置的最後一項給移除。

舉例如下:
我們目前的蛇的初始位置清單的值為 [250,249,248],前進的方向是右,所以取得偏移量的值是 1。這個程式執行的時候,會先插入 250+1的值,也就是 251到清單中,清單就變成 [251,250,249,248] 。然後我們再把最後一項給移掉。所以清單最後的值是 [251,250,249]。

最後再呼叫把蛇畫出來程式執行。


新增第 4部份的程式方塊記錄。

按鈕 7按下的時候,呼叫把蛇畫出來程式執行。
啟動計時器。


新增第 5部份的程式方塊記錄。

當計時器開始計時的時候。
呼叫畫布清空程式,然後呼叫移動蛇的位置程式。

所以只要計時器一啟動,我們就會把畫布上的東西全部清單,然後用新的東西代替。因為電腦計算的速度很快,所以就會產生貪食蛇移動的效果。


新增第 6部份的程式方塊記錄。

本來有 4個方塊,但我記得以前在 nokia上玩的時候,只有兩個按鈕,所以這裡就只保留 2個按鈕。
因為只有兩個按鈕,所以我們要加上判斷,判斷在每一個前進方向的時候,按下按鈕後,要把前進的方向改成什麼。請參考上面的圖。


新增第 7部份的程式方塊記錄。

判斷完左轉,接下來就是右轉。
兩個按鈕可以動的方向是相反的。

好的,全部的程式方塊都簡單說明過了,建議大家試著做一次,就會用的越來越熟。
但如果不想要重新拉程式方塊,或要需要範例 aia檔的話,請前往第 2頁哦!

發佈留言