Microsoft Word - AppInventor快速實作APP講義_台中家商.docx

Size: px

Start display at page:

Download "Microsoft Word - AppInventor快速實作APP講義_台中家商.docx"

袈糊韦
5 years ago
Views:

1 研習日期 :102 年 4 月 25 日星期四研習地點 : 國立臺中家商多媒體電腦教室講師 : 黃信溢邱文諒信箱 :e happy@e happy.com.tw

2 1 一打造 App Inventor 開發環境複製檔案若是 32 位元系統, 複製 <AppInventor_32 > 資料夾到 C 磁碟機根目錄 ; 若是 64 位元系統, 複製 <AppInventor_64> 資料夾到 C 磁碟機根目錄安裝 Chrome 瀏覽器在瀏覽器網址列輸入下載及安裝 Chrome 瀏覽器 JDK 安裝檢查 JDK 是否存在 :<C:\Program Files\Java> 是否有 <jre6> 或 <jre7> 若無, 執行 <AppInventor_32\jdk-7u3-windows-i586.exe> 或 <AppInventor_64\jdk-7-windows-x64.exe> 安裝 JDK App Inventor Java 驗證在瀏覽器中輸入出現 Your browser appears to be configured properly. 表示通過初步驗證按 Launch 鈕按保留鈕在 <C:\Users\ 電腦名稱 \Downloads\notepad.jnlp> 按滑鼠左鍵兩下出現 Notepad 文字編輯軟體安裝 App Inventor 套件在 <C:\AppInventor_32\appinventor_setup_installer_v_1_2.exe> 上按滑鼠左鍵兩下登入 App Inventor 管理頁面在瀏覽器中輸入以 Google 帳號登入建立專案按 New 鈕輸入專案名稱後按 OK 鈕 ( 名稱只能使用大小寫字母數字及 _ 符號, 而且名稱的第一個字元必須是大小寫字母 ) 複製專案按 Save As 鈕輸入專案名稱後按 OK 鈕下載原始檔按 More Actions 鈕, 於下拉式選單中點選 Download Source 下載檔案置於 <C:\ 使用者 \ 電腦名稱 \Downloads>, 檔名為 < 專案名稱.zip>

3 2 上傳原始檔按 More Actions 鈕, 於下拉式選單中點選 Upload Source 按選擇檔案鈕選取要上傳的專案壓縮檔, 然後按 OK 鈕移除專案勾選要移除專案左方的核選方塊按 Delete 鈕於確認對話方塊中按確定鈕加入 Label 及 Button 元件拖曳 Label 元件到介面設計區修改名稱 :LabelShow 修改 Text FontBold FontSize TextColor 等屬性拖曳 Button 元件到介面設計區修改名稱 :ButtonShow 修改各種屬性開啟拼塊設計師按 Open the Blocks Editor 鈕按左下角保留鈕建立拼塊建立 Button 元件的 Click 事件拼塊建立 Label 元件的設定 Text 屬性拼塊開啟模擬器按 New emulator 鈕說明頁面按 OK 鈕出現鎖頭圖示時, 向右拖曳鎖頭以解鎖在模擬器中執行應用程式按 Connect to Device 鈕點選 emulator-5554 就開始執行應用程式在實機中執行應用程式改變手機應用程式設定 : 執行設定 / 安全性, 勾選未知的來源選項, 再執行設定 / 開發人員選項, 勾選 USB 除錯中保持喚醒及允許模擬位置手機以 USB 傳輸線與電腦連接按 Connect to Device 鈕, 點按剛連線的手機就開始執行應用程式

4 3 二專題設計 : 終極密碼預覽結果上傳 <C:\AppInventor_32\Ex\guessNum\guessNum_all.zip> 專案開啟拼塊設計師執行建立專案按 New 鈕專案名稱輸入 guessnum 後按 OK 鈕應用程式標題設定 Screen1 的 Title 屬性值為終極密碼建立輸入文字區拖曳 Screen Arrangement/HorizontalArrangement 到介面設計區設定 Width 屬性值為 Fill parent 拖曳 Basic/Label 到 HorizontalArrangement1 中設定 Text 屬性值為輸入數字 (1-99): 拖曳 Basic/TextBox 到 Label1 右方移除 Text 及 Hint 屬性值建立按鈕區拖曳 Screen Arrangement/HorizontalArrangement 到 HorizontalArrangement1 下方設定 Width 屬性值為 Fill parent 拖曳 Basic/Button 到 HorizontalArrangement2 中修改元件名稱為 ButtonGuess 設定 Text 屬性值為猜數字拖曳 Basic/Button 到 ButtonGuess 右方修改元件名稱為 ButtonRestart 設定 Text 屬性值為重新開始設定 Visible 屬性值為 hidden 核選 Display hidden components in View 拖曳 Other stuff/notifier 到介面設計區 ( 操作到此為 guessnum_copy1 ) 建立變數建立 Definition/variable 拼塊, 變數名稱改為 answer 建立 Math/123 拼塊, 數值改為 0 以亂數建立解答建立 Screen1 元件的 Initialize 事件拼塊建立 My Definitions/set answer to 拼塊建立 Math/random integer 拼塊建立 Math/123 拼塊, 數值改為 1 建立 Math/123 拼塊, 數值改為 99

5 4 建立猜數字按鈕事件 (1) 建立 ButtonGuess 元件的 Click 事件拼塊 (2) 建立 Control/ifelse 拼塊 (3) 建立 Math/not = 拼塊建立 TextBox1.Text 拼塊建立 My Definitions/ answer 拼塊 (4) 建立 Control/ifelse 拼塊 (5) 複製步驟 (3) 拼塊將 not = 改為 > (6) 建立 Notifier1.ShowMessageDialog 拼塊建立 Text/text 拼塊, 修改 text 為 Too Greater! 建立 Text/text 拼塊, 修改 text 為 GREATER 建立 Text/text 拼塊, 修改 text 為 OK (7) 複製步驟 (6) 拼塊將 Greater 改為 Less, 將 GREATER 改為 LESS (8) 複製步驟 (6) 拼塊將 Too Greater 改為 Correct, 將 GREATER 改為 CONGRATULATIONS (9) 建立 set ButtonGuess.Visible to 拼塊建立 Logic/false 拼塊 (A) 建立 set ButtonRestart.Visible to 拼塊建立 Logic/true 拼塊 ( 操作到此為 guessnum_copy2 )

6 5 建立重新開始按鈕事件 (1) 建立 ButtonRestart 元件的 Click 事件拼塊 (2) 複製以亂數建立解答步驟中建立解答部分 (3) 建立 set ButtonGuess.Visible to 拼塊建立 Logic/true 拼塊 (4) 建立 set ButtonRestart.Visible to 拼塊建立 Logic/false 拼塊 (5) 建立 set TextBox1.Text to 拼塊建立 Text/text 拼塊, 除移 text

7 6

8 7 三專題設計 : 打雪怪遊戲設計專題說明上傳完成作品按 More Actions 鈕, 於下拉式選單中點選 Upload Source 按選擇檔案鈕選取要上傳的專案壓縮檔 <MouseGame_Demo.zip>, 然後按 OK 鈕專題實作上傳半完成作品按 More Actions 鈕, 於下拉式選單中點選 Upload Source 按選擇檔案鈕選取要上傳的專案壓縮檔 <MouseGame_Ex.zip>, 然後按 OK 鈕介面配置

8 使用元件及其重要屬性元件類別名稱屬性說明 ImageSprite ImageSpritePlay Picture:start.png 遊戲開始按鈕 ImageSprite ImageSpriteHole1~ImageSpriteHole5 Picturet:hole.png 顯示地洞 Player PlayerBackground Source:music.

9 8 使用元件及其重要屬性元件類別名稱屬性說明 ImageSprite ImageSpritePlay Picture:start.png 遊戲開始按鈕 ImageSprite ImageSpriteHole1~ImageSpriteHole5 Picturet:hole.png 顯示地洞 Player PlayerBackground Source:music.mp3 播放背景音效 Sound SoundGain SoundLose Source:hit.wav lose.wav 播放得分扣分音效 Clock ClockTimer TimerInterval:1000 計算遊戲使用的秒數 Clock ClockMouse1~ClockMouse5 無每一個地洞中雪人或雪怪顯示的時間程式拼塊實作 1. 建立全域變數 LeftTime imagespritelist Score playmode curimgstring 和 ismouse1show ~ismouse5show

10 9 (1) LeftTime=60 記錄遊戲共有 60 秒 (2) imagespritelist 為一個 String 型別的清單, 共有 5 個元素, 初始值都是 <hole.png> (3) Score=0 記錄得分從 0 開始 (4) playmode=false 表示遊戲尚未開始, 當按下 Start 按鈕, 則會將 playmode 設為 ture (5) 字串 curimgstring 用以記錄目前觸控的角色 (6) ismouse1show ~ ismouse5show 分別記錄各地洞是否已出現雪人或雪怪, 預設為 false 2. 設定背景音樂循環播放, 遊戲尚未開始, 背景音樂暫停播放,ClockTimer 計時器也停止計時, 同時以自訂的程序 ShowTimeAndScore 顯示遊戲剩餘的時間和得分 (1) 設定背景音樂循環播放, 程式初始背景音樂暫停播放,ClockTimer 計時器也停止計時 (2) 自訂的程序 ShowTimeAndScore 顯示遊戲剩餘的時間和得分 (3) 清除 Canvas 並設定畫筆的大小為 22 pixels 顏色為白色 (4) 顯示遊戲剩餘的時間和得分, 程式初始 Time:60 Score:0

11 10 3. 按下 Start 按鈕, 計時 60 秒, 得分從 0 開始, 啟動背景音樂並將 Start 按鈕隱藏起來, 同時設定 playmode=true 記錄遊戲已經開始記錄遊戲時間的計時器和所有啟動的雪人和雪怪出現的計時器全部啟動 4. 自訂的程序 ClockToogle 中接收 status 參數, 並依 status 參數設定計時器, 當 status 為 true 時將所有計時器全部啟動, 而當 status 為 false 時將所有計時器全部停止

11 5. ClockTimer 的 Timer 事件, 每一秒執行一次, 當遊戲終了停止背景音樂, 並以 playmode=false 記錄遊戲已停止, 同時再將 start 按鈕顯示, 所有的計時器停止計時 (1) 將遊戲時間減 1 並更新顯示 (2) 如果遊戲時間遞減至 0 則停止背景音樂, 並設定 playmode=false 記錄遊戲已停止, 同時再將 start 按鈕顯示, 並以

12 11 5. ClockTimer 的 Timer 事件, 每一秒執行一次, 當遊戲終了停止背景音樂, 並以 playmode=false 記錄遊戲已停止, 同時再將 start 按鈕顯示, 所有的計時器停止計時 (1) 將遊戲時間減 1 並更新顯示 (2) 如果遊戲時間遞減至 0 則停止背景音樂, 並設定 playmode=false 記錄遊戲已停止, 同時再將 start 按鈕顯示, 並以 ClockToggle(false) 將所有的計時器全部停止計時 6. ClockMouse1.Timer 事件 ClockMouse1.Timer 事件是判斷 ismouse1show 的狀況, 如果是 true, 就顯示 ImageSpriteHole1 的 Picture 為地洞 (hole.png), 否則就顯示雪人 (goodguy.png) 或雪怪 (badguy.png), 至於要顯示雪人或雪怪則以亂數來決定每個角色都使用個別的 Clock 來計時, 第一個計時器名稱為 ClockMouse1, 它會在 A 點開始計時, 至 B 點角色 ( 雪人或雪怪 ) 會冒出地洞, 到了 C 點, 角色就躲回地洞了同時, 將目前地洞的 Picture 背景圖, 依序存在 imagespritelist 清單中, 即 ImageSpriteHole1 的 Picture 存在 imagespritelist(1) 中, 所以實際上 ImageSpriteHole1 的 Picture 有可能是雪人 :<goodguy.png> 雪怪:<badguy.png> 或地洞 :<hole.png> 三種狀態這樣只要判斷 imagespritelist 清單就知道每一個 ImageSpriteHole1~ImageSpriteHole5 的狀態

13 12 (1) 每次都重設 ClockMouse1 下次執行的時間為 0.8~0.9 秒, 遊戲者可以自行調整這個時間控制遊戲的節奏 (2) 如果 ismouse1show = false, 就依亂數顯示雪人 (goodguy.png) 或雪怪 (badguy.png), 同時將 Picture 儲存至 imagespritelist 清單的第一個元素中, 並設定 ismouse1show = true (3) 如果 ismouse1show = true, 就顯示 ImageSpriteHole1 的 Picture 為地洞 (hole.png), 同時將 Picture 儲存至 imagespritelist 清單的第一個元素中, 並設定 ismouse1show = false (4) 亂數可由 1~5, 如果亂數大於 2 ( 即 3~5) 顯示雪人, 否則顯示雪怪, 所以顯示雪人的機率是 3/5 (5) 將 ImageSpriteHole1 的 Picture 屬性存至對應的 imagespritelist 清單的第一個元素中

自訂的 show(), 主要依據 index 索引值, 取得 imagespritelist 清單元素的字串內容至 curimgstring 變數, 根據這個字串即可分辨按下角色是雪人或雪怪 (1) 依據 index 索引值, 取得

14 13 7. 當碰觸雪人或雪怪 (ImageSpriteHole1~ImageSpriteHole5) 會觸發 TouchDown 事件, 我們只列出 ImageSpriteHole1.TouchDown 事件執行自訂的 show() 程序, 並分別傳參數 1 8. 自訂的 show(), 主要依據 index 索引值, 取得 imagespritelist 清單元素的字串內容至 curimgstring 變數, 根據這個字串即可分辨按下角色是雪人或雪怪 (1) 依據 index 索引值, 取得 imagespritelist 清單元素的字串內容至 curimgstring 變數, 這個字串變數實際就是 ImageSpriteHole1~ ImageSpriteHole5 的 Picture 屬性值它會有 3 種狀態, 地洞 :<hole.png> 雪人:<goodguy.png> 雪怪:<badguy.png> (2) 如果遊戲已在進行中觸控才作處理 (3) 打中雪人加 10 分, 同時播放得分音效 (4) 打中雪怪扣 50 分, 同時播放扣分音效如果分數小於 0 分, 調整為 0 分

開發App就像玩拼圖一樣簡單!

開發App就像玩拼圖一樣簡單! 碁峰資訊 X 文淵閣工作室開發 App 就像玩拼圖一樣簡單! App Inventor 快速實作 App 研討會研習講師 : 黃信溢邱文諒官方網站 :www.e-happy.com.tw 服務信箱 :e-happy@e-happy.com.tw 粉絲專頁 :www.facebook.com/ehappytt 1 一打造 App Inventor 開發環境 App Inventor 環境安裝的步驟