基于AppCan平臺網絡教育游戲的設計與實現

DOI：10.16644/j.cnki.cn33-1094/tp.2016.09.013

摘 要： 教育游戲融學習與娛樂功能為一體，為計算機網絡技術專業教學提供了一種新途徑，對職業院校網絡技術專業核心課程教育教改創新產生重要影響。本文從網絡教育游戲主題設計出發，利用AppCan平臺和photoshp技術相結合設計并實現了一款網絡教育小游戲《填圖》。將網絡深度搜索算法融入其中，論述了該游戲設計及開發的理念和技術要點，以期對其他教育游戲的設計和開發起到拋磚引玉的作用。

關鍵詞： 職業院校； 教育游戲； AppCan； 網絡算法

中圖分類號：TP393 文獻標志碼：A 文章編號：1006-8228（2016）09-49-02

Design and realization of online educational game on AppCan platform

Zhong Mingchun

（Foshan City Shunde District secondary school， Shunde， Guangdong 528300， China）

Abstract： The game with education and entertainment function provides a new way for the computer network technology teaching， and it has important influence on the innovation of the core curriculum of the vocational school network technology specialty. In this paper， starting from the network educational game design theme， combining AppCan platform with photoshp technology， being integrated with the network depth search algorithm， a online educational game "mapping" is designed and realized. The concept and key technology of the game design and development is discussed， in order to break the ice for other educational game design and development.

Key words： vocational college； educational game； AppCan； network algorithm

0 引言

教育游戲的教育功能、學習機制為專業課程教學創新提供了一種新的途徑，對教育和學習方式的變革產生重大影響[1]。很多現有游戲程序研究文獻主要是針對游戲的開發技術和實現框架的探討，缺乏對游戲主題的思考和分析[2]，因此，本文從網絡教育游戲主題設計出發，闡述了以網絡深度優先遍歷算法為基礎的，基于AppCan平臺的網絡教育游戲《填圖》開發詳細過程。本游戲采用AppCan平臺和photoshop技術相結合進行開發，使用photoshop進行圖片處理，使用AppCan平臺實現數據的存儲和調用。HTML5的核心優勢是跨平臺運行，既支持桌面平臺又支持包括IOS、Android在內的移動平臺[3]。AppCan著重解決了基于HTML5的移動運用體驗差的問題，支持多窗口機制，通過頁面鏈接方式靈活開發移動應用。

1 網絡教育游戲《填圖》的設計

深度優先遍歷算法是搜索算法的一種，沿著深度遍歷樹的節點盡可能深的搜索樹的分支，當節點的所有邊都被搜尋過，則回溯到發現節點的那條邊的起始節點，此過程一直重復到所有節點都被訪問為止。選擇圖中某一結點為出發點，訪問并標記該結點，以該結點為出發點搜索它的每個鄰接點，若鄰接點未被訪問過，則訪問并標記，若訪問過，則搜索下一個鄰接點，又以該鄰接點為起點重復上一步驟，直到圖中所有與結點有路徑相通的結點都被訪問為止，若圖中還有結點未被訪問過，則任意選取一個未被訪問過的結點為出發點重復以上過程，直到圖中所有結點都被訪問過。填圖游戲的核心算法步驟為：先從棧中取出最后進去的結點作為當前結點，將此結點周圍的可訪問結點放入一個數組中，從可訪問節點的數組中隨機找出下一個可以訪問的結點，打通與下一個節點的連接，并將下一個節點標記為“已訪問”，將下一個結點放入棧中，再重新開始循環，直到數組中沒有任何節點為止。這種算法從起點到終點的路徑是惟一的，但拼圖的行數和列數只能為奇數。

2 網絡教育游戲《填圖》的實現

創建填圖游戲的起點，用來控制坐標和數據類型。一個房間有四面墻，當處于房間中時，房間點就是正在被訪問的結點，當打通到下一房間時，剛剛處于的點便標記為已訪問過的點。

Function point（x，y，type） {

this.x=x； //x指行數

this.y=y； //y指列數

this.type=type； //type指類型，包括兩種：wall和room

this.visit=false； //標記該結點是否被訪問過

}

規劃填圖游戲的矩陣，行數和列數分別為s和t。

Function gezi（s，t） {

this.row=2*s+1； //填圖的行數

this.col=2*t+1； //填圖列數

this.points=new array（this.row）； //放結點的數組

this.stack=new array（）； //作為棧，用來放置訪問過的結點

this.inital=false； //是否已經初始化

this.mapmatrix=new array（this.row）； //填圖矩陣

}

使用一個Init函數封裝，定義墻和房間。使用If函數來判斷矩陣中的值，如果除以2等于0時，判斷為墻壁，并把type類型更改為wall，否則，將type類型更改為room。

this.init=function（） { //初始化地圖上所有的點

for （var i=0； i

this.points[i]=new array（this.col）；

for（var j=0； j

if（i*2==0//j%2==0） {

this.points[i][j]=new gezipoint（j，I，wall）； //標注為墻

} else {this.points[i][j]=new gezipoint（j，I，room）；}}}}

//標注為房

隨機生成地圖的算法如下。

this.randomgezi=function（） { //隨機生成地圖

this.stack.push（this.points[1][1]）； //先將起點壓入棧中

while（this.stack.length>0） {

var current=this.stack[this.stack.length-1]；

//最后壓入的節點作為當前結點

var map=this.getvisitables（current）；

//得到當前結點可訪問的所有節點放入map中

if（map.size（）>0） {

var ran=parseint（math.random（）*map.size（））；

var randir=map.keys[ran]； //根據隨機數得到下一個方向

var next=map.get（randir）； //下一個要訪問的節點

this.open（current，randir）； //打通與下一個結點的通道

next.visit=true； //將下一個結點標記為“已訪問”

this.stack.push（next）； } //將下一個結點放入棧中

else { this.stack.pop（） }}} //如果不存在可訪問的結點則刪除當前結點

堆棧是一種運算受限的線性表，僅允許在表的一端進行插入或刪除運算，此端稱為棧頂，另一端稱為棧底。向一個棧插入新的元素稱為入棧，刪除元素稱為出棧，把棧頂元素刪除后，相連的結點成為新的棧頂元素。

this.create=function（） { //創建拼圖的地圖坐標數據

if（this.initial） { return this.mapmatrix； }

else{this.init（）； //初始化

this.randomgezi（）； //生成隨機地圖

this.initial=true；

for（var i=0；i

this.mapmatrix[i]=new array（this.col）；

for（var j=0；j

if（this.points[i][j].type==wall） {

this.mapmatrix[i][j]=1；

} else if（this.points[i][j].type=room） {

this.mapmatrix[i][j]=2；

} else if（this.points[i][j].type=aisle） {

this.mapmatrix[i][j]=3；}}}

this.mapmatrix[this.row-1][this.col-2]=4； //出口

return this.mapmatrix；}}

為便于理解，截取輸出的數字，定義1為wall，2、3、4為room，通道和出口即可畫出地圖，可以將wall更改顏色為灰色，將room和出口更改為紅色。用圖片去替換對應數字處的背景，將選好的圖片應用到畫布上即可，拼圖輸出就此完成。

3 結束語

網絡教育游戲在職業院校網絡技術專業核心課程的教育教學創新研究中得到應用，并取得了良好的教學效果。課堂上呈現的網絡教育游戲，改變了傳統的教學模式，能夠激發學生對枯燥乏味網絡知識的學習興趣，增強學習的主動性，這與以學生培養為中心的教育理念相一致[4]，這是依托教學載體的創新，能夠提高網絡技術專業課程教學質量。網絡深度遍歷算法比較抽象，學生難以理解，而填圖游戲創造出輕松有趣的氛圍，有助于學生以輕松的心態進行學習，讓知識潛移默化，有利于激發學生的專業興趣，促進理論聯系實際，提高學生解決問題的能力。

設計與開發網絡教育游戲面臨的最大問題是如何處理好教育與娛樂之間的關系，我們探討利用“小游戲機制”促進學生對知識點的理解，激發學生的學習熱情，為學習者提供一個寓教于樂的情景，促進知識的遷移，將多維教學目標融入其中，形成良好的學習效果。今后，我們將繼續進行網絡教育游戲的設計與實現，創新教學載體和實踐教學模式，激發學生學習興趣，培養符合行業需求的創新型人才，在寓教于樂的專業教學中起到示范和輻射作用。

參考文獻（References）：

[1] 李偉，趙蔚，馬杰.基于Flash+XML的中學物理教育游戲的設

計與開發[J].中國電化教育，2013.7：86-90

[2] 徐增敏，崔忠寧，湛永松，陳光喜.J2SE網絡游戲設計與實現[J].

計算機工程與設計，2013.34（10）：3574-3579

[3] 姜福成.基于HTML5網頁地圖瀏覽器的開發與應用[J].計算

機應用，2014.34（s2）：364-367

[4] 鐘名春，郭琳.網絡技術專業核心課程教育教改創新研究[J].

信息安全與技術，2016.2：91-93