記錄一下：
App Inventor學習記錄203-貪食蛇(一)，背景配置
畫面編排如下。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE1.png)
這一次用到的按鈕的元件只有 label 1、button 5、button 6跟 canvas 1，其它的元件都暫時用不到。
這一篇主要就是在畫布上畫線，然後把每一個給編號。接下來的貪食蛇就是靠這個編號來做的。
這裡把畫布的大小設定成 320×320的大小。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE16.png)
長和寬都分成 20格，所以每一格的寬度就是 16。
全部的程式方塊如下。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE3.png)
第 1部份的程式方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE5.png)
這一篇中用到的變數只有從 1到 20的清單跟從 0到 399的清單這兩個。
從 1到 20的清單，這個清單直接用 list from csv row來產生。
從 0到 399的清單，這個清單就比較長了，等一下用程式來寫。
第 2部份的程式方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE6.png)
建立編號在第幾列程式，新增參數編號。
用 remainder of 取餘數的數學方塊去取編號除以 20後的值。
舉例來說：
編號為 21的話，21/20，得到值為 1。
編號為 123的話，123/20，得到的值為 3。
等一下會用這個程式去計算每一個編號對應的位置在那裡。
第 3部份的程式方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE7.png)
建立用行列數字求出的位置程式，新增參數第幾行跟第幾列。
這次做的是把 20×20的格子，所以用數學方塊計算一下。就可以求到編號的位置。
第 4部份的方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE8.png)
建立編號在第幾行程式，新增參數編號。
這裡跟上面求餘數的方塊差不多，只是這裡改用 quotient of求商數的數學方塊來做。
舉例來說：
編號為 21的話，21/20，得到值為 1。
編號為 123的話，123/20，得到的值為 6。
第 5部份的程式方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE9.png)
建立畫格線程式。
set canvas1.paint color to，設定畫布畫筆顏色為黃色。
用 for each number的方塊，畫 20條線橫線。
第 1 條線的座標起點 (x1,y1)為 (0,16)，終點座標 (x2,y2)為 (320,16)
第 2 條線的座標起點 (x1,y1)為 (0,32)，終點座標 (x2,y2)為 (320,32)
第 2 條線的座標起點 (x1,y1)為 (0,48)，終點座標 (x2,y2)為 (320,48)
一直到第 20條線。
再用一次 for each number方塊，畫 20條直線。
第 1 條線的座標起點 (x1,y1)為 (16,0)，終點座標 (x2,y2)為 (16,320)
第 2 條線的座標起點 (x1,y1)為 (32,0)，終點座標 (x2,y2)為 (32,320)
第 2 條線的座標起點 (x1,y1)為 (48,0)，終點座標 (x2,y2)為 (48,320)
一直到第 20條線。
第 6部份的程式方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE10.png)
建立格子填滿程式，新增參數編號跟顏色。
設定線寬為 14，畫筆顏色為參數_顏色。
call canvas1.draw shape，呼叫畫布畫多邊形程式。
在 point list參數這裡，利用 make a list的方塊，把多邊型的每一個點的 x,y座標拉在一塊。
fill參數，是要不要填滿這個多邊型。
這個程式主要是要填滿某一格編號方框。等一下再來舉例說明。
第 7部份的程式方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE11.png)
用 for each number，產生 0~399，總共 400個數字，加到清單_從 0到 399的清單中。
第 8部份的程式方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE12.png)
建立格子編號程式，把每一個編號，放到指定的位置上。
第 9部份的程式方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE13.png)
when screen1.initialize，當程式初始化的時候。
呼叫畫格線和格子編號這兩個程式執行。
我們就會在畫布上得到像下面的這個圖。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE4.png)
這個時候，我們再回過頭看第 6部份格子填滿的程式。
假設，我們要填滿的是編號第 121這一格的數字。我們把 121這個數字套進去編號在第幾行，編號在第幾列這兩個程式中。我們就會得到 2個數字。代表 121號，在第 121/20，第 6行、第 1列的位置。
這個時候，我們再用這兩個數字，去算出 121這個方塊的 4個角的 x,y座標。
依照左上、右上、右下、左下的順序，這 4個點的座標如下。
左上 (x,y)–(16,96)
右上 (x,y)–(32,96)
右下 (x,y)–(32,112)
左下 (x,y)–(16,112)
把這四點依序連起來，再填滿。
第 10部份的程式方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE14.png)
這個是清除畫布。
第 11部份的程式方塊記錄。
%EF%BC%8C%E8%83%8C%E6%99%AF%E9%85%8D%E7%BD%AE15.png)
這個部份我們剛剛已經說明過了，所以這裡就不再說明。
好的，全部的程式方塊都簡單說明過了，建議大家試著做一次，就會用的越來越熟。
但如果不想要重新拉程式方塊，或要需要範例 aia檔的話，請前往第 2頁哦!