HTML5相关技术构建在线游戏浅析

齐兵辉李清秀

（1.郑州航空工业管理学院，河南 郑州 450046，2.华中师范大学，湖北 武汉 430000）

HTML5相关技术构建在线游戏浅析

齐兵辉1李清秀2

（1.郑州航空工业管理学院，河南 郑州 450046，2.华中师范大学，湖北 武汉 430000）

HTML是一种超文本标记语言，使用它做出的页面可以包含图片、链接，甚至是音乐、程序。而HTML5则是它的最新版本，虽然它并不成熟，但它的优点使它能成为Web的未来，每个人都会尽享它的乐趣。Canvas元素则是HTML5特性中最具代表性的。它与其他元素非常不同，它的主要用途是处理或创建2D图形，并不是嵌入到网页中的。它能做出许多有趣的在线游戏。本文简单探讨这些内容。

html5；canvas；在线游戏

二次世界大战后，电子计算机技术突飞猛进，电子计算机一代一代实现更新，软件技术也迅速发展。同时在美国，集中了许多设计计算机软件的人才，他们在工作之余，喜爱与人斗智，因此编了各种各样能与人斗智的“游戏”，以此来锻炼编程的能力。这种“游戏”花样繁多，但其特点都是利用计算机软件来与人较量。由于不断修改更新，使计算机的“智力”水平与人难分高低。

美国加利福尼亚电气工程师诺兰.布什纳尔看到了这种“游戏”的前景所在。他在大学期间根据自己编制的“网球”游戏设计了世界上第一台商用电子游戏机，并且在娱乐场中大受欢迎，成功激励着他进一步研制生产电子游戏机，为此他创立了世界上第一台电子游戏公司——雅达利公司。

今天，当我们回顾电子游戏的发展过程，什么最吸引人们去使用它？我们不难领悟出这样的道理：电子游戏满足了人们对竞争和对抗的需求，它总是给予竞争者以新的难题。同时，它还能为胜利者提供崭新的画面和音乐享受。电子技术的突破推动了游戏机“家庭化”的发展过程，彩色电视机的普及使大型游戏机的屏幕完全可以被彩色电视机取代，使得微处理机部分与显示屏幕实现了分离。推动着电子游戏的进一步发展。

网页游戏又称页游。是基于Web浏览器的网络在线多人互动游戏，无需下载客户端，只需打开网页，10秒钟即可进入游戏，不存在机器配置不够的问题，关闭或者切换极其方便。这使它的发展前期不可限量。《中国游戏产业报告》数据显示，截至今年上半年，页游玩家已逾两亿人，新增用户4450万人。市场需求的增多折射出网页游戏市场的急剧扩张。页游领军企业的逐渐发力同时带动一批中小企业扎根页游市场。相关统计显示，多家页游企业月收入已突破千万，很多网络游戏厂商纷纷将精力转向页游研发。

业内某企业高级负责人认为，如果页游产品能够实现增强创新力度，提升游戏品质，那么页游市场很可能成为PC互联网的最大一片蓝海。厂商大举进军页游市场带来的是一场市场争夺鏖战。最近两年页游市场推广成本暴涨10倍以上，成本的激升使游戏开发商意识到单纯进入页游市场并不能带来优异的业绩。于是，日渐规模化的市场促进了网页游戏的发展。

HTML5是Web核心语言HTML的规范，你在浏览器中看到的一切都是HTML格式化的。新版HTML5在某些核心上做了改进，其中Canvas就是本文设计所用到的HTML5的新特性之一，毫无疑问这些新特性将改变我们建立网站和使用互联网的方式。

HTML5语言作为如今编程最为广泛的语言，具有易用、快捷、多浏览器兼容等特点。虽然它还在开发中，但HTML5标准的更新可以说给HTML这门标记语言带来了新的活力。它将弥补上一代HTML的不足，去实现Flash,Silverlight,JavaFX所能实现的功能。

CSS技术简单来说就是一种用来美化HTML界面的语言，这里我不会做详细的介绍，大家只需要知道CSS技术让我们的游戏看起来更有游戏的感觉。

Canvas作为HTML5的新功能，可以说是最炫的功能了，它不仅能绘制图形和各种对象，以及擦除他们，还可以将Canvas的尺寸设为浏览器窗口的大小。听起来虽然没什么大不了的，但这却是开发游戏的必备技能。

首先，让我先来认识一下canvas元素。与其他新功能类似，canvas元素完全不需要任何外部插件就能运行。但它并非Canvas中最强大的部分，真正关键的事2D渲染上下文，这是真正绘制图形的地方。canvas元素只是作为包装器，包含着绘图和图形操作所需要的全部方法和功能。

2D渲染上下文是一种基于屏幕的标准绘图平台。与其他2D平台类似，采用的是平面笛卡尔坐标系统。坐标系统的1个单位相当于屏幕的1个像素。canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成:

我们就是通过这短短的两行代码将canvas元素赋值给一个变量，然后调用getContext得到2D渲染上下文赋值给另一个变量。这样，我们就可以开始绘制图形和各种对象了。

如果想做好一个游戏，绘图当然是必不可少的。本文中涉及到的主要是用它来绘制作为太空保龄球的小行星了。这里，我们就要提到用Canvas绘制圆形了。

圆形是个非常复杂的形状，Canvas中实际并没有专门绘制圆形的方法，其实是通过绘制一个首尾相连的圆弧，从而让它成为一个圆。在开始画圆弧之前，先让我们回一下数学中圆的周长公式吧：C=2πr从这个公式中我们可以看出圆的周长是2倍的π乘以半径。我们在用Canvas绘制圆形时也是一样的，通过了解一个圆的半径和弧度（一个完整的圆为360度，即2π弧度）从而使用代码让他显示在网页中：

这几行代码中，“x”、“y”分别代表着原点的坐标值，“0”、“Math.PI*2”代表着圆弧的开始角度与结束角度2π，以便画出的是一个完整的圆。最后的布尔值false而是确定圆的绘制方向为顺时针方向。这样，我们就了解了Canvas是如何绘制出了本文设计的小行星的了。当然，这些仅仅是Canvas的基础知识，但我并不打算再介绍Canvas的高级功能，因为在我们的设计中，那些是用不到的。接下来，我会为大家详细的介绍下JavaScript在我们的游戏设计中起到的作用。

JavaScript对HTML5来说是一名极其重要的语言，它实现了HTML5的强大功能。然而HTML5技术对JavaScript来说也是不可或缺的。

曾经，JavaScript并不为人们所看好，几乎没有人拿它来正正规规地编写程序。可能它自身具备很强的表达能力（即便它创建对象的方式有点不好接受）。但它并没有有众多的库和开发工具。而一门语言真正有用语言却需要两者兼备。显然，JavaScript有些欠缺。直到HTML5技术的出现，扭转了JavaScript的命运。

HTML5与其先前版本相比其实并没有太大的变化，只不过添加了新的标签而已，并且这些新标签并不难理解。但这只是表面，HTML5真正的威力在于它能让你运用JavaScript来创建这些标签，编写后台代码，并通过Canvas来创建动画、游戏，实现一些数据的可视化。可以说HTML5实际上就是JavaScript，他让JavaScript所写的代码有了用武之地。本文之后所展示的太空保龄球游戏正是运用了Canvas的这一特点。能完成这个游戏完全都要归功于JavaScript。

由此可见，HTML5赋予了JavaScript更强大的能力。WebGL库支持在HTML5在Canvas中绘制实时的3D图形。HTML5的地理位置还支持在浏览器中实现LBS（Location Based Service）应用。而持久存储以及离线功能则为开发能与桌面应用媲美，但却在浏览器中运行的全功能应用奠定了基础。目前，就连增加多点触摸事件的实验性的库也已经出现了。凡此种种，无一不是实实在在的JavaScript特性。HTML5只是为这些高级功能的发挥提供了舞台。

J05

A

1005-5312（2014）17-0274-02