用html5创建小游戏经验总结

前段时间，用Html5的canvas做个小游戏，一是想尝试一下canvas的功能，二是 体验 一下html5的一些新特性。当网页游戏做完后，又尝试了一下html5所谓的一次开发，多平台受用的特点，直接用html5创建了android 应用。 在这个过程中有一些经验和体会在这里总结一下。

本节主要总结HTML5的一些新特性的尝试。

1. 让游戏动起来

众所周知，游戏是靠不停的更新数据和渲染场景来实现动画。WebGame也一样。下面这个方法接受一个回调函数作为参数,该回调函数会在窗口重绘之前被调用.

window.requestAnimFrame = (function() {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {

window.setTimeout(callback, 1000/60);

};

})();

2. canvas来渲染动画

(1)纹理渲染

canvas的drawImage是个很好用的功能，渲染2d纹理完全够用。它支持截取部分纹理，并指定应用的区域，实现了纹理映射和纹理的放大缩小。

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

但是如果图片放得过大，会出现失真的情况。假如在实际使用中需要实现物体放大缩小的功能，则需要特别注意选择合适分辨率的图片。

 

(2)canvas性能优化

canvas的性能问题需要谨慎处理，差不多每帧渲染七八幅图就能感觉帧数明显的下降。最后使用canvas的预渲染才解决问题。

所谓预渲染是指先把纹理图片渲染在隐藏的canvas上，由于drawImage不仅支持把image画在canvas上，还支持把canvas画在canvas上，在每帧drawImage的时候把隐藏的canvas作为source。这样只需要在初始化的时候加载一次图片，渲染在隐藏的canvas上。然后在每帧渲染时相当于从缓存中读取数据，从而加快了渲染速度。应用这种方法后，帧数一下子就恢复正常了。

      context.drawImage(m_canvas, 0, 0);

在使用预渲染的时候要注意的一点，要确保图片加载完了再drawImage，否则会在后续渲染的时候出现空白的情况。可以用图片的预加载，或者用image的onload事件，等图片加载完了，再渲染到隐藏的canvas上。

      img.onload = function(){
         m_canvas.getContext("2d").drawImage(img,0,0);

     }

另外还可以使用多重canvas来提高性能。一个canvas作为静态的背景，另一个来渲染动画。这样对于静态的背景，不用每帧重绘。重绘的区域越小，帧数就越高。

<canvas id="background" width="640" height="480" style="position:absolute; z-index:0;"></canvas>

<canvas id="sprite" width="640" height="480" style="position:absolute; z-index:1;"></canvas>

3. 实现触摸功能

要实现想用触摸功能来操作物体，需要用到touch event。根据w3c规范，touch event分touchstart, touchmove, touchend, touchcancle四种类型。

当touch发生时，拖动准备，拖动开始时，处理拖动事件，touch结束，拖动完成。例子如下：

canvas.ontouchstart = function(e){ drag = true;};

canvas.ontouchmove = touchHandler;

canvas.ontouchend = canvas.ontouchcancel = function(e){ drag = false;};

 

4. 用webstorge存储游戏信息

webstorage是一个很好用同时又很易用的功能。webstorage包括localStoarge和sessionStorage。localStorage是存储在本地的持久化数据，可以用来存取游戏的level等数据。sessionStorage中存取的数据只在当前session中有效，可以用来存取当前bonus等一些不需要永久存取的数据。

简单好用，例子如下：

var level = localStorage.level; //读数据

localStorage.level = 1; //写数据

if（localStorage.level)  //判断是否定义过

 

5. 让游戏绘声绘色

游戏里面加入音乐也是非常重要的。html5的audio用起来比较简单，利用html5的<audio>标签就可以了，就不多说了。但是要注意的是各浏览器支持的音频格式的问题。现在支持的情况是：

Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Browser	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	NO	YES	YES

 

6. 自适应分辨率

网页游戏用游览器打开时，只有全屏才能带来游戏的沉浸感。试图想实现fullscreen，但由于各浏览器支持不一样，暂时搁浅。

根据屏幕分辨率的大小，让canvas自适应大小。采用的方法是，在html文件中定义一个canvas的默认大小，在初始化时再根据屏幕的大小重新定义canvas。不过由于各个浏览器的屏幕大小的API实现也不太一样，效果也不甚理想。

canvas.width = document.body.scrollWidth;

canvas.height = document.body.scrollHeight;

这一部分只有以后再改进了。

 

下一节将介绍这些新的html5功能，在android中的支持情况。待续。。。