html5游戏保存机制（HTML5网页游戏用什么保存数据好localstorage吗）

本文目录

• HTML5网页游戏用什么保存数据好localstorage吗
• 什么是HTML5及HTML5的发展前景
• HTML5游戏控制的问题
• html5新增了离线缓存机制这说法对吗

HTML5网页游戏用什么保存数据好localstorage吗

对，一般存在浏览器的本地存储中（一个数据库）。
当然cookie也可以。
如果不是纯HTML5，比如用了flash、applet等技术，也可以用相应的接口来存。

什么是HTML5及HTML5的发展前景

现在的HTML5就像当年崭露头角时的Ajax，有人在做，但不知道叫它什么。最近，苹果在HTML5上大做文章，而著名的Web设计师Eric Meyer则提出了Web Stacks的概念。Alex Kessinger是Yahoo的一名前端工程师，本文是他对HTML5应用现状与前景的思考。
开源模式带来转变
O’Reilly创始人，TimO’Reilly，一位开源的支持者，曾在《Open Source Paradigm Shift》中如是说：
"IBM对个人电脑设计的商品化使利润从硬件转移到软件这一层面，而开源将带来新的财富"
价值在不同的层面转移，HTML5将成为新的层面，商品的价值在下降，现时的浏览器已经成为商品，但这并没有问题，只要它们都遵守标准。人们说，我们可以将操作系统置入浏览器中，但这行不通，如果我们可以从过去的经历中学到些什么，那就是，不能简单照抄过去的模式，好比广播到电视的变迁，你不能简单地在一个播音员面前放台摄像机完事，将操作系统置入浏览器未必比HTML5离线应用本身更有价值。
发布渠道的重要
诸如苹果应用商店，Android应用商店一类的渠道将成为主导，另外，一些新的，象Valve游戏渠道，Netflix电影渠道一类的东西将会出现，在”云“时代，这些发布渠道将像桌面时代的操作系统一样用来对用户进行组织和归类。
我们是如何到达现在这个阶段的?
有两个关键的因素。
感谢Web标准
尽管浏览器市场并不统一，但至少他们都运行HTML，JavaScript和CSS。当我们希望通过Web推出一些东西的时候，我们知道，无论如何，用户都能看到，然而你能想象人们都自己定义Web时的情景吗，假如有人不使用HTTP协议，或者不使用HTML，那才是世界的末日。W3C一类的组织让各个浏览器厂家都保持同一个方向。
还好，我们并没有很多渲染引擎
浏览器并不好做，数十亿的网页，参差不齐的代码，这些东西让独立开发者没有机会单独设计浏览器，因此，有能力设计浏览器的始终是那么一小撮厂商，事实上，时至今日，我们只有四种主要的浏览器渲染引擎，Trident(IE),Gecko(Mozilla,Firefox),WebKit(Chrome,Safari),以及Presto(Opera)，而众多浏览器都是建立在这些渲染引擎之上的。这意味着，不管在什么样的设备上，我们不用太担心它使用什么样的浏览器，不管什么设备，只要它有一个浏览器，就有一个可以运行HTML5的环境。
标准何日面世？
关于HTML5成为标准的时间，IanHixie的说法最受认可：
“根据估计，HTML5直到2022年才会形成W3C推荐标准”
然而，虽然标准的形成尚待时日，但浏览器厂商已经在实现各种HTML5功能。
功能探测vs浏览器探测
如果你是开发者，你可以使用那些高级功能，但需要进行功能探测并提供渐进式设计。坊间有大量的功能探测库，如Modernizer，另外，Mark Pilgrim有一个清单，它可以让你探测任何功能。
离线API
离线API是一切HTML5应用的基础，不单单是离线数据的事，对开发者来说，拥有本地存储（local Storage）自然很好，但如何让程序完全离线运行？Application Cache是答案。如果不能离线保存源文件和数据，我们就无法实现离线的HTML5应用。
我们目前有几种离线存储机制，简单的如localStorage和SQL存储引擎，已经有一些浏览器在支持了，而最新的明星是IndexedDatabase，它得到了所有主流浏览器支持。这些离线保存应用和数据的能力，是HTML5的基础，目前，Webkit，Firefox已经可以实现，而IE9也即将实现。即时IE9的支持还需要等待，想一下，最需要离线应用的场合是哪里，自然是智能手机和上网本，智能手机多数都是用Webkit。
W3C Web应用工作组：HTML5应用的下一步
W3CWebApps标准已经做了大量工作，包括API及HTML5 Web程序细则。
HTML5应用的打包部署HTML5 apps–QuirksBlog博客文章中说，"对于本地/离线HTML5应用，W3C Widget packaging and configuration是首选机制，并将成为事实标准，很多厂商已经开始对之进行实现。W3C Widgets支持任意平台的Vodafone S60和Samsung手机,Opera桌面与移动浏览器，Bolt浏览器以及Windows Mobile6.5。BlackBerry也支持，不过需要特殊的Java包。"这些都是标准，本质上讲，如果你有一个HTML5应用，它就会包含HTML,CSS,以及JS，这些标准只不过偶是帮助开发者将他们的程序打包发行，如果你熟悉PEAR,它们是很相似的概念。你可能需要一些元数据，告诉系统你的程序是如何打包在一起的，在支持这些标准的平台上，你就可以保证你的用户可以顺利运行这些程序。
其它
HTML5还有更多API可以帮助开发者创建应用，这些API可以让你的程序访问诸如本地文件，摄像头，SOCKET通信服务，以及硬件动画加速等。这些API仅仅是开端，这样的API后期会越来越多。
HTML5程序可以应用在哪里？
当然是浏览器，如果一个设备拥有一个浏览器或渲染引擎，而且这个引擎是现代引擎，它就可以运行HTML5程序。HTML5程序会应用在以下几种场合。
桌面
如果你拥有一个符合Web标准的浏览器，就可以运行HTML5应用。桌面仍然很重要。
指定站点浏览器
诸如Gmail一类的站点可以看做一个应用，使用专门的浏览器运行，这样的浏览器没有地址栏，是专门用来运行指定站点应用的，甚至可以制作一个安装包来分发。以下资源值得一看，Prism,Fluid/Fluidium以及NativeHost。
移动领域
这是HTML5最热门的运行场所。iPhone可以和很多程序集成，将你的程序显示在它的今日桌面（这里有一个教程），Android也支持需要的HTML5API，但集成不够好。未来几年，支持HTML5的移动浏览器将如雨后春笋，将你的应用向HTML5迁移是很明智的，因为HTML5将很好地运行在这些设备上。
跨界领域
已经有公司即将发布电视平台，GoogleTV以及AppleTV，Google表示，他们的TV平台将支持HTML5，我们不知道苹果的TV平台将支持什么，鉴于他们最近对HTML5的一系列炒作，很有可能也支持。另外一些电视盒厂商，如Boxee业已开始支持HTML5，如果你想为Boxee开发应用，与其专门为它开发，不如直接使用HTML5。
跨界领域拥有大量的平台，那些可以连接电脑的电视的数量在不断增长，我们已经可以在电视上全屏观看YouTube，而备受欢迎的Wii则内置了Opera。所有这些，都将借助HTML，CSS与JavaScript。
HTML5应用商店
Eric Meyer讲到了HTML5应用程序问题，他将HTML5应用成为Web Stack Apps，HTML5要获得更多关注，可以建立HTML5应用商店。Chrome正在这样做，而Palm已经有了一个这样的东西。
应用商店是很好的东西，开发者可以直接得到报酬，而无需像现在这样靠广告维持，同时，用户也将有一个地方去为他们的设备寻找程序。
HTML5市场前景
HTML5在快速成长，值得所有人密切关注，最近的一两年，会有很多公司进入这个领域，我们或许会在Chrome应用商店看到一些重量级厂商，我们也有希望在Google TV和Apple TV领域看到一些应用商店的出现。HTML5会像传统的Flash，Flex，Silverlight，Objective-C那样，形成自己的生态系统。HTML5将比Flash,Flex,Silverlight以及Objective-C更容易出现在任何设备。
对于年轻一代开发者，HTML5应当是他们首选技能，HTML5会形成很大的市场，很有很多公司需要这方面的人才。

HTML5游戏控制的问题

/**
***隐藏网址***
*/
THREE.FlyControls = function ( object, domElement ) {
this.object = object;
this.domElement = ( domElement !== undefined ) ? domElement : document;
if ( domElement ) this.domElement.setAttribute( ’tabindex’, -1 );
// API
this.movementSpeed = 1.0;
this.rollSpeed = 0.005;
this.dragToLook = false;
this.autoForward = false;
// disable default target object behavior
this.object.useQuaternion = true;
// internals
this.tmpQuaternion = new THREE.Quaternion();
this.mouseStatus = 0;
this.moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };
this.moveVector = new THREE.Vector3( 0, 0, 0 );
this.rotationVector = new THREE.Vector3( 0, 0, 0 );
this.handleEvent = function ( event ) {
if ( typeof this == ’function’ ) {
this( event );
}
};
this.keydown = function( event ) {
if ( event.altKey ) {
return;
}
//event.preventDefault();
switch ( event.keyCode ) {
case 16: /* shift */ this.movementSpeedMultiplier = .1; break;
case 87: /*W*/ this.moveState.forward = 1; break;
case 83: /*S*/ this.moveState.back = 1; break;
case 65: /*A*/ this.moveState.left = 1; break;
case 68: /*D*/ this.moveState.right = 1; break;
case 82: /*R*/ this.moveState.up = 1; break;
case 70: /*F*/ this.moveState.down = 1; break;
case 38: /*up*/ this.moveState.pitchUp = 1; break;
case 40: /*down*/ this.moveState.pitchDown = 1; break;
case 37: /*left*/ this.moveState.yawLeft = 1; break;
case 39: /*right*/ this.moveState.yawRight = 1; break;
case 81: /*Q*/ this.moveState.rollLeft = 1; break;
case 69: /*E*/ this.moveState.rollRight = 1; break;
}
this.updateMovementVector();
this.updateRotationVector();
};
this.keyup = function( event ) {
switch( event.keyCode ) {
case 16: /* shift */ this.movementSpeedMultiplier = 1; break;
case 87: /*W*/ this.moveState.forward = 0; break;
case 83: /*S*/ this.moveState.back = 0; break;
case 65: /*A*/ this.moveState.left = 0; break;
case 68: /*D*/ this.moveState.right = 0; break;
case 82: /*R*/ this.moveState.up = 0; break;
case 70: /*F*/ this.moveState.down = 0; break;
case 38: /*up*/ this.moveState.pitchUp = 0; break;
case 40: /*down*/ this.moveState.pitchDown = 0; break;
case 37: /*left*/ this.moveState.yawLeft = 0; break;
case 39: /*right*/ this.moveState.yawRight = 0; break;
case 81: /*Q*/ this.moveState.rollLeft = 0; break;
case 69: /*E*/ this.moveState.rollRight = 0; break;
}
this.updateMovementVector();
this.updateRotationVector();
};
this.mousedown = function( event ) {
if ( this.domElement !== document ) {
this.domElement.focus();
}
event.preventDefault();
event.stopPropagation();
if ( this.dragToLook ) {
this.mouseStatus ++;
} else {
switch ( event.button ) {
case 0: this.moveState.forward = 1; break;
case 2: this.moveState.back = 1; break;
}
this.updateMovementVector();
}
};
this.mousemove = function( event ) {
if ( !this.dragToLook || this.mouseStatus 》 0 ) {
var container = this.getContainerDimensions();
var halfWidth = container.size / 2;
var halfHeight = container.size / 2;
this.moveState.yawLeft = - ( ( event.pageX - container.offset ) - halfWidth ) / halfWidth;
this.moveState.pitchDown = ( ( event.pageY - container.offset ) - halfHeight ) / halfHeight;
this.updateRotationVector();
}
};
this.mouseup = function( event ) {
event.preventDefault();
event.stopPropagation();
if ( this.dragToLook ) {
this.mouseStatus --;
this.moveState.yawLeft = this.moveState.pitchDown = 0;
} else {
switch ( event.button ) {
case 0: this.moveState.forward = 0; break;
case 2: this.moveState.back = 0; break;
}
this.updateMovementVector();
}
this.updateRotationVector();
};
this.update = function( delta ) {
var moveMult = delta * this.movementSpeed;
var rotMult = delta * this.rollSpeed;
this.object.translateX( this.moveVector.x * moveMult );
this.object.translateY( this.moveVector.y * moveMult );
this.object.translateZ( this.moveVector.z * moveMult );
this.tmpQuaternion.set( this.rotationVector.x * rotMult, this.rotationVector.y * rotMult, this.rotationVector.z * rotMult, 1 ).normalize();
this.object.quaternion.multiply( this.tmpQuaternion );
// expose the rotation vector for convenience
this.object.rotation.setEulerFromQuaternion( this.object.quaternion, this.object.eulerOrder );
};
this.updateMovementVector = function() {
var forward = ( this.moveState.forward || ( this.autoForward && !this.moveState.back ) ) ? 1 : 0;
this.moveVector.x = ( -this.moveState.left + this.moveState.right );
this.moveVector.y = ( -this.moveState.down + this.moveState.up );
this.moveVector.z = ( -forward + this.moveState.back );
//console.log( ’move:’, );
};
this.updateRotationVector = function() {
this.rotationVector.x = ( -this.moveState.pitchDown + this.moveState.pitchUp );
this.rotationVector.y = ( -this.moveState.yawRight + this.moveState.yawLeft );
this.rotationVector.z = ( -this.moveState.rollRight + this.moveState.rollLeft );
//console.log( ’rotate:’, );
};
this.getContainerDimensions = function() {
if ( this.domElement != document ) {
return {
size: ,
offset:
};
} else {
return {
size: ,
offset:
};
}
};
function bind( scope, fn ) {
return function () {
fn.apply( scope, arguments );
};
};
this.domElement.addEventListener( ’contextmenu’, function ( event ) { event.preventDefault(); }, false );
this.domElement.addEventListener( ’mousemove’, bind( this, this.mousemove ), false );
this.domElement.addEventListener( ’mousedown’, bind( this, this.mousedown ), false );
this.domElement.addEventListener( ’mouseup’, bind( this, this.mouseup ), false );
this.domElement.addEventListener( ’keydown’, bind( this, this.keydown ), false );
this.domElement.addEventListener( ’keyup’, bind( this, this.keyup ), false );
this.updateMovementVector();
this.updateRotationVector();
};
可以研究一下他的运行机制。注重看mousedown keydown　updateMovementVector updateROtationVector 和update 看他是怎么把这几个函数结合起来，通过使用变量去记录状态，使键盘不会直接去影响视角的移动，而是通过在update函数中去循环的刷新调用各个状态记录去实现视角的平滑，不停顿的移动的。 同样 视角的这种处理可以运用到你的坦克中去。

html5新增了离线缓存机制这说法对吗

这个不算是 新增吧。
随着现代浏览器的推动，Flash放弃对移动端的支持，HTML5无疑成为当前Web前端炙手可热的话题。各大游戏开发商、App开发商纷纷投入人力进行研究和技术储备。相信不久的将来，HTML5会迎来一个快速发展和普及的春天。那么，HTML5这个新一代的标准，又给我们带来哪些缓存机制呢？
HTML5 之离线应用Manifest
我们知道，使用传统的技术，就算是对站点的资源都实施了比较好的缓存策略，但是在断网的情况下，是无法访问的，因为入口的HTML页面我们一般运维的考虑，不会对其进行缓存。HTML5的Cache Mainifest离线应用特性就能够帮助我们构建离线也能使用的站点，所有的资源都使用浏览器本地缓存，当然前提是要求在联网的情形下使用过一次站点。
如何实现离线访问特性
实现的步骤非常简单，主要3个步骤：
1）在服务器上添加MIME TYPE支，让服务器能够识别manifest后缀的文件
AddType text/cache-manifest manifest
2）创建一个后缀名为.manifest的文件，把需要缓存的文件按格式写在里面，并用注释行标注版本
CACHE MANIFEST
# 直接缓存的文件
CACHE:
Path/to/cache.js
# version：2012-03-20
3）给 《html》 标签加 manifest 属性，并引用manifest文件
具体可以参考：HTML5 缓存: cache manifest
《html manifest=”path/to/name-of.manifest”》
离线应用访问及更新流程
第一次访问离线应用的入口页HTML（引用了manifest文件），正常发送请求，获取manifest文件并在本地缓存，陆续拉取manifest中的需要缓存的文件
再次访问时，无法在线离线与否，都会直接从缓存中获取入口页HTML和其他缓存的文件进行展示。如果此时在线，浏览器会发送请求到服务器请求manifest文件，并与第一次访问的副本进行比对，如果发现版本不一致，会陆续发送请求重新拉取入口文件HTML和需要缓存的文件并更新本地缓存副本
之后的访问重复第2步的行为
离线机制的缓存用途
从Manifest的机制来看，即使我们不是为了创建离线应用，也同样可以使用这种机制用于缓存文件，可以说是给Web缓存提供多一种可以选择的途径。
存在的问题：缓存文件更新控制不灵活
就目前HTML5提供的manifest机制来讲，一个页面只能引用一个manifest页面，而且一旦发现这个manifest改变了，就会把里面所有定义的缓存文件全部重新拉取一遍，不管实际上有没有更新，控制比较不灵活。针对这个问题，也有的同学提出了一些建议，比如把需要缓存的文件分模块切分到不同manifest中，并分开用HTML引用，再使用强大的iframe嵌入到入口页面，这样就当某一个模式需要有更新，不会导致其他模块的文件也重新拉取一遍。

HTML5 之本地存储localstorage
HTML5给我们提供本地存储localstorage特性，严格来讲，其实已经不算传统Web缓存的范畴。因为它存储的地方是跟Web缓存分开的，是浏览器重新开辟的一个地方。
localstorage的作用
本地存储localstorage的作用主要使Web页面能够通过浏览器提供的set/get接口，存储一些自定义的信息到本地硬盘，并且在单次访问或以后的访问过程中随时获取或修改。
Localstorage的使用
Localstorage提供了几个非常易用的Api，setItem/getItem/removeItem/clear，具体的可以参考：Html5 Step by Step(二) 本地存储
Localstorage的缓存用途
Localstorage设计的本意可能是用来存储一些用户操作的个性化设置的文本类型的信息和数据，当我们其实也可能拿来当Web缓存区使用，比如我们可以将Base64格式编码的图片信息，存在localstorage中，再次访问时，直接本地获取后，使用Css3的Data:image的方式直接展现出来。
存在的问题：大小限制
按照目前标准，目前浏览器只给每个独立的域名提供5m的存储空间，当存储超过5m，浏览器就会弹出警告框。

可以说，HTML5的Manifest和localstorage是给我们在考虑Web缓存的时候提供了多一种思路，当你开发的应用只面对现代浏览器的时候，不妨可以考虑一下