記錄一下：
App Inventor學習記錄78，數字華容道小遊戲，清單取代功能，任意元件功能
遊戲進行的畫面是這樣子的
點擊空白按鈕旁邊的按鈕，就會把兩個按鈕的顯示文字交換，把有數字的按鈕變空白，原本空白的按鈕變成我們按下的數字，一直排列到成順序為止。
畫面的編排如下：
主要就是這 16個按鈕在做數字的變化。
全部的程式碼如下：
第 1部份的程式碼說明：
這裡把所有的按鈕，加到全部 16個按鈕的列表這個清單中。
然後建立一個叫全部按鈕移動方向列表的清單，這裡要說明一下建立這個清單的目的。
這是為了讓按鈕的文字可以順利的移動。
假設按鈕 1在是有數字顯示的情形，那麼按下按鈕 1之後，這個數字可以往按鈕 2跟按鈕 5的方向移動。
假設按鈕 2在是有數字顯示的情形，那麼按下按鈕 2之後，這個數字可以往按鈕 1,3,6這三個方向移動。
以此類推。
接著，我們再建立幾個等等要使用到的變數。
隨機排列的數字清單，這個是要用來打亂順序用的。
隨機號碼，這個是要來取隨機值用的。
按鈕可以移動的方向，這個是要拿來取各別按鈕可以移動的方向用的。
第 2部份的程式碼說明：
當程式初始化的時候，呼叫數字隨機排列並在按鈕上顯示數字這個程式。
當再玩一次按鈕被按下的時候，呼叫數字隨機排列並在按鈕上顯示數字這個程式。
第 3部份的程式碼說明：
建立數字隨機排列並在按鈕上顯示數字這個程式
1. 把隨機排列的數字清單，設定成一個空清單
2. 加入判斷式，如果隨機排列的數字清單的長度小於16的話：
2.1 把隨值號碼設定為 1~16的隨機值。
2.2 加入流程判斷，如果隨機排列取得的值，不在隨機排列的數字清單中的話
就把隨機排列取得的值，加入到隨機排列的數字清單中
3. 這裡用一個迴圈，讓下面這個程式做 16次
設定任意按鈕的文字：
當數字為 1的時候，把按鈕，設定為全部 16個按鈕的列表這個清單中的第 1項。
把文字的值，設定成隨機排列的數字清單中的第 1項。
當數字為 2的時候，把按鈕，設定為全部 16個按鈕的列表這個清單中的第 2項。
把文字的值，設定成隨機排列的數字清單中的第 2項。
當數字為 3的時候，把按鈕，設定為全部 16個按鈕的列表這個清單中的第 3項。
把文字的值，設定成隨機排列的數字清單中的第 3項。
以此類推，總共做16次。
這裡假設，我們的隨機排列的數字清單的值是[3,9,16,8,2,………總共 16個]
那麼按鈕 1~16上的顯示的數字依序就會是[3,9,16,8,2,………總共 16個]
4. 把按鈕的文字設定為空白。我們先用找出 16這個數字位於隨機排列的數字清單中的第幾項，然後全部 16個按鈕的列表這個清單中的第幾項，就是我們要設定的按鈕。
第 4部份的程式碼說明：
建立一個叫取得按鈕可以移動的方向的程式，加入一個叫被按下的是那一個按鈕的參數。
把按鈕可以移動的方向這個變數的值，設定成 CSV列轉清單，要取的值就是全部按鈕移動方向列表中的第被按下的是那一個按鈕的這一項。
舉例說明：
當被按下的是那一個按鈕的值是 1的時候，那麼按鈕可以移動的方向的值，就會是 [2,5]
當被按下的是那一個按鈕的值是 2的時候，那麼按鈕可以移動的方向的值，就會是 [1,3,6]
當被按下的是那一個按鈕的值是 3的時候，那麼按鈕可以移動的方向的值，就會是 [2,4,7]
以此類推。
第 5部份的程式碼說明：
建立一個叫按鈕內的文字移動的程式，加入一個叫被按下的是那一個按鈕 2的參數
我們先加入一個迴圈，要執行的次數就是按鈕可以移動的方向的清單長度。
加入一個流程判斷式，找到我們按下的按鈕的周圍那一個文字是空白的。
然後更新一下隨機排列的數字清單的內容。
把我們目前按下的這個按鈕的文字，設定為空白。
把移動過去的那個按鈕的數字設定出來。
第 6部份的程式碼說明：
這部份就簡單了，當按鈕 1被按下的時候：
呼叫取得按鈕可以移動得方向的程式，參數值代 1。
呼叫按鈕內的文字移動的程式，參數值代 1。
來舉個例子
目前按鈕 6的文字是空白的。
我們想要把按鈕 7的文字，現在顯示 3的地方移動過去。
所以我們現在要按的按鈕是 7。
現在隨機排列的數字清單的值是，[2,14,13,1,10,16,3,12,15,4,11,6,7,8,5,9]。
按下按鈕 7，我們取得按鈕可以移動的方向的值是，[3,6,8,11]。
經由回圈的判斷，我們知道了按鈕 6的文字是空白。
修改一下隨機排列的數字清單的值為，[2,14,13,1,10,3,3,12,15,4,11,6,7,8,5,9]
把我們按下的這個按鈕的顯示文字，設定為空白。
把第 6個按鈕的顯示文字設定為 3
然後就一直就重覆這些動作。
這個程式真的不難，只是在想法上卡了好久，相信眼尖的朋友已經看到了，在按下按鈕之後，隨機排列的數字清單中，會有兩個相同的值。我為了這個問題處理了好久…
但最後發現這個問題不影響程式的運行，所以就隨它去了。
這個程式，其實是個半成品，因為沒有設定完成的條件。這個部份，我們會在上一個範例中繼續完成。下一個範例會把文字改成圖片的型式來做，這樣會比較有趣。
這次的 aia檔的下載連結如下:
點我下載 NO_78_Button_Puzzle.aia
參考書籍如下:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC＋創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單：App Inventor 2初學特訓班
手機應用程式設計超簡單：App Inventor 2小專題特訓班
手機應用程式設計超簡單：App Inventor 2資料庫專題特訓班
之前介紹過的一些 appinventor的使用記錄，都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面