189 8069 5689

怎么用html5实现愤怒的小鸟

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

创新互联公司成立10年来,这条路我们正越走越好,积累了技术与客户资源,形成了良好的口碑。为客户提供网站设计制作、成都网站设计、网站策划、网页设计、国际域名空间、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等,这些对于网站建设都非常重要,创新互联公司通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案,携手广大客户,共同发展进步。

简单而是用的小游戏框架,为你创建好了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实现愤怒的小鸟”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


网站题目:怎么用html5实现愤怒的小鸟
地址分享:http://cdxtjz.cn/article/ijeope.html

其他资讯