MoleMash為一個簡單的動畫遊戲。
遊戲內容:
鼴鼠會隨機彈跳在遊戲區域裡,而玩家在鼴鼠跳到別的地方前,點擊它將會獲得分數。
程式功能分析:
設計一個遊戲,讓鼴鼠每半秒移動一次。當它被觸摸時,分數會加一分,並且手機會發生震動。按下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”。
啟用(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 隨機分數,其值界於0和1之間。
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選單中點選ResetButton,選取when ResetButton.Click do,點選Variables,選取set_to,並拉下選單選global score,再點選Math,選取0,點選Procedures,選取call UpdateScore。(當按下Reset按鈕時,分數會歸零)
完整的程式如下:
恭喜完成了此次的範例程式。
步驟十八:請在左側Blocks選單中點選Procedures,選取call UpdateScore(讓分數在鼴鼠被觸碰時,會更新),和call MoveMole(讓鼴鼠被觸碰後,鼴鼠可以馬上移動,而不用等待計時器)。
步驟十九:請在左側Blocks選單中點選ResetButton,選取when ResetButton.Click do,點選Variables,選取set_to,並拉下選單選global score,再點選Math,選取0,點選Procedures,選取call UpdateScore。(當按下Reset按鈕時,分數會歸零)
完整的程式如下:
恭喜完成了此次的範例程式。
沒有留言:
張貼留言