基于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