李正君

通常我們將用來描述網(wǎng)頁文檔構(gòu)造和超文本標(biāo)記的一種語言稱為HTML5，萬維網(wǎng)聯(lián)盟（W3C ）對于促進(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 打開的模式。近些年來，人們對于HTML5 的應(yīng)用更為廣泛，越來越多支持HTML5 的瀏覽器隨之問世。本文對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 元素，并對應(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ǔ)存于文件中，便于管理。

通常情況下使用樣式表的位置對其范限加以控制，假如一個(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ù)用戶操作再返回對頁面進(jìn)行刷新。雖然用戶只是看到了頁面的一絲變化，也需要對整個(gè)頁面進(jìn)行刷新，例如公司標(biāo)志、網(wǎng)站導(dǎo)航、上部區(qū)域和下部區(qū)域等。將Ajax 應(yīng)用其中便可以達(dá)到只刷新頁面一小部分的效果，無需加載其他內(nèi)容，用戶的操作同往常一樣便可。

Ajax 的最大優(yōu)點(diǎn)在于對頁面的請求通過異步的方法傳送至服務(wù)器。并且服務(wù)器無需應(yīng)用全部頁面回應(yīng)請求，在后臺(tái)對請求進(jìn)行處理，同時(shí)用戶仍能夠繼續(xù)瀏覽頁面。腳本則能夠依據(jù)用戶需求加載和創(chuàng)建頁面內(nèi)容，而不會(huì)對用戶的瀏覽體驗(yàn)造成任何影響。Ajax 有專門的使用范限。它依靠Javascript，所以可能部分瀏覽器并不支持它。它的關(guān)鍵便是XMLHttpRequest 對象。該對象作為瀏覽器客戶端和服務(wù)器之間的媒介而存在。過往的請求都通過瀏覽器發(fā)送，而JavaScript 則可以自主傳達(dá)請求，同時(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ī)賬號，之后得到該賬號對應(yīng)的單詞。

3 JQuery 庫和字符判斷

JQuery 庫是一種合并CSS3 的輕量級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)勢在于它對DOM 的操作，進(jìn)而生成諸多JavaScript 特效[3]。

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

對于按鍵事件onkeydown。因?yàn)镕ireFox 和IE具有不同的處理函數(shù)，所以處理時(shí)也應(yīng)分別進(jìn)行處理。在Firefox 中需要一個(gè)參數(shù)，對應(yīng)按鍵的字符是which 屬性在IE 或其他瀏覽器不需要的參數(shù)，相應(yīng)按鍵字符是event.keyCode。該模式需要著手解決的問題是用戶對于按鍵的分析以及如何正確消除字母塊和數(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ī)顯示出來，并將該單詞某一字母空出以下劃線替代，用戶可在空缺處填入對應(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 對象，該對象能夠從后臺(tái)和后臺(tái)的數(shù)據(jù)庫中實(shí)行數(shù)據(jù)的交換。換而言之，就是說無需加載全部的頁面內(nèi)容，只需要對一部分的網(wǎng)頁內(nèi)容進(jìn)行更新，也就是局部刷新。創(chuàng)建一個(gè)專門的XMLHttpRequest 對象。向服務(wù)器傳達(dá)請求：如果需要將請求傳送至服務(wù)器，使用XMLHttpRequest 對象的open（）方法和send（）方法，其中open 方法中的method 參數(shù)表示請求的種類，既是GET 也可以是POST，其中url 表示在服務(wù)器上的具體位置，async 寶石是否存在一些異步請求；send 方法被應(yīng)用于請求傳送至服務(wù)器，POST 方法僅應(yīng)用string。

6 結(jié)語

設(shè)計(jì)并實(shí)現(xiàn)一個(gè)以Web 為基礎(chǔ)的中英文打字游戲軟件，并且具有多種功能，如難易度設(shè)置、分?jǐn)?shù)、音樂、中/英選擇、歷史存檔等，同時(shí)對于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)行。