H5中游戏的核心控制器（定时器）

在网页游戏的设计中，我们一般采用H5里面的canvas画布来设计游戏，canvas画布是H5中的一个重要内容。主要用于游戏设计和制作图标。制作图表通常包含：柱状图、饼状图、折线图等。在实际项目当中通常通过引用chart.js中的插件来实现图表的实现。

在H5中另一个与canvas类似的一种画布svg，svg是一种通过XML技术描述二维图形的语言。其实现的效果是矢量图，所以svg不能引入图片文件。这是svg与canvas相比的劣势，通常在实际项目当中，因为矢量图的图形不会失真，我们我们喜欢用svg来制作一些小的图标和图形。two.js库支持svg。在这里总结一下two.js支持canvas、svg、和webGL（多用于游戏开发）。但是在真实案例当中由于chrome浏览器不支持在运用H5中的canvas标签的时候，不支持在js中引入图片的源文件，所以存在兼容性问题。

由于H5游戏目前在国内的技术已经非常的成熟，今天我们来讨论H5中游戏通过canvas实现游戏效果一个重要知识点：定时器（不需要用户触发，即可以自动执行的一种机制），定时器通常用于中，但是在H5的游戏当中定时器也是制作它的核心控制器，我试过在一个页面当中定义两个setInterval，但是只能有一个实现定时的效果。所以掌握在游戏当中定时器的运用，是至关重要的。要实现在一个canvas画布当中来实现当触发不同事件时，通过一个canvas来实现游戏动态效果，如下面的代码：

setInterval(function(){
switch (state){
case START:
// 1 绘制背景图片
sky.paint();
// 2 控制背景运动
sky.step();
// 3 绘制logo图片
context.drawImage(logo,20,0);
break;
case STARTTING:
break;
case RUNNING:
break;
case PAUSE:
break;
case GAMEOVER:
break;
}
},100);

上述代码是在2015年10月20号，的飞机大战中项目中。这里我们通过一个setInterval定时器当中包含一个函数，然后在函数里面。定义一个分支的结构，这样就可以实现在不同的时间里，通过触发不同的事件实现不同的动态游戏效果。通过switch分支结构，在构造器中，通过if来实现其动画效果的连贯性。在switch的case中通过调用构造函数实现动画的流程。

以上内容有错误点，请各位大神指教。估计各位大神都读不懂！！！凌乱！！！