Dp1042t03專題製作成果報告書

【105 學年度國立彰化高商學生實務專題製作成 果報告書】

題

目：智慧魔宮

指導老師：陳隨益老師

參賽學生：郭家偉 林藝錡 洪銘鍇 _張釩楷

學校名稱：國立彰化高級商業職業學校 群

別：商管群

科

別：資料處理科

中華民國 106 年 06 月 09 日

目錄 摘要----------------------------------------------------------------------------------------1 壹、前言----------------------------------------------------------------------------------1 一、研究動機-------------------------------------------------------------------------1 二、研究目的-------------------------------------------------------------------------1 貮、文獻探討----------------------------------------------------------------------------1 一、App inventor 2-------------------------------------------------------------------1 二、Microsoft Excel------- ----------------------------------------------------------2 三、Google 協作平台---------------------------------------------------------------2 參、研究架構----------------------------------------------------------------------------3 一、研究方法-------------------------------------------------------------------------3 二、研究流程-------------------------------------------------------------------------3 肆、系統實作及測試-------------------------------------------------------------------4 一、系統架構-------------------------------------------------------------------------4 二、系統操作流程-------------------------------------------------------------------5 三、實作過程-------------------------------------------------------------------------5 四、系統功能展示-----------------------------------------------------------------10 伍、結果與討論-----------------------------------------------------------------------13 一、可行性之評估-----------------------------------------------------------------13 二、問題與討論--------------------------------------------------------------------13 陸、結論與建議-----------------------------------------------------------------------13 一、結論-----------------------------------------------------------------------------13 二、改善與建議--------------------------------------------------------------------14 參考資料來源--------------------------------------------------------------------------15

表目錄 表一 研究流程表----------------------------------------------------------------------4 表二 系統架構-------------------------------------------------------------------------4 表三 系統操作流程表----------------------------------------------------------------5

圖目錄 圖一 App Inventor 2 程式拼圖---------------------------------------------------2 圖二 原始檔→轉換成 csv 檔----------------------------------------------------2 圖三 Google 協作平台------------------------------------------------------------3 圖四 首頁擺放----------------------------------------------------------------------6 圖五 人物角色----------------------------------------------------------------------6 圖六 上下左右按鈕----------------------------------------------------------------6 圖七 開始、暫停、回首頁和離開的按紐-------------------------------------6 圖八 科目選項與隨機科目-------------------------------------------------------7 圖九 下拉式選單-------------------------------------------------------------------7 圖十 Excel 匯出成 csv 檔案格式------------------------------------------------7 圖十一 題目隨機跳出----------------------------------------------------------------8 圖十二 打錯扣血量程式-------------------------------------------------------------8 圖十三 頁面整體設計----------------------------------------------------------------8 圖十四 當血條規零時----------------------------------------------------------------9 圖十五 Game over 畫面--------------------------------------------------------------9 圖十六 暫停、開始、回首頁及離開遊戲程式----------------------------------9 圖十七 恭喜過關程式及按鈕-------------------------------------------------------9 圖十八 進入畫面--------------------------------------------------------------------10 圖十九 進入科目選單--------------------------------------------------------------10 圖二十 迷宮模樣--------------------------------------------------------------------10 圖二十一人物小色--------------------------------------------------------------------10 圖二十二以選擇題方式呈現--------------------------------------------------------11 圖二十三錯誤出現紅字--------------------------------------------------------------11 圖二十四答對顯示白色字-----------------------------------------------------------11 圖二十五過關讓你選擇去哪裡-----------------------------------------------------11 圖二十六血調已歸零-----------------------------------------------------------------12 圖二十七 Home 回首頁---------------------------------------------------------------12 圖二十八離開遊戲--------------------------------------------------------------------12 圖二十九暫停--------------------------------------------------------------------------13 圖三十 開始--------------------------------------------------------------------------13

智慧魔宮 摘要 小時候本身就愛玩迷宮，前陣子知識王這個遊戲很盛行，因此想開發 這個 APP，是針對高三的統測生所製作的 APP 歷屆題目試題，程式中不只 可以讓要統測的高三生複習到統測科目，還可以玩到遊戲，利用今年剛學 到的 APP Inventor 2，來製作內容物件及程式，雖然內建設置只有少少 的幾 MB 空間容量，而腦中的想法還是很多，所以上網找了許多可壓縮的 軟體，又可相容性，希望未來能順利完成。 關鍵字：迷宮、統測科目、遊戲、App Inventor 2

壹、前言 一、研究動機 現在大部分學生不喜歡看書，因為讀起書來枯燥乏味，缺乏學習的動 力，連快要考試的時候也不願多看一眼，所以想了個辦法，利用遊戲呈現 的方式，使大家都能學習到統測的題目，也不會讓大家認為只是單純讀書 ， 透過遊戲進行，使大家能夠感到樂趣，讓大家能一邊複習一邊玩遊戲。

二、研究目的 當統測的時候，每天都過著考試讀書的生活，枯燥乏味，因此看見知 識王的時候，就想做出一個有關統測試題的遊戲，讓學習變得有趣，不是 為了讀書考試而去做，而是為了真正變成生活知識化。因為這個念頭，就 想打造出統測生能玩又增進智慧的小遊戲，希望能預期成果的做更好。

貳、文獻探討 一、 App Inventor 2 Google 公司在西元 2010 年，為了讓更多人在沒有程式基礎的狀況下， 能 夠開發 Android 裝置應用程式，推出 Google App Inventor for Android 工具軟體，讓使用者可以運用拼圖模式來組合程式語法，進而發展 Android 裝置的應用程式。完成的程式也可以下載到實體手機或在模擬器 上執行，因為方便操作，所以提高許多人想學習的動力。如(圖一)所示操 作組合。

1

(圖一) App Inventor 2 程式拼圖

二、 Microsoft Excel Microsoft Excel 是 Microsoft 為使用 Windows 和 Apple Macintosh 作業 系統的電腦編寫的一款試算表軟體。直觀的介面、出色的計算功能和圖表 工具，再加上成功的市場行銷，使 Excel 成為最流行的個人電腦資料處理 軟體。如（圖二）所示，匯出成 csv 檔案格式，會以逗號字元 (,) 分隔每 個文字欄位，方便與 App Inventor 2 內程式碼結合。

(圖二) 原始檔→轉換成 csv 檔

三、 Google 協作平台（Google Sites） Google 協作平台是 Google 用來取代 Google Page Creator 的一款基於 Wiki 的線上網站製作系統，為 Google Apps 的一部分，它的目標是讓任何 人，都能夠建立一個團隊為導向的網站，以多人可以協作和共享檔案為原 則，讓你輕鬆方便創造屬於自己的網站，提供 100MB 的網路空間，不但 2

能夠自行插入許多小功能，還能多人編輯檢視，也和 Google 文件結合， 提供多種文書方面的方法。如（圖三）所示，這是屬於我們自己的網站， 智慧魔宮小組整理資料討論區，方便匯集資訊，共同達成目標。

(圖三) Google 協作平台

參、研究架構 一、研究方法 我們想要利用 APP Inventor 2 製作一個迷宮，當人物角色移動時，會 隨機跳出統測題目，同時也會有嚇到的感覺。而讓人物移動時並須考慮到， 版面位置的走向，利用 X 軸與 Y 軸的長度，畫出相同比例的正方形格子， 在利用內建程式碼操作移動，限定每次移動的距離。 統測試題的部分，則是利用教育部認證合格的題目，匯集下載 103~105 年度的試題，然後各科分別放入 Excel 中，統整後以 csv 格式檔 匯出成與 APP Inventor 2 的程式碼相甫模式，在上網查閱隨機跳出程式碼 表現的方式，一一完成，而在設計方面，版面、按鈕及人物，我們使用 Adobe Photoshop CS6 的繪圖軟體，展現出獨特的風貌，並且利用協作平 台記錄每一週的工作進度與組員們互動情形。

二、研究流程 (1) 擬定專題題目：迷宮的小遊戲加上統測題目，變成是有智慧性的 迷宮，因此取名為【智慧魔宮】 (2) 提出專題計畫書：小組討論協調後，以每人提出的想法，計畫出 APP 內容功能及流暢度。 (3) 尋找資料：迷宮移動路徑、歷屆統測試題、隨機出現的方法…

3

(4) 試用類似 APP：在手機遊戲中，以知識網及怪物大戰聯盟 2 迷宮 等遊戲手法，結合創造出我們的智慧魔宮。 (5) 分配工作：家偉負責程式設計、每週討論紀錄；藝錡負責美化、 海報、每週討論紀錄；銘鍇負責程式設計；釩楷負責 收集資料、Excal 統測試題放置並匯出。 (6) 製作 APP：計畫好版面，拖移需要的物件，拼出程式。 (7) 美化版面：迷宮以可愛懸怪的方式畫出來。按鈕樣式以立體呈現。 (8) 測試修正：手機頁面的位移差來調整移動，程式錯誤並立即修改。 (9) 完成我們的 APP 如下（表一）所示 (表一)研究流程表

擬 定 專 題 題 目

提 出 專 題 計 畫 書

尋 找 資 料

試 用 類 似 A P P

製 作 A P P

分 配 工 作

美 化 版 面

測 試 修 正

完 成

肆、系統實作及測試 一、系統架構 APP 主要分為兩大功能(1)各科科目(2)隨機科目的兩種方式，分別是 國文、英文、專一、專二，然後進入遊戲，如下（表二）所示。 (表二)系統架構

4

首頁

各科科目

國文

英文

隨機科目

專一

專二

進入遊戲

二、系統操作流程

(1) 進入首頁：主畫面有兩個按鍵

(2) 點擊按鈕選項：各科科目或隨機科目 (3) 按各科科目：有國文、英文、專一、專二，然後跳入遊戲內 (4) 按隨機科目：直接進入遊戲中 (5) 答題目：題目跳出來，答錯扣 50 點血量，並出現紅色文字，答對 出現白色文字。 (6) 遊戲死亡：顯示 Game over 並出現回首頁和離開鍵 (7) 遊戲過關：顯示過關了，並出現回首頁、離開和取消的選項 如下（表三）所示，以國文科為例子 (表三)系統操作流程表

5

三、實作過程 (1)先把 APP Inventor 2 主要頁面版面規劃好，按鈕與標題排列整齊如 下(圖四)所示，在來是畫迷宮內鍵角色及按鈕如下(圖五)、(圖六)、 (圖七)所示

6

(圖五)人物角色 (圖四)首頁擺放

(圖六)上下左右按鈕

(圖七)開始、暫停、回首頁和離開的按紐

(2)寫科目選項與隨機科目按鈕的程式如下(圖八)所示，下拉式選單國 文、英文、專一、專二，如下(圖九)所示

7

(圖八) 科目選項與隨機科目

(圖九) 下拉式選單

(3)題目隨機跳出，先把統測試題放入 Excel 中，以 csv 格式檔匯出，才 會與 APP Inventor 2 內鍵程式相甫，如下(圖十)所示，並參考老師所 教的打地鼠程式讓題目隨機跳出，如下(圖十一)所示

(圖十)Excel 匯出成 csv 檔案格式

8

(圖十一)題目隨機跳出

(4)畫出迷宮樣式，每隔均採一樣寬度的正方形，然後測量 X 軸和 Y 軸 的距離，並寫出血量的程式，每打錯一題扣 50 點血量如下(圖十二) 所示，版面調整成方便使用者操作模式如下(圖十三)所示 血量

(圖十二)打錯扣血量程式

(圖十三)頁面整體設計

(5)當血量為 0 時，會遊戲結束，自動跳出 Game over 的畫面，如(圖十 四) (圖十五)所示，再做出暫停、開始、回首頁及離開遊戲的程式如 (圖十六)所示。

9

(圖十四)當血條規零時

(圖十五)Game over 畫面

(圖十六) 暫停、開始、回首頁及離開遊戲程式

(6)當遊戲過關時會跳出恭喜過關，並跳回首頁讓大家繼續選喜歡做的科 目，做題目練習如下(圖十七)所示

10

(圖十七)恭喜過關程式及按鈕

四、系統功能展示 (1) 進入 APP 的主版畫面，如下（圖十八）所示有兩個選項，分別是 科目選項和隨機科目。按入科目選項後，出現選單，分別是國文、 英文、專一、專二，如下（圖十九）所示。

(圖十八)進入畫面

(圖十九)進入科目選單

(2)按各科選項，出現選項清單，選擇某一科進入時，會直接進入迷 宮模樣，移動圖上小人，上下左右方向移動，開始進行遊戲如下 （圖二十）、（圖二十一）所示。

11

(圖二十一)人物小色

（圖二十）迷宮模樣

(4) 移動時會隨機跳出題目來，以選擇題方式呈現，當答錯時會扣血 量並顯示紅字如下圖(二十二)、圖(二十三)所示。

(圖二十二) 以選擇題方式呈現

(圖二十三)錯誤出現紅字

(5) 答對時呈現白色字，然後繼續走迷宮，當走到終點會顯示恭喜過 關，然後出現回首頁、離開或取消的按鈕，如下(圖二十四）(圖 二十五)所示。

12

(圖二十四)答對顯示白色字

(圖二十五)過關讓你選擇去哪裡

(6) 當血量到零時，會出現你血條已歸零，出現回首頁和離開的鍵如 下(圖二十六)、(圖二十七)、(圖二十八)所示

(圖二十六)血調已歸零

(圖二十七)按 Home 是回首頁

13

(圖二十八)按離開遊戲

(7) 內有暫停與開始鍵，方便操作，如下(圖二十九)、(圖三十)所示

(圖二十九)暫停

(圖三十)開始

伍、結果與討論 一、可行性之評估 14

現在的學生，對高科技產品產生極高的興趣，而天天碰書的他們會產 生厭煩，然而如果是透過另一種遊戲方式，去讀科目的話，不只能提高興 趣，也能帶動學習熱忱，因此這款遊戲還是有它存在的可用性，雖然他無 法比市面上的精緻好用，但這是以一個最基礎的概念及想法做出來的，希 望未來有人能把這套遊戲，繼續研發出更好的技術價值來，讓更多人喜愛 又實用。

二、問題與討論 Q:迷宮的移動方式，如何讓人物移動就好?

A:拿手機直接測量距離，程式寫入，即可完成。 Q:遊戲出現到一半，會出現遊戲停止畫面，並閃退?

A:原因是版本問題，6 吋以上會不太相甫

陸、結論與建議 一、結論 我們這一組是一群愛玩手遊的組別，玩過無數款遊戲，每款吸引人和 操作手法，都可以說出來，因此興致勃勃地參與這項活動，剛開始訂定題 目時，是以每人各說出一套自己最喜愛的遊戲決定的，很快的智慧魔宮就 產生，然而剛開始沒多久，越來越發現，以我們現在的技術根本不可能做 出理想中的模樣。 雖然如此，我們依然不放棄夢想，因為想做出屬於我們自己的作品， 在某一段時間，做甚麼總是都失敗，沒有頭緒，還一直打擊信心，雖然很 難熬，但我們堅持相信一定能夠完成，入是自己走出來的，這條不通就往 下一條行走，也很感謝老師的幫助，使我們的成長，才能真正做出這項作 品出來，挫折並不可怕，最害怕的就是失去動力，走就對了，無須擔憂， 因為眼前的希望就在我們前方等候著。 不順遂總會過，就像人的一生有起伏一樣，這樣才能激盪出美麗的浪 花，為自己的人生添加出新的色彩，即將邁向下一個階段啟航，像迷宮一 樣，雖然眼前的道路不知如何，是否充滿的恐懼或驚喜，只要嘗試，一定 有出口等待著你，就算失敗了，再來也不遲，累積經驗才能創早更好的想 法出來。

二、改善與建議 (1) 數學題目雖然無法在時間內完成而把它砍掉，但是會再繼續做完。 (2) 內面題目太長會影響到答題的操作，希望版面能夠再調整。。

15

參考資料來源 使用 App Inventor 2 的 Canvas（畫布）、 ImageSprite（動畫精靈）與 Clock（計時器）建立基本動畫 檢索自 http://swf.com.tw/?p=681 統測歷屆試題與詳解 檢索自 http://2016.twowin.com.tw/submenu/index/old-exam App Inventor 2 指令中文化 NxtColorSensor 顏色感應器 檢索自 http://www.appinventor.tw/ai2_legomindstorms_nxtcolorsensor App Inventor 2 指令中文化 Location-Sensor 位置感應器 檢索自 http://www.appinventor.tw/ai2_sensors_locationsensor [App Inventor] 在 App Inventor 2 使用網路伺服器(TinyWebDB) 檢索自 http://blog.e-happy.com.tw/?p=5247 APP 與網頁資料庫結合 檢索自 http://www.xchobo.net/wordpress/topics/384 撲克牌造型 檢索自 https://www.google.com.tw/search?q=%E6%92%B2%E5%85%8B %E7%89%8C&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjNvJeO5P_TAhVFpJQ KHZinAqsQ_AUICigB&biw=1366&bih=638 迷宮 9 宮格 檢索自 http://www.terasoft.com.tw/techsupport/pdf/2011-03.pdf

16