梁卓韜 安徽省汽車工業(yè)學校 安徽合肥 231131

?

淺談html5在網(wǎng)頁游戲中的運用

梁卓韜 安徽省汽車工業(yè)學校 安徽合肥 231131

【文章摘要】

互聯(lián)網(wǎng)的隨處可見和移動設備接入互聯(lián)網(wǎng)數(shù)量的逐漸增加，使得人們使用互聯(lián)網(wǎng)的方式產(chǎn)生巨大的變化。為適應新環(huán)境下的Web變化，全新網(wǎng)頁核心技術的html5進入了我們的生活。作為新型互聯(lián)網(wǎng)編程語言，html5具備全新特性，瀏覽器流暢支持、新增設計標簽和明朗的代碼設計等特征，可利用其方便的純腳本編輯器設計開發(fā)簡單的網(wǎng)頁游戲。

【關鍵詞】

0　引言

HTML 5是用網(wǎng)頁設計的超文本語言，是如今網(wǎng)頁領域中的新貴，代表了Web業(yè)務和云業(yè)務在實現(xiàn)方式上的改變。作為互聯(lián)網(wǎng)的下一代標準，體現(xiàn)互聯(lián)網(wǎng)瀏覽和設計的新型語言，成為互聯(lián)網(wǎng)的核心技術。HTML 在1990年設計開發(fā)，至1997年出現(xiàn)統(tǒng)一的標準html4，為適應全新的瀏覽和移動設備的運用，出現(xiàn)了適應多環(huán)境下的HTML5語言，但目前尚未正式發(fā)布，處于小范圍的試用開發(fā)階段。HTML5是指HTML、CSS 和JavaScript在內的一套設計開發(fā)軟件組合，通過減少瀏覽器中的插件安裝 等需求，并且提供更多集成的網(wǎng)絡應用標準集。［2］近幾年網(wǎng)頁游戲的極速發(fā)展，向大眾群體推出了掌上休閑益智游戲，多人角色扮演游戲等，使得網(wǎng)頁游戲數(shù)量急劇增長。HTML5的推出，技術支持Web業(yè)務和移動云計算業(yè)務，可以設計開發(fā)出激動人心和多平臺相互聯(lián)系的交互式游戲與交互式網(wǎng)站。

1　html5的新增特點

HTML5將Web帶入一個網(wǎng)絡應用服務軟件相互支持的應用平臺，盡管HTML5還在試用階段，但已經(jīng)在悄然改變互聯(lián)網(wǎng)。

1.1多線程：HTML5提供的多線程支持，頁面腳本運行時間過長的提示框可惜消失了，具體的實現(xiàn)是利通過javascript里面創(chuàng)建一個Web Worker對象實現(xiàn)多線程操作，然后通過message的方式進行傳值。HTML5新增加了一個Web Worker API，創(chuàng)建多個后臺線程以供用戶使用，后臺線程不訪問用戶頁面和窗口對象，但進行頁面的數(shù)據(jù)交互，父子和子子線程之間的數(shù)據(jù)交互，基本代碼如下：①創(chuàng)建線程、發(fā)出消息：var worker = new Worker（"js/work.js"）；worker.postMessage（"test"）；②接收消息：onmessage = function（event）｛var data = event.data；｝；③將信息處理后傳回：onmessage = function（event）｛var data = event.data；postMessage（""）；｝④接收傳回后的數(shù)據(jù)：worker.onmessage = function（event）｛var data=event.data；｝⑤關閉線程：onmessage = function（event）｛close（）；｝

1.2繪圖畫布：HTML5的標簽用于繪制圖像，該元素通過JavaScript腳本語言在網(wǎng)頁上繪制圖形和處理，但是元素本身并沒有繪制能力，可以認為他僅僅是一個圖形的容器，必須使用腳本來實現(xiàn)繪圖任務。HTML5的元素提高了瀏覽器無的圖形或動畫圖像的顯示而不需安裝任何插件。

1.3支持多媒體：HTML5新增兩個元素＜audio＞和＜video＞，其中

1.4繪制表單：表單是實現(xiàn)用戶與頁面后臺交互的重要組成部分，HTML5的表單功能設計上更加有效。表單的設計和之前的一樣，格式為，可以認為它是一個容器。表單中的method屬性是指用于向表單處理程序action URL發(fā)送數(shù)據(jù)的HTTP方法，來訪者輸入的數(shù)據(jù)會附加在URL之后，由用戶端直接發(fā)送至服務器，所以速度上會比post快。

1.5地理定位：現(xiàn)今網(wǎng)絡覆蓋全球，在日常生活中很多人都變成了手機一族，移動網(wǎng)路的開通和普及使得及時交互越來越受青睞，用戶對實時定位的應用越來越迫切，要求也越來越高。

1.6數(shù)據(jù)存儲：HTML5允許在客戶端實現(xiàn)較大規(guī)模的數(shù)據(jù)存儲，支持DOM Storage和Web SQL Database的存儲方式。DOM Storage 分為 sessionStorage 和 localStorage。localStorage 對象和sessionStorage對象的區(qū)別它們的作用范圍不一樣。其中sessionStorage主要用來存儲頁面數(shù)據(jù)，當頁面關閉后無法調用，而localStorage在頁面關閉后也能正常調用。由于現(xiàn)行標準還未規(guī)范，對于大量結構話的數(shù)據(jù)存儲不太快捷，還存在一些問題。

2　html5新增功能代碼

為實現(xiàn)一個高效實用的web設計頁面，考慮到想要封裝的所有組件，HTML5設計專用的結構性標簽，將頁面設計變得靈活高效。一個完整開發(fā)設計的html5包括6大部分：