HTML5游戲在信息課堂教學中的應用

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

關鍵詞：HTML5;教學游戲;數據庫

引言

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

一、 理論基礎

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

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

二、研究現狀

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

三、技術分析

傳統的教學課件如PPT課件的局限性大，FLASH動畫消耗資源大，兼容性又差，相比之下，HTML5的優勢是比較明顯的：

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

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

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

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

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

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

五、 使用HTML5拖拽操作

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

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

六、教材到游戲的改編

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

七、 與數據庫的連接

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

<%

' 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"

%>

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

八、如游戲般的帳號登陸

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

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

九、研究結果

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

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

參考文獻：

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

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

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

作者簡介：

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

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