浅谈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大部分：

、

、

和

，

，

。

2.1

标签

标签被用来创建页面的页眉，是指引导和导航信息。

区包含了页面标题和副标题，用来创建页面Header区的内容。创建的网页有该页面的一个header区，以及一个位于Article和Section区内部的Header区，并使用

到

来区分主标题和子标题。

2.2

标签

在html5中

标签是指navigate导航，表示创建页面导航区。

标签定义了一个专门的导航区域，表示导航链接的内容，支持html中的全局属性和事件属性。表示形式如

2.3

标签

包含了web内容的相关组件区域，是用于描述文档的结构，它同

标签的意思一样。但是在特定环境中，两者又有明显的区别。一般来讲

标签用于分组的内容，相当与一个文档的内部章节，缺少语义性。

2.4

标签

标签定义其所在内容之外的内容，这些内容可以作为一篇连续文章的侧栏部分。

标签包含的内容不影响文档所要传达的信息，可以被删除。

2.5

标签

标签定义外部的内容，具体是指可以来自一个外部的信息提供，或者是blog的文本，或者是论坛的文本，还可以是其它来源外部的内容。

2.6

标签

元素包含文档中页面、段落或部分内容的信息。含有文档的作者、版权信息、使用条款链接、联系信息等。一个文档中使用多个

元素。

3　html5在web中的地位

html5的研发和使用为现在日益增多的网页游戏提供了新的解决方案，使游戏开发者拜托了繁杂的插件技术，游戏开发变得更加直观和快捷。随着网页技术的发展迅速，网页游戏与用户越来越接近，不同技术下的游戏都能实现流畅的3D渲染，品质难分伯仲。而html5作为新的开创技术，虽然优点众多，但还需要一段时间才能统一自身规范，至今推出使用的还是适用版本，它对多个浏览器的兼容性以及移动设备的支持程度，都将影响html5将来在游戏开发中的地位。

当然，html5虽然前途光明，但是还需要克服存在的问题，比如高品质效果和流畅运行速度不能兼顾，传播过程中容易被“换皮”带来玩家流失的缺点，但是随着html5的不断进步，网页游戏的持续火爆，html5将引领未来的网页游戏的主流。

【参考文献】

［1］Lubbers P，Albers B，Salim F.Pro HTML5 Programming∶PowerfulAPIs for Richer Internet Application Development［M］. UnitedStates of Amercia∶Apress，2010

［2］胡晶，董航.HTML5 核心Web 技术分析.长春工业大学学报（自然科学版），2013（5）：87—590

［3］Mark Pilgrim，赵泽欣.HTML5揭秘［M］.北京∶电子工业出版社，2010∶ 20-25.

［4］刘华星，杨庚.HTML5——下一代Web 开发标准研究［J］.计算机技术与发展，20118）：54—58.

html5；网页游戏；web脚本设计

中图分类号：TP393

文献标识码：A

【作者简介】

梁卓韬，男，1980年1月出生，安徽合肥人，硕士，现工作单位为安徽省汽车工业学校，讲师职称，主要研究方向为计算机应用技术。