白二娃
上期我們已經可以自己制作一個“點名神器”的APP,并安裝在手機中正常使用了。由于網絡環境的不同以及Android手機環境的碎片化,你的APP編寫、安裝以及調試可能需要解決更多的問題,不過當第一個程序順利運行起來后,我們就可以開始編寫更加復雜實用的APP了。
這次我們一起來開發一款訓練口算的小游戲,讓孩子在游戲中鞏固口算能力。在這個實例中我們將會涉及變量、選擇結構、傳值及嵌套等知識點。另外我們還要在學習編程的一開始就養成寫注釋的習慣。
“口算練習”是一款兒童加減法運算的APP小游戲,讓口算練習不再枯燥。我們以加法為例制作APP的第一版,完成之后再由你自己思考如何添加上減法的功能。
如圖1所示,點擊“開始”按鈕,自動生成算式和答案,其中加數和被加數取個位數;點擊“√”和“×”按鈕來判斷給出的算式對錯。每回答正確一題,則加1分;游戲中有3條生命,即可以有3次出錯的機會,答錯一題,生命值減1,并伴有音效;如生命值為0,則游戲結束;可以點擊“開始”按鈕再次啟動游戲(如圖1)。

根據功能需求,準備好音效(答錯的聲音wrong.wav)和兩張圖片(“√”right.png和“×”wrong.jpg)。登錄開發網站后(http://app.gzjkw.net/),新建項目“kousuanlianxi”,上傳準備好的素材。App Inventor支持的圖片文件格式有.png、.gif和.jpg等;支持的音頻文件格式有.wav、.arm、.mpg和 .mp3等(如圖2)。

Screen1的屏幕對齊改為居中,放入3個水平布局組件,注意將需要在邏輯中使用的組件重命名。
第一行為算式,水平和垂直都選居中對齊,寬度為充滿。用5個標簽標示算式的兩個數字A和B、符號、等號和結果C,字號都改為70。
第二行為對錯選項,水平和垂直都選居中對齊,寬度為充滿。放入2個按鈕,圖像選擇導入的素材,刪除文本。
第三行為計分,放入4個標簽,為得分、分值、生命、生命值,字號50,分值為藍色,生命值為紅色。
第四行為開始按鈕,放入按鈕,設置底色為橙色,文本為“開始”,文本顏色為白色。
非可視組件為音效和對話框。音效源文件為wrong.wav。對話框屬性全部為默認(如圖3)。

App Inventor的屏幕設計雖然比較簡單,通過直接選取一些組件加入屏幕中即可,但組件的位置并不能做到拖放到哪里就停留在哪里。為了達到屏幕組件布局效果,需要用到屏幕布局類組件。
我們這里僅以實現加法功能為例,你可以在完成程序基礎功能后再思考實現減法需要哪些修改。
點擊“開始”按鈕,得分的初始值為0,生命初始值為3,產生一個新的算式。這里約定新的算式“A+B=C”產生規則為:加數A和被加數B取0-9之間的隨機整數,C=A+B+(-1到 1間的隨機整數)。
A、B、C的值是不斷變化的,在程序設計語言中稱之為“變量”,在App Inventor中,使用“變量內置塊”定義變量。變量包括全局變量和局部變量,全局變量在整個APP中都可以調用,而局部變量只能在它的作用范圍內調用。變量在使用前需要先定義和賦初值。注意,同一個屏幕中全局變量名稱不能夠重復。設置變量后就可以用變量組件中的“取…”和“設…為”模塊獲取該變量的值和給這個變量賦值。
從開始按鈕找到“當…被點擊,執行”。我們使用了生成隨機數模塊;要讓加法模塊可以加3個數,可以點模塊前的齒輪,拖一個數加進去。從標簽1_A,找到“設置標簽文本”,為標簽A、B、C設置顯示值。設置分值標簽和生命值標簽的數值,代碼如圖4。

當點擊“√”按鈕時,首先判斷算式“C=A+B”是否成立,如果算式成立,則得分加1分,并產生一個新的算式,繼續進行游戲;如果算式不成立,則生命值減1,播放“失敗”的音效;再判斷生命值是否為0,如果為0,則顯示警告信息“游戲結束,請重新開始”,否則產生一個新的算式,繼續游戲。流程圖如圖5所示。

“產生新的算式”需要多次使用,可以封裝這個模塊以減少代碼冗余(圖6)。

流程圖的菱形是一個條件判斷,這種程序結構稱為選擇結構。點擊“如果…則…”模塊前的小齒輪,可以添加否則條件。標簽文本在運算中會自動轉換為數值并參與計算。App Inventor中并不嚴格區分文本和數據類型,只要符合轉換規則,不同數據類型的值都可以自動轉換。比如,數值7.4可以轉換為文本,反過來也一樣,但文本“7天”不能轉換為數值。
按鈕“√”的代碼(如圖7)。

按鈕“×”的代碼與“√”的代碼類似,唯一不同是判斷式“C≠A+B”(如圖8)。

為了讓代碼模塊具有更好的可讀性,讓別人容易理解為什么要這么寫,有時需要為特定的模塊加上一些說明。這些說明就是軟件開發中的注釋。在App Inventor中,可以在任意模塊上單擊鼠標右鍵,來添加注釋。
如果我們需要隨機產生“+-×÷”,那么得到的結果應該根據隨機產生的運算符來進行分類討論。如何確定產生哪種運算符呢?可以通過產生的隨機數1到4來表示四則運算符號。
其實直接做成口算填空題比判斷題更簡單,直接用文本輸入框就行了。