徐曉

摘 要： 隨著移動互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁中的功能效果將通過HTML5和JavaScript來實現(xiàn)。為了激發(fā)學(xué)生的學(xué)習(xí)動機，文章提出了利用HTML5和JavaScript 網(wǎng)頁技術(shù)來實現(xiàn)闖關(guān)游戲式課程教學(xué)考核。其中主要利用了HTML5新增的拖放功能，并使用JavaScript控制游戲操作。

關(guān)鍵詞： HTML5； JavaScript； 闖關(guān)游戲； 拖放

中圖分類號：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 引言

隨著移動互聯(lián)的迅猛發(fā)展，F(xiàn)LASH在移動設(shè)備中具有一定的局限性，而 HTML5 和 JavaScript擁有跨平臺、不需要安裝以及不需要更新等特點，只要用智能手機、平板或臺式電腦的網(wǎng)頁瀏覽器就可以進行操作[1]。當代學(xué)生愛玩手機，對富有激情和挑戰(zhàn)的項目具有強烈的使用動機。如果在學(xué)習(xí)中引入闖關(guān)式教學(xué)考核項目，將課程知識融入到闖關(guān)式的游戲場景中，既考查了學(xué)生的學(xué)習(xí)能力，又契合當代學(xué)生的心理特點。學(xué)生在學(xué)習(xí)中體驗到游戲的互動性、趣味性、競爭性和即時反饋等特性，必定可以提升在線學(xué)習(xí)的樂趣。

本文提出了利用 HTML5和JavaScript 網(wǎng)頁技術(shù)來開發(fā)闖關(guān)游戲。它主要利用HTML5新增的拖放功能和使用 JavaScript 控制游戲運作。

1 HTML5和JavaScript簡介

HTML5是目前HTML最新的修改版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標準制定。設(shè)計HTML5的目標是為了在移動設(shè)備上支持多媒體。HTML5的優(yōu)勢主要表現(xiàn)以下方面[2]。

⑴ 跨平臺性。不需要考慮兼容性和不同平臺的多個版本的發(fā)布，為開發(fā)者節(jié)省了巨大的開發(fā)投入，也是未來大家首先的開發(fā)方式。

⑵ 標準化。這個也是跨平臺的基礎(chǔ)，因為未來所有瀏覽器、所有設(shè)備均遵循這一標準。標準化是得以廣泛使用的基礎(chǔ)，就像TCP/IP協(xié)議，因為其標準化，才得以讓網(wǎng)絡(luò)世界互通互聯(lián)。

⑶ 易學(xué)易用。人人都應(yīng)該會HTML5，這是可以不需要任何特定開發(fā)環(huán)境的，只要用記事本，電腦上裝有瀏覽器就可以開始，效果可見。第四，易傳播，html5的火爆也得益于它的易傳播的特點，無需安裝，可以在任何設(shè)備上查看，為其傳播掃清了障礙。

JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能，比如響應(yīng)用戶的各種操作。

2 闖關(guān)游戲式課程教學(xué)考核的理念

讓學(xué)生以一種“游戲挑戰(zhàn)”的心態(tài)去參與課程的知識問答，最后完成課程知識點的自主考核?；谶@樣的考核方式可以讓學(xué)生們充分地發(fā)揮學(xué)習(xí)和獲取知識積極性，最大程度地激起他們的學(xué)習(xí)熱情，并對游戲過程中發(fā)生的錯誤印象深刻。本文闖關(guān)游戲式課程教學(xué)考核的理念，對每個知識點設(shè)計相應(yīng)的題庫；對每一個過關(guān)難度的等級進行研究和設(shè)計；對學(xué)生參與做題游戲的互動方式進行設(shè)計，最后實現(xiàn)一個基于做題游戲的課程知識點教學(xué)考核系統(tǒng)。學(xué)生在闖關(guān)游戲式課程教學(xué)考核的交互體驗中，將課程知識最大化地展現(xiàn)出來，達到了非常好的教學(xué)考核效果[3]。

3 闖關(guān)游戲的基本知識點

HTML5最大的優(yōu)勢在于它可以在PC機上、筆記本電腦、平板設(shè)備、智能手機上運行使用。當代學(xué)生愛玩手機以及對富有激情和挑戰(zhàn)的項目具有強烈的使用動機，闖關(guān)游戲是一款受眾群體非常高，中、小學(xué)生，大學(xué)生，以及上班白領(lǐng)都特別喜歡闖關(guān)類的小游戲。使用HTM5開發(fā)游戲，具備其他開發(fā)游戲的工具無可比擬的優(yōu)勢。它提供專門的拖拽與拖放的API，就是在某個元素上按下鼠標后移動鼠標（沒有松開鼠標），這時就可以開始拖動；在拖動的這個過程中，只要不松開鼠標，就會不斷產(chǎn)生事件——這個過程稱為“拖”。把被拖動的元素拖動到另外一個元素上并松開鼠標——這個過程被稱為“放”。所用到的基本知識點如表1所示[4]。

4 闖關(guān)游戲的實現(xiàn)

⑴ 頁面設(shè)計。該闖關(guān)游戲采用 HTML5、CSS3、JavaScript進行開發(fā)。利用 JavaScript調(diào)用拖放的API來實現(xiàn)拖拽和拖放，學(xué)生通過拖拽答案到指定位置，若錯誤則提示不匹配，若正確就進入下一關(guān)。當全部答對就顯示闖關(guān)成功。該闖關(guān)游戲通過CSS3進行樣式設(shè)計，實現(xiàn)了游戲頁面布局，分別如圖1、圖2所示。

⑶ 當被拖動的元素在在拖動到放置目標時會觸發(fā)ondragover事件，它用來設(shè)置被拖動的元素的放置問題。默認情況下，無法將被拖動的元素放置到其他元素中。 若要實現(xiàn)這一功能，我們需要防止元素的默認處理方法。我們可以通過調(diào)用event.preventDefault（）方法來實現(xiàn)ondragover事件。

⑷ 當放置被拖數(shù)據(jù)時，會發(fā)生drop事件。ondrop事件調(diào)用drop（event）函數(shù)，這一函數(shù)用來判斷闖關(guān)是否成功，若成功就進入下一關(guān)，否則繼續(xù)學(xué)習(xí)。具體代碼如下所示：

⑸ 知識點闖關(guān)游戲中每一關(guān)試題都題庫隨機產(chǎn)生，每一關(guān)之間的試題都確保不會重復(fù)。如果過關(guān)，則進入下一關(guān)題庫游戲，否則重回上一關(guān)題庫游戲[5]。本文當學(xué)生闖完100道題目，表示學(xué)生巳經(jīng)掌握全部課程內(nèi)容，如圖3所示。

5 結(jié)束語

HTML5技術(shù)相對于flash技術(shù)具有更大的優(yōu)勢，越來越多的人采用HTML5來設(shè)計游戲化課程。本文利用HTML5和JavaScript網(wǎng)頁技術(shù)來開發(fā)相關(guān)課程知識點的闖關(guān)游戲，以便讓學(xué)生更清楚自己相關(guān)知識點的掌握程度，增強學(xué)生的學(xué)習(xí)動機，非常有效地提高了學(xué)生的課程參與度。這種靈活的檢測方式讓學(xué)生輕松許多，也促進了學(xué)生的學(xué)習(xí)興趣。學(xué)生在闖關(guān)游戲中會主動吸收相關(guān)的知識點，以便向考核游戲發(fā)起挑戰(zhàn)。實踐表明，采用這種方法成效明顯，受到了師生一致的好評。

參考文獻（References）：

[1] 馮科融，王和興.HTML5網(wǎng)頁游戲分析[J].電腦編程技巧與維

護，2012.24：71-72

[2] 韓敏.淺談網(wǎng)頁制作新技術(shù)HTML5[J].福建電腦，2018.9：

106-107

[3] 黎志雄，黃彥湘，陳學(xué)中.基于HTML5游戲開發(fā)的研究與實

現(xiàn)[J].東莞理工學(xué)院學(xué)報，2014.10：49-53

[4] 臧金梅.基于HTML5的簡單拼圖游戲的設(shè)計和實現(xiàn)[J].信息

技術(shù)與信息化，2017.12：22-24

[5] 劉志鋒，魏振華，蔣年德等.闖關(guān)游戲思想在C/C++語言程序

設(shè)計課程教學(xué)中的應(yīng)用研究[J].東莞理工大學(xué)學(xué)報，2014.4：390-393