开发html5(开发html网页的软件有哪些)

　　随着互联网发展加快，很多做web前端从HTML4转变为HTML5开发，今天有一个同学问我一个问题，他

　　说HTML5能开发游戏是真的吗？为什么HTML4就不能开发游戏呢，其实HTML5开发游戏已经不是什么稀奇的

　　事情了，这也是HTML5强大功能之一，那么HTML5是怎么开发游戏的呢？

　　最佳实践:自动保存玩家进度

　　像site pinning特性,试图给web浏览器web应用程序和常规的桌面应用同样的地位.然而,作为应用程

　　序运行的网站想法太新了,网页要维持客户端状态.关闭Microsoft Word前,你可能会三思后行,但是可能不

　　会对于一个开放的网页谨慎行事.大部分时间,它不是问题---大多数网页要嘛是无状态的,要嘛是在服务器

　　上维护记录你的信息.

　　然而,浏览器游戏,是非常不同的小怪兽.既然Java代码运行在客户端,HTML5游戏状态通常都保

　　持在瞬时内存中(又称RAM).关闭游戏器窗口,你辛苦赚取的积分就付之东流了.

　　现在,你可能会认为,一个明智的用户会足够谨慎,他们连续玩了8小时,不关闭游戏.但事故常有发生,

　　特别是当打开了多个选项卡或突然断电.

　　一言蔽之:当编写HTML5游戏的时候,绝对的最佳实践是定期保持玩家进度,允许玩家恢复上一次关闭网

　　页时的状态.

　　现在,你应在哪保存玩家的进度呢?过去,显而易见的地方是服务器端或浏览器cookie.两个解决方案都

　　不是特别有吸引力.服务器端方案,HTTP请求不得不每次构造需要存储或取回的信息.使用cookie的方案,你

　　的空间就非常有限了,cookie的可用空间大大依赖于浏览器配置.

　　更好的可行方案是使用HTML5 DOM storage.DOM storage通过一个接口,让你为每个网站保存几兆的数

　　据,它类似于一个key-value存储(或者一个Java expando对象).这非常方便,但在HTML5游戏上下文

　　中,你也可能需要记住复杂的数据结构---一些DOM storage非原生支持的结构.

　　幸运的是,现代的Java引擎都有内建的机制,將对象序列化成紧凑的结构,如JSON.使用这种方案

　　,DOM storage也可以记住复杂信息.接下来的两个助手函数,使用HTML5 DOM storage和ECMA5的内建

　　JSON特性,解决了游戏状态的存储和取回.

　　ECMA5:

　　function saveState(state){

　　window.localStorage.setItem("gameState",JSON.stringify(state));

　　}

　　function restoreState(){

　　var state=window.localStorage.getItem("gameState");

　　if(state){

　　return JSON.parse(state);

　　}else{

　　return null;

　　}

　　}

　　最佳实践:使用框架

　　编写简单游戏在HTML5中是很容易的,但是当你押宝在HTML5上,你就需要做更多的准备,确保游戏顺利

　　运行.

　　例如,当你使用了很多的图片,声音效果,和其它的资源,它们会花费一些时间等待浏览器从服务器下载

　　.如果在编写游戏时,你不把它放在心上,你会焦头烂额.因为图片和声音文件是异步加载的,你的

　　Java代码会在资源全部加载完成前执行.这常常导致"popping"(图片不可用),声音效果在需要时不

　　播放.好的修正方法是创建一个预加载器,延后脚本代码的执行,直到所有的资源都下载完毕为止.

　　另一个问题是,你很可能想在不同的机器和/或不同的浏览器,以不同的速度运行你的游戏.对此,当你

　　没有更多做为的时候,你仍要确保动画和移动速帧独立于游戏运行平台.

　　实际上,每个游戏都很多功能性的样板代码.幸运的是,你不必自己从头编写.有很多框架让你仅关注游

　　戏逻辑,而不是去担心这些琐碎(和大)的事,确保你的游戏顺利运行.

　　使用框架唯一需要注意的是,你有太多选择.像ImpactJS框架,皆在帮助开发游戏的方方面面,而像

　　EaselJS框架主要关注图形处理.最后还是由你来挑选你认为最舒服的框架.这些可能让人摸不着头脑,但在

　　Java世界,确定了框架往往意味着确定了编程风格.

　　ig.module(

　　'monster'

　　)

　　.requires(

　　'impact.game',

　　)

　　.defines(function(){

　　Monster=ig.Entity.extend({

　　eyes:42

　　});

　　});

　　一个好例子是ImpactJS,它不仅提供图形显示的抽象或播放声音效果,也织入了自定义对象和继承模型

　　,如上所示.

　　Ascend Arcade delivered three games in three months using the ImpactJS framework.

　　尽管有很多的HTML5游戏现在依赖于某种形式的框架,很多开发者仍然坚持一路颠簸,试图重新构建一

　　切.然而这可能是一个好的学习经验,但如果你想在合理的时间完成,使用框架是正确的方法.一个好的例子

　　是,Ascended Arcade使用ImpactJS框架,在三个月中发布了三款有意思的(有些受到好评)游戏.

　　最佳实践:认真考虑小的和触摸屏的设备

　　可能HTML5的销售卖点之一是,它可以工作于桌面PC,手持电脑甚至智能手机.(如果你还没有看过

　　Windows Phone 7 Mango上运行的IE9,看看这个视频).

　　跨平台(take that,Webster's字典!)特性是HTML5与身俱来的,常常只需付出少量的额外工作便可做到

　　.然而,有几个你需要认真考虑的事情...

　　首先也是最重要的,屏幕尺寸可能在不同设备中区别很大.如果想让你的HTML5游戏在移动设备上运行

　　良好,你要么确保它们支持多个分辨率,要么不超过WVGA框架大小800x480.

　　纵然这样,既然大多数移动设备缺乏一次渲染整个网页的能力,采用先进的缩放和平移技术编写游戏可

　　能会适得其反.这可以通过viewport标记关闭.下面的代码片段將使游戏窗口占满可用的横向屏幕.设置属

　　性"user-scaleable"为"no"告知手机浏览器禁用平移,否则常常会导致手指控制游戏的冲突.

　　<meta name="Viewport"

　　content="width=device-width;user-scaleable=no;initial-scale=1.0"

　　/>

　　就算游戏在小屏幕设备上渲染没问题,你也应该停下来思考一下输入问题.大多数仅支持触摸式的设备

　　拥有个虚拟键盘,他们可能会占用太多屏幕空间来控制游戏角色.如果严格的触摸式输入出了问题,你应该

　　创建一个受限的虚拟键盘,仅仅创建游戏需要的按钮(如方向键).然而,最好的做法是控制你的游戏,不需要

　　额外的屏幕元素.一个很好的例子是Spy Chase游戏,你用一个手指控制自动车(一些你不可能在实际生活中

　　尝试的东西).