開發app就像玩拼圖一樣簡單!newstudent.shute.kh.edu.tw/ruchien/shared...

碁峰資訊 X 文淵閣工作室

開發 App 就像玩拼圖

一樣簡單! App Inventor 快速實作 App 研討會

研習講師：黃信溢。邱文諒

官方網站：www.e-happy.com.tw 服務信箱：[email protected] 粉絲專頁：www.facebook.com/eHappyTT

mailto:[email protected]

1 App Inventor 快速實作 App 研討會

一、打造 App Inventor 開發環境 App Inventor環境安裝的步驟

建議使用 Chrome 瀏覽器

在瀏覽器網址列輸入「http://support.google.com/chrome/bin/answer.py?hl=zh-Hant&answer=95346」

下載及安裝 Chrome 瀏覽器。

JDK 安裝

1. 如何確認您的系統是 32 或 64 位元？一般 XP

環境應都是 32 位元，但 Win7 或 Win8 就要再

進一步檢查。

2. 檢查 JDK 是否存在：<C:\Program Files\Java> 是

否有 <jre6> 或 <jre7> → 若無，請執行 <

jdk-7u3-windows-i586.exe> 或 <

jdk-7-windows-x64.exe>安裝 JDK。

App Inventor Java 驗證

在瀏覽器中輸入「http://beta.App

Inventor.mit.edu/learn/setup/misc/JWSTest/AppInvJWSTest

.html」→出現 Your browser appears to be configured

properly. 表示通過初步驗證 → 按 Launch 鈕 → 按

保留鈕 → 在 <C:\Users\電腦名稱

\Downloads\notepad.jnlp> 按滑鼠左鍵兩下 → 出現

Notepad 文字編輯軟體。

Java開發工具 JDK的安裝

在瀏覽器測試Java的執行環境

App Inventor 開發工具的安裝


安裝 App Inventor 套件

在 < App Inventor_setup_installer_v_1_2.exe> 上按滑鼠左鍵兩下。

登入 App Inventor 管理頁面

在瀏覽器中輸入「http://beta.App Inventor.mit.edu」→ 以 Google 帳號登入。

建立專案

按 New 鈕 → 輸入專案名稱後按 OK 鈕 (名稱只能使用大小寫字母、數字及「_」符號，而

且名稱的第一個字元必須是大小寫字母)。

下載原始檔

按 More Actions 鈕，於下拉式選單中點選 Download Source → 下載檔案置於 <C:\使用者\電腦

名稱\Downloads>，檔名為 <專案名稱.zip>。

上傳原始檔

按 More Actions 鈕，於下拉式選單中點選 Upload Source → 按選擇檔案鈕選取要上傳的專

案壓縮檔，然後按 OK 鈕。

移除專案

勾選要移除專案左方的核選方塊 → 按 Delete 鈕 → 於確認對話方塊中按確定鈕

複製專案

按 Save As 鈕 → 輸入專案名稱後按 OK 鈕。

加入 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」就開始執行應用程式。


在實機中執行應用程式

1. 如果是要在實機中安裝下載的 apk 檔，改變手機應用程式設定：執行設定 / 安全性，

勾選未知的來源選項。

2. 如果是要在實機上進行程式模擬，除了上述動作外，請再執行設定 / 開發人員選項，勾

選 USB 除錯中、保持喚醒及允許模擬位置 → 手機以 USB 傳輸線與電腦連接 → 按

Connect to Device 鈕，點按剛連線的手機就開始執行應用程式。

第一個實戰專題：BMI 計算機

1. 基本運算：

將計算值顯示在 TextBox1 中，要注意元件的命名，以及趨動計算的動作。

2. 加入變數：變數一定要宣告，宣告時要有初值。變數修改名稱時的變化。

BMI 公式

BMI = 體重(kg) ／身高(m) 2

BMI > 24 過重，BMI <= 18 過輕

18 <= BMI <24 標準


3. 加入 if 的控制判斷

4. 加入 if else 的控制判斷，並以巢狀顯示。

5. 以 maketext 的方式來合併顯示字串。 6. Notifier 的方式來顯示訊息。


二、專題設計：終極密碼預覽結果

上傳 <Ex\guessNum\guessNum_plus.zip> 專案 → 開啟拼塊設計師 → 執行。

建立專案

按 New 鈕 → 專案名稱輸入「guessNum」後按 OK 鈕。

應用程式標題

設定 Screen1 的 Title 屬性值為「終極密碼」。

製作流程

1. 版面配置 (ex_guessNum_1.zip)

2. 基本程式 (ex_guessNum_2.zip) (1) 程式預設啟動時執行程式的方法。(Screen1.Initialize) (2) 亂數的使用 (3) 以標題來做簡單的除錯


3. 設定上下限的數字範圍顯示 (ex_guessNum_3.zip)

4. 加「重新一次」的按鈕 (ex_guessNum_4.zip)

(1) 設定按鈕預設是隱藏的方法 (2) 設定按鈕再顯示的方法


5. 將啟始動作設為自訂程序 (ex_guessNum_5.zip)


三、專題設計：打雪怪遊戲設計

專題說明

上傳完成作品


案壓縮檔 <MouseGame_Demo.zip>，然後按 OK 鈕。

專題實作

上傳半完成作品


案壓縮檔 <MouseGame_Ex.zip>，然後按 OK 鈕。

介面配置


使用元件及其重要屬性

元件類別名稱屬性說明

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。


(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。


3. 按下 Start 按鈕，計時 60 秒，得分從 0 開始，啟動背景音樂並將 Start 按鈕隱藏起來，

同時設定 playMode=true 記錄遊戲已經開始。記錄遊戲時間的計時器和所有啟動的雪人

和雪怪出現的計時器全部啟動。

4. 自訂的程序 ClockToogle 中接收 status 參數，並依 status 參數設定計時器，當 status 為true 時將所有計時器全部啟動，而當 status 為 false 時將所有計時器全部停止。


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 的狀態。


(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 清單的第一個元素中。


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 分，同時播放扣分音效。

(5) 如果分數小於 0 分，調整為 0 分。

開發app就像玩拼圖 一樣簡單!newstudent.shute.kh.edu.tw/ruchien/shared...

Documents

開發app就像玩拼圖一樣簡單!newstudent.shute.kh.edu.tw/ruchien/shared...