分享HTML5游戏开发的5条实用建议.docVIP

分享HTML5游戏开发的5条实用建议HTML5很棒，因为它几乎无所不能——它并不是为某种特殊的应用设计的。更重要的是，HTML5几乎是无处不在的。它就在你的PC机上、你的手机上、你的平板设备上——它甚至可能就在你的厨房电器上。 步骤/方法 建议1：使用框架??如果只是用HTML5编写一些小程序其实非常简单，但如果想往你的游戏中加入更丰富的功能，那么就有许多其他的事情需要处理了。??比如，如果你的游戏中有大量的图片、音效或是其他的资源，那么浏览器需要从你的游戏服务器上下载这些资源，这往往需要花费很多的时间。如果你在编写程序的时候没有考虑这些问题，那么你也许会对最后的结果感到意外。由于图形和声音文件都是异步下载的，也许在你的资源下载好以前你的JavaScript脚步已经开始运行了。这就是所谓的“爆音”现象（图像显示异常），而声音也可能在错误的时间播放。一个好的解决方法就是创建一个预先下载机制，保证所有的资源下载完以后才允许脚本执行。??另一个你可能碰到的问题就是你的游戏在不同的机器甚至是浏览器中运行的速度有所不同。虽然这也许在你的控制范围以外，但你还是可以尽量使得你的动画或是动作的速度不依赖于游戏运行框架的速度。??其实，现在有许多的游戏模板代码，里面实现了大多数游戏需要的功能。这样，开发者不需要从头到尾编写一个完整的游戏程序。现在有许多框架可以帮助开发者设计游戏，开发者只用关注具体的游戏逻辑，而不用担心如何使游戏顺畅运行这些细节问题。???使用框架时唯一需要注意的一点就是如何从众多的框架中挑选一个合适的框架。像ImpactJS这样的框架功能非常强大，几乎可以在各个方面为开发者提供帮助；而像EaselJS的框架则主要是处理图形方面的工作。最后，还是需要由开发者决定使用哪种框架更加合适。这看起来似乎很简单，但在JavaScript的世界里面，选择一个框架时也意味着你选择了一种特定的编程风格。??? 查看原始代码 ig.module(? ????monster? )? .requires(? ????impact.game,? )? .defines(function(){? Monster?=?ig.Entity.extend({? ????eyes :?42? });? });? ??ImpactJS就是一个很好的例子，它不仅提供了图像显示和音效处理的方法，还在实现中插入了自己的对象和模型。? ? ? ? Ascended Arcade三个月内发开了三款游戏，全部使用的是ImpactJS的框架??虽然现在已经有很多HTML5游戏使用了一些框架，但是还是有很多开发者不嫌麻烦地选择不依赖任何框架完全自己开发。如果你想在合理的时间内完成任务，使用框架当然是最有效的方法。Ascended Arcade就是一个很好的例子，在短短三个月的时间里，他们就开发出了三个游戏，全部使用了ImpactJS框架。? 建议2：将小屏幕和触屏设备考虑在内??HTML5最大的卖点之一就是它既能在桌面PC上使用，也能在笔记本电脑、平板设备甚至是智能手机上运行。（这里有IE9在Windows Phone 7 Mango上的运行效果演示）。??HTML5与生俱来就具备了跨平台的特性，通常为开发者节省了很多工作。然而，有些事情是需要开发者考虑的… ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??首先也是最重要的一点，不同的设备屏幕的尺寸也有所不同，屏幕的宽高比以及分辨率可能有很大的差别。如果想让你的HTML5在移动设备上拥有良好的效果，确保它支持多种分辨率并且不超过WVGA的800×480框架大小。此外，由于大多数的移动设备无法在一个屏幕上显示所有的页面内容，他们常常采用精确的缩放和平移技术，而这些技术通常并不适用于游戏的编写。可以在编程的时候使用viewport meta标志禁用这些功能。下面的代码片段可以用来使你的游戏视图根据屏幕的实际水平宽度自动调节。移动浏览器上的缩放功能常常与触控游戏控制功能产生冲突，可以将“user-scaleable”参数设置为“no”，从而禁用浏览器的缩放功能。??? 查看原始代码 meta?name=Viewport? content=width=device-width; user-scaleable=no;?initial-scale=1.0?/? ??现在你已经能够将你的游戏视图很好地呈现在小屏幕设备上了，接下来就该考虑如何处理用户输入的问题了。大多数触屏设备都有一个虚拟键盘，但是在玩游戏的时候显示一个虚拟键盘实在太浪费空间了。你应该开发一个有限的虚拟键