基于HTML5的闖關游戲式課程教學考核的設計和實現(xiàn)

1、    基于html5的闖關游戲式課程教學考核的設計和實現(xiàn)    徐曉摘 要： 隨著移動互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁中的功能效果將通過html5和javascript來實現(xiàn)。為了激發(fā)學生的學習動機，文章提出了利用html5和javascript 網(wǎng)頁技術來實現(xiàn)闖關游戲式課程教學考核。其中主要利用了html5新增的拖放功能，并使用javascript控制游戲操作。關鍵詞： html5； javascript； 闖關游戲； 拖放：tp311.1 文獻標志碼：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 引言隨著移動互聯(lián)的迅猛發(fā)展，flash在移動設備中具有一定的局限性，而 html5 和 javascript擁有跨平臺、不需要安裝以及不需要更新等特點，只要用智能手機、平板或臺式電腦的網(wǎng)頁瀏覽器就可以進行操作1。當代學生愛玩手機，對富有激情和挑戰(zhàn)的項目具有強烈的使用動機。如果在學習中引入闖關式教學考核項目，將課程知識融入到闖關式的游戲場景中，既考查了學生的學習能力，又契合當代學生的心理特點。學生在學習中體驗到游戲的互動性、趣味性、競爭性和即時反饋等特性，必定可以提升在線

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

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

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

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

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

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