HTML5新技術(shù)的應(yīng)用設(shè)計(jì)與實(shí)現(xiàn)技巧探究

李正君

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

1 CSS 與界面設(shè)計(jì)

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

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

2 Ajax 和隨機(jī)單詞生成

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

Ajax 的最大優(yōu)點(diǎn)在于對(duì)頁面的請(qǐng)求通過異步的方法傳送至服務(wù)器。并且服務(wù)器無需應(yīng)用全部頁面回應(yīng)請(qǐng)求，在后臺(tái)對(duì)請(qǐng)求進(jìn)行處理，同時(shí)用戶仍能夠繼續(xù)瀏覽頁面。腳本則能夠依據(jù)用戶需求加載和創(chuàng)建頁面內(nèi)容，而不會(huì)對(duì)用戶的瀏覽體驗(yàn)造成任何影響。Ajax 有專門的使用范限。它依靠Javascript，所以可能部分瀏覽器并不支持它。它的關(guān)鍵便是XMLHttpRequest 對(duì)象。該對(duì)象作為瀏覽器客戶端和服務(wù)器之間的媒介而存在。過往的請(qǐng)求都通過瀏覽器發(fā)送，而JavaScript 則可以自主傳達(dá)請(qǐng)求，同時(shí)也可以自主相應(yīng)。本游戲軟件設(shè)計(jì)所應(yīng)用的單詞便獲得于數(shù)據(jù)庫。因?yàn)榧僇ava Script只可以運(yùn)行于IE 瀏覽器，并且安全性不高。所以該程序使用Ajax 技術(shù)和服務(wù)器進(jìn)行交互，應(yīng)用GET方式提供給服務(wù)器一個(gè)隨機(jī)賬號(hào)，之后得到該賬號(hào)對(duì)應(yīng)的單詞。

3 JQuery 庫和字符判斷

JQuery 庫是一種合并CSS3 的輕量級(jí)JavaScript 庫，可以兼容多種瀏覽器。JQuery 庫便于用戶處理Web 文檔、事件和多種特效。當(dāng)JavaScript 問世后，Web 的網(wǎng)頁內(nèi)容不再是單一的文本，它的交互性得到了極大的改善。并且JavaScript 是一種解釋性較強(qiáng)的腳本語言，往往只能借助Web 瀏覽器去進(jìn)行部分操作但無法同普通意義的程序那樣自主運(yùn)轉(zhuǎn)，因?yàn)樗€需要Web 瀏覽器的解釋執(zhí)行。JavaScript 的優(yōu)勢(shì)在于它對(duì)DOM 的操作，進(jìn)而生成諸多JavaScript 特效[3]。

游戲中亟需解決的問題是字符串問題，而JavaScript 的String 對(duì)象提出了很多解決方法和相關(guān)屬性，有利于解決字符串問題，打字游戲中判斷和識(shí)別輸入字符是重中之重。在主界面點(diǎn)擊smallgame 便可以進(jìn)入到游戲中，游戲過程中屏幕上方會(huì)隨機(jī)掉落字母或數(shù)字，用戶輸入相應(yīng)的鍵便能夠?qū)⑵淝宄?。?dāng)這些字母或字掉落至底部時(shí)，如果用戶尚未消除，那么生命值則會(huì)減少，如果生命值為9，游戲結(jié)束。

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

4 localStorage 與模式設(shè)定

因?yàn)閯?chuàng)建一個(gè)數(shù)據(jù)庫儲(chǔ)存統(tǒng)計(jì)分?jǐn)?shù)但變量為1，所以數(shù)據(jù)庫具有復(fù)雜性，所以便可以使用HTML5的新特性，localStorage（本地存儲(chǔ)）功能，它的目的是取代之前的cookie。但是該特性也有一個(gè)BUG，可以將用戶硬盤占滿。如果想正確使用這一特性，就必須保證瀏覽器不會(huì)被清除緩存，因?yàn)閘ocalStorage 的存儲(chǔ)數(shù)據(jù)和cookie 具有一致性。

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

5 Ajax 和服務(wù)器交互

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

6 結(jié)語

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