HTML5游戏在信息课堂教学中的应用

摘要：随着教学要求的不断提升和新生代学生对移动终端的偏好，有必要开发一种跨平台的、运行便捷、短小精悍、可玩性强的教学游戏，而用目前最流行的HTML5来开发网页教学游戏无疑最适合的了。

关键词：HTML5;教学游戏;数据库

引言

HTML5是目前比较受欢迎的WEB标准，因为它有强大的兼容性、跨平台运行、支持安卓和IOS、网页表现佳、具有本地数据库、游戏动画效果好，在各种终端设备中有更好的体验和交互。

一、 理论基础

建构主义理论以学习者为中心的理念，支持了游戏式教学的情境设计、教学游戏交互体验、教学信息的多种表达方式及主动建构知识的过程。

体验式学习理论注重为学习者提供真实或模拟的环境和活动，学生心理特点是好奇，游戏情境下的教学系统能使学生体验到的生活乐趣和学习经验，激发学生主动学习。

二、研究现状

理论研究者多，真正开发软件者少;小打小闹多，形成系统的少;简单游戏的多，系统化游戏式的少;娱乐类H5小游戏多，H5能够连接网络数据库（比如MYSQL、MSSQL）的少。将教学内容改编成象专业游戏那样，可玩性强的游戏几乎没有了。这类软件开发几乎是个空白。有想法的老师开发不出来，有开发能力的软件企业不懂一线教学或不愿投入去开发不容易盈利的教学类项目。

三、技术分析

传统的教学课件如PPT课件的局限性大，FLASH动画消耗资源大，兼容性又差，相比之下，HTML5的优势是比较明显的：

跨平台特性，无需重写代码可以在不同平台运行，兼容性特别好;是未来的WEB标准，将广泛使用，在网络畅通无阻。

上手容易，对于老师来说，开发技术与专业团队是不能比的，而HTML5易学易懂，开发工具多，非常适合有想法的老师。

傳播快而广，现在智能手机非常普及，各种小游戏、好文章、网络调查、贺卡、相册、抽奖、促销等都用上了HTML5的网页，已经到了无人不用的地步了。

四、 游戏式教学的设计理念

据我们调查，绝大多数的学生接收以游戏的方式来学习，与其看到许多学生沉迷于游戏不能自拨，严重影响学习，不如把枯燥的教学方式改变为有趣的游戏式教学？学生以游戏挑战方式参与教学过程中的知识的问答和技能的训练，后期再进行在线自主考核，如此一来，可以充分激发学生的学习热情，我们对教材中每一个知识点进行改编，加入题库，设计了3种难度，分别用3种不同动物代表，每题有相应的经验值、金币数，答对了就奖励。学生在

游戏式教学过程中，精神高度集中，热情高涨，对知识和技能印象深刻，收到了非常好的效果。

五、 使用HTML5拖拽操作

在游戏式教学系统中，学生使用教学游戏，机房里可以使用鼠标、键盘进行操作，鼠标的操作设计简单，这里不赘述，当课后学生使用手机时，就要用到拖拽操作了。

每一个可拖动的元素，在拖动过程中，都会经历三个过程，拖动开始-->拖动过程中--> 拖动结束。

六、教材到游戏的改编

将教材中的各章节知识点进行改编，开成了HTML5网页游戏，参考各种流行的网页游戏，设计出与教材相应的游戏场景，让学生身临其境;将知识点一条条按交互方式进行设计，并有游戏的激励机制。对教材中的重点的突出、难点的突破，用HTML5动画等技术手段去突破，生动的动画、以及交互模式。在实践中很受师生欢迎。比如我们把查找哪些是“数据库管理系统”的问题，改编为了“挖地雷”游戏，借用了地雷战的场景和音乐，鼠标就变成了探测器，挖对了，就在对象上插上红旗，挖错了，对象就会爆炸，游戏结束。

七、 与数据库的连接

为了把整本教材系统化，也为了把学生学习的过程全部记录下来，开成过程性评价，我们自己架设了服务器，并创建了数据库，网页通过conn.asp与数据库连接，代码如下：

<%

' FileName="Connection_ado_conn_string.htm"

' Type="ADO"

' DesigntimeType="ADO"

' HTTP="false"

' Catalog=""

' Schema=""

Dim MM_conn_STRING

MM_conn_STRING = "PROVIDER=SQLOLEDB;DATA SOURCE=（local）;UID=sa;PWD=qjx123456;DATABASE=it"

%>

数据库是放在本地服务器，所以来源是local  用户名为sa，密码为：qjx123456，创建了一个名为it的数据库，里面存放了与教学游戏有关的student，grade等几十个数据表。有了它们，就可以全程记录学生的学习情况，形成大数据，自动记录，自动评价。

八、如游戏般的帐号登陆

为了管理和评价方便，给每一个学生一个帐号/密码，开场象游戏一样地登录。

<%Dim student1

Dim student1_numRows

Set student1 = Server.CreateObject（"ADODB.Recordset"）

student1.ActiveConnection = MM_conn_STRING

student1.Source = "SELECT *  FROM dbo.student  where 用户名='" + Replace（student1__user， "'"， "''"） + "' and 密码='" + Replace（student1__pass， "'"， "''"） + "'"

student1.CursorType = 0

student1.CursorLocation = 2

student1.LockType = 1

student1.Open（）

student1_numRows = 0 %>

<p>加載前：  接收到的</p>

<p>用户名：  <% =Request.Form（"a"） %></p>

<p>密码：  &lt;%=Request.Form（"b"）%></p>

九、研究结果

彻底摆脱传统的PPT等老旧的信息技术教学手段，成功地使用了“互联网+”与“大数据”等先进技术来研究和开发教学系统软件，成功地用html5脚本语言制作出交互式教学游戏，成功地用B/S架构实现学生机对服务器的教学系统的访问并练习，成为现有学生机房的又一种新型的网络教学模式，成功地用数据库记录并输出游戏教学数据，实现了实时评价和反馈，成功地打通了课堂内外的边界，使学生、家长、老师都可以同时用自己的帐号进入网络课堂进行学习、监督、掌握学习情况。

本课题研究取得了丰硕的成果，也产生了很积极的社会影响。因本课题研究，多个项目在各种创新比赛中获奖。比如本市的科技创新大赛一等奖、二等奖。还参加了由本市企业界参加的创新创业大赛并在58个企业中排名第8名，获三等奖，还奖了一万元。

参考文献：

[1]陆凌牛.HTML5开发精要与实例详解[M].北京：机械工业出版社，2011.

[2]姜雪荃，林星，孙亮.写给WEB开发人员看的HTML5[M].北京：人民邮电出版社，2012.

[3]秀野堂主，蒋宇捷，罗睿.论道HTML5[M].北京：人民邮电出版社，2012.

作者简介：

陈光枝（1977-）男，汉，福建福清，职务/职称：初级教师， 本科，研究方向：在线教学系统开发。

（本文为福建省教育信息技术研究课题项目，项目名称：基于H5+MYSQL的跨平台游戏式教学系统的开发与研究 项目编号FJDJ1803）