Mole Mash 地鼠遊戲

MoleMash為一個簡單的動畫遊戲。

遊戲內容：

鼴鼠會隨機彈跳在遊戲區域裡，而玩家在鼴鼠跳到別的地方前，點擊它將會獲得分數。

原始範例: MoleMash from MIT

本範例假設您已經完成了HelloPurr和PaintPot的範例程式。

程式功能分析：

設計一個遊戲，讓鼴鼠每半秒移動一次。當它被觸摸時，分數會加一分，並且手機會發生震動。按下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　隨機分數，其值界於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選單中點選Procedures，選取call UpdateScore(讓分數在鼴鼠被觸碰時，會更新)，和call MoveMole(讓鼴鼠被觸碰後，鼴鼠可以馬上移動，而不用等待計時器)。

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

完整的程式如下：

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