系統設計

第三章系統實作與展示

3.2 系統設計

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

3.2.1 系統架構

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

Client 端：

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

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

Server 端：

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

22 圖 19 系統架構

3.2.2 設計理念

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

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

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

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

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

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

圖 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

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

圖 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