王德貴 秦瑩瑩

一、思路與原理

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

二、制作過程

1.素材準(zhǔn)備

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

2.組件設(shè)計（見下表）

3.程序設(shè)計

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

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

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

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

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

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

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

（5） 精靈移動：例如，當(dāng)“精靈1”被按下，實質(zhì)就是希望移動“數(shù)字1”。點擊后，先在圖片做標(biāo)簽的數(shù)據(jù)庫里找到對應(yīng)的位置值，然后按位置值調(diào)用對應(yīng)的移動函數(shù)，移動相應(yīng)的精靈到相鄰的空位置上（圖8）。

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

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

（8）退出：退出游戲，釋放內(nèi)存（圖11）。

三、調(diào)試

邊寫代碼邊調(diào)試，保證每一步的正確性。最后完善程序設(shè)計和UI設(shè)計。相關(guān)素材和源代碼請掃下方二維碼下載。