AppInvenor開發手游《數字華容道》

王德貴 秦瑩瑩

一、思路與原理

本以為用AppInvenor做這個游戲很簡單，就用手指拖動圖像精靈（數字）到其他位置就行了，但實際寫出來卻發現常出現各種錯誤，比如無法移動或圖像重疊，只能暫時擱置。過了一段時間突發靈感找到了問題的突破口！就是確定九個位置，點擊數字時，讓程序自動判斷向旁邊的空位移動，周圍沒有空位便不動。現在和大家分享這個3×3的《數字華容道》，如果理解了這個思路明白了原理，學會后還可以擴展到N×N個方格（圖1）。

二、制作過程

1.素材準備

本程序使用WxBit 漢化版（app.wxbit.com）。游戲界面如圖1，掃碼關注壹零社，下載素材包，其中有全部代碼截圖和游戲演示視頻。準備1-8的數字圖片素材。

2.組件設計（見下表）

3.程序設計

（1）初始化及變量設置：聲明相應變量，屏幕初始化時要把變量放入內存，這樣顯示速度會快很多。“數2”定義9個位置的列表變量，“數”用于在數2中取得對應項的位置坐標，然后確定怎么移動的變量;“坐標”把界面分成9部分，并定義每個部分的坐標的列表變量（二級列表）。“當前1位置”，即是精靈“數字1”當前在哪個位置，它向那個方向移動時也需用到這個變量。“最佳成績”和“計時”都是為了在界面顯示相應信息。“精靈”變量是存儲畫布上的精靈，即對應的數字圖片，“精靈圖片”存儲精靈對應的圖片（圖2）。

（2）初始化數字函數：游戲開始前用計時器1將數字位置隨機打亂，并加載相應的圖片。為了避免位置重復，選出一個位置后，將其從數據庫中刪除。我是從最后也就是數字“8”開始刪除，這樣不會影響前面的數字。

定義了兩個數據庫，一個是“圖片做標簽”，即用圖片對應位置的存儲數據庫，一個是“位置做標簽”，即用位置存儲圖片的數據庫，這兩個數據庫是同步存儲的，以方便程序調用，用來確定哪個數字在哪個位置。將其封裝為函數即過程，方便調用（圖3）。

（3）開始代碼塊：每次開始游戲，都需要重新初始化數字，清除數據庫原來的數據，重設變量來清除上次游戲的數據。啟用計時器，以計算游戲時間，并顯示在手機屏幕上（圖4）。

（4）數字定位：1、3、7、9四個位置在角上，只能向兩個方向移動。比如“位置1”，它可以移動到“位置2”和“位置4”，所以在位置做標簽數據庫里，查找標記為“2”或“4”的數據是否為空，如果為“空”，則將當前位置保存為當前數字，然后將“位置1”清空，如果不為空，則忽略。其他代碼類似（圖5）。

2、4、6、8四個位置在邊界的中間，有3個方向的移動，需要如果和兩個否則如果共3個判斷（圖6）。

位置5在中間，有2、4、6、8四個位置需要判斷（圖7）。

（5） 精靈移動：例如，當“精靈1”被按下，實質就是希望移動“數字1”。點擊后，先在圖片做標簽的數據庫里找到對應的位置值，然后按位置值調用對應的移動函數，移動相應的精靈到相鄰的空位置上（圖8）。

（6） 計時器：除了計時功能，還用來檢測各個數字是否按順序排列。如果按數字順序移動完成，則提示游戲結束，并顯示成績（圖9）。

（7）成績統計函數：將用時顯示在計時文本中，游戲結束后和變量“最佳成績”數據進行比較，然后將用時最短的成績再次存入到變量“最佳成績”中，同時用對話框作相應的提示（圖10）。

（8）退出：退出游戲，釋放內存（圖11）。

三、調試

邊寫代碼邊調試，保證每一步的正確性。最后完善程序設計和UI設計。相關素材和源代碼請掃下方二維碼下載。