以炸彈超人遊戲為基礎之程式語言學習工具 -以 C 語言為例

(1)

I

以炸彈超人遊戲為基礎之程式語言學習工具 -以 C 語言為例

中華大學資訊管理學系

摘要

數位遊戲式學習充滿娛樂的特色能夠激起學習者的學習慾望。學習者能夠在互動的遊戲環境之下自我練習和挑戰。為了能夠正式成為一個平時就能學習的工具，我們開發了一套將大部分 C 程式語言的觀念結合炸彈超人遊戲的工具。這是一個關於傳統式學習和研究領域方面的新概念。學習者經由觀看教材後，藉由撰寫 C 程式語言碼來控制炸彈超人的移動進而解決問題完成過關的任務。此學習工具結合由淺入深的關卡挑戰、有趣的故事性、娛樂效果和真實性。這種生動學習環境能夠使學生激起想通過關卡的慾望，而將他們寶貴的時間應用在大量的練習上。本論文提出一個結合數位遊戲式學習的 C 程式語言課程學習方法。

關鍵詞: 數位遊戲式學習、炸彈超人、互動式遊戲、程式設計課程、C 語言程式設計

研究生：周育民指導教授：張文智博士

(2)

II

Interactive Bomberman Game-Based Learning Tool for Programming Language–Take C Language as an Example

Department of Information Management, Chung-Hua University

ABSTRACT

Digital game-based learning, motivates learners, is full of entertaining. Learners can practice and challenge themselves in an interactive game. In order to become formal tools in everyday learning process, we create an interactive Bomberman game-based learning tool which is included most concepts in C programming language. It brings modern education concept in concert with the classical learning and laboratory work. Learners can study the learning materials, read/write codes in C Language, solve problems with C Language to control the movement of the Bomberman accompany with game music. The learning tool combines continuous challenge, interesting storyline, fun and realism. This vivid learning environment can engage students spending their precious time for extensive practice since students have highly motivation to win the game. We show a new method for educational practice with game-based digital learning for C programming course.

Keywords: Digital game-based learning, Bomberman, Interactive game, Programming Course, C Programming language

Student：Yu-Min Chou Advisor：Dr. Wen-Chih Chang

(3)

III

致謝

這篇論文能如期完成，首先要感謝我一年級時的指導教授王偉德老師，一年來的細心指導及教誨，讓我學到許多知識，讓我受益良多，也使得我在未來工作上，可以運用這些技術及技巧，來達成工作目標。另外也要感謝二年級時的指導教授張文智老師，願意讓我在二年級加入張文智老師研究團隊，也讓我體驗到不同研究風格，感到非常充實。

此外我要感謝我父母，父母一開始不鼓勵我念研究所，由於我的堅持以及努力，父母最後強力支持我，讓我能全力完成我的學業。另外也要感謝同實驗室的同學陳坤祺、徐志煌、馮堯保、林彥廷、李茂帆以及李宗璞，他們給予我適當的支持與鼓勵，讓我有動力去完成學業。

還要感謝我的口詴委員王德華教授、楊宣哲教授，感謝他們對於我的論文細心指導與建議，讓我受益匪淺。

(4)

IV

圖目錄

圖 1 研究流程... 3

圖 2 Rajaravivarma 課程中的數字遊戲示例圖 ... 9

圖 3 Carringtonr 的 Problems and Programmers (PnP)遊戲示例圖 ... 10

圖 4 Kaur 和 Haar 的 Euchre 遊戲示例圖 ... 10

圖 5 Chang 的輔助系統分析中雛型法卡片教學遊戲示例圖 ... 10

圖 6 Kim 的 Smalltalk Card Game (SCG)遊戲示例圖 ... 11

圖 7 Goschnick 和 Balbo 的貪吃蛇(Snakes)/爬梯者(Ladders)遊戲示例圖 ... 12

圖 8 Goschnick 和 Balbo 的魯多(Ludo)遊戲示例圖 ... 12

圖 9 Goschnick 和 Balbo 的西洋棋(Checker)遊戲示例圖 ... 13

圖 10 Lassse、Steinar 和 Asbjørn 的 Age of Computers(AoC)遊戲示例圖 ... 14

圖 11 Nevison 和 Wells 的迷宮類遊戲示例圖 ... 14

圖 12 Turbo C 執行畫面 ... 15

圖 13 DevC++執行畫面 ... 16

圖 14 Visual C++執行畫面 ... 16

圖 15 C++Builder 執行畫面 ... 17

圖 16 Scratch 執行畫面... 18

圖 17 NetLogo 執行畫面 ... 19

圖 18 StarLogo 執行畫面 ... 19

圖 19 系統架構... 22

圖 20 學習流程圖... 23

圖 21 Li Yang 的 Proxy 作法運作示意圖 ... 24

圖 22 Li Yang 的 Proxy 動態載入 Java Class 的示意圖 ... 25

圖 23 程式編輯，系統運作流程圖... 25

圖 24 系統登入畫面... 26

圖 25 系統帳號申請畫面... 27

圖 26 Welcome Page 遊戲歡迎畫面 ... 27

圖 27 Road Map 功能畫面 ... 28

圖 28 Presentation 功能畫面 ... 29

圖 29 Load Chapter 功能畫面 ... 29

圖 30 Example 中 Sample Function 分頁功能執行畫面 ... 31

圖 31 Example 中 Run 分頁功能執行畫面 ... 31

圖 32 遊戲執行畫面... 32

圖 33 Exercise 中 Run 分頁功能執行畫面 ... 33

圖 34 Exercise 中 Edit/Compile 分頁執行畫面 ... 34

圖 35 Load 功能執行畫面 ... 34

(7)

VII

圖 36 Save 功能執行畫面 ... 35

圖 37 Compile 功能執行畫面 ... 35

圖 38 Test 功能執行畫面 ... 36

圖 39 Progress Evaluation 學習狀態統計圖 ... 37

圖 40 Questionnaire 問卷調查功能畫面 ... 38

圖 41 Example 1 題目圖示 ... 40

圖 42 Exercise 1 題目圖示 ... 41

圖 43 Test 1 題目圖示 ... 43

圖 46 Test 2 題目圖示 ... 48

圖 49 Test 3 題目圖示 ... 51

圖 52 Test 4 題目圖示 ... 56

圖 53 認為有幫助的觀念調查... 59

圖 54 第一次看到這樣的系統調查... 59

圖 55 功能按鍵容易找到調查... 60

圖 56 覺得提供的功能容易使用調查... 60

圖 57 學習過程容易調查... 61

圖 58 此系統提供好的程式學習知識調查... 61

圖 59 此系統提供好的學習環境調查... 62

圖 60 此系統能幫助學習調查... 62

圖 61 此系統能漸進式的學習調查... 63

圖 62 此系統有很清楚的回饋資訊調查... 63

圖 63 喜歡使用此系統學習調查... 64

圖 64 此系統能夠增加學習興趣調查... 64

圖 65 願意花較多的時間在使用此系統學習調查... 65

圖 66 願意使用此統來輔助傳統教學方式調查... 65

圖 67 願意使用此系統做為學習程式的第一步調查... 66

圖 68 此系統比傳統教學方式有趣調查... 66

圖 69 學習過程感到有趣調查... 67

圖 70 原創性調查... 69

圖 71 易於使用調查... 69

圖 72 有用性調查... 70

圖 73 使用態度調查... 70

(8)

VIII

圖 74 使用意願調查... 71 圖 75 有趣性調查... 71

(9)

IX

表目錄

表 1 各類相似程式開發工具比較... 18

表 2 各類相似程式學習工具比較... 20

表 3 人數統計... 58

表 4 年齡層統計... 58

表 5 修過程式次數人數統計... 58

表 6 各類相似程式開發工具比較... 68

(10)

1

第一章緒論 1.1 研究背景與動機

數位遊戲式學習能夠幫助學生以遊戲的方式增加學習樂趣以及提升學習效

果。數位遊戲式學習提供了具挑戰性的練習，藉由這些練習學生能夠進行自我挑戰來刺激學生學習的興趣及動力。為了吸引學習者融入數位遊戲式學習的環境中在學習的過程中通常融入一些豐富的元素。在本質上教育和遊戲是不同的，教育者必需確保在使用教育性質的遊戲時，遊戲本身具備有得分和贏得比賽的概念。

為何要使用數位遊戲式學習？理由是數位遊戲式學習能夠刺激學習者在學習的過程中更有效率，當投入學習的環境中時能更有勇氣的去嘗詴錯誤。在 Amory[1]

的研究中，讓大學一年級和二年級的學生玩下列四種遊戲:教育摸擬遊戲、策略性遊戲、故事性冒險遊戲、第一人稱射擊遊戲。結果顯示學生傾向比較喜歡冒險和策略性的遊戲。作者提出一些能夠刺激學習者學習的重要元素，這當中包含了邏輯、記憶、想像和問題的解決。Lepper 和 Cordova [2]發現上述的這些遊戲意指是具有教育性但並不包含有益的學習。遊戲設計者必須設定學習目標讓學習過程中加入贏得比賽的概念而不單單只是學習工具。Beck and Jacobsen [3]發現超過一半的老師是有意願在課堂中使用遊戲和模擬軟體。而有越來越多的研究學者注意到教育性質遊戲[1][4][5]。遊戲潛在能夠提供經驗學習的平台，建構式學習，

和追蹤學習行為的環境的優點。學習者在學習時能融入於遊戲環境中。遊戲的虛擬學習環境提供給學習者實際的體驗真實情境的內容並解決真實性的問題[6]。

問題解決的特殊經驗能夠帶給學習者不同的體驗。一些傳統的教師使用傳統的教學工具並無法刺激學習者動機[7]。即使是使用數位學習的方式也僅能提供少部分的真實情境的學習內容給學習者。而在學習程式語言時，哪一種程式語言是第一個學習的並不是重點，重要的是程式語言的教學方法[8]。語法和語言只是建構程式的一小部分。程式語言課程應針對如何藉由問題解決、邏輯思考以及程式

(11)

2

流程建立有效率的程式開發技巧[9]。問題解決、邏輯思考包括一連串針對目標的思考而程式處理包含了一連串的電腦操作[10]。然而很多學生從小學開始就缺乏問題解決和邏輯思考的能力。因此教學者的挑戰就在於如何面對大部分的學生對於學習程式語言沒有很大的學習動機。

電腦遊戲已經成為了熱門文化之一。此外遊戲式程式設計在電腦科學教育課程是一個流行詞。根據研究顯示現今的學生學習方式都是不同的[11]。假如學生在學習的時候沒有歡樂感覺，那教學者便會失去他們。當學習的內容是煩多而且又缺乏刺激的動力，那學生就會常常把「無聊」、「枯燥」和「太過專業」掛在嘴邊[12]，最終導致學生無法有效學習而受到挫折。一個好的遊戲能夠幫助學生去增加本身的學習技巧，例如:做中學、從失敗中學習、目標導向學習、探索性學習、任務性學習和問題式學習[13]。雖然遊戲式學習是好的學術研究題材，但是真正把電腦遊戲應用在教育上則是不常見[14]。另外雖然在教育領域上做中學的概念早也已出現過[15]，然而真正應用在基礎教育上也還並不多見。

1.2 研究目的

在本論文中主要是提出一個新的互動學習方式來輔助學生學習 C 語言程式開發設計課程，因此我們設計了以「炸彈超人」電腦遊戲為基礎的 C 語言程式開發設計學習平台，並且加入豐富的元素。藉由此平台可以讓學生在學習程式設計的過程中，不僅不會感到無趣，反而更能激起學習的動機，沈浸於遊戲學習歡樂的環境之中，如此學生們會更願意主動地參與學習過程進而提高學習的成效。

1.3 研究流程

本研究首先闡述問題背景、研究動機與目的，在確定研究主題為「以炸彈超人遊戲之互教學工具應用於 C 程式語言」後，依據相關文獻的蒐集與分析，進一步確立研究範圍，根據文獻資料的分析與整理，可作為本論文研究架構之理論基礎。在系統實作部份則使用 Java、Java Servlet 來開發系統；而資料儲存的部

(12)

3

分則使用 MySQL 資料庫技術。本論文之研究流程如圖 1 所示。

圖 1 研究流程研究背景與動機

研究目的

教材設計系統分析

系統開發

文獻探討與確定研究主題

系統測詴

正式上線問卷調查

問卷分析

結果分析與結論

(13)

4

1.4 論文架構

本研究之系統，主要是以互動學習方式來輔助學生學習 C 語言程式開發設計課程學習工具。有關論文的相關章節安排如下：

第一章引述目前有關在數位遊戲式學習對於學習者的益處，以及現行的傳統教學方法之不足，和教育遊戲所該應有的要素之探討。

第二章為相關研究，對系統背景做一些介紹，並討論有關在過去一些應用於數位遊戲式學習的研究，此外也針對本系統和其他 C 語言程式開發工具和程式教學工具做比較，並探討其優缺點。

第三章為系統實作與展示，介紹系統開發環境、系統執行環境、系統架構、

設計理念和介紹本系統利用到的一些相關技術，最後則對本研究所開發之系統做詳細的說明以及展示一些範例。

第四章為實驗方法，介紹實驗目的、實驗背景、以及針對本系統所做的問題調查，分析各項分析和綜合分析，進而了解系統的成效。

第五章是結論及未來研究，總結本研究的相關研究成果並針對未來研究之延伸加以說明。

(14)

5

第二章相關研究 2.1 系統背景介紹

在本節中，將介紹一些應用於本研究學習工具上的教育理論和系統背景相關研究。

2.1.1 沈浸理論(Flow)

Csikszentmihalyi[16]於 1975 年提出沈浸理論(Flow theory):當人們在進行活動時，如果完全投入於情境中，而忽略所有不相關的事物，即進入沈浸的狀態。

根據 Csikszentmihalyi 研究顯示，要在電腦遊戲產生沈浸的效果，必須包含下列 8 項特性[16]:

(1) 感到自己能夠完成給予的活動。

(2) 能專注於活動上。

(3) 活動本身有很明確的目標。

(4) 活動本身提供快速的回饋訊息。

(5) 能夠深入參與活動。

(6) 可以控制所有動作進行活動。

(7) 在沈浸狀態下忽略其他外在因素。

(8) 感覺時間不斷的流逝。

Marshall Jones [17][18]驗證了沈浸式理論與教育性的電腦遊戲之間的關係。

Jones 發現「激發動機」是沈浸理論在電腦遊戲中占有很大部分的重要元素，因此，如何設計一個遊戲學習環境使學習者能夠激發學習者動機而沈浸於遊戲學習歡樂的環境之中是很重要的，也是本系統的目的之一。

(15)

6

2.1.2 成功的教育遊戲

一個好的教育性遊戲能夠幫助學習者增加學習技巧，例如 :Learning by Doing(做中學)、從錯誤即失敗中學習、目標導向學習、探索學習、任務性學習、

問題導向學習和多種感觀的學習。根據 Din [13]的建議一個成功的教育遊戲必須具備以下幾項要素:

(1) 遊戲本身是沈浸式的(身歷其境) 。 (2) 遊戲本身具高度的可玩性。

(3) 遊戲本身須具吸引力、挑戰性、競爭性。

(4) 遊戲本身提供一個或多個目標供使用者去達成。

(5) 遊戲本身允許玩家追蹤以及管理遊戲過程。

本研究將把這些要成功的教育遊戲要素加入到所開發的系統平台上。

2.1.3 炸彈超人(Bomberman)

炸彈超人(Bomberman)是 Hudson 軟體公司[19] 在西元 1983 年時被發展出來而直至現在，炸彈超人遊戲依然持續地不斷被進行更新與發行新版本的動作。最新的版本已經發展到第五代，命名為：炸彈超人王國的遊戲[20]。本研究中的系統為了增加 C 程式語言初學者學習的樂趣，因此結合炸彈超人(Bomberman)這種策略類型的迷宫類的電腦遊戲，加以改良後符合成我們所需要的教學平台。

2.1.4 GCC

GCC[21]，全名為（ GNU Compiler Collection），是本研究中用來作為 C 程式語言語法檢查和程式編譯功能時所必需用到的工具，GCC 不僅能夠處理 C 程式語言，也可處理 C++、Fortran、Pascal、Objective-C、Java 以及 Ada 等其他程式語言[22]。GCC 是源自於 GNU 計畫的需要，由 GNU 計畫的創始者 Richard Matthew Stallman[23]在西元 1985 年發展 GNU 系統時所產生，它是一套以 GPL(General Public License) 及 LGPL(Lesser General Public License)許可證所發行

(16)

7

的自由軟體，也是 GNU 計畫的關鍵部分，亦是自由的類 Unix 及蘋果電腦 Mac OS X 操作系統的標準編譯器。經過多年的發展，目前最新的版本是 4.1.1 版。

2.1.5 C 程式語言

本研究的主要目的是設計一個輔助性的平台幫助 C 程式語言的初學者在快樂的學習環境下學習，在此僅對 C 程式語言進行概要的介紹。C 語言是由 UNIX 的開發者丹尼斯·里奇（Dennis Ritchie）和肯·湯普遜（Ken Thompson）於 1970 年研製出的 B 語言的基礎上發展出來的。目前 C 語言編譯器普遍存在於各種不同的操作系統中，例如 UNIX、MS-DOS、Microsoft Windows 及 Linux 等。C 語言的設計影響了許多後來的程式語言，例如 C++、Java、C#等。C 程式語言在西元 1989 年經過了 ANSI(American National Standards Institute)制定了標準規範 (ANSI C)，在西元 1990 年由 ISO(International Organization for Standard)制定了 ISO C，進而結合先前的 ANSI C 產生 C90 的版本，目前最新的版本是在西元 1994 年所制定的標準規範：C99[24]。從西元 1972 年至今，在經過了三十多年的發展之後，C 程式語言依然是目前最重要和最受歡迎的程式語言其中之一。

C 程式語言本身具有以下特色[24]：

(1) 靈活的控制流程：可以容易的設計出具有結構化及模組化的程式語言。

(2) 快速：執行速度快，效能高。

(3) 精簡的程式碼：可以用很少的程式碼來完成一支程式。

(4) 可攜性佳：想跨越平台來執行 C 語言，通常只要修改極少部分的程式碼，

再重新編譯即可執行。

而在實務上，通常開發與設計一支 C 程式語言的程式[ 1 ][24]，會經過以下七個步驟：

(1) 探索與理解欲解決的問題。

(2) 針對所要開發的程式進行系統的設計。

(3) 開始進行程式的撰寫。

(17)

8

(4) 將已撰寫完成的程式進行編譯與連結的作業。

(5) 運行所完成的程式。

(6) 針對程式進行邏輯上的測詴與除錯。

(7) 驗證程式所有問題是否已解決。

2.1.6 C 程式語言在傳統教法上的缺失

傳統上老師在教學 C 程式語言的方式往往效果都不是很好，問題不外乎在於傳統的教導方式無法激起學生學習的樂趣，使得學生在學習的過程中遇到挫折就無法去突破，反而退到一旁，不敢再去挑戰[25]。而造成學生常常把「無聊」、

「枯燥」和「太過專業」掛在嘴邊，做為不願學習的藉口。而 Draper[26] 建議多讓學習者自由的學習，來提高學習的興趣。Carroll [27]總結說: 樂趣是由不平常或者是新穎的事物所激發出來的，在一般的情境下通常不會被激發出來，必須創造出一個能夠吸引的學習環境，藉由此環境的刺激下來產生學習樂趣。而根據 Rajaravivarma[9]研究顯示，以遊戲為基礎的方式教學程式語言是更能夠提升學習者在程式開發上的能力。

2.2 數位遊戲式學習於教學研究上之應用

在本節中，將簡介一些運用數位遊戲式學習於教學研究上的案例，並嘗詴加以探討其優缺點：

2.2.1 拼字遊戲和數字遊戲的應用

Rajaravivarma [9] 詴著以遊戲的方式來對 C 語言初學者進行教學。在過程中 Rajaravivarma 使用了兩種類型的遊戲 : word games( 拼字遊戲 ) 和 number game(數字遊戲)如圖 2 所示。word games 是專注於字串和字元的操作上而 number game 則是針對數字和亂數控制。這兩類的遊戲都是經由使用者輸入或是讀取檔案來進行。遊戲是由對戰的方式來進行，對象可以是其他玩家或是電腦。

(18)

9

Rajaravivarma 在使用這兩類的遊戲僅能使學習者學習程式的基本，但不包含一些重要的程式流程控制的敘述，因此缺乏更深入的學習，雖然運用這些遊戲可以增加學習者學習動機，不過還是缺乏了一些多媒體的效果，例如:音效、動畫等等。

圖 2Rajaravivarma 課程中的數字遊戲示例圖

2.2.2 卡片類型遊戲的應用

Alex et al.[28][29][30]開發了一套教育性質的卡片類型遊戲，目的是透過在遊戲的過程中，幫助學生了解並學習軟體程序。藉由卡片遊戲模擬軟體程序的過程，使得學生更能體會出軟體工程實際的運用等知識。此外 Carrington et al.[31]

也發表了一個名叫 PnP(Problems and Programmers)的卡片遊戲如圖 3 所示，目的也是幫助學生了解軟體工程，遊戲本身經由摸擬軟體工程程序的一些方法，給予學生在進行遊戲時體會軟體工程。Kaur 和 Haar [32] 提出了一個使用模糊邏輯的卡片遊戲「Euchre」如圖 4 所示，此遊戲是必須透過執行演算法來進行。Chang [33]設計了一個輔助系統分析中雛型法的卡片教學遊戲如 5 圖所，目的是幫助學

(19)

10

習者得到一些實際的經驗。學習者經由在挑戰任務時，不斷的思考策略方法達成任務。另外有一個物件導向思考學習的遊戲，SCG(Smalltalk Card Game)如圖 6 所示，由 Kim et al.[34]所設計，主要是提供透過遊戲本身基本的規則讓參與者體驗和了解物件導向概念。

圖 3 Carringtonr 的 Problems and Programmers (PnP)遊戲示例圖

圖 4Kaur 和 Haar 的 Euchre 遊戲示例圖

圖 5Chang 的輔助系統分析中雛型法卡片教學遊戲示例圖

(20)

11

圖 6 Kim 的 Smalltalk Card Game (SCG)遊戲示例圖

2.2.3 棋盤類型遊戲的應用

Goschnick 和 Balbo[35]以 java 語言開發了一系列 2D BOARD GAME(棋盤類型遊戲)，其中包含有貪食蛇(Snakes)/爬梯者(Ladders)，如圖 7 所示、魯多(Ludo) 如圖 8 所示，和西洋棋(Checker)如圖 9 所示，目的是利用這些遊戲來教導資訊系的學生物件導向程式開發的概念，另外也能了解程式開發者會面臨到的挑戰。在過程中，作者發現，學生在使用這三套不同的遊戲開發時，同時都遇到了相同的問題，就是對於介面上的操作不熟悉，和關卡設計上有時必須使用演算法來解決問題，這對一些基礎不是很好的學生來說稍微有點難，另外由於這些遊戲本身是使用 SG_Board[36]的函式庫，學生本身必須先了解此函式庫的使用方法才能夠正確的使用。也因此會增加學生學習上的負擔。所以這些遊戲本身應該比較屬於有經驗的學習者來學習，對於初學者來說，學習效果上可能就不是那麼好。

(21)

12

圖 7 Goschnick 和 Balbo 的貪吃蛇(Snakes)/爬梯者(Ladders)遊戲示例圖

圖 8 Goschnick 和 Balbo 的魯多(Ludo)遊戲示例圖

(22)

13

圖 9 Goschnick 和 Balbo 的西洋棋(Checker)遊戲示例圖

2.2.4 問題解決類型遊戲的應用

Lassse、Steinar 和 Asbjørn [37]在所做的研究中，使用了一套多人線上遊戲:

AoC(Age of Computers)如圖 10 所示，此遊戲以地圖的方式配合電腦歷史的相關知識，在此由遊戲中每個房間和地點都包含了一些人電腦演進歷史的問題，而這些問題的型式包含了多重選擇、數字選項、邏輯訊號控制等。而 Lassse 等人在研究結果發現學習者在使用 AoC 這套遊戲學習時願意花更多的時間，此外有高逹 95%的人認為使用 AoC 能比起傳統的教學方式更能增加學習的動機。

(23)

14

圖 10 Lassse、Steinar 和 Asbjørn 的 Age of Computers(AoC)遊戲示例圖

2.2.5 迷宮類型遊戲的應用

Nevison 和 Wells[38]發表了一項研究，在此研究中，使用了一套教學物件導向和設計模式(Design Patterns)的遊戲，如圖 11 所示。這個遊戲本身是使用 maze(迷宮類型)的方式來做教學如圖。研究結果發現，由於迷宮的組成可以經由設計產生不同的變化，在學習設計模式(Design Patterns)有助於學習，但此遊戲本身是架構在一個複雜軟體框架下運作的，學生在學習之前必須先對其做充分的了解，才能在學習時使用，對學生來說或許就會減少了一點學習的動機。

圖 11 Nevison 和 Wells 的迷宮類遊戲示例圖

(24)

15

從上述運用數位遊戲教學研究上的案例中，本研究有以下發現：

(1) 遊戲操作介面必須明確，否則會造成學習上的困擾。

(2) 教材必須和教學目標一致，不能偏離主題。

(3) 難易度適中，或是由淺入深。

(4) 聲光娛樂效果，能夠吸引學生的學習興趣。

(5) 互動性高，能夠激起學生的學習動機。

2.3 C 語言程式開發工具比較

(1) Turbo C[39]: Borland 公司在 MS-DOS 作業系統時代開發的 C/C++語言整合開發環境，如圖 12 所示，在 Windows 作業系統只能在 MS- DOS 模式或「命令提示字元」視窗執行。

圖 12 Turbo C 執行畫面

(2) DevC++[40]: Bloodshed Dev-C++（使用 GNU 的 GCC 編譯程式），一套免費 C/C++程式的整合開發環境，如圖 13 所示，提供中文使用介面，可以在 Windows 98/ME/2000/XP 作業系統執行。

(25)

16

圖 13 DevC++執行畫面

(3) Visual C++[41]: Visual C++是微軟公司所開發出的一套適用於 C/C++的程式開發工具，屬於 Windows 作業系統下的整合開發環境，如圖 14 所示。

圖 14 Visual C++執行畫面

(26)

17

(4) C++Builder[42]: Borland 公司在 Windows 作業系統下開發的 C/C++整合開發環境，如圖 15 所示。

圖 15 C++Builder 執行畫面

本研究提出了三個方面的特性如下所述，做為相似開發工具比較的依據。

 互動性: 軟體工具本身具備互動性元素，例如:有適當的回饋訊息即時反應給學習者。

 樂趣: 軟體工具本身具備動畫、遊戲、音效等多娛樂的效果，例如:可以產生動畫。

 容易使用:功能鍵很容易發現以及使用。

根據上述所提及的項目，做的比較如表 1: 傳統的教學工具 (Integrated Development Environment, IDE)，例如: Turbo C、 Dev C++、 Visual C++、 C++

Builder，本身所具備的互動性是很低的，因為這些工具本身就缺乏娛樂的元素。

此外這些工具有著很致命的問題就複雜性太高，當學習遇到像這種工具時就會失去學習的熱情，進而導致學習效果差。

(27)

18

表 1 各類相似程式開發工具比較

Our tool Turbo C Dev C++ Visual C++ C++ Builder

互動性 High Low Low Low Low

樂趣 High Low Low Low Low

容易使用 High Low Low Low Low

2.4 程式學習工具比較

(1) Scratch[43] : Scratch 是由美國麻省理工學院所研發出來的軟體，如圖 16 所示，可訓練小朋友的系統思考能力及創造力。Scratch 是一種運用圖形拼貼的方式開發程式，可設計出故事性、遊戲性或動畫的功能的程式設計軟體。

圖 16 Scratch 執行畫面

(2) NetLogo[44] : NetLogo 是一種多主體模擬系統 (Multi-agent Based Modelling) ，如圖 17 所示。實際上代表了某一數學模型圖像，使用者可非常簡單地調整參數量，直接地通過圖片看變動結果，如此可以用它來開發許多應用軟體。

(28)

19

圖 17 NetLogo 執行畫面

(3) StarLogo[45] : StarLogo 是由麻省理工大學多媒體實驗室開發的一個可編程的建模環境，如圖 18 所示。StarLogo 採用的是基於主體的建模方法。其中

「主體」是一隻隻的海龜，我們可以並行地控制數千隻海龜，同時也可以為它們制定不同的行為模式，把自己所擁有的知識應用到模型中，創造出許多不同的動畫。

圖 18 StarLogo 執行畫面

(29)

20

本研究提出了 5 個方面的特性如下所述，做為相似教學工具比較的依據。

 使用正規程式語言: 軟體工具本身可使用正式語言，例如:C、JAVA…

等等

 循序漸進: 軟體本身提供由潛入深，一步一步的學習方式，例如:針對課程分難易度，漸進式學習。

 統計分析: 軟體本身提供學習結果的統計或分析，例如:學習成果的統計圖表。.

 結合教材: 軟體本身能夠結合教材，例如:投影教材。

 故事性: 軟體本身結合真實生活中所會遇到的一些問題做為教材，例如:

計算水果價格、計算電影票價等等。

根據上述所提及的項目，做的比較如表 2: 在相似程式學習工具上，例如:

Scratch、 NetLogo、 StarLogo，本身所配合的程式語言是非正規的，所以不太適合於正式的教學課程上，此外這些工具也沒有結合教材和故事性內容來輔助學習者學習，以及缺乏了學習者學習記錄的統計分析比較功能，相較之下我們的系統除了有上包括了上述軟體沒有的功能外，還多了一個循序漸進學習的功能，提供學習者能夠一步一步的學習效果。

表 2 各類相似程式學習工具比較

Our tool Scratch NetLogo StarLogo

使用正規程式語言

   

結合教材

   

循序漸進

   

統計分析

   

故事性

   

(註: 表示包含 表示不包含)

(30)

21

第三章系統實作與展示 3.1 系統開發環境

本軟體採用 Java jdk-1_5_0_11 做為開發之程式語言，而網頁伺服器是使用 Apache Tomcat 5.5.25，開發工具則是使用 Eclipse 3.2.1 IDE;資料庫部分則是使用 Mysql 4.0.24 版本架設，並使用 phpMyAdmin 2.5.7-pl1 使為設定資料庫環境之工具。

3.2 系統設計

我們所設計的系統中是以炸彈超人遊戲為基礎加入成功教育遊戲的特性，結合了開放原始碼軟體及 GCC，另外同時也具備 C 程式語言語法檢查器與程式編譯器的功能，使得本系統能夠成為一個完整的 C 程式語言輔助教學工具。以下將詳細介紹我們所設計的系統架構、設計理念、相關技術、功能展示與範例說明。

3.2.1 系統架構

本系統是採用 Client-Server 為本系統之架構，如圖 19 所示，主要作用如下:

Client 端：

主要為遊戲主體，包含遊戲操作介面，教材展示、地圖展示、web 瀏覽器，

音效播放等以及正確的接收及傳送訊息給 Server 端。

Server 端：

包括儲存使用者帳號、遊戲資訊、學習成果，分析學習成果等，以及正確的接收及傳送訊息給 Client 端。

(31)

22 圖 19 系統架構

3.2.2 設計理念

(1) 成功的教育遊戲所應具備元素的融入:

本研究將Din [13]所建議成功的教育遊戲必須具備六大要素融入到我們的系統之中，並且加入了Learning by Doing(做中學) 和Drill and Practice(反覆練習)，使得本系統平台能符合成為一個成功的教育遊戲。

(2) C語言程式設計概念的融入:

本研究將 C 語言課程，透過課程的設計，和 Bomberman 遊戲做結合，產生出具有娛樂效果的互動性學習平台，提高學習者的學習動機。

(3) 漸進式學習的融入:

本研究將以漸進式的方式給於學習者學習，學習流程如圖 20，每個 C 語言程式概念，都是經過三個階段的學習，第一個階段從 Example 的範例學習，接著經由 Exercise 的練習熟悉概念，最後到逹 Test 階段做自我測詴。

(32)

23

圖 20 學習流程圖

3.2.3 相關技術

(1) 開放源碼計劃軟體整合:

本軟體在開發過程中將一些開放源碼計劃軟體整合至本軟體中，如下所述:

 JavaBomberman [46]: 運用此軟體的音效和遊戲素材。

 Jxpose [47] : 運用此軟體投影片播放和製作的功能。

 JDIC [48]: 運用在本系統瀏覽伺服器端的網頁功能上。

 JFreeChart [49]:運用於統計圖表呈現部分。

(2) 動態載入 Java Class:

本系統遊戲是將使用者所撰寫的 C 程式語言程式碼轉換成 Java 程式語言程式碼後執行遊戲，而由於使用者片斷程式碼時會不斷修改和執行，

且 Java 程式的實體本身在執行時是經由 JVM(Java 虛擬機器)來進行統一的管理，執行過的 JAVA 檔會因為之前執行過，如果在執行同樣的檔案則會出現一樣的結果，因此必須設法讓轉換過來的 Java 程式碼能夠動態的被重新編譯和執行。所以本研究使用 GoF[50]的 Proxy Design Pattern 的概念來解決上述的問題，此樣式概念的作法是在需求者與執行者之間，存在一個代理人(Proxy)，此代理人本身是做為一個接受服務的介面，為執行者提供一種代理，以控制需求者對這個執行者的訪問，此外本研究也參考了

Example Exercise Test

(33)

24

Li Yang[51]的方法來動態載入 JAVA Class，而在此的應用來說，此代理人(Proxy)會在每次需求者(Client)提出需求後，偵測執行者(DynamicClass) 的狀態是否已改變，若改變的話就會重新動態載入並運作執行最新的執行者(DynamicClass)以回應需求。在一般情況下執行者(DynamicClass)的狀態未改變時，整個 Proxy 運作的示意圖說明如圖 21 所示，而在實際功能執行者(DynamicClass)的狀態已改變時整個運作的流程如圖 22 所示，而整個程式編輯，系統運作流程如圖 23 所示，說明如下：

(a) 編輯程式階段：首先，使用者開始進行撰寫片斷程式碼，在使用者完成之後，則交由 GCC 元件進行程式碼的 C 語法檢查，若檢查無誤的話，系統會將 C 語言片斷程式碼轉換成 Java 語言片斷程式碼並嵌入到 Java 語言程式(template)模版檔案中，接著對此模版進行編譯的動作，並形成最新的 Java 類別檔。

(b) 執行遊戲階段：在形成最新的 Java 類別檔後，便會以動態類別方式重新把最新的 Java 類別檔載入到 JVM 中執行。

圖 21 Li Yang 的 Proxy 作法運作示意圖

Client Proxy Dynamic Class

1 : invoke

4 : return 3: return

2 : forward invocation

(34)

25

圖 22 Li Yang 的 Proxy 動態載入 Java Class 的示意圖

圖 23 程式編輯，系統運作流程圖 Edit/Compile

Write C codes

GCC Check

Convert C Codes into Java Codes

Insert Java Codes to Java

Template file

Run

Java Compiler

Class file

Start

Invoke Game Dynamically

Class Reloading

Client Proxy Dynamic Class

4 : return

3: return 1 : invoke

2 : forward invocation

Dynamic Class (reloaded) Link Update

(35)

26

3.3 功能展示

本系統包含了七個主要的元件，如下所述:

(1) Road Map : 顯示學習者各章概念的學習狀況。

(2) Presentation : 提供一個平台可供閱讀課程的教材。

(3) Example : 配合課程教材，提供每一種概念合適的程式範例展示。

(4) Exercise : 配合課程教材，提供每一種概念合適的題目給予使用者練習，難度上比 Example 增加一個等級。

(5) Test: 配合課程教材，提供每一種概念合適的題目給予使用者做挑戰，難度上比 Exercise 增加一個等級。

(6) Progress Evaluation : 提供教學者和學習者查看目前所有人的學習情況。

(7) Questionnaire: 提供問卷調查平台，調查每位使用者在使用系統平台後的意見。

 Login Page

系統執行時會顯示一個登入畫面顯示如下圖，其中包含兩個功能分別是 Login」和「Register」。

Login : 提供使用者輸入帳號和密碼，如果輸入都正確的話即可進入遊戲畫，

畫面如圖 24 所示。

Register : 提供沒有帳號的使用者申請一組新的帳號和密碼做為日後登入系統時可以使用，畫面如圖 25 所示。

圖 24 系統登入畫面

(36)

27

圖 25 系統帳號申請畫面

 Welcome Page

為了給學習者一個有趣的開始，我們在遊戲登入後的畫面放置了一個遊戲圖片如圖 26 所示，並同時播放 battle(戰鬥)音效，提高學習者的學習興趣。

此畫面和音效取自於 Java Bomberman Project[46]。

圖 26 Welcome Page 遊戲歡迎畫面

(37)

28

 Road Map

主要功能為呈現出學習者的學習狀況，在圖中會顯示出總共的關卡數量以及通過的關卡數量，畫面如圖 27 所示，目前總共有 11 個關卡，當學習者通過每一道關卡之後，就會立即在此呈現出結果，在過關後的關卡上會出現一個「PASS」的標語，表示已經過關。如此一來能讓使用者很清楚明瞭自己的學習狀況，也能增加學習者想往下一關挑戰的動機。

圖 27 Road Map 功能畫面

 Presentation

此功能是提供教材以幻燈片方式來播放，畫面如圖28所示，可供老師上課教學時使用或是學習者自我閱讀，此功能類似「 Microsoft PowerPoint」，所以在使用上不會有任何的使用上的困擾。而此功能是將 Jxpose[47]開放源碼的軟體整合進入我們的遊戲系統平台上，另外加入了兩個功能鍵，「Full Screen Show」和「Load Chapter」 :

Full Screen Show : 主要為可以將教材畫面以全螢幕的方式進行播放。

(38)

29

Load Chapter : 顯示目前有那些章節的內容，點選後即可顯示想要的章節教材內容，畫面如圖 29 所示。

圖 28 Presentation 功能畫面

圖 29 Load Chapter 功能畫面

(39)

30

 Example

此功能主要是增加學習上的豐富性，配合著教材來增加學習者的學習興趣。當學習者學習了Presentation的教材後，可以經由此功能來觀看以及學習，透過觀看簡單的片斷程式碼如何來控制Bomberman的遊戲畫面，和系統之間產生互動，一方面能夠提高學習的動機，另一方面也能夠學習到真正的程式概念。

在此系統中，包含兩個分頁:「Sample Function」、「Run」，學習者可藉由點選分頁來控制，在「Sample Function」分頁中如圖30所示，分隔出了兩個區域，畫面上頭的是此範例的題目說明，說明題目的內容，下面的部分則是控制遊戲執行的程式片斷程式碼。

此外在「Run」分頁中如圖 31 所示，也是分為兩個部分，上面是配合題目所顯示出的圖例，下面則是一組功能列，包含可以選擇範例的下拉選單，

和一個「start」的執行按鍵，當使用者按下「Start」按鍵後就會彈出遊戲執行視窗如圖 32，此視窗所顯示的是片斷程式碼的執行結果。

(40)

31

圖 30 Example 中 Sample Function 分頁功能執行畫面

圖 31 Example 中 Run 分頁功能執行畫面

(41)

32

圖 32 遊戲執行畫面

 Exercise

此功能是給學習者練習時使用，在此功能下，學生能夠針對題目做反覆練習(Drill-and-Practice)，增加學習學習樂趣，達到 Learn by Doing(做中學) 的效果。

功能部分一樣有兩個分頁，「Run」和「Edit/Compile」。使用者可藉由點選分頁來控制。「Run」分頁功能和 Example 中的一樣，如圖 33 所示，

可以選擇要練習的概念和進行遊戲的執行。而「Edit/Compile」分頁分為三個部分，如圖 34 所示，最上面部分是練習題目說明，中間位置的部分則是使用者程式碼撰寫的地方，此外，在最下面的地方多了一組功能鍵，分別有

「Clear」、「Load」、「Save」、「Compile」四項功能，功能說明如下所述:

Clear : 此功能是用來清除所有的片斷程式碼。

(42)

33

Load : 此功能是給使用者載入之前寫過的程式碼，執行後會彈出一個載入檔案提示視窗，畫面如下圖 35 所示，使用者可以瀏覽資料夾中的檔案。

Save : 則是給學習者儲存撰寫完的程式碼，執行後彈出一個儲存功能的提示視窗，畫面如下圖 36，使用者可以瀏覽資料夾，在選擇想要儲存的位置，

輸入檔案名稱後存檔。

Compile : 主要是給學習者進行編譯用，當使用者程式有誤時則會彈出程式碼錯誤提示視窗，畫面圖 37 所示，如此一來學習者也能夠進行問題解決能力的訓練。

圖 33 Exercise 中 Run 分頁功能執行畫面

(43)

34

圖 34 Exercise 中 Edit/Compile 分頁執行畫面

圖 35 Load 功能執行畫面

(44)

35

圖 36 Save 功能執行畫面

圖 37 Compile 功能執行畫面

(45)

36



Test

提供了一個好的測詴學習者的學習情況，由於本系統採用漸進式學習方式，

所以學者在 Example 時的學習和 Exercise 的學習後，具備了一定程度的了解，

因此可藉由 Test 來測詴自己是否真的已經完全理解每一章的概念。

Test 畫面如圖 38 所示，而功能部分則和 Exercise 中是一樣的，不過在通過 Test 之後會在 Road Map 中顯示出挑戰關卡成功的圖示。

圖 38 Test 功能執行畫面

 Progress Evaluation

Progress Evaluation 主要是將學習者的學習情況傳送到伺服器端收集後做分析，然後在伺服器端以 Servlet Page 方式呈現出所有人的學習狀況的統計圖表。而使用者端瀏覽功能可以看見伺服器端的統計圖，畫面如圖 39 所示，有兩個下拉選單一個可以選擇統計圖類型，另外一個可以選則組別。並顯示出每章的過關和沒過關的人數統計，green 表總人數，red 表示沒有過關的人數，blue 表示過關的人數。

(46)

37

圖 39 Progress Evaluation 學習狀態統計圖

 Questionnaire

此功能是希望每位學習者在使用此系統後能夠即時的給予意見，透過簡單的問卷調查能夠了解學習者的想法，如此可以做為系統平台調整的依據，

使用系統能夠更加完善，功能畫面如圖 40，使用者以點選和下拉選項方式做對此系統的問題調查，填選完按下傳送，所以資料會立即的傳到伺服器做資料的收集，做為以後系統平台調整的參考。

(47)

38

圖 40 Questionnaire 問卷調查功能畫面

3.4 教材範例

本系統在教材設計上採用事先設計好關卡內容然後給予使用者學習，而目前所含概 C 程式語言的部分有以下四個概念:「一維陣列」、「二維陣列」、「if-else 敘述」、「switch-case 概念」，此外由於本系統是使用漸進式學習的方式，所以每章概念學習的流程 Example-> Exercise->Text，每階段的難度有所差異以下根據各概念教材進行每階段的說明。

3.4.1 第一章概念: 一維陣列

此章目的是要讓學習者熟悉使用 C 程式語言中的一維陣列的概念，讓學習者觀察陣列中的圖示，然後藉由改變陣列中的圖示逹成題目要求，進而解一維陣列的概念。

Example 1:

題目:

如圖 41 所示，藍色框中放有 8 個炸彈，是由 bombm[8]的一維陣列來顯示的，

(48)

39

宣告如下: int bombm[8] = { 3, 3, 3, 3, 3, 3, 3, 3 };請利用 bombm 一維陣列以及代碼，改成和紅色框中一樣的圖示。

(代碼:3 為 Bomb(炸彈)、23 為 GRAPE(葡萄)、24 為 STRAWBERRY(草莓)、25 為 CARROT (蘿蔔)、26 為 WATERMELON(西瓜))

提示:當代碼改變時，圖案即會變更。

片斷程式碼解答:

bombm[0]=23;

bombm[1]=23;

bombm[2]=23;

bombm[3]=23;

bombm[4]=23;

bombm[5]=23;

bombm[6]=23;

bombm[7]=23;

(49)

40

圖 41 Example 1 題目圖示

Exercise 1:

題目:

bombm[0]=24;

bombm[1]=24;

(50)

41 bombm[2]=24;

bombm[3]=24;

bombm[4]=25;

bombm[5]=25;

bombm[6]=25;

bombm[7]=25;

圖 42 Exercise 1 題目圖示 Test 1:

題目:

(51)

42

bombm[0]=23;

bombm[1]=24;

bombm[2]=25;

bombm[3]=26;

bombm[4]=23;

bombm[5]=24;

bombm[6]=25;

bombm[7]=26;

(52)

43

圖 43 Test 1 題目圖示

3.4.2 第二章概念: 二維陣列

此章目的是要讓學習者熟悉使用 C 程式語言中的二維陣列的概念，讓學習者觀察陣列中的圖示，然後藉由改變陣列中的圖示逹成題目要求，進而解二維陣列的概念。

Example 2:

題目:

如圖 44 所示藍色框中放有 16 個炸彈，是由 bombm[2][8]二維陣列來顯示的，

宣告如下:int bombm[2][8] = {{ 3, 3, 3, 3, 3, 3, 3, 3},{ 4, 4, 4, 4, 4, 4, 4, 4}};請利用 bombm 二維陣列以及代碼，改成和紅色框中的一樣的圖示。

( 代碼 :3 為 Bomb( 炸彈 ) 、 4 為箱子 (Box) 、 23 為 GRAPE( 葡萄 ) 、 24 為 STRAWBERRY(草莓)、25 為 CARROT (蘿蔔)、26 為 WATERMELON(西瓜))

(53)

44 提示:當代碼改變時，圖案即會變更片斷程式碼解答:

bombm[0][0]=24;

bombm[0][1]=24;

bombm[0][2]=24;

bombm[0][3]=24;

bombm[0][4]=24;

bombm[0][5]=24;

bombm[0][6]=24;

bombm[0][7]=24;

bombm[1][0]=25;

bombm[1][1]=25;

bombm[1][2]=25;

bombm[1][3]=25;

bombm[1][4]=25;

bombm[1][5]=25;

bombm[1][6]=25;

bombm[1][7]=25;

(54)

45

圖 44 Example 2 題目圖示 Exercise 2:

( 代碼 :3 為 Bomb( 炸彈 ) 、 4 為箱子 (Box) 、 23 為 GRAPE( 葡萄 ) 、 24 為 STRAWBERRY(草莓)、25 為 CARROT (蘿蔔)、26 為 WATERMELON(西瓜)) 提示:當代碼改變時，圖案即會變更

bombm[0][0]=24;

bombm[0][1]=24;

bombm[0][2]=24;

bombm[0][3]=24;

(55)

46 bombm[0][4]=25;

bombm[0][5]=25;

bombm[0][6]=25;

bombm[0][7]=25;

bombm[1][0]=25;

bombm[1][1]=25;

bombm[1][2]=25;

bombm[1][3]=25;

bombm[1][4]=24;

bombm[1][5]=24;

bombm[1][6]=24;

bombm[1][7]=24;

圖 45 Exercise 2 題目圖示

(56)

47 Test 2:

題目:

( 代碼 :3 為 Bomb( 炸彈 ) 、 4 為箱子 (Box) 、 23 為 GRAPE( 葡萄 ) 、 24 為 STRAWBERRY(草莓)、25 為 CARROT (蘿蔔)、26 為 WATERMELON(西瓜)) 提示:當代碼改變時，圖案即會變更

bombm[0][0]=23;

bombm[0][1]=24;

bombm[0][2]=25;

bombm[0][3]=26;

bombm[0][4]=23;

bombm[0][5]=24;

bombm[0][6]=25;

bombm[0][7]=26;

bombm[1][0]=26;

bombm[1][1]=25;

bombm[1][2]=24;

bombm[1][3]=23;

bombm[1][4]=26;

bombm[1][5]=25;

bombm[1][6]=24;

bombm[1][7]=23;

(57)

48

3.4.3 第三章概念: if-else 敘述

此章目的是要讓學習者熟悉使用 C 程式語言中的 if-else 敘述的概念，讓使用者利用片斷程式碼來控制炸彈超人移動方式，逹到題目的要求，進而學習到 C 程式語言中的 if-else 敘述的概念。

Example 3:

題目:

如圖 47 所示，利用 if-else 的敘述，幫助炸彈超人走到右上角的出口，即可過關。

(代碼:FLOOR 表示無障礙物，direction 為儲存炸彈超人行走向之變數有下面 4 種方向可選擇 RIGHT 表示向右、LEFT 表示向左、UP 表示向上、DOWN 表示向下，例如:當程式碼為 direction=RIGHT;炸彈超人將為向右行走，依此類推。而

(58)

49 地圖則是由一個 maze[i][j]的陣列所構成) 提示:maze[i][j+1]表示往右一格的位置 maze[i+1][j]表示往下一格的位置

if (maze[i+1 ][j] == FLOOR){

direction = RIGHT;

}

圖 47 Example 3 題目圖示

(59)

50 Exercise 3:

題目:

如圖 48 所示，利用 if-else 的敘述，幫助炸彈超人走到左下角的出口，即可過關。

(代碼:FLOOR 表示無障礙物，direction 為儲存炸彈超人行走向之變數有下面 4 種方向可選擇 RIGHT 表示向右、LEFT 表示向左、UP 表示向上、DOWN 表示向下，例如:當程式碼為 direction=RIGHT;炸彈超人將為向右行走，依此類推。而地圖則是由一個 maze[i][j]的陣列所構成)

提示:maze[i][j+1]表示往右一格的位置 maze[i+1][j]表示往下一格的位置片斷程式碼解答:

if(maze[i][j+1] == FLOOR){

direction = DOWN;

}

(60)

51 Test 3:

題目:

如圖 49 所示，利用 if-else 的敘述，幫助炸彈超人走到右下角的出口，即可過關。(代碼:FLOOR 表示無障礙物，direction 為儲存炸彈超人行走向之變數有下面 4 種方向可選擇 RIGHT 表示向右、LEFT 表示向左、UP 表示向上、DOWN 表示向下，例如:當程式碼為 direction=RIGHT;炸彈超人將為向右行走，依此類推。

而地圖則是由一個 maze[i][j]的陣列所構成)

提示:maze[i][j+1]表示往右一格的位置 maze[i+1][j]表示往下一格的位置片斷程式碼解答:

if (maze[i+1 ][j] == FLOOR){

direction = DOWN;

} else {

direction = RIGHT;

}

(61)

52

3.4.4 第四章概念: switch-case 概念

此章目的是要讓學習者熟悉使用 C 程式語言中的 switch-case 敘述的概念，

讓使用者利用片斷程式碼來計算控炸彈超人移動過程中所經過的水果價錢總合，

進而學習到 C 程式語言中的 switch-case 敘述的概念。

Example 4:

題目:

如圖 50 所示，請利用 switch-case 敘述和下面各代碼，計算炸彈超人走過的水果價格總合，價格:葡萄一個 500、草莓一個 300，蘿蔔一個 200，西瓜一個 100 (代碼: 3 為 Bomb (炸彈)、23 為 GRAPE (葡萄)、24 為 STRAWBERRY (草莓) 、 25 為 CARROT (蘿蔔) 、26 為 WATERMELON (西瓜) )

grape_price 表示葡萄的價格總額之變數，初始值為 0 carrot_price 表示蘿蔔的價格總額之變數，初始值為 0 strawberry_price 表示草莓的價格總額之變數，初始值為 0 watermelon_price 表示西瓜的價格總額之變數，初始值為 0

提示: 地圖是由一個 maze[i][j]的陣列所構成 maze[i][j+1]表示右邊一格的位置 maze[i+1][j]表示下面一格的位置片斷程式碼解答:

int z=0;

switch (maze[i][j+1]) { case 23:

grape_price=grape_price+500;

break;

}

(62)

53

圖 50 Example 4 題目圖示 Exercise 4:

題目:

提示: 地圖是由一個 maze[i][j]的陣列所構成

(63)

54 maze[i][j+1]表示右邊一格的位置 maze[i+1][j]表示下面一格的位置

grape_price=grape_price+500;

break;

case 24:

strawberry_price=strawberry_price+300;

break;

}

(64)

55 Test 4:

題目:

提示: 地圖是由一個 maze[i][j]的陣列所構成 maze[i][j+1]表示右邊一格的位置 maze[i+1][j]表示下面一格的位置

grape_price=grape_price+500; break;

case 24:

strawberry_price=strawberry_price+300; break;

case 25:

carrot_price=carrot_price+200; break;

case 26:

watermelon_price=watermelon_price+100; break;

}

(65)

56

(66)

57

第四章實驗方法 4.1 實驗目的

本實驗目的在於評估 Bomberman 遊戲式學習系統平台結合 C 語言程式設計課程教學，對學習者的學習成效、學習態度及學習動機上是否有所影響，以及該影響是否為正面、支持，並作為日後融入大學 C 語言程式設計課程教學輔助工具。

4.2 問卷調查量表設計

本研究為了評估 Bomberman 遊戲式學習系統平台是否真的對於學習者有否助益，以及對於本系統的一些看法，因此我們主要針對以下幾個方面去設計問卷調查量表題組:

(1) 原創性:學習者是否認為此系統為新穎的工具?

(2) 易於使用:學習者在本系統之各項操做上的認定為程度何?

(3) 有用性:學習者對本系統之各項有用性的認定為程度何?

(4) 使用的態度:學習者對本系統各項使用態度上的認定程度為何?

(5) 使用意願: 學習者對本系統各項使用意願上的認定程度為何?

(6) 有趣性: 學習者對於使用本系統後是否有趣的認定程度為何？

(7) 概念的幫助:學習者對於使用本系統後學習到那些 C 語概念?

4.3 實驗背景

實驗地點為中華大學資管系 M315 實驗室，對象為該系所開之 C 語言程式設計課程之修課學生，人數統計如表 3，男生 38 人、女生 25 人，總人數為 63 人，

各所占之比例男生 60.32%、女生 39.68% 。年齡層統計如表 4，18 歲有 10 人、

19 歲有 27 人、20 歲有 10 人、21 歲以上的有 7 人。而修過程式次數方面統計如表 5 所示，一次的有 48 人、二次的有 9 人、三次的有 5 人。

實驗課程教材內容為「C 語言程式設計」中的一維陣列、二維陣列、if-else

(67)

58

敘述、switch-case 敘述四種 C 語言程式設計的基礎概念，透過數位遊戲式學習方式教學。

本研究 Bomberman 遊戲式學習系統平台，定位在輔助性教學工具，激發學習者學習動機，Bomberman 遊戲式學習系統平台透過遊戲闖關的方式，提高學習者學習動機、複習學習內容及補強學習時遺漏掉的部份，因此 Bomberman 遊戲式學習系統平台之融入將與課程進度緊密結合。

表 3 人數統計

人數 所占比例(百分比)

男 38 60.32%

女 25 39.68%

表 4 年齡層統計

人數 百分比

18 19 30.16%

19 27 42.86%

20 10 15.87%

21 以上 7 11.11%

表 5 修過程式次數人數統計

人數 百分比

一次 48 78%

二次 9 14%

三次 5 8%

四次以上 0 0%

4.4 問卷調查分析

本研究 Bomberman 遊戲式學習系統平台透過漸進式的遊戲闖關方式，提高學習者學習動機、不會因一開始因關卡過難而導致學習效果差，以下是本系統對使用者所做的問卷調查分析:

4.4.1 問卷調查各項分析

(68)

59 (1) 認為有幫助的觀念

在本系統中，我們加入了四個主要的 C 語言程式的概念關卡給使用者學習，

根據項目「認為有幫助的觀念」的調查結果，如下圖 53 所示，「一維陣列」、

「二維陣列」、「switch-case 敘述」的概念都超過 70%的人認為是有幫助，而「if-else 敘述」也有接近 70%的人認為是有幫助學習此概念。顯示出大部分的人對於系統內教材對於學習者本身是有所幫助的。

圖 53 認為有幫助的觀念調查 (2) 第一次看到這樣的系統

針對調查項目中覺得「第一次看到這樣的系統」的調查結果如下圖 54 所示，

非常贊成有 39.68%、贊成有 48.21%，兩者加起來超過 80%，所以此系統對大部分的使用者來而言可說是一個新穎的學習輔助工具。

圖 54 第一次看到這樣的系統調查

71.43%

74.60%

69.84%

74.60%

66.00% 68.00% 70.00% 72.00% 74.00% 76.00%

一維陣列二維陣列 if-else敘述 switch-case敘述

認為有幫助的觀念

0.00%

11.11%

49.21%

39.68%

0.00% 10.00% 20.00% 30.00% 40.00% 50.00% 60.00%

非常不贊成不贊成普通贊成非常贊成

第一次看到這樣的系統

(69)

60 (3) 功能按鍵容易找到

針對調查項目中覺得「功能按鍵容易找到」的調查結果如下圖 55 所示，非常贊成有 28.57%、贊成有 38.10%，兩者加起來超過 75%，所以此系統的按鍵位置對大部分的使用者來能夠很容易就能找到。

圖 55 功能按鍵容易找到調查 (4) 覺得提供的功能容易使用

針對調查項目中覺得「覺得提供的功能容易使用」的調查結果如下圖 56 所示，非常贊成有 31.75%、贊成有 39.68%，兩者加起來超過 70%，所以此系統對大部分的使用者而言使用上並不會增加負擔，也不會有使用上的因擾，沒有新工具適應上的問題。

圖 56 覺得提供的功能容易使用調查

0.00%

6.35%

26.98%

38.10%

28.57%

0.00% 10.00% 20.00% 30.00% 40.00% 50.00%

功能按鍵容易找到

0.00%

6.35%

22.22%

39.68%

31.75%

0.00% 10.00% 20.00% 30.00% 40.00% 50.00%

覺得提供的功能容易使用

(70)

61 (5) 學習過程容易

針對調查項目中覺「學習過程容易」調查結果如下圖 57 所示、非常贊成有 28.57%、贊成有 38.10%，兩者加起來超過 66.67%，在學習過程中大部的使用者覺得是容易。

圖 57 學習過程容易調查 (6) 此系統提供好的程式學習知識

針對調查項目中覺得「此系統提供好的程式學習知識」調查結果如下圖 58 所示，非常贊成有 31.75%、贊成有 39.68%，兩者加起來超過 70%，所以此系統對大部分的使用者而言在學習上能夠吸收到程式設計的一些概念，不會有吸收知識上的問題。

圖 58 此系統提供好的程式學習知識調查

0.00%

6.35%

26.98%

38.10%

28.57%

0.00% 5.00% 10.00%15.00%20.00%25.00%30.00%35.00%40.00%45.00%

學習過程容易

0.00%

3.17%

26.98%

46.03%

23.81%

0.00% 10.00% 20.00% 30.00% 40.00% 50.00%

此系統提供好的程式學習知識

(71)

62 (7) 此系統提供好的學習環境

針對調查項目中覺得「此系統提供好的學習環境」調查結果如下圖 59 所示，

非常贊成有 28.57%、贊成有 49.21%，兩者加起來超過 75%，所以此系統對大部分的使用者而言認為此系統是一個好的學習環境。此系統對大部分的使用者而言認為此系統是一個好的學習環境。

圖 59 此系統提供好的學習環境調查 (8) 此系統能幫助學習

針對調查項目中覺得「此系統能幫助學習」調查結果如下圖 60 所示，非常贊成有 26.98%、贊成有 46.03%，兩者加起來超過 70%，所以此系統對大部分的使用者而言認為此系統是在學習上是有所助益的。

圖 60 此系統能幫助學習調查

1.59%

0.00%

20.63%

49.21%

28.57%

0.00% 10.00% 20.00% 30.00% 40.00% 50.00% 60.00%

此系統提供好的學習環境

1.59%

23.81%

46.03%

26.98%

0.00% 10.00% 20.00% 30.00% 40.00% 50.00%

以炸彈超人遊戲為基礎之程式語言學習工具 -以 C 語言為例