淺談html5在網頁游戲中的運用

梁卓韜 安徽省汽車工業學校 安徽合肥 231131

?

淺談html5在網頁游戲中的運用

梁卓韜 安徽省汽車工業學校 安徽合肥 231131

【文章摘要】

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

【關鍵詞】

0　引言

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

1　html5的新增特點

HTML5將Web帶入一個網絡應用服務軟件相互支持的應用平臺，盡管HTML5還在試用階段，但已經在悄然改變互聯網。

1.1多線程：HTML5提供的多線程支持，頁面腳本運行時間過長的提示框可惜消失了，具體的實現是利通過javascript里面創建一個Web Worker對象實現多線程操作，然后通過message的方式進行傳值。HTML5新增加了一個Web Worker API，創建多個后臺線程以供用戶使用，后臺線程不訪問用戶頁面和窗口對象，但進行頁面的數據交互，父子和子子線程之間的數據交互，基本代碼如下：①創建線程、發出消息：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（""）；｝④接收傳回后的數據：worker.onmessage = function（event）｛var data=event.data；｝⑤關閉線程：onmessage = function（event）｛close（）；｝

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

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

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

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

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

2　html5新增功能代碼

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