2014年2月7日 星期五

App Inventor 2 的範例程式 - MoleMash

MoleMash為一個簡單的動畫遊戲。
遊戲內容:
鼴鼠會隨機彈跳在遊戲區域裡,而玩家在鼴鼠跳到別的地方前,點擊它將會獲得分數。

原始範例: MoleMash from MIT


本範例假設您已經完成了HelloPurrPaintPot的範例程式。

程式功能分析:
設計一個遊戲,讓鼴鼠每半秒移動一次。當它被觸摸時,分數會加一分,並且手機會發生震動。按下Reset,得分會歸零。

需求元件:
  • 鼴鼠圖片mole.png (按滑鼠右鍵另存影像連結)

開發步驟:

步驟一:請先新增一個名稱為「MoleMash」的專案,按下 OK 後,即可進入 App Inventor Designer 視窗。(註:專案名稱中可用底線但不能有空格或其它特殊字元)












步驟二:請在視窗左側的元件面板(Palette)中,點選繪圖和動畫(Drawing and Animation)中的畫布(Canvas)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗,並按下重新命名(Rename),將其命為“MyCanvas” (註:名稱中可用底線但不能有空格或其它特殊字元)













步驟三:請在視窗右側的屬性(Properties)中,點選寬度(Width),將其設置為300像素(pixels);同樣的,高度(Height)也設置為300像素(pixels),這樣就完成鼴鼠的移動區域之設置了。














步驟四:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的標籤(Label)元件,將其拖曳至MyCanvas之下面,將其命名為“ScoreLabel
在視窗右側的屬性(Properties)中,點選文字(Text),將其內文由“Text for Label1改成“Score: ---”,這樣就完成顯示分數的元件了。













步驟五:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,將其拖曳至ScoreLabel之下面,將其命名為“ResetButton
在視窗右側的屬性(Properties)中,點選文字(Text),將其內文由“Text for Button1改成“Reset,這樣就完成分數歸零的按鈕元件了。













步驟六:請在視窗左側的元件面板(Palette)中,點選媒體(Media)中的聲音(Sound)元件,將其拖曳至中間的畫面預覽(Viewer)視窗,將其命名為“Noise”,這樣就完成讓手機震動的元件了。(註:有點類似在HelloPurr的範例程式中,讓貓發出叫聲的方法)














步驟七:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的時鐘(Clock)元件,將其拖曳至中間的畫面預覽(Viewer)視窗,將其命名為“MoleTimer
在視窗右側的屬性(Properties)中,點選定時器的間隔時間(TimerInterval),將其設為500毫秒讓鼴鼠每半秒移動一次,並確認定時器啟用(TimerEnabled)有勾選。這樣就完成鼴鼠固定時間跳出的設定了。
















要添加移動的鼴鼠,所以我們要使用Image SpriteSprites是可以在屏幕裡的畫布上移動之圖片,每個Sprite都有速度(Speed)和方向(Heading),也有時間間隔(Interval)去決定Sprite的移動。Sprite還可以檢測到被觸碰。

步驟八:請在視窗左側的元件面板(Palette)中,點選繪圖和動畫(Drawing and Animation)中的(ImageSprite)元件,將其拖曳至中間的MyCanvas,將其命名為“Mole”













步驟九:在視窗右側的屬性(Properties)中,調整屬性。


圖片(Picture):使用 mole.png

啟用(Enabled):有勾選

時間間隔(Interval)500 
(這裡不太重要,因為鼴鼠的速度為零,本身不會動)

方向(Heading)0
(這裡不太重要,因為鼴鼠的速度為零,本身不會動)

速度(Speed)0.0

可看見(Visible):有勾選

寬度(Width)Automatic

高度(Height)Automatic


定義兩個Procedures
  •  MoveMole:移動鼴鼠sprite,在畫布上有新的隨機位置。
  • UpdateScore:顯示得分,利用改變ScoreLabel的文字。


MoveMole
隨機設置鼴鼠的水平位置與垂直位置。

步驟十:請在左側Blocks選單中點選Built-in下的Procedures,在彈出的拼圖式程式區塊中選取 to procedure do,置於預覽視窗中。並將" procedure "改為" MoveMole "













步驟十一:請在左側Blocks選單中點選Mole,在彈出的拼圖式程式區塊中選取set Mole.x to,並將其卡入to MoveMole do中。再點選Math,選取相乘、相減和randomfraction。再點選MyCanvas,選取MyCanvas.Width,再點選Mole,選取Mole.Width。分別卡入如圖所示。





步驟十二:請在左側Blocks選單中點選Mole,在彈出的拼圖式程式區塊中選取set Mole.y to,並將其卡入to MoveMole do中。再點選Math,選取相乘、相減和randomfraction。再點選MyCanvas,選取MyCanvas.Height,再點選Mole,選取Mole.Height。分別卡入如圖所示。





解釋:
1. randomfraction 隨機分數,其值界於01之間。
2.將鼴鼠的水平位置(set Mole.X to)設在畫布的寬度(MyCanvas.Width)減鼴鼠的寬度(Mole.Width)再乘上隨機分數(randomfraction)
3.鼴鼠的垂直位置也是同樣道理。


UpdateScore
將分數先歸零,再設置UpdateScore來更新分數值。

步驟十三:請在左側Blocks選單中點選Variables,在彈出的拼圖式程式區塊中選取initialize global name to,置於預覽視窗中。並將" name "改為" score "。再點選Math,選取0,卡入其中。







步驟十四:請在左側Blocks選單中點選Procedures,選取to procedure do,並將" procedure "改為" UpdateScore "。點選ScoreLabel,選取set ScoreLabel.Text to。點選Text,選取join。點選Text,選取" ",並將"  "改為" Score: "。點選Variables,選取get,並拉下選單選global score

(當更新分數時,會由" Score:-- "變成" Score: + 分數")









添加定時器
這個步驟將會讓鼴鼠持續動作。

步驟十五:請在左側Blocks選單中點選MoleTimer,選取when MoleTimer.Timer do。點選Procedures,選取call MoveMole,將其卡入when MoleTimer.Timer do中。












添加觸碰鼴鼠處理器
讓鼴鼠被觸碰會產生震動且獲得分數。


步驟十六:請在左側Blocks選單中點選Mole,選取when Mole.Touched x y do,再點選Variables,選取set_to,並拉下選單選global score,再點選Math,選取_+_,再點選Variables,選取get_,並拉下選單選global score,再點選Math,選取0,並將" 0 "改成" 1 ",將這些卡入如圖,這樣就會在鼴鼠被觸碰時,讓分數增加了。






步驟十七:請在左側Blocks選單中點選Noise選取call Noise.Vibrate millisecs,再點選Math,選取0,並將" 0 "改成" 100 ",將這些卡入如圖,這樣鼴鼠被觸碰時,手機就會震動1/10(100毫秒)了。












步驟十八:請在左側Blocks選單中點選Procedures,選取call UpdateScore(讓分數在鼴鼠被觸碰時,會更新),和call MoveMole(讓鼴鼠被觸碰後,鼴鼠可以馬上移動,而不用等待計時器)














步驟十九:請在左側Blocks選單中點選ResetButton,選取when ResetButton.Click do,點選Variables,選取set_to,並拉下選單選global score,再點選Math,選取0,點選Procedures,選取call UpdateScore(當按下Reset按鈕時,分數會歸零)












完整的程式如下:













恭喜完成了此次的範例程式。

2 則留言: