基于HTML5的闖關(guān)游戲式課程教學(xué)考核的設(shè)計(jì)和實(shí)現(xiàn)

1、    基于html5的闖關(guān)游戲式課程教學(xué)考核的設(shè)計(jì)和實(shí)現(xiàn)    徐曉摘 要： 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁(yè)中的功能效果將通過html5和javascript來實(shí)現(xiàn)。為了激發(fā)學(xué)生的學(xué)習(xí)動(dòng)機(jī)，文章提出了利用html5和javascript 網(wǎng)頁(yè)技術(shù)來實(shí)現(xiàn)闖關(guān)游戲式課程教學(xué)考核。其中主要利用了html5新增的拖放功能，并使用javascript控制游戲操作。關(guān)鍵詞： html5； javascript； 闖關(guān)游戲； 拖放：tp311.1 文獻(xiàn)標(biāo)志碼：a ：1006-8228（2019）03-42-03designing and implementing a g

2、ame-like assessment of course teaching with html5xu 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

3、 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

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

5、學(xué)習(xí)的樂趣。本文提出了利用 html5和javascript 網(wǎng)頁(yè)技術(shù)來開發(fā)闖關(guān)游戲。它主要利用html5新增的拖放功能和使用 javascript 控制游戲運(yùn)作。1 html5和javascript簡(jiǎn)介html5是目前html最新的修改版本，2014年10月由萬維網(wǎng)聯(lián)盟（w3c）完成標(biāo)準(zhǔn)制定。設(shè)計(jì)html5的目標(biāo)是為了在移動(dòng)設(shè)備上支持多媒體。html5的優(yōu)勢(shì)主要表現(xiàn)以下方面2。 跨平臺(tái)性。不需要考慮兼容性和不同平臺(tái)的多個(gè)版本的發(fā)布，為開發(fā)者節(jié)省了巨大的開發(fā)投入，也是未來大家首先的開發(fā)方式。 標(biāo)準(zhǔn)化。這個(gè)也是跨平臺(tái)的基礎(chǔ)，因?yàn)槲磥硭袨g覽器、所有設(shè)備均遵循這一標(biāo)準(zhǔn)。標(biāo)準(zhǔn)化是得以廣泛使用的基礎(chǔ)，

6、就像tcp/ip協(xié)議，因?yàn)槠錁?biāo)準(zhǔn)化，才得以讓網(wǎng)絡(luò)世界互通互聯(lián)。 易學(xué)易用。人人都應(yīng)該會(huì)html5，這是可以不需要任何特定開發(fā)環(huán)境的，只要用記事本，電腦上裝有瀏覽器就可以開始，效果可見。第四，易傳播，html5的火爆也得益于它的易傳播的特點(diǎn)，無需安裝，可以在任何設(shè)備上查看，為其傳播掃清了障礙。javascript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語(yǔ)言。同時(shí)也是一種廣泛用于客戶端web開發(fā)的腳本語(yǔ)言，常用來給html網(wǎng)頁(yè)添加動(dòng)態(tài)功能，比如響應(yīng)用戶的各種操作。2 闖關(guān)游戲式課程教學(xué)考核的理念讓學(xué)生以一種“游戲挑戰(zhàn)”的心態(tài)去參與課程的知識(shí)問答，最后完成課程知識(shí)點(diǎn)的自主考核?；谶@樣的

7、考核方式可以讓學(xué)生們充分地發(fā)揮學(xué)習(xí)和獲取知識(shí)積極性，最大程度地激起他們的學(xué)習(xí)熱情，并對(duì)游戲過程中發(fā)生的錯(cuò)誤印象深刻。本文闖關(guān)游戲式課程教學(xué)考核的理念，對(duì)每個(gè)知識(shí)點(diǎn)設(shè)計(jì)相應(yīng)的題庫(kù)；對(duì)每一個(gè)過關(guān)難度的等級(jí)進(jìn)行研究和設(shè)計(jì)；對(duì)學(xué)生參與做題游戲的互動(dòng)方式進(jìn)行設(shè)計(jì)，最后實(shí)現(xiàn)一個(gè)基于做題游戲的課程知識(shí)點(diǎn)教學(xué)考核系統(tǒng)。學(xué)生在闖關(guān)游戲式課程教學(xué)考核的交互體驗(yàn)中，將課程知識(shí)最大化地展現(xiàn)出來，達(dá)到了非常好的教學(xué)考核效果3。3 闖關(guān)游戲的基本知識(shí)點(diǎn)html5最大的優(yōu)勢(shì)在于它可以在pc機(jī)上、筆記本電腦、平板設(shè)備、智能手機(jī)上運(yùn)行使用。當(dāng)代學(xué)生愛玩手機(jī)以及對(duì)富有激情和挑戰(zhàn)的項(xiàng)目具有強(qiáng)烈的使用動(dòng)機(jī)，闖關(guān)游戲是一款受眾群體非常

8、高，中、小學(xué)生，大學(xué)生，以及上班白領(lǐng)都特別喜歡闖關(guān)類的小游戲。使用htm5開發(fā)游戲，具備其他開發(fā)游戲的工具無可比擬的優(yōu)勢(shì)。它提供專門的拖拽與拖放的api，就是在某個(gè)元素上按下鼠標(biāo)后移動(dòng)鼠標(biāo)（沒有松開鼠標(biāo)），這時(shí)就可以開始拖動(dòng)；在拖動(dòng)的這個(gè)過程中，只要不松開鼠標(biāo)，就會(huì)不斷產(chǎn)生事件這個(gè)過程稱為“拖”。把被拖動(dòng)的元素拖動(dòng)到另外一個(gè)元素上并松開鼠標(biāo)這個(gè)過程被稱為“放”。所用到的基本知識(shí)點(diǎn)如表1所示4。4 闖關(guān)游戲的實(shí)現(xiàn) 頁(yè)面設(shè)計(jì)。該闖關(guān)游戲采用 html5、css3、javascript進(jìn)行開發(fā)。利用 javascript調(diào)用拖放的api來實(shí)現(xiàn)拖拽和拖放，學(xué)生通過拖拽答案到指定位置，若錯(cuò)誤則提示不匹配

9、，若正確就進(jìn)入下一關(guān)。當(dāng)全部答對(duì)就顯示闖關(guān)成功。該闖關(guān)游戲通過css3進(jìn)行樣式設(shè)計(jì)，實(shí)現(xiàn)了游戲頁(yè)面布局，分別如圖1、圖2所示。 當(dāng)被拖動(dòng)的元素在在拖動(dòng)到放置目標(biāo)時(shí)會(huì)觸發(fā)ondragover事件，它用來設(shè)置被拖動(dòng)的元素的放置問題。默認(rèn)情況下，無法將被拖動(dòng)的元素放置到其他元素中。 若要實(shí)現(xiàn)這一功能，我們需要防止元素的默認(rèn)處理方法。我們可以通過調(diào)用event.preventdefault（）方法來實(shí)現(xiàn)ondragover事件。 當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生drop事件。ondrop事件調(diào)用drop（event）函數(shù)，這一函數(shù)用來判斷闖關(guān)是否成功，若成功就進(jìn)入下一關(guān)，否則繼續(xù)學(xué)習(xí)。具體代碼如下所示： 知識(shí)

10、點(diǎn)闖關(guān)游戲中每一關(guān)試題都題庫(kù)隨機(jī)產(chǎn)生，每一關(guān)之間的試題都確保不會(huì)重復(fù)。如果過關(guān)，則進(jìn)入下一關(guān)題庫(kù)游戲，否則重回上一關(guān)題庫(kù)游戲5。本文當(dāng)學(xué)生闖完100道題目，表示學(xué)生巳經(jīng)掌握全部課程內(nèi)容，如圖3所示。5 結(jié)束語(yǔ)html5技術(shù)相對(duì)于flash技術(shù)具有更大的優(yōu)勢(shì)，越來越多的人采用html5來設(shè)計(jì)游戲化課程。本文利用html5和javascript網(wǎng)頁(yè)技術(shù)來開發(fā)相關(guān)課程知識(shí)點(diǎn)的闖關(guān)游戲，以便讓學(xué)生更清楚自己相關(guān)知識(shí)點(diǎn)的掌握程度，增強(qiáng)學(xué)生的學(xué)習(xí)動(dòng)機(jī)，非常有效地提高了學(xué)生的課程參與度。這種靈活的檢測(cè)方式讓學(xué)生輕松許多，也促進(jìn)了學(xué)生的學(xué)習(xí)興趣。學(xué)生在闖關(guān)游戲中會(huì)主動(dòng)吸收相關(guān)的知識(shí)點(diǎn)，以便向考核游戲發(fā)起挑戰(zhàn)。實(shí)踐表明，采用這種方法成效明顯，受到了師生一致的好評(píng)。參考文獻(xiàn)（references）：1 馮科融，王和興.html5網(wǎng)頁(yè)游戲分析j.電腦編程技巧與維護(hù)，2012.24：71-722 韓敏.淺談網(wǎng)頁(yè)制作新技術(shù)html5j.福建電腦，2018.9：106-1073 黎志雄，黃彥湘，陳學(xué)中.基于html5游戲開發(fā)的研究與實(shí)現(xiàn)j.東莞理工學(xué)院學(xué)報(bào)，2014.10：49-534 臧金梅.基于html5的簡(jiǎn)單拼圖游戲的設(shè)計(jì)和實(shí)現(xiàn)j.信息技術(shù)與信息化，2017.12：22-245 劉志鋒，魏振華，蔣年德等.闖關(guān)游戲思想在c/c+語(yǔ)言程序設(shè)計(jì)課程教學(xué)中的應(yīng)用研究j.東莞理工大學(xué)學(xué)報(bào)