摘要：隨著教學(xué)要求的不斷提升和新生代學(xué)生對(duì)移動(dòng)終端的偏好，有必要開發(fā)一種跨平臺(tái)的、運(yùn)行便捷、短小精悍、可玩性強(qiáng)的教學(xué)游戲，而用目前最流行的HTML5來開發(fā)網(wǎng)頁(yè)教學(xué)游戲無疑最適合的了。

關(guān)鍵詞：HTML5;教學(xué)游戲;數(shù)據(jù)庫(kù)

引言

HTML5是目前比較受歡迎的WEB標(biāo)準(zhǔn)，因?yàn)樗袕?qiáng)大的兼容性、跨平臺(tái)運(yùn)行、支持安卓和IOS、網(wǎng)頁(yè)表現(xiàn)佳、具有本地?cái)?shù)據(jù)庫(kù)、游戲動(dòng)畫效果好，在各種終端設(shè)備中有更好的體驗(yàn)和交互。

一、 理論基礎(chǔ)

建構(gòu)主義理論以學(xué)習(xí)者為中心的理念，支持了游戲式教學(xué)的情境設(shè)計(jì)、教學(xué)游戲交互體驗(yàn)、教學(xué)信息的多種表達(dá)方式及主動(dòng)建構(gòu)知識(shí)的過程。

體驗(yàn)式學(xué)習(xí)理論注重為學(xué)習(xí)者提供真實(shí)或模擬的環(huán)境和活動(dòng)，學(xué)生心理特點(diǎn)是好奇，游戲情境下的教學(xué)系統(tǒng)能使學(xué)生體驗(yàn)到的生活樂趣和學(xué)習(xí)經(jīng)驗(yàn)，激發(fā)學(xué)生主動(dòng)學(xué)習(xí)。

二、研究現(xiàn)狀

理論研究者多，真正開發(fā)軟件者少;小打小鬧多，形成系統(tǒng)的少;簡(jiǎn)單游戲的多，系統(tǒng)化游戲式的少;娛樂類H5小游戲多，H5能夠連接網(wǎng)絡(luò)數(shù)據(jù)庫(kù)（比如MYSQL、MSSQL）的少。將教學(xué)內(nèi)容改編成象專業(yè)游戲那樣，可玩性強(qiáng)的游戲幾乎沒有了。這類軟件開發(fā)幾乎是個(gè)空白。有想法的老師開發(fā)不出來，有開發(fā)能力的軟件企業(yè)不懂一線教學(xué)或不愿投入去開發(fā)不容易盈利的教學(xué)類項(xiàng)目。

三、技術(shù)分析

傳統(tǒng)的教學(xué)課件如PPT課件的局限性大，F(xiàn)LASH動(dòng)畫消耗資源大，兼容性又差，相比之下，HTML5的優(yōu)勢(shì)是比較明顯的：

跨平臺(tái)特性，無需重寫代碼可以在不同平臺(tái)運(yùn)行，兼容性特別好;是未來的WEB標(biāo)準(zhǔn)，將廣泛使用，在網(wǎng)絡(luò)暢通無阻。

上手容易，對(duì)于老師來說，開發(fā)技術(shù)與專業(yè)團(tuán)隊(duì)是不能比的，而HTML5易學(xué)易懂，開發(fā)工具多，非常適合有想法的老師。

傳播快而廣，現(xiàn)在智能手機(jī)非常普及，各種小游戲、好文章、網(wǎng)絡(luò)調(diào)查、賀卡、相冊(cè)、抽獎(jiǎng)、促銷等都用上了HTML5的網(wǎng)頁(yè)，已經(jīng)到了無人不用的地步了。

四、 游戲式教學(xué)的設(shè)計(jì)理念

據(jù)我們調(diào)查，絕大多數(shù)的學(xué)生接收以游戲的方式來學(xué)習(xí)，與其看到許多學(xué)生沉迷于游戲不能自撥，嚴(yán)重影響學(xué)習(xí)，不如把枯燥的教學(xué)方式改變?yōu)橛腥さ挠螒蚴浇虒W(xué)？學(xué)生以游戲挑戰(zhàn)方式參與教學(xué)過程中的知識(shí)的問答和技能的訓(xùn)練，后期再進(jìn)行在線自主考核，如此一來，可以充分激發(fā)學(xué)生的學(xué)習(xí)熱情，我們對(duì)教材中每一個(gè)知識(shí)點(diǎn)進(jìn)行改編，加入題庫(kù)，設(shè)計(jì)了3種難度，分別用3種不同動(dòng)物代表，每題有相應(yīng)的經(jīng)驗(yàn)值、金幣數(shù)，答對(duì)了就獎(jiǎng)勵(lì)。學(xué)生在

游戲式教學(xué)過程中，精神高度集中，熱情高漲，對(duì)知識(shí)和技能印象深刻，收到了非常好的效果。

五、 使用HTML5拖拽操作

在游戲式教學(xué)系統(tǒng)中，學(xué)生使用教學(xué)游戲，機(jī)房里可以使用鼠標(biāo)、鍵盤進(jìn)行操作，鼠標(biāo)的操作設(shè)計(jì)簡(jiǎn)單，這里不贅述，當(dāng)課后學(xué)生使用手機(jī)時(shí)，就要用到拖拽操作了。

每一個(gè)可拖動(dòng)的元素，在拖動(dòng)過程中，都會(huì)經(jīng)歷三個(gè)過程，拖動(dòng)開始-->拖動(dòng)過程中--> 拖動(dòng)結(jié)束。

六、教材到游戲的改編

將教材中的各章節(jié)知識(shí)點(diǎn)進(jìn)行改編，開成了HTML5網(wǎng)頁(yè)游戲，參考各種流行的網(wǎng)頁(yè)游戲，設(shè)計(jì)出與教材相應(yīng)的游戲場(chǎng)景，讓學(xué)生身臨其境;將知識(shí)點(diǎn)一條條按交互方式進(jìn)行設(shè)計(jì)，并有游戲的激勵(lì)機(jī)制。對(duì)教材中的重點(diǎn)的突出、難點(diǎn)的突破，用HTML5動(dòng)畫等技術(shù)手段去突破，生動(dòng)的動(dòng)畫、以及交互模式。在實(shí)踐中很受師生歡迎。比如我們把查找哪些是“數(shù)據(jù)庫(kù)管理系統(tǒng)”的問題，改編為了“挖地雷”游戲，借用了地雷戰(zhàn)的場(chǎng)景和音樂，鼠標(biāo)就變成了探測(cè)器，挖對(duì)了，就在對(duì)象上插上紅旗，挖錯(cuò)了，對(duì)象就會(huì)爆炸，游戲結(jié)束。

七、 與數(shù)據(jù)庫(kù)的連接

為了把整本教材系統(tǒng)化，也為了把學(xué)生學(xué)習(xí)的過程全部記錄下來，開成過程性評(píng)價(jià)，我們自己架設(shè)了服務(wù)器，并創(chuàng)建了數(shù)據(jù)庫(kù)，網(wǎng)頁(yè)通過conn.asp與數(shù)據(jù)庫(kù)連接，代碼如下：

<%

' FileName="Connection_ado_conn_string.htm"

' Type="ADO"

' DesigntimeType="ADO"

' HTTP="false"

' Catalog=""

' Schema=""

Dim MM_conn_STRING

MM_conn_STRING = "PROVIDER=SQLOLEDB;DATA SOURCE=（local）;UID=sa;PWD=qjx123456;DATABASE=it"

%>

數(shù)據(jù)庫(kù)是放在本地服務(wù)器，所以來源是local? 用戶名為sa，密碼為：qjx123456，創(chuàng)建了一個(gè)名為it的數(shù)據(jù)庫(kù)，里面存放了與教學(xué)游戲有關(guān)的student，grade等幾十個(gè)數(shù)據(jù)表。有了它們，就可以全程記錄學(xué)生的學(xué)習(xí)情況，形成大數(shù)據(jù)，自動(dòng)記錄，自動(dòng)評(píng)價(jià)。

八、如游戲般的帳號(hào)登陸

為了管理和評(píng)價(jià)方便，給每一個(gè)學(xué)生一個(gè)帳號(hào)/密碼，開場(chǎng)象游戲一樣地登錄。

<%Dim student1

Dim student1_numRows

Set student1 = Server.CreateObject（"ADODB.Recordset"）

student1.ActiveConnection = MM_conn_STRING

student1.Source = "SELECT *? FROM dbo.student? where 用戶名='" + Replace（student1__user， "'"， "''"） + "' and 密碼='" + Replace（student1__pass， "'"， "''"） + "'"

student1.CursorType = 0

student1.CursorLocation = 2

student1.LockType = 1

student1.Open（）

student1_numRows = 0 %>

<p>加載前：? 接收到的</p>

<p>用戶名：? <% =Request.Form（"a"） %></p>

<p>密碼：? &lt;%=Request.Form（"b"）%></p>

九、研究結(jié)果

徹底擺脫傳統(tǒng)的PPT等老舊的信息技術(shù)教學(xué)手段，成功地使用了“互聯(lián)網(wǎng)+”與“大數(shù)據(jù)”等先進(jìn)技術(shù)來研究和開發(fā)教學(xué)系統(tǒng)軟件，成功地用html5腳本語言制作出交互式教學(xué)游戲，成功地用B/S架構(gòu)實(shí)現(xiàn)學(xué)生機(jī)對(duì)服務(wù)器的教學(xué)系統(tǒng)的訪問并練習(xí)，成為現(xiàn)有學(xué)生機(jī)房的又一種新型的網(wǎng)絡(luò)教學(xué)模式，成功地用數(shù)據(jù)庫(kù)記錄并輸出游戲教學(xué)數(shù)據(jù)，實(shí)現(xiàn)了實(shí)時(shí)評(píng)價(jià)和反饋，成功地打通了課堂內(nèi)外的邊界，使學(xué)生、家長(zhǎng)、老師都可以同時(shí)用自己的帳號(hào)進(jìn)入網(wǎng)絡(luò)課堂進(jìn)行學(xué)習(xí)、監(jiān)督、掌握學(xué)習(xí)情況。

本課題研究取得了豐碩的成果，也產(chǎn)生了很積極的社會(huì)影響。因本課題研究，多個(gè)項(xiàng)目在各種創(chuàng)新比賽中獲獎(jiǎng)。比如本市的科技創(chuàng)新大賽一等獎(jiǎng)、二等獎(jiǎng)。還參加了由本市企業(yè)界參加的創(chuàng)新創(chuàng)業(yè)大賽并在58個(gè)企業(yè)中排名第8名，獲三等獎(jiǎng)，還獎(jiǎng)了一萬元。

參考文獻(xiàn)：

[1]陸凌牛.HTML5開發(fā)精要與實(shí)例詳解[M].北京：機(jī)械工業(yè)出版社，2011.

[2]姜雪荃，林星，孫亮.寫給WEB開發(fā)人員看的HTML5[M].北京：人民郵電出版社，2012.

[3]秀野堂主，蔣宇捷，羅睿.論道HTML5[M].北京：人民郵電出版社，2012.

作者簡(jiǎn)介：

陳光枝（1977-）男，漢，福建福清，職務(wù)/職稱：初級(jí)教師， 本科，研究方向：在線教學(xué)系統(tǒng)開發(fā)。

（本文為福建省教育信息技術(shù)研究課題項(xiàng)目，項(xiàng)目名稱：基于H5+MYSQL的跨平臺(tái)游戲式教學(xué)系統(tǒng)的開發(fā)與研究 項(xiàng)目編號(hào)FJDJ1803）