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