HTML5新技術的應用設計與實現技巧探究

李正君

通常我們將用來描述網頁文檔構造和超文本標記的一種語言稱為HTML5，萬維網聯盟（W3C ）對于促進SGML（標準通用標記語言）、XML 以及部分新型標記語言例如說SVG（可縮放矢量圖形）、XForms 和MathML 等[1]。因為HTML5 具有通信、離線使用、本地存儲、設備訪問和音頻視頻等多種功能，導致其逐漸發展為搭建Web 應用的全新標準和HTML 規范，HTML5 在Web 得到了廣泛的應用和支持[2]。并且它擁有多樣化的標簽，使用HTML5 的瀏覽器不使用任何插件便可以播放音頻或視頻，Canvas 標簽為程序設計者提供了極大的便利，主要包括繪圖API 功能和存儲功能。Web 中的一項技術性創新便是HTML5，它完全突破了傳統模式下游戲需經由Flash 打開的模式。近些年來，人們對于HTML5 的應用更為廣泛，越來越多支持HTML5 的瀏覽器隨之問世。本文對HTML5 新技術的應用設計進行了詳細的闡述，并基于HTML5 中的畫布、實時通信、音頻技術、庫編程方法，設計并實現一個Web 下的中英文游戲軟件。

1 CSS 與界面設計

層疊樣式表（cascading style sheet，CSS）的主要作用為展示HTML 元素，并對應用程序的界面進行控制，借助CSS 完成了Web 內容界面同其表現形式的分離工作，進一步提升了程序設計的效率，為程序設計提供了便捷。樣式表（Stylesheet）是一個獨立存在的文件，能夠應用link 元素和CSS中的@import 語句將其放入至HTML 文檔。style是全部HTML 都支持的一種元素，可以將其放置在HTML 文檔中。一般情況下樣式儲存在樣式表中，能夠有效減少HTML 中的一些非內容元素，并且將全部樣式儲存于文件中，便于管理。

通常情況下使用樣式表的位置對其范限加以控制，假如一個樣式表適用性較強，那么應將其儲存至網站的根目錄中。如果適用性較弱，例如只適用于某一文檔，那么則將其儲存至一個目錄中。HTML文檔中有一個head 部分，可以在其中加入一個link 元素，這樣便實現了樣式表和HTML 的連接，并且link 元素的href 屬性能夠指定樣式表的URL。全新的CSS3 的特性十分豐富，應用好它的特性有利于達到很多絢麗的效果。打字程序的主要問題是字符串問題，因此界面過于單一，界面上有專門調控音樂的選項，其樣式位于word.ass 文件。

2 Ajax 和隨機單詞生成

Ajax 是在XML 的基礎上的一種異步JavaScript，主要功能為描述異步加載頁面。過往大多Web 應用都需要包括大量的頁面刷新，用戶打開某一鏈接，試圖傳送至服務器，之后服務器依據用戶操作再返回對頁面進行刷新。雖然用戶只是看到了頁面的一絲變化，也需要對整個頁面進行刷新，例如公司標志、網站導航、上部區域和下部區域等。將Ajax 應用其中便可以達到只刷新頁面一小部分的效果，無需加載其他內容，用戶的操作同往常一樣便可。

Ajax 的最大優點在于對頁面的請求通過異步的方法傳送至服務器。并且服務器無需應用全部頁面回應請求，在后臺對請求進行處理，同時用戶仍能夠繼續瀏覽頁面。腳本則能夠依據用戶需求加載和創建頁面內容，而不會對用戶的瀏覽體驗造成任何影響。Ajax 有專門的使用范限。它依靠Javascript，所以可能部分瀏覽器并不支持它。它的關鍵便是XMLHttpRequest 對象。該對象作為瀏覽器客戶端和服務器之間的媒介而存在。過往的請求都通過瀏覽器發送，而JavaScript 則可以自主傳達請求，同時也可以自主相應。本游戲軟件設計所應用的單詞便獲得于數據庫。因為純Java Script只可以運行于IE 瀏覽器，并且安全性不高。所以該程序使用Ajax 技術和服務器進行交互，應用GET方式提供給服務器一個隨機賬號，之后得到該賬號對應的單詞。

3 JQuery 庫和字符判斷

JQuery 庫是一種合并CSS3 的輕量級JavaScript 庫，可以兼容多種瀏覽器。JQuery 庫便于用戶處理Web 文檔、事件和多種特效。當JavaScript 問世后，Web 的網頁內容不再是單一的文本，它的交互性得到了極大的改善。并且JavaScript 是一種解釋性較強的腳本語言，往往只能借助Web 瀏覽器去進行部分操作但無法同普通意義的程序那樣自主運轉，因為它還需要Web 瀏覽器的解釋執行。JavaScript 的優勢在于它對DOM 的操作，進而生成諸多JavaScript 特效[3]。

游戲中亟需解決的問題是字符串問題，而JavaScript 的String 對象提出了很多解決方法和相關屬性，有利于解決字符串問題，打字游戲中判斷和識別輸入字符是重中之重。在主界面點擊smallgame 便可以進入到游戲中，游戲過程中屏幕上方會隨機掉落字母或數字，用戶輸入相應的鍵便能夠將其清除。當這些字母或字掉落至底部時，如果用戶尚未消除，那么生命值則會減少，如果生命值為9，游戲結束。

對于按鍵事件onkeydown。因為FireFox 和IE具有不同的處理函數，所以處理時也應分別進行處理。在Firefox 中需要一個參數，對應按鍵的字符是which 屬性在IE 或其他瀏覽器不需要的參數，相應按鍵字符是event.keyCode。該模式需要著手解決的問題是用戶對于按鍵的分析以及如何正確消除字母塊和數字塊。解決方法便是每次生成字母塊和數字塊時，將其放入數組，當該塊下降至底部，將其從數組中清除，所以當用戶敲擊正確的字符，正確的字符也會消失。在 HTML 中 ，該函數適用于字母和數字塊的生成，并能夠展示動畫特效[4]。

4 localStorage 與模式設定

因為創建一個數據庫儲存統計分數但變量為1，所以數據庫具有復雜性，所以便可以使用HTML5的新特性，localStorage（本地存儲）功能，它的目的是取代之前的cookie。但是該特性也有一個BUG，可以將用戶硬盤占滿。如果想正確使用這一特性，就必須保證瀏覽器不會被清除緩存，因為localStorage 的存儲數據和cookie 具有一致性。

當用戶設置好單詞數進入游戲時，屏幕會從數據庫中獲得單詞及釋義并隨機顯示出來，并將該單詞某一字母空出以下劃線替代，用戶可在空缺處填入對應的字母，如果正確則會進入下一單詞，全部完成便會顯示用戶分數。游戲中遇到用戶不會的單詞可以點擊NEXT 按鈕進入下一單詞，或點擊BACK返回主菜單，結束游戲。點擊設置按鈕便可進入設置頁面，注意這一選項只適用于游戲模式，用戶可以通過該選項設置單詞數量，計算時間[5]。

5 Ajax 和服務器交互

使用Ajax 服務器交互首先要建立一個XMLHttpRequest 對象，該對象能夠從后臺和后臺的數據庫中實行數據的交換。換而言之，就是說無需加載全部的頁面內容，只需要對一部分的網頁內容進行更新，也就是局部刷新。創建一個專門的XMLHttpRequest 對象。向服務器傳達請求：如果需要將請求傳送至服務器，使用XMLHttpRequest 對象的open（）方法和send（）方法，其中open 方法中的method 參數表示請求的種類，既是GET 也可以是POST，其中url 表示在服務器上的具體位置，async 寶石是否存在一些異步請求；send 方法被應用于請求傳送至服務器，POST 方法僅應用string。

6 結語

設計并實現一個以Web 為基礎的中英文打字游戲軟件，并且具有多種功能，如難易度設置、分數、音樂、中/英選擇、歷史存檔等，同時對于HTML5的新特性和新技術，例如Canvas 繪圖 API、輕量型動畫引擎、本地儲存與CSS、JQuery 的結合性設計，達到了動畫特效和頁面錨定布局控制的效果，有效解決了打字游戲中文本單詞選擇性較差的問題。并且游戲服務端配置要求較低、畫面生動形象、游戲體驗感較強、操作容易、可以再多個支持HTML5 的瀏覽器上運行。