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

關鍵詞：HTML5;教學游戲;數(shù)據(jù)庫

引言

HTML5是目前比較受歡迎的WEB標準，因為它有強大的兼容性、跨平臺運行、支持安卓和IOS、網(wǎng)頁表現(xiàn)佳、具有本地數(shù)據(jù)庫、游戲動畫效果好，在各種終端設備中有更好的體驗和交互。

一、 理論基礎

建構主義理論以學習者為中心的理念，支持了游戲式教學的情境設計、教學游戲交互體驗、教學信息的多種表達方式及主動建構知識的過程。

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

二、研究現(xiàn)狀

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

三、技術分析

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

跨平臺特性，無需重寫代碼可以在不同平臺運行，兼容性特別好;是未來的WEB標準，將廣泛使用，在網(wǎng)絡暢通無阻。

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

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

四、 游戲式教學的設計理念

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

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

五、 使用HTML5拖拽操作

在游戲式教學系統(tǒng)中，學生使用教學游戲，機房里可以使用鼠標、鍵盤進行操作，鼠標的操作設計簡單，這里不贅述，當課后學生使用手機時，就要用到拖拽操作了。

每一個可拖動的元素，在拖動過程中，都會經(jīng)歷三個過程，拖動開始-->拖動過程中--> 拖動結束。

六、教材到游戲的改編

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

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

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

<%

' 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ù)庫是放在本地服務器，所以來源是local? 用戶名為sa，密碼為：qjx123456，創(chuàng)建了一個名為it的數(shù)據(jù)庫，里面存放了與教學游戲有關的student，grade等幾十個數(shù)據(jù)表。有了它們，就可以全程記錄學生的學習情況，形成大數(shù)據(jù)，自動記錄，自動評價。

八、如游戲般的帳號登陸

為了管理和評價方便，給每一個學生一個帳號/密碼，開場象游戲一樣地登錄。

<%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>

九、研究結果

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

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

參考文獻：

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

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

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

作者簡介：

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

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