1、打地鼠本章將創(chuàng)建一個“打地鼠”的，靈感來自一款經(jīng)典的街機Whac-A-Mole，其中的小動物會突然從洞中冒出，玩家則用木槌擊打得分?！按虻厥蟆钡膭?chuàng)作者是一名 App Inventor 團隊的成它們，員，與其說她是為了測試 sprite 組件的功能（她做到了），不如說是她自己喜歡玩。當 Ellen Spertus 加入App Inventor 也可以用于公司的 App Inventor 團隊時，她希望的開發(fā)，因此她自告奮勇地承擔起sprites 的實現(xiàn)任務。sprite 原本用來表示神話中的角色，如仙女、妖精等，到20世紀70年始出現(xiàn)在計算機界，用來代表那些能夠在電中）。Ellen第一次使用 s

2、prite 是在腦屏幕上移動的圖像（在電子20世紀80年代早期，她曾經(jīng)參加電腦并使用 TI 99/4 編程。她在 sprites 以及“打地鼠”上所做的努力，受到了雙重懷舊情緒的驅(qū)使計算機以及她童年時代的最愛?？梢圆榭?Android 版“打地鼠”由 Wolber的?！敬私淌诨谏弦粋€版本的 App Inventor 錄制的，但同樣可以有助于理解開發(fā)過程?！繄D 打地鼠的用戶界面學習目標如圖 所示的“打地鼠”應用將實現(xiàn)以下功能：一只地鼠隨機出現(xiàn)在屏幕上，每秒鐘移動一次；中數(shù)加 ，地鼠隨如果手指觸碰到地鼠，則讓設備，顯示機移動到一個新位置；地鼠，則顯示失敗數(shù)加 ；如果手指直接觸摸到屏幕但沒點點擊“

3、重新開始”按鈕，重新開始，命中和失敗的計數(shù)歸零。學習內(nèi)容本章內(nèi)容覆蓋了以下的組件及概念：/SGMK9VXOZK 組件：具有觸感的可移動圖像；)GTGY 組件：容納 /SGMK9VXOZK 的；)RUIQ 組件：用來計時，讓 YVXOZK 隨即移動；9UTJ 組件：地鼠時產(chǎn)生；(ZZUT 組件：開始新；6XUIKJXKY：用來實現(xiàn)一系列的指令，可以重復調(diào)用，如移動地鼠；產(chǎn)生隨機數(shù)；使用加法塊（ ）及減法塊（ ）。準備開始登陸 VV /TKTZUX，開始新項目“3URK3GYN ”，將屏幕標題（ZOZRK）設為“打地鼠”，并連接到測試設備。SURK VTM。方法：控制鍵 單擊（3GI）或單擊右地鼠

4、鍵（=OTJUY）并選擇“另存為”或類似選項。成功后，在設計器組件列表下方的 3KJOG 部分，單擊“;VRUGJ LORK”，找到剛的文件 SURK VTM 并上傳到 VV /TKTZUX 中。設計組件創(chuàng)建“打地鼠”需要以下組件：)GTGY 組件：用來限定中地鼠的活動區(qū)域；/SGMK9VXOZK 組件：用來顯示地鼠，隨機移動，并具有觸感；9UTJ 組件：當?shù)厥蟊挥|摸到時，發(fā)出；2GHKR 組件：用來顯示“命中： ”、“失敗： ”以及命中、失敗的次數(shù)；HorizontalArrangements 組件：用來放置 Label 組件，使組件的布局合理；Button 組件：用來將命中及失敗次數(shù)歸零（

5、重新開始Clock 組件：使地鼠每秒鐘隨機移動一次。）；表3-1顯示了應用中用到的全部組件。表3- 1 “打地鼠”應用中的全部組件列表設置活動組件本節(jié)將設置中所需的活動組件，下節(jié)再來設置顯示分數(shù)的組件。找到 Palette-Drawing and Animation-Canvas 組件，拖入預覽窗口，采用其默認名稱 Canvas1，設置 Width 屬性為“Fill組件類型組件種類命名作用CanvasDrawing and AnimationCanvas1ImageSprite 的容器ImageSpriteDrawing and AnimationMole用戶點擊的目標ButtonUserer

6、faceResetButton重新設置得分ClockUsererfaceClock1控制地鼠的移動頻率SoundMediaSound1當?shù)厥蟊粫rLabelUsererfaceHitsLabel顯示文字“： ”LabelUsererfaceHitsCountLabel顯示次數(shù)HorizontalArrangementLayoutHorizontalArrangement1放置HitsLabel 及HitsCountLabelLabelUsererfaceMissesLabel顯示文字“失敗： ”LabelUsererfaceMissesCountLabel顯示失敗次數(shù)HorizontalArra

7、ngementLayoutHorizontalArrangement2放置 MissesLabel 及 MissesCountLabelVGXKTZ”，即與屏幕等寬，設置 .KOMNZ 屬性為 像素；找到 6GRKZZK $*XGOTM GTJ TOSGZOUT $/SGMK9VXOZK，將/SGMK9VXOZK 組件拖入到 )GTGY 中的任何位置，在組件列表底部單擊 XKTGSK，改名為“3URK”，設置其 6OIZXK 屬性為之前上傳的SURK VTM；找到 6GRKZZK $;YKXKXLGIK $(ZZUT，拖動 (ZZUT 組件放在)GTGY 下面，改名為“8KYKZ(ZZUT”，

8、并設置其 :KZ 屬性為“重新開始”；找到 6GRKZZK $;YKXKXLGIK $)RUIQ，拖入 )RUIQ 組件，它將落在預覽窗口下方的“非組件”區(qū)域；找到 6GRKZZK $3KJOG $9UTJ，拖入 9UTJ 組件，它也將落在“非可視組件”區(qū)域?，F(xiàn)在組件設計器看起來應該如圖 （地鼠的位置有可能不同）。圖3-2 組件設計器視圖中的所有“活動”組件布置Label 組件現(xiàn)在設置顯示用戶得分的組件，即，顯示命中與失敗次數(shù)的組件。找到 Palette-Layout-HorizontalArrangement，拖動組件放在“重新啟動”按鈕的下方，保留 HorizontalArrangemen

9、t1的默認名稱；從 6GRKZZK $;YKXKXLGIK中拖 動兩個 2GHKR組件 到.UXOUTZGRXXGTMKSKTZ 中；將左側(cè) 2GHKR 改名為 .OZY2GHKR，設置其 :KZ 屬性為“命中： ”（確保冒號后有一個空格）；將右側(cè) 2GHKR 改名為 .OZY)UTZ2GHKR，設置其 :KZ 屬性為“ ”；拖 入 第 二 個 .UXOUTZGRXXGTMKSKTZ ， 將 其 放 在.UXOUTZGRXXGTMKSKTZ 下面；將兩個 2GHKR 拖放在 .UXOUTZGRXXGTMKSKTZ 中；左側(cè) 2GHKR 改名為 3OYYKY2GHKR，設置其 :KZ 屬性為“失

10、?。?”（確保冒號后有一個空格）；右側(cè) 2GHKR 改名為 3OYYKY)UTZ2GHKR，設置其 :KZ 屬性為“ ”。你的屏幕看起來如圖 。圖3-3 組件設計器視圖中“打地鼠”應用的所有組件為組件添加行為組件已經(jīng)創(chuàng)建完成，下面切換到塊編輯器來實現(xiàn)程序的行為。設置的目標：讓地鼠每秒鐘在 Canvas1上隨機移動一次；用戶拍打這只隨機移動的地鼠，應用顯示用戶命中或失敗的次數(shù)（注：建議用手指而不是木槌拍打！）；按下“重新啟動”按鈕命中及失敗次數(shù)歸零。移動地鼠U6XX 中的在迄今為止完成的應用中，曾經(jīng)調(diào)用過內(nèi)置過程 ，如9UTJ OHXGZK（）。假如 VV /TKTZUX 中有一個內(nèi)置過程，可以

11、將 /SGMK9VXOZK 移動到屏幕上的某個隨機位置，那豈不是很好？可惜沒有，不過可以自己來創(chuàng)建過程！就像內(nèi)置過程一樣，自己創(chuàng)建的過程會顯示在 6XUIKJXKY 抽屜中，需要時可以隨時調(diào)用它。具體來說，創(chuàng)建一個名為 3UK3URK 的過程，讓地鼠在屏幕上移動到開始時調(diào)用一次 3UK3URK 過程，當用戶成功地某個隨機位置。點擊到地鼠后，每秒鐘執(zhí)行一次該過程。創(chuàng)建 3UK3URK 過程要理解地鼠如何移動，需要了解 TJXUOJ 的圖形定位機制。)GTGY（以及 9IXKKT）可以看作是由 （水平）坐標和 _（垂直）坐標織成的網(wǎng)格，其左上角的（ _）坐標為（ ）。 坐標向右為增大， _ 坐標向

12、下為增大，如圖 所示。一個 /SGMK9VXOZK 的 、_ 屬性表示它左上角的位置，因此當?shù)厥笪挥谄聊蛔笊辖菚r，他的 和_ 值都是 。圖3-4 屏幕上 Mole 的位置坐標、高度和寬度信息，x 坐標及寬度以藍色表示，y 坐標和高度以橙色表示為了將地鼠的移動限制在屏幕之內(nèi)，要確定 x 和y 的最大值，這要用到地鼠 Mole 和畫布Canvas1的Width（寬度）及 Height（高度）屬性。（地鼠的 Width 和 Height 屬性值與上傳的的大小相同，而在創(chuàng)建Canvas1時，你設置的高度是300像素，寬度為“Fill parent”，即等的寬度是36像素，于它的“父”容器屏幕的寬度。）

13、如果地鼠畫布寬度是200像素，那么 Mole 的 x 坐標最低可以為0（靠近屏幕左側(cè)邊緣），而最大為164（200 - 36，或 Canvas1.Width - Mole.Width），這樣才能保證 Mole 不超出屏幕的右側(cè)邊緣。同樣，Mole 頂部的 y 坐標范圍可從0到Canvas1.Height - Mole.Height。圖3-5顯示了創(chuàng)建的 MoveMole 過程，圖中標有詳細注釋（可以有選擇地添加到過程中）。為了隨機地放置 Mole，x 坐標要在0到Canvas1.Width - Mole.Width的范圍內(nèi)選擇，同樣，y 坐標要在0到Canvas1.Height - Mole.

14、Height的范圍內(nèi)。使用 Math 抽屜里的內(nèi)置過程 randomeger 生成一個隨機整數(shù)，將“from”參數(shù)從改默的1改為0，同樣修改“to”參數(shù)，如圖3-5所示。圖3-5A MoveMole 過程，用于將 Mole 放在一個隨機的位置上按如下步驟創(chuàng)建過程：找到 Procedures：單擊塊編輯器中的 Procedures 抽屜；得到 to procedure：在 Procedures 抽屜中點擊 to procedure塊（不帶 result 的 to procedure）；設置過程名稱：單擊塊中的 文字 “procedure” 并輸 入“MoveMole”；移動 Mole：單擊 Mo

15、le 抽屜，將 call Mole.MoveTo 塊拖到procedure 塊中“do”的右側(cè)；注意：還需要提供 x 和y 的坐標；設定Mole 的x 坐標：如前所述，x 坐標范圍在0與Canvas1.Width3URK =OJZN 之間：點擊 3GZN 抽屜；拖出 XGTJUSKMKX LXUS 塊，將左側(cè)插頭（突起）IGRR 3URK 3UK:U 塊的“”插槽；點選LXUS 之后的數(shù)字 并輸入 ；丟棄數(shù)字 ：點擊該塊，再按鍵盤上的 *KR 或*KRKZK 鍵，或直接拖入箱；點擊 3GZN 抽屜，將一個減法塊（ ）拖入 ZU 插槽；點 擊 )GTGY 抽 屜 ， 向 下 滾 動 直 到 看

16、見)GTGY (GIQMXUTJ)URUX ，將其拖入到減法塊“ ”的左側(cè)，然后從 (GIQMXUTJ)URUX 所在的下拉菜單中選擇 =OJZN選項；同樣，點擊 3URK抽屜并拖入 3URK +TGHRKJ 塊，然后從+TGHRKJ 塊所在的下拉菜單中選擇 =OJZN 選項，并將它到“ ”右側(cè)的插槽中；按類似步驟設定 _ 坐標，應該是一個從 到 )GTGY .KOMNZ 3URK .KOMNZ 的隨機整數(shù)；對圖 （行內(nèi)輸入）或 (（外展輸入）檢查操作結(jié)果。XGTJUSKMKX LXUS ZU 塊的“KZKXTGR OTVZY”（外展輸入）XGTJUS 塊，選擇列表第三項 KZKXTGR OT

17、VZY；如方式：XGTJUS 塊，選擇 OTROTK OTVZY。果想恢復行內(nèi)輸入，圖3-5B MoveMole 過程，用于將 Mole 放在一個隨機的位置上在應用啟動時調(diào)用MoveMole 過程已經(jīng)完成了 MoveMole 過程，現(xiàn)在該調(diào)用它了。對于程序員來說，最熟悉的事情就是在應用啟動的同時執(zhí)行某些指令，塊 Screen1.Initialize就是專為這個目的而設計的：點擊 Screen1抽屜，并拖出 Screen1.Initialize 塊；單擊 Procedures 抽屜，你會看到一個 call MoveMole 塊（這很有 趣 ： 你 自 己 創(chuàng) 建 了 一 個 新 塊 ， 不 是

18、嗎 ?! ）。 把 它 拖 入Screen1.Initialize，如圖3-6所示。圖3-6 在應用啟動時調(diào)用 MoveMole 過程每秒鐘調(diào)用一次MoveMole 過程要讓地鼠每一秒移動一次，需要用到 Clock 組件。設置 Clock1的Timererval 屬性為其默認值1000（毫秒），即1秒，稱每秒一次的計時為計時器的心跳。這意味著，在 Clock1.Timer 塊中，無論設定什么動作，它都會隨著計時器的心跳，每秒鐘執(zhí)行一次。以下是具體設置：單擊 Clock1抽屜，并拖出 Clock1.Timer；單擊Procedures 抽屜，將 call MoveMole 塊拖到Clock1.T

19、imer塊中，如圖3-7所示。圖3-7計時器開始計時后，每次心跳（每秒）都會調(diào)用一次 MoveMole 過程如果你覺得心跳得太快或太慢，可以在組件設計器中改變 Clock1的Timererval 屬性，來增加或減小地鼠的移動頻率。成績創(chuàng)建了兩個 Label ：初始值為0 的 HitsCountsLabel 和剛才MissesCountsLabel，希望以此來用戶的成績：當用戶命中 Mole一次，或失敗一次（直接拍打到屏幕）時，對應 Label 中的數(shù)字增加，為此要用到 Canvas1.Touched 塊，它表示 Canvas 被觸摸到，并了觸摸點的 x 和 y 坐標（不必關心），以及是否碰到了

20、 sprite（這關心的）。圖3-8顯示了即將創(chuàng)建的代碼。是圖 3-8 觸碰到 Canvas1 時， 讓命中（ HitsCountLabel ）或失敗（MissesCountLabel）次數(shù)遞增圖3-8可以理解為：當觸碰到 canvas 時，檢查 sprite 是否也被碰到。應用中只有一個 sprite ，即 Mole ，如果碰到 Mole ，則 HitsCountLabel.Text 中的數(shù)字+1，否則，MissesCountLabel.Text中的數(shù)字+1（如果沒碰到 sprite，則 touchedSprite 的值為 false ）。下面介紹如何創(chuàng)建這些塊：點擊 Canvas1抽屜，并

21、拖出 Canvas1.Touched；單擊 Control 抽屜，拖出 Ifelse 塊（先拖入 if 塊，然后為其添加else 塊：點擊 if 左邊的藍色方塊，在彈出框中將 else 塊拖入if 塊），并放入Canvas1.Touched 塊中； 從 Variables 抽屜中拖出 get 塊，放入 ifelse 的 if 插槽內(nèi)，選擇下拉菜單中的 touchedSprite 選項；或者將鼠標懸停在 when Canvas.Touched 塊的參數(shù) touchedSprite 上，從中獲取 gettouchedSprite 塊；的設想，如果 if 檢測成功（即 Mole 被觸摸到），則按照H

22、itsCountLabel.Text 遞增：從HitsCountLabel 抽屜里拖出 set HitsCountLabel.Textto 塊并放入“then”的右邊；點擊 Math 抽屜，拖出一個加號（+），將其放在“to”插槽中；點擊 HitsCountLabel 抽屜，拖動 HitsCountLabel.Text塊到“+”的左邊；點擊 Math 抽屜，并拖動一個“0”塊到“+”的右邊，將0改為1 ；在ifelse 塊的“else”部分，對MissesCountLabel 塊重復步驟4。測試：測試你的新代碼：在設備上觸摸 Canvas，命中或錯過地鼠，看看分數(shù)變化。過程抽象計算機科學的重要

23、之一， 就是命名然后調(diào)用一組指令（ 如MoveMole），這種能力被稱為過程抽象。之所以叫做“抽象”，是因為過程的調(diào)用者（在實際項目中，很有可能不是過程的開發(fā)者）只需要知道過程的功能（如移動地鼠），而不需要知道過程的實現(xiàn)方法（生成兩個隨機整數(shù)）。如果沒有過程抽象，不可能實現(xiàn)那些大型程序，因為它們的代碼量太大，對個人來說是力所不及的，這一點與現(xiàn)實世界中的勞動分工相類似。例如，不同的工程師設計出汽車的不同，沒有人了解所有的細節(jié)，而只需要了解接口（例如，踩下制動踏板把車停下來），而無需了解如何實現(xiàn)這些接口。與和粘貼代碼相比，過程抽象的優(yōu)勢在于：由于過程的代碼獨立于其它部分的程序，因此更易于對過程的測

24、試；如果代碼中有錯誤，只需要對局部進行修改；如果需要改變過程的實現(xiàn) （或功能），如確保地鼠不連續(xù)出現(xiàn)在同一個位置，只需要修改一處的代碼；可以將過程匯集到一個程序庫中，以便在不同的程序中使用。（遺憾的是VV /TKTZUX 暫時不支持這項功能。）將大塊代碼拆分成代碼片段，有助于對應用做深入剖析，并加以實現(xiàn)（“分而治之”）。給過程一個有意義名，將有助于提高代碼的可讀性，更易被別人（或一個月后的自己）讀懂；在后面的章節(jié)中，還將學到過程更加強大的功能：添加參數(shù)，提供返回值，以及調(diào)用過程本身。有關內(nèi)容請參見第 章。重置分數(shù)朋友看到你玩 3URK3GYN，他可能也想試試身手，所以最好能讓成績歸零。根據(jù)前面

25、學過的內(nèi)容，不經(jīng)提示你也有能力把它做出來。閱讀之前動腦筋試試看。要在 8KYKZ(ZZUT )ROIQ 塊中設置 .OZY)UTZ2GHKR :KZ 和MissesCountLabel.Text 的值為0。如圖3-9所示。圖3-9 按下 Reset 按命中次數(shù)（HitsCountLabel）和失敗次數(shù)（MissesCountLabel）歸零此處提供一個技巧，來快速建立 ResetButton.Click 的事件處理程序：在工作區(qū)直接輸入0并回車，將生成數(shù)字塊0，等同于從 Math 抽屜中拖出。（這種輸入方式對其他塊也同樣有效。）測試：開始，嘗試多次命中及錯過地鼠，然后按下“重新啟動”按鈕。添加觸摸地鼠行為希望在觸摸到地鼠時，設備能夠振動，這要用到 Sound1.Vibrate塊。如圖3-10所示。圖3-10 碰到地鼠時讓設備短暫振動（100毫秒）測試：當你在設備上實際觸摸到地鼠時，看看振動