基于AppCan平臺(tái)網(wǎng)絡(luò)教育游戲的設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

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

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

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

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

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

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é)點(diǎn)是否被訪問(wèn)過(guò)

}

規(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é)點(diǎn)的數(shù)組

this.stack=new array（）； //作為棧，用來(lái)放置訪問(wèn)過(guò)的結(jié)點(diǎn)

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

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

}

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

this.init=function（） { //初始化地圖上所有的點(diǎn)

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)注為房

隨機(jī)生成地圖的算法如下。

this.randomgezi=function（） { //隨機(jī)生成地圖

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

while（this.stack.length>0） {

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

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

var map=this.getvisitables（current）；

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

if（map.size（）>0） {

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

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

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

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

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

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

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

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

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

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

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

this.randomgezi（）； //生成隨機(jī)地圖

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，通道和出口即可畫(huà)出地圖，可以將wall更改顏色為灰色，將room和出口更改為紅色。用圖片去替換對(duì)應(yīng)數(shù)字處的背景，將選好的圖片應(yīng)用到畫(huà)布上即可，拼圖輸出就此完成。

3 結(jié)束語(yǔ)

網(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é)生對(duì)枯燥乏味網(wǎng)絡(luò)知識(shí)的學(xué)習(xí)興趣，增強(qiáng)學(xué)習(xí)的主動(dòng)性，這與以學(xué)生培養(yǎng)為中心的教育理念相一致[4]，這是依托教學(xué)載體的創(chuàng)新，能夠提高網(wǎng)絡(luò)技術(shù)專業(yè)課程教學(xué)質(zhì)量。網(wǎng)絡(luò)深度遍歷算法比較抽象，學(xué)生難以理解，而填圖游戲創(chuàng)造出輕松有趣的氛圍，有助于學(xué)生以輕松的心態(tài)進(jìn)行學(xué)習(xí)，讓知識(shí)潛移默化，有利于激發(fā)學(xué)生的專業(yè)興趣，促進(jìn)理論聯(lián)系實(shí)際，提高學(xué)生解決問(wèn)題的能力。

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

參考文獻(xiàn)（References）：

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

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

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

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

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

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

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

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