App Inventor 2體驗： 「勇闖鵲橋」動畫遊戲 靜宜大學資管系 楊子青

智慧型手機作業系統市場佔有率

iOS App開發環境：Xcode + Swift程式語言 (資管大三上：iOS APP實務設計 )

Android App開發環境：Android Studio + JAVA 程式語言 (資管大二下：行動應用軟體開發)

簡易的Android App雲端開發環境： MIT App Inventor (大三通識：創意APP實作)

Step 1 使用者介面設計

初步使用MIT App Inventor 開啟Google Chrome瀏覽器 進入MIT App Inventor 2官方網站 若需安裝，可連線：https://www.google.com/chrome/ 進入MIT App Inventor 2官方網站 http://ai2.appinventor.mit.edu/ 用Gmail帳號登入 (或申請一個新帳號)

建立專案：FlappyBird 上傳圖片資源檔

Screen1相關屬性設定 BackgroundImage： pu.jpg Title：飛鳥勇闖靜宜鵲橋(作者：靜宜資管楊子青) ShowStatusBar： 取消勾選 AppName：勇闖鵲橋 Icon： Bird.png

加入Button元件(命名為ButtonStart) Text: 遊戲開始 TextColor: Yellow BackgroundColor: None (沒有背景顏色) Width: fill parent

加入Label元件(命名為LabelScore) Text: 0 TextColor: Green BackgroundColor: None Width: fill parent TextAlignment: Center

加入動畫區(Canvas) Height及Width: fill parent BackgroundColor: None

加入3個圖形動畫(ImageSprite) Picture屬性：選擇對應的圖檔 Bird Height及Width: 40 pixels Pillar1及Pillar2 Height: 120 pixels; Width: 72 pixels

程式的事件

寫點程式看看 宣告全域變數

將APP程式下載至行動裝置(方法1) 產生QR code 下載至行動裝置及進行安裝 (設定→安全性→未知的來源需打勾)

備註 可以用Line或掃瞄QR code軟體下載安裝 如果掃瞄後，系統若用Chrome下載，但是直接閃過，可以嘗試： Android 6以上的裝置，需開放「儲存」權限： 設定→應用程式→Chrome →權限→將「儲存」開啟 把Chrome的所有視窗均關閉

將APP程式下載至行動裝置(方法2) 將APP程式轉成apk檔 使用USB連接線連接行動裝置，或是用gmail寄信 方式給自己或朋友，將檔案轉存至行動裝置，再 進行安裝

如果沒有Android裝置，可裝模擬器 https://www.3cblog.idv.tw/2015/03/Android-on-Your-PC.html Bluestacks Genymotion… 夜神模擬器(NoxPlayer) 至搜尋引擎輸入NOX https://tw.bignox.com/

測試(Setting Up App Inventor 2)

Option Two: Emulator http://appinventor.mit.edu/explore/ai2/setup-emulator.html

Option Two: Emulator (1) Step 1. Install the App Inventor Setup Software 以Windows為例： http://appinventor.mit.edu/explore/ai2/windows.html 下載以下檔案，進行安裝 MIT_Appinventor_Tools_2.3.0.exe

Option Two: Emulator (2) Step 2. Launch aiStarter (Windows & Linux only)

Option Two: Emulator (3) Step 3. Connect to Emulator

模擬器執行結果(首次可能需要更新)

模擬器更新

重新模擬

Step 2 遊戲開始：初始設定動畫位置

Canvas座標

將飛鳥移到(0,0)的位置

將兩根石柱移到螢幕最右邊

動態決定兩根石柱的高度及位置 區 域 變 數 寫 法

隨機設定石柱位置及高度，改為副程式

程式收納及展開(按滑鼠右鍵)

Step 3 讓飛鳥下墜、拍打螢幕上升、 並可拖曳

ImageSprite的Heading與Speed屬性 indicates the direction in which the ImageSprite should move, in degrees. For example, 0 means due right, 90 means straight up, 180 means due left, and so on. Speed specifies how many pixels the ImageSprite should move whenever its Interval passes.

不同方向對應之Heading角度值 45 90 135 180 225 270 315

讓飛鳥往右下方下墜 補充：如果將飛鳥的z屬性，設得 比石柱大，例如改為2，當兩物件 相遇，可以疊在在石柱的上層

觸控Canvas，讓飛鳥上升

拖曳飛鳥，往左邊水平移動

Step 4 運用時鐘，讓兩根石柱右移

加入時鐘元件，設定觸發時間 先不計時 0.1秒

時間到時，讓石柱往右平移

Step 5 石柱若到達左邊，重新從右邊出現，分數加1

偵測是否遇到邊界 使用EdgeReached(number edge)事件 Event handler called when the sprite reaches an edge of the screen. The edge argument tells which edge (or corner) was reached, encoded as follows: north = 1 northeast = 2 east = 3 southeast = 4 south = -1 southwest = -2 west = -3 northwest = -4

石柱到達左邊，重新從右邊出現 (分數+1) 本段程式碼搬移，再刪除LongClick事件

Step 6 當飛鳥碰撞石柱或右邊界， 則遊戲結束

偵測是否發生碰撞

飛鳥碰撞或碰觸邊界，則遊戲結束

訊息通知元件

遊戲結束時停止動畫並顯示訊息 計時停止，石柱不再移動 讓飛鳥不再移動，也不能拖曳 下次再按「遊戲開始」，飛鳥不再移動？

遊戲開始時，讓飛鳥可以動作 ，

讓遊戲開始按鈕：隱藏/出現 ，