《HTML5游戏编程核心技术与实战》——第1章 游戏和HTML5初探1.1 网页游戏和HTML5...
本节书摘来自异步社区《HTML5游戏编程核心技术与实战》一书中的第1章，第1.1节,作者： 向峰 更多章节内容可以访问云栖社区“异步社区”公众号查看。
第1章 游戏和HTML5初探
从时间上来计算，游戏行业从诞生到现在还不到100年历史，跟其他传统的行业相比，它甚至就像襁褓中的婴儿一样小，但正是这婴儿，正逐渐挑战着众多的传统行业。现在，很多人都会在不同的时刻玩着不同的游戏，也许你正在虚拟的网络游戏中热血澎湃地战斗，也许你正在电子游戏竞技中展现你的人生价值，也许你在忙碌的工作后，玩着切水果游戏不停地发泄，总之，你会感受到，它正在悄然融入到我们的生活当中，正在成为你生活的一部分。
随着新一代Web开发标准——HTML5诞生，各大浏览器厂商和软件厂商都不遗余力地支持HTML5标准，加入到HTML5的阵营，互联网时代的新一轮革命即将展开，当游戏碰上HTML5将会产生怎样的激烈火花，真是让人感到期待。
1.1 网页游戏和HTML5
1.1.1 网页游戏简介
从电子游戏载体来说，电子游戏现在基本上分成了3个主要的阵营：第一部分是以电视游戏为主，第二部分以个人电脑游戏为主，第三部分是以手机和平板为主。而从游戏的玩家数量来说，游戏经历了从单机游戏时代到现在的网络游戏时代。随着互联网的普及，以及电脑硬件的飞速发展，互联网游戏正处于高速发展的时期，特别是网页游戏得到了空前的发展。
网页游戏也称Web Game，是一种无端网游，和《魔兽》系列、《星际》系列等传统的网络游戏相比，网页游戏不需要下载客户端，玩家只需要通过电脑打开浏览器即可进行游戏，与传统的大型网游比起来，其优点是无需安装、占据空间小、使用方便等，对于开发人员来说，比开发传统的网络游戏更容易。
网页游戏从最早的MUD（Multiple User Domain，多用户虚拟空间游戏，玩家爱称“泥巴游戏”）发展而来，早期的MUD游戏限于技术条件，几乎是纯文字网游，没有图形，全部用文字和字符画来构成。根据维基百科记载，世界上第一款真正意义上的实时多人交互网络MUD游戏“MUD1”，是在1978年，由英国埃塞克斯大学的罗伊·特鲁布肖用DEC-10编写的。随着Internet的和HTML语言的飞速发展，纯文字类的游戏淡出历史舞台，丰富多彩的带图像的WebGame逐渐兴起。现在的一些2D网页游戏几乎能和传统的网络游戏媲美，比如《可乐吧》、《弹弹堂》、《第九城市》、4399游戏平台、91wan游戏平台、1wan游戏平台等。
由于网页游戏运行的环境在浏览器中，所以常见的开发语言，在客户端主要使用HTML、CSS样式以及JavaScript语言，服务器可以使用诸如C/C++、C#、Java、PHP等传统的服务器端语言。在HTML4时代，HTML语言受到诸如缺乏高效的图像渲染方法、缺乏实时的网络通信方法等技术支持，加上JavaScript运行效率相对一些常用的游戏编程语言C/C++、Java低，所以目前比较成熟的网页技术都需要在浏览器中安装一些特殊的插件（Flash Player、Applet、ActiveX、Unity Web Player等）以帮助Web Game能够高效地运行。就目前来说，Web Game使用的最广泛的客户端技术主要还是以Flash平台为主，从1995年到现在经过了近20多年的时间，各种关于动画、游戏方面的技术已经非常成熟，所以Flash通常作为Web Game首选的开发平台。但随着HTML新标准的发布，也就是HTML5的横空出世，也就注定了Flash的路将不会长久。Flash的研发公司Adobe已经于2011年宣布停止Flash后续研发工作，而转向新的HTML5。
1.1.2 HTML5简介
自从HTML5新标准发布以来，就引起了互联网技术的新一轮风暴，作为新一代的Web技术的领航者，它受到了各大厂商的追捧，几乎所有的IT大厂商都全力提供对HTML5规范的支持。相对于HTML4.X版本而言，HTML5提供了许多令人激动的新特性，这些新的特性将为HTML5开创新的Web时代提供了坚强的基石。
HTML（Hypertext Markup Language，超文本标记语言）是专门在Internet上传输多媒体的一种语言，正是有了HTML语言的出现，现在的互联网世界才显得丰富多彩，从1993年第一个版本的HTML语言诞生以来，共经历了以下几个重要的发布版本。
（1）HTML（第一版），这是一个非正式的工作版本，于1993年6月作为IETF（Internet Engineering Task Force，IETF）草案发布。
（2）HTML2.0，1995年11月作为RFC1866（Request For Comments）发布，RFC是由IETF发布的备忘录。
（3）HTML3.2，1997年1月14日，成为W3C（World Wide Web Consortium，W3C）推荐标准。
（4）HTML4.0，1997年12月18日，W3C推荐标准。
（5）HTML4.01，1999年12月24日，W3C推荐标准。
（6）Web Applications1.0，2004年作为HTML5草案的前身由WHATWG（Web Hypertext Application Technology Working Group，以推动HTML5标准而建立的组织）提出，2007年被W3C组织批准。
（7）HTML5草案，2008年1月22日，第一份草案正式发布。
（8）HTML5.1，2012年12月17日，W3C的首份规范草案发布。
事实上到现在为止，HTML5还处于发展和完善时期，但诸多HTML5中新增加的功能已经让各大软件厂商鼎立支持。从HTML5前身的名称（Web Application）我们可以看出HTML5的决心，HTML不再只是单纯的网站制作语言，而是作为Web应用程序的开发语言应运而生，为了能够承担Web应用程序所能够完成的功能，在不需要安装任何插件的情况下，HTML5中提供了以下激动人心的功能。
（1）canvas画布元素，canvas元素的诞生为HTML5能够支持较高性能的动画和游戏提供了条件。canvas可以直接使用硬件加速完成像素级别的图像渲染，不仅可以完成2D图形渲染，使用WegGL以及Shader语言还可以完成较高性能的3D图形渲染。
（2）多媒体元素，HTML5中提供了专门的audio元素和video元素，用于播放网络音频文件和视频文件，有了这两个多媒体元素，将不再需要单独安装插件就可以进行影音的播放，减少浏览器的污染程度。
（3）地理信息服务，通过HTML5的地理信息服务API我们可以获取到客户端所在的经度和纬度，利用这些信息可以向这个坐标附近的区域提供服务，可应用于地理交通信息查询、基于LBS（Location Based Services）的社交游戏等。
（4）本地存储服务，相对于传统的Cookie微量的本地存储技术，HTML5推出了新的本地存储规范，提供了容量更大，更安全和更易于使用的本地存储方案。
（5）WebSocket通信，弥补了传统的Web应用程序缺乏实时通信的功能，使用WebSocket技术可以在Web应用程序中实现类似于传统的C/S结构应用程序的通信功能，使得在Web环境中构建实时的通信程序提供了可能。
（6）离线存储，HTML5的离线缓存应用的功能，使客户端即使没有连接到互联网络，也可以在客户端正常使用本地功能。有了这个强大的功能，用户可以更加灵活地控制缓存资源的加载，可以在没有网络信号的情况下使用本地应用。
（7）多线程，HTML5中提供了真正意义上的多线程解决方案，在HTML4的使用过程中，如果遇到客户端需要在后台执行耗时方法，则页面会处于“假死”状态，而在HTML5中可以使用多线程解决类似问题。
（8）设备，为了能够适应多种平台（PC、手机、平板），HTML5提供了Device元素，可以让应用程序访问诸如摄象头、麦克风等硬件设备。
总之，这些新增加的特性无疑都是冲着本地应用程序而来，尽管HTML5还处于发展阶段，但已经成为下一代Web开发的标准。
1.1.3 HTML5浏览器工具
原则上，HTML5应用程序可以在目前任何主流的浏览器（IE、Chrome、Opera、FireFox、Safari等）中执行，但由于HTML5规范目前正处于发展阶段，所以，现今的各种主流浏览器对HTML5规范支持的程度不太一样。根据国际权威的HTML5测试网站发布最新一期测试数据来看，目前，对HTML5支持度最高的浏览器是Maxthon 4.0和Chrome 26。这里所指的支持度是通过对HTML5的各项新特性诸如canvas、video/audio、新的form元素、WebGL等综合的一个兼容性支持，图1-1显示了各个主流版本浏览器在PC上对HTML5的支持程度。
从兼容性来看，目前Maxthon4.0（傲游）对HTML5的各项支持度最高，但从实际Web页面运行效果来看，综合JavaScript运行速度、DOM渲染速度、动画渲染速度、安全性、综合性能等因素，Chrome是目前较好的选择。同时，由于JavaScript是唯一的Web应用程序的客户端语言（使用带插件的AS和ActiveX等除外），而Chrome拥有最快的JavaScript执行引擎V8，这样就大大提高了Web应用程序客户端的运行效率。所以，从游戏开发的角度来看，目前Chrome无疑也是较好的选择，本书中的所有案例都在Chrome中测试通过。
html5test.com 网站主要是针对HTML5兼容性测试，另外一个对HTML5综合性能检测权威的网站可以针对浏览器进行全方位的测试，从检测结果来看，目前综合性能最高的也是Chrome浏览器，图1-2显示了peacekeeper的检测结果。
在peacekeeper首页以漫画的形式展示了目前浏览器的综合评论，打出的标语是“Google Chrome King of the Hill since 2011-09-19 Windows PC”，当然，也可以单击“Test your browser GO”来检测本地浏览器的综合性能，图1-3是笔者机器的检测分数（为准确测试，最好只打开一个浏览器Tab页，关闭其他耗时的进程）。
1.1.4 HTML5开发工具
原则上来说，使用任何文本编辑工具都可以完成HTML5代码的编写工作，编辑好HTML5代码后保存为.htm或者.html的文件即可，然后可以使用支持HTML5的浏览器查看效果。
工欲善其事，必先利其器。尽管可以直接使用NotePad编写HTML5应用程序，但为了能够提高代码的编写效率和减少出错概率，我们可以使用一些比较常用的IDE工具完成相关程序开发，这里提供几种轻量级和重量级的IDE工具。
1．轻量级开发工具
- EditPlus
EditPlus是一个轻量级的、可替代NotePad的文本编辑工具，最新的3.51的版本执行文件只有2 MB大小。麻雀虽小，五脏俱全，EditPlus功能强大，界面简洁美观，启动速度快；中文支持比较好；支持语法高亮；支持代码折叠；支持代码自动完成（但其功能比较弱），不支持代码提示功能；配置功能强大，且比较容易，扩展也比较强，默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript和VBScript等语法高亮显示，通过定制语法文件，可以扩展到其他程序语言。EditPlus内置了与Internet的无缝连接，可以在EditPlus的工作区域中直接打开Internet浏览窗口。本书的所有示例代码都是使用该软件编写，图1-4是EditPlus工具的界面。
和EditPlus类似的轻量级的工具还有emEdit、UltraEdit-32等。
- 1st JavaScript Editor Pro
从名字上可看出，该软件号称第一的JavaScript编辑工具，因为Web应用程序主要依靠HTML、CSS以及JavaScript语言，所以JavaScript的重要性可见一斑。由于之前介绍的文本编辑工具虽然支持各种语言的高亮语法显示，但都缺乏语言智能感知功能，对于编写较大型的程序而言不太方便。而本款软件则专门针对JavaScript提供了开发、校验和调试功能，除了针对JavaScript有优化外，也可针对其他语言（JavaScript、HTML、CSS、VBScript、PHP、ASP.NET）提供语法加亮显示，也提供了完整的HTML标记、属性、事件以及JavaScript事件、对象、函数等。目前最新的版本是5.1，完整的安装包只有7 MB多，也是一款不可多得的轻量级的JavaScript编辑器。图1-5是JavaScript Editor Pro工具的界面。
类似的JavaScript编辑工具还有 JavaScript Menu Master、JavaScript Editor等。
2．重量级开发工具
轻量级工具的特点是免费、体积小、执行速度快，缺点是缺乏完善的编辑环境、完整的项目生命周期管理、版本管理、团队协作管理等，所以在个人制作小型程序上具有一定优势，但在完整的大型软件开发过程中，商业化的重量级的IDE才是首选。以下介绍几款常用的重量级开发工具。
- Eclipse
不用多说了，著名的跨平台开源集成开发环境，由于其优秀的灵活性、高扩展性，加上开源免费，成为了J2EE领域和Android领域开发工具首选的开发平台。Eclipse支持多个操作系统平台，如Windows、Linux、iOS等，最初的版本只是为了用于Java平台开发，但是在基于Eclipse强大的插件机制下，除了开发Java应用程序，Eclipse也提供了对C/C++（CDT）、PHP、Perl、Ruby、Python、telnet和数据库的开发，成为名副其实的多平台、多语言的程序开发集成环境。
图1-6是Eclipse Juno版本工具的界面，这是Eclipse标准版本的免费IDE工具，如果需要专门针对HTML5和Javascipt开发，可以直接使用基于Eclipse的开发工具Aptana。相对于标准版本的Eclipse集成环境，Aptana几乎就是专为Web2.0定制的集成开发环境，提供了非常强大的JavaScript编辑和调试功能，支持最新的各种JavaScript框架（jQuery、Dojo、Prototype、Aflax等）的智能感知功能。
- WebStorm
如果觉得Eclipse太过庞大，或者只想针对Web前端进行开发，WebStorm则是另一个非常不错的选择，完整的WebStorm 5.0的安装版本只有90 MB左右。
同上述的其他优秀的集成开发环境一样，WebStorm提供了对JavaScript和HTML的强有力的支持，号称“The smartest JavaScript IDE”，由此可见WebStorm的功能之强大，只是该集成平台只支持Web前端的开发，事实上WebForm是另一个优秀的Java开发平台IntelliJ的简化版。WebStorm开发界面如图1-7所示。
可以通过官网下载最新的WebStorm工具，需要注意的是这款优秀的JavaScript IDE是需要收费的。
- Visual Studio
毫无疑问，Windows平台下最佳的开发工具就是Microsoft的Vistual Studio系列，从Visual Studio 10 SP1开始，VS系列提供了对HTML5以及JavaScript部分的智能感知功能。就Web前端开发来说（除开发ASP.NET程序外），相对于其他的Web开发功能稍弱。图1-8是Visual Studio 2008开发界面。
关于常用的HTML5开发工具就介绍到这里，相信大家会根据自己的需要而选择适当的工具进行开发。