記錄一下：
App Inventor學習記錄203-貪食蛇(三)，畫出蛇的身體以及讓它動起來
這次範例的完成品如下。
按下按鈕７之後，就會畫出貪食蛇一開始的身體。然後就沿著原本的方向一直前進。
我們再按下左轉或是右轉的按鈕的話，就會讓它轉彎。
這次新增的程式方塊如下。
%EF%BC%8C%E7%95%AB%E5%87%BA%E8%9B%87%E7%9A%84%E8%BA%AB%E9%AB%94%E4%BB%A5%E5%8F%8A%E8%AE%93%E5%AE%83%E5%8B%95%E8%B5%B7%E4%BE%862.png)
第 1部份新增的程式方塊。
%EF%BC%8C%E7%95%AB%E5%87%BA%E8%9B%87%E7%9A%84%E8%BA%AB%E9%AB%94%E4%BB%A5%E5%8F%8A%E8%AE%93%E5%AE%83%E5%8B%95%E8%B5%B7%E4%BE%863.png)
建立清單_可以前進的方向，它的值就是 上、下、左、右這四個方向。
建立清單_移動一格數字的偏移量，用 list from csv row方塊來做，它的值是 -22,22,-1,1。
這個數字對應如下
往上移動，蛇頭的數字編號 -22
往下移動，蛇頭的數字編號 +22
往左移動，蛇頭的數字編號 -1
往右移動，蛇頭的數字編號 +1
請對照著編號圖看一下，就清楚了。
建立變數_目前的前進方向，預設值是右。
我們等一下會用計時器來判斷這個變數的值，然後依照這個值，再移動蛇頭的位置。
建立清單_蛇頭的初始位置，它的預設值是 250，249，248這三個編號的位置。
同樣請對著編號表看一下。
新增第 2部份的程式方塊記錄。
%EF%BC%8C%E7%95%AB%E5%87%BA%E8%9B%87%E7%9A%84%E8%BA%AB%E9%AB%94%E4%BB%A5%E5%8F%8A%E8%AE%93%E5%AE%83%E5%8B%95%E8%B5%B7%E4%BE%864.png)
建立把蛇畫出來程式。
先呼叫上一篇我們建立的格子填滿程式，用 select list item清單方塊，選擇清單_蛇的初始位置中的第 1項，也就是 250，把 250這個編號的顏色塗成橘色。
接著再用 for each number方塊，把清單_蛇的初始值中，剩下 的2個編號的格子，塗成綠色。
因為我們清單中的第 1項，已經處理過，所以在 for each number中，from的參數，就代入 2，從第 2項開始處理。to的長度可以代入 3的值，因為我們清單的長度只有 3。
但這裡會用 length of list清單方塊來取清單_蛇的初始位置的長度來做。原因我們下一篇再來解釋。
新增第 3部份的程式方塊記錄。
%EF%BC%8C%E7%95%AB%E5%87%BA%E8%9B%87%E7%9A%84%E8%BA%AB%E9%AB%94%E4%BB%A5%E5%8F%8A%E8%AE%93%E5%AE%83%E5%8B%95%E8%B5%B7%E4%BE%865.png)
建立移動蛇的位置程式。
在這個程式中，我們會拉一個區域變數_偏移量，偏移量的數值會用 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部份的程式方塊記錄。
%EF%BC%8C%E7%95%AB%E5%87%BA%E8%9B%87%E7%9A%84%E8%BA%AB%E9%AB%94%E4%BB%A5%E5%8F%8A%E8%AE%93%E5%AE%83%E5%8B%95%E8%B5%B7%E4%BE%866.png)
按鈕 7按下的時候，呼叫把蛇畫出來程式執行。
啟動計時器。
新增第 5部份的程式方塊記錄。
%EF%BC%8C%E7%95%AB%E5%87%BA%E8%9B%87%E7%9A%84%E8%BA%AB%E9%AB%94%E4%BB%A5%E5%8F%8A%E8%AE%93%E5%AE%83%E5%8B%95%E8%B5%B7%E4%BE%867.png)
當計時器開始計時的時候。
呼叫畫布清空程式，然後呼叫移動蛇的位置程式。
所以只要計時器一啟動，我們就會把畫布上的東西全部清單，然後用新的東西代替。因為電腦計算的速度很快，所以就會產生貪食蛇移動的效果。
新增第 6部份的程式方塊記錄。
%EF%BC%8C%E7%95%AB%E5%87%BA%E8%9B%87%E7%9A%84%E8%BA%AB%E9%AB%94%E4%BB%A5%E5%8F%8A%E8%AE%93%E5%AE%83%E5%8B%95%E8%B5%B7%E4%BE%868.png)
本來有 4個方塊，但我記得以前在 nokia上玩的時候，只有兩個按鈕，所以這裡就只保留 2個按鈕。
因為只有兩個按鈕，所以我們要加上判斷，判斷在每一個前進方向的時候，按下按鈕後，要把前進的方向改成什麼。請參考上面的圖。
新增第 7部份的程式方塊記錄。
%EF%BC%8C%E7%95%AB%E5%87%BA%E8%9B%87%E7%9A%84%E8%BA%AB%E9%AB%94%E4%BB%A5%E5%8F%8A%E8%AE%93%E5%AE%83%E5%8B%95%E8%B5%B7%E4%BE%869.png)
判斷完左轉，接下來就是右轉。
兩個按鈕可以動的方向是相反的。
好的，全部的程式方塊都簡單說明過了，建議大家試著做一次，就會用的越來越熟。
但如果不想要重新拉程式方塊，或要需要範例 aia檔的話，請前往第 2頁哦!