AppInvenor開發(fā)手游《數(shù)字華容道》

王德貴 秦瑩瑩

一、思路與原理

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

二、制作過程

1.素材準(zhǔn)備

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

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

3.程序設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

三、調(diào)試

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