基于HTML5的闯关游戏式课程教学考核的设计和实现

徐晓

摘 要： 随着移动互联网的发展，网页中的功能效果将通过HTML5和JavaScript来实现。为了激发学生的学习动机，文章提出了利用HTML5和JavaScript 網页技术来实现闯关游戏式课程教学考核。其中主要利用了HTML5新增的拖放功能，并使用JavaScript控制游戏操作。

关键词： HTML5； JavaScript； 闯关游戏； 拖放

中图分类号：TP311.1 文献标志码：A 文章编号：1006-8228（2019）03-42-03

Designing and implementing a game-like assessment of course teaching with HTML5

Xu Xiao

（Wuxi Machinery and Electron Higher Professional and Technical School， Wuxi， Jiangsu 214028， China）

Abstract： With the development of mobile Internet， the function and effect in web pages will be realized by using HTML 5 and JavaScript. In order to stimulate students' learning motivation， this paper proposes to develop a game-like course teaching assessment by using HTML 5 and JavaScript web technologies. It mainly takes advantage of the drag-and-drop function added by HTML 5 and uses JavaScript to control the operation of the game.

Key words： HTML5； JavaScript； go through the game； drag and drop

0 引言

随着移动互联的迅猛发展，FLASH在移动设备中具有一定的局限性，而 HTML5 和 JavaScript拥有跨平台、不需要安装以及不需要更新等特点，只要用智能手机、平板或台式电脑的网页浏览器就可以进行操作[1]。当代学生爱玩手机，对富有激情和挑战的项目具有强烈的使用动机。如果在学习中引入闯关式教学考核项目，将课程知识融入到闯关式的游戏场景中，既考查了学生的学习能力，又契合当代学生的心理特点。学生在学习中体验到游戏的互动性、趣味性、竞争性和即时反馈等特性，必定可以提升在线学习的乐趣。

本文提出了利用 HTML5和JavaScript 网页技术来开发闯关游戏。它主要利用HTML5新增的拖放功能和使用 JavaScript 控制游戏运作。

1 HTML5和JavaScript简介

HTML5是目前HTML最新的修改版本，2014年10月由万维网联盟（W3C）完成标准制定。设计HTML5的目标是为了在移动设备上支持多媒体。HTML5的优势主要表现以下方面[2]。

⑴ 跨平台性。不需要考虑兼容性和不同平台的多个版本的发布，为开发者节省了巨大的开发投入，也是未来大家首先的开发方式。

⑵ 标准化。这个也是跨平台的基础，因为未来所有浏览器、所有设备均遵循这一标准。标准化是得以广泛使用的基础，就像TCP/IP协议，因为其标准化，才得以让网络世界互通互联。

⑶ 易学易用。人人都应该会HTML5，这是可以不需要任何特定开发环境的，只要用记事本，电脑上装有浏览器就可以开始，效果可见。第四，易传播，html5的火爆也得益于它的易传播的特点，无需安装，可以在任何设备上查看，为其传播扫清了障碍。

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

2 闯关游戏式课程教学考核的理念

让学生以一种“游戏挑战”的心态去参与课程的知识问答，最后完成课程知识点的自主考核。基于这样的考核方式可以让学生们充分地发挥学习和获取知识积极性，最大程度地激起他们的学习热情，并对游戏过程中发生的错误印象深刻。本文闯关游戏式课程教学考核的理念，对每个知识点设计相应的题库；对每一个过关难度的等级进行研究和设计；对学生参与做题游戏的互动方式进行设计，最后实现一个基于做题游戏的课程知识点教学考核系统。学生在闯关游戏式课程教学考核的交互体验中，将课程知识最大化地展现出来，达到了非常好的教学考核效果[3]。

3 闯关游戏的基本知识点

HTML5最大的优势在于它可以在PC机上、笔记本电脑、平板设备、智能手机上运行使用。当代学生爱玩手机以及对富有激情和挑战的项目具有强烈的使用动机，闯关游戏是一款受众群体非常高，中、小学生，大学生，以及上班白领都特别喜欢闯关类的小游戏。使用HTM5开发游戏，具备其他开发游戏的工具无可比拟的优势。它提供专门的拖拽与拖放的API，就是在某个元素上按下鼠标后移动鼠标（没有松开鼠标），这时就可以开始拖动；在拖动的这个过程中，只要不松开鼠标，就会不断产生事件——这个过程称为“拖”。把被拖动的元素拖动到另外一个元素上并松开鼠标——这个过程被称为“放”。所用到的基本知识点如表1所示[4]。

4 闯关游戏的实现

⑴ 页面设计。该闯关游戏采用 HTML5、CSS3、JavaScript进行开发。利用 JavaScript调用拖放的API来实现拖拽和拖放，学生通过拖拽答案到指定位置，若错误则提示不匹配，若正确就进入下一关。当全部答对就显示闯关成功。该闯关游戏通过CSS3进行样式设计，实现了游戏页面布局，分别如图1、图2所示。

⑶ 当被拖动的元素在在拖动到放置目标时会触发ondragover事件，它用来设置被拖动的元素的放置问题。默认情况下，无法将被拖动的元素放置到其他元素中。 若要实现这一功能，我们需要防止元素的默认处理方法。我们可以通过调用event.preventDefault（）方法来实现ondragover事件。

⑷ 当放置被拖数据时，会发生drop事件。ondrop事件调用drop（event）函数，这一函数用来判断闯关是否成功，若成功就进入下一关，否则继续学习。具体代码如下所示：

⑸ 知识点闯关游戏中每一关试题都题库随机产生，每一关之间的试题都确保不会重复。如果过关，则进入下一关题库游戏，否则重回上一关题库游戏[5]。本文当学生闯完100道题目，表示学生巳经掌握全部课程内容，如图3所示。

5 结束语

HTML5技术相对于flash技术具有更大的优势，越来越多的人采用HTML5来设计游戏化课程。本文利用HTML5和JavaScript网页技术来开发相关课程知识点的闯关游戏，以便让学生更清楚自己相关知识点的掌握程度，增强学生的学习动机，非常有效地提高了学生的课程参与度。这种灵活的检测方式让学生轻松许多，也促进了学生的学习兴趣。学生在闯关游戏中会主动吸收相关的知识点，以便向考核游戏发起挑战。实践表明，采用这种方法成效明显，受到了师生一致的好评。

参考文献（References）：

[1] 冯科融，王和兴.HTML5网页游戏分析[J].电脑编程技巧与维

护，2012.24：71-72

[2] 韩敏.浅谈网页制作新技术HTML5[J].福建电脑，2018.9：

106-107

[3] 黎志雄，黄彦湘，陈学中.基于HTML5游戏开发的研究与实

现[J].东莞理工学院学报，2014.10：49-53

[4] 臧金梅.基于HTML5的简单拼图游戲的设计和实现[J].信息

技术与信息化，2017.12：22-24

[5] 刘志锋，魏振华，蒋年德等.闯关游戏思想在C/C++语言程序

设计课程教学中的应用研究[J].东莞理工大学学报，2014.4：390-393