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

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

?

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

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

【文章摘要】

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

【關(guān)鍵詞】

0　引言

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

1　html5的新增特點(diǎn)

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

1.1多線程：HTML5提供的多線程支持，頁面腳本運(yùn)行時(shí)間過長的提示框可惜消失了，具體的實(shí)現(xiàn)是利通過javascript里面創(chuàng)建一個(gè)Web Worker對(duì)象實(shí)現(xiàn)多線程操作，然后通過message的方式進(jìn)行傳值。HTML5新增加了一個(gè)Web Worker API，創(chuàng)建多個(gè)后臺(tái)線程以供用戶使用，后臺(tái)線程不訪問用戶頁面和窗口對(duì)象，但進(jìn)行頁面的數(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；｝⑤關(guān)閉線程：onmessage = function（event）｛close（）；｝

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

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

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

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

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

2　html5新增功能代碼

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