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

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

關(guān)鍵詞： 職業(yè)院校； 教育游戲； AppCan； 網(wǎng)絡(luò)算法

中圖分類號：TP393 文獻標(biāo)志碼：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 引言

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

1 網(wǎng)絡(luò)教育游戲《填圖》的設(shè)計

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

2 網(wǎng)絡(luò)教育游戲《填圖》的實現(xiàn)

創(chuàng)建填圖游戲的起點，用來控制坐標(biāo)和數(shù)據(jù)類型。一個房間有四面墻，當(dāng)處于房間中時，房間點就是正在被訪問的結(jié)點，當(dāng)打通到下一房間時，剛剛處于的點便標(biāo)記為已訪問過的點。

Function point（x，y，type） {

this.x=x； //x指行數(shù)

this.y=y； //y指列數(shù)

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

this.visit=false； //標(biāo)記該結(jié)點是否被訪問過

}

規(guī)劃填圖游戲的矩陣，行數(shù)和列數(shù)分別為s和t。

Function gezi（s，t） {

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

this.col=2*t+1； //填圖列數(shù)

this.points=new array（this.row）； //放結(jié)點的數(shù)組

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

this.inital=false； //是否已經(jīng)初始化

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

}

使用一個Init函數(shù)封裝，定義墻和房間。使用If函數(shù)來判斷矩陣中的值，如果除以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）； //標(biāo)注為墻

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

//標(biāo)注為房

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

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

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

while（this.stack.length>0） {

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

//最后壓入的節(jié)點作為當(dāng)前結(jié)點

var map=this.getvisitables（current）；

//得到當(dāng)前結(jié)點可訪問的所有節(jié)點放入map中

if（map.size（）>0） {

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

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

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

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

next.visit=true； //將下一個結(jié)點標(biāo)記為“已訪問”

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

else { this.stack.pop（） }}} //如果不存在可訪問的結(jié)點則刪除當(dāng)前結(jié)點

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

this.create=function（） { //創(chuàng)建拼圖的地圖坐標(biāo)數(shù)據(jù)

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；}}

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

3 結(jié)束語

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

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

參考文獻（References）：

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

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

[2] 徐增敏，崔忠寧，湛永松，陳光喜.J2SE網(wǎng)絡(luò)游戲設(shè)計與實現(xiàn)[J].

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

[3] 姜福成.基于HTML5網(wǎng)頁地圖瀏覽器的開發(fā)與應(yīng)用[J].計算

機應(yīng)用，2014.34（s2）：364-367

[4] 鐘名春，郭琳.網(wǎng)絡(luò)技術(shù)專業(yè)核心課程教育教改創(chuàng)新研究[J].

信息安全與技術(shù)，2016.2：91-93