2014年3月11日 星期二

App Inventor 2 的範例程式 - 出氣筒(程式)

出氣筒是一個可以盡情發洩情緒的小遊戲。

遊戲內容:
玩家利用不斷點擊畫面來發洩情緒,並將圖片中的主角(此範例為皮老闆打敗。

本範例假設您已經完成了出氣筒(影像處理)的範例程式。



程式功能分析:

設計一個遊戲,每點擊三下圖片就會更換一次,依序換至最後一張(第五張)時加入音效。按再來一次的按鈕時,圖片會回到第一張且可繼續遊戲。

需求元件:


開發步驟:

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


步驟二:將圖片和音效匯入。在下方的媒體庫(Media)中,按上傳檔案(Upload File)分別上傳所有圖片及音效。


步驟三:調整版面。先取消Scrollable,再將AlignHorizontalAlignVertical都設定為Center


















步驟四:新增按鈕。到視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗中,接著到右邊的元件庫(Components)先點Button1一下,再點下面的重新命名(Rename)將它的名字改為image


















步驟五:放入圖片。請到右邊的屬性(Properties)面板上,將圖像(Image
)設為第一張圖片(1.jpg )。接著找到 Text 屬性,將方框中預設的文字清除。最後要調整圖片大小,將寬(Width)設為270pixels,長(Height)設為273pixels


















步驟六:再來一次按鈕設定。到視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,按住滑鼠不放將其拖曳至預覽(Viewer)中的按鈕下方,接著到右邊的元件庫(Components)先點Button1一下,再點下面的重新命名(Rename)將它的名字改為again。再來請到右邊的屬性(Properties)面板上,找到 Text 屬性,在方框中輸入再來一次


















步驟七:音效設置。到視窗左側的元件面板(Palette)中,點選媒體(Media)中的聲音(Sound)元件,按住滑鼠不放將其拖曳至預覽(Viewer)中,它會自動跑到最下方。接著到右邊的屬性(Properties)面板上,將來源(Source)設為Media中的.mp3檔案(waaa.mp3)


















接下來我們就可以開始編寫程式囉!請點擊右上方的Blocks切換到程式頁面。


步驟八:請在左側Blocks選單中點選Built-in下的Variables,在彈出的拼圖式程式區塊中選取 initialize global name to,置於預覽視窗中,並將"name "改為" i "















解釋:在步驟八中,設變數i (表示第i張圖)


步驟九:點選Math,選取0,卡入其中,並將"0 "改為" 1 "

解釋:在步驟九中,變數i (表示第i張圖)的起始值為1(一開始是第一張圖)


步驟十:請在左側Blocks選單中點選Variables,選取initialize global name to,並將" name "改為" click "。再點選Math,選取0,卡入其中。

 解釋:在步驟十中,為了計算點擊次數,需設定Click且起始值為0


步驟十一:請在左側Blocks選單中點選Screen1下的image,選取when image.Click do














解釋:在步驟十一中,設定點擊圖片時會發生的事件


步驟十二:請在左側Blocks選單中點選Built-in下的Variables,選取 set to,並將選項點開設為" global click "。再點選Math,選取+,卡入其中。接著點選Variables,選取get,卡入+前,並將選項點開設為" global click "。最後點選Math,選取0,卡入+後,並將"0 "改為" 1 "








解釋:在步驟十二中,每點擊一次圖片,程式會在Click+1依此計算點擊次數


步驟十三:請在左側Blocks選單中點選Control,選取 if then。再點選Math,選取=,卡在if右方。接著點選Variables,選取get,卡入=前,並將選項點開設為"global click "。最後點選Math,選取0,卡入=後,並將"0 "改為"3"













步驟十四:請在左側Blocks選單中點選Variables,選取set to,並將選項點開設為"global i "。再點選Math,選取+,卡入其中。接著點選Variables,選取get,卡入+前,並將選項點開設為" global i "。最後點選Math,選取0,卡入+後,並將"0 "改為"1"















步驟十五:請在左側Blocks選單中點選Variables,選取set to,並將選項點開設為"global click "。再點選Math,選取0,卡入其中。














解釋:在步驟十五中,當程式計算點擊次數Click=3時,圖片會換成下一張,並把Click歸零。


步驟十六:請在左側Blocks選單中點選Control,選取 if then。再點選Math,選取=,卡在if右方。接著點選Variables,選取get,卡入=前,並將選項點開設為"global i "。最後點選Math,選取0,卡入=後,並將"0 "改為"2"




















步驟十七:請在左側Blocks選單中點選Screen1下的image,選取set image.Image to。再點選Built-in下的Text,選取"  ",卡入其中,並輸入"2.jpg "




















解釋:在步驟十七中,設定當i=2時,圖片更換為2.jpg


步驟十八:依照步驟十七,利用複製(control+C)和貼上(control+V)的方式,完成圖片更換為3.jpg4.jpg5.jpg的程式拼圖。


































步驟十九:請在左側Blocks選單中點選Screen1下的image,選取set image.Enabled to。再點選Built-in下的Logic,選取false,卡入其中。


































解釋:在步驟十九中,圖片更換至第五張(最後一張)時,即使玩家繼續點擊也不能再做更換圖片的動作,因此要使程式讓圖片停在最後一張。



步驟二十:請在左側Blocks選單中點選Screen1下的Sound1,選取call Sound1 .Play



































解釋:在步驟二十中,當圖片更換至第五張(最後一張)時,加入音效。


步驟二十一:請在左側Blocks選單中點選Screen1下的again,選取when again .Click do
















解釋:在步驟二十一中,設定點擊再來一次的按鈕時會發生的事件


步驟二十二:請在左側Blocks選單中點選Built-in下的Variables,選取 set to,並將選項點開設為" global i "。再點選Math,選取0,卡入其中,並將"0 "改為" 1 "














步驟二十三:請在左側Blocks選單中點選Screen1下的image,選取set image.Image to。再點選Built-in下的Text,選取"  ",卡入其中,並輸入"1.jpg"











解釋:在步驟二十三中,點擊再來一次的按鈕之後,圖片回到第一張(1.jpg)


步驟二十四:請在左側Blocks選單中點選Screen1下的image,選取set image.Enabled to。再點選Built-in下的Logic,選取ture,卡入其中。













解釋:在步驟二十四中,當圖片回到第一張時,要使點擊能繼續才能再做更換圖片的動作。


完整的程式如下:





















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

3 則留言:

  1. 感謝基隆商工教我們APP軟體謝謝你們的諄諄教導 希望下次榮國中可在跟你們合作

    回覆刪除
  2. 感謝基隆商工教我們APP軟體謝謝你們的諄諄教導 希望下次榮國中可在跟你們合作

    回覆刪除