怎么用html5实现愤怒的小鸟

这篇文章主要介绍“怎么用HTML5实现愤怒的小鸟”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么用html5实现愤怒的小鸟”文章能帮助大家解决问题。

　　简单而是用的小游戏框架，为你创建好了canvas，而且用了double buffer的canves

　　主要的类图如下：

　　框架定义了GameObject基类，游戏中每一个可以活动的部件均可以继承它，还定义了VisualGameObject类，它继承自GameObject类，添加了draw方法，游戏中可见的部件可以从它继承，实现自己的draw方法，draw方法带有参数，就是canvas的context。所有GameObject由GameObjectManager管理，所有自定义的GameObject子类的对象都需要添加到GameObjectManager，它有一个draw方法会被定时调用，如果每1/30秒调用一次，那么你的游戏从设计上来说就是30FPS的。这个方法会把它管理的所有GameObject都调用一遍draw方法（如果有的话），实现所有GameObject的定时重绘，这个就是大家常看到的游戏设计里的主循环。它的功能好比windows编程里的消息循环一样。

　　有了这个framework，你要做的就是继承VisualGameObject，实现draw方法绘制知己，实例化并添加到GameObjectManager中即可。

　　2.Sprite sheet和Animition

　　Sprite sheet就是精灵表。

　　主要原理简述如下：

　　定义SpriteSheet类，它负责从一张大图中剪切出我们需要的一个个小图。把所有你游戏重要到的图片做成一张大图，提高性能，多个小图意味着客户端需要发起多次WEB request，每个Http request含有head，tcp，ip等都含有head，减少请求次数意味着较少数据流量，这个好处你懂的。貌似html5中的websocket就是用的这个原理，来提高系统吞吐量的，将http连接upgrade成webSocket，之后所有的双向通信都直接传数据，最少只需要两个字节的表头。

　　Animation类负责将各个剪切出来的小图拼接成动画，每一个小图是一帧，每一帧定义一个duration，每一帧显示的duration完了，就显示下一帧，然后循环，看起来就是连续的动画了，其实是欺骗了你的眼睛。

　　3.box2D

　　随着AngryBird的火爆，这个库也进入了广大开发者的视野，现在介绍这个库的文章太多了，我就不啰嗦了，只写几个关键点：

　　box2D源代码使用c++开发，可以从下载到最新版本和文档，它port到了各种平台，如java，C#，flash，javascript。我是用的是box2Dweb，这个javascript库是从actionacript库port过来的，可以从下载。

　　Seth Ladd写过几篇很经典的入门级文章：

　　这个库的适用范围是几米到几十米之间，也就是牛顿定律的使用范围（不含天体运动），对于微观离子的运动，用这个库是不合适的，太大的范围也不精确。

　　速度太快是可以穿越的。这个是我测试过的，如果给小鸟太大的力，使其速度过快，它能够穿越木头。原因是box2D的库每1/60秒（可配置）是一个step，它会计算每个step结束时各个刚体（Rigid body）应该在什么位置，如果发现有重叠的，就认定在这个step中会有碰撞发生，会触发碰撞事件，并且修正刚体的位置，使其不重叠，但是如果某一个刚体速度太快，在这个step结束的时候已经成功穿越的另一个刚体，则碰撞就无法被检测到，实现了穿越。

　　4.Audio

　　在html5里，audio实现起来非常简单

　　this.getAudio=function（id）{

　　if（this.audiOS[id]==undefined） {

　　this.audios[id]=new Audio（）;

　　this.audios[id].src=""+id;

　　this.audios[id].load（）;

　　}

　　return this.audios[id];

　　};

　　var audio=this.getAudio（"title_theme.mp3"）;

　　audio.loop=true;

　　audio.play（）;

　　作为一个windows平台程序员，发现web在处理事件时与windows桌面应用有不同之处。桌面程序在处理鼠标或键盘事件时，注册一个事件处理方法就可以了，当事件发生时，这个事件处理方法就会被调用执行。但是web有点不一样，加入你的游戏时30FPS的，1/30秒你的程序才获得一次执行机会，但是在这短短的1/30秒时间内，可能已经发生了好几次鼠标键盘事件，所有需要在事件发生时记录下事件类型及状态，当程序获得执行机会时，读取刚才这些记录，处理事件，删除记录。

关于“怎么用html5实现愤怒的小鸟”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网html频道，小编每天都会为大家更新不同的知识点。