2011123013063886

如何做html5山寨版愤怒的小鸟

以下是看到网上写的一篇技术贴,分享给大家:

主要有以下几点,主要是一些链接,供大家学习

1.游戏框架
2.Sprite sheet和Animition
3.box2D
4.Audio

1.游戏框架

http://www.brighthub.com/internet/web-development/articles/40512.aspx

http://www.brighthub.com/internet/web-development/articles/40513.aspx

简单而是用的小游戏框架,为你创建好了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就是精灵表。

http://codeutopia.net/blog/2009/08/21/using-canvas-to-do-bitmap-sprite-animation-in-javascript/

这篇文章讲解了如何自己实现Animation,主要原理简述如下:

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

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

 

3.box2D

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

box2D源代码使用c++开发,可以从http://box2d.org/下载到最新版本和文档,它port到了各种平台,如java,c#,flash,javascript。我是用的是box2Dweb,这个javascript库是从actionacript库port过来的,可以从http://code.google.com/p/box2dweb/下载。

Seth Ladd写过几篇很经典的入门级文章:http://creativejs.com/2011/09/box2d-javascript-tutorial-series-by-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 = “music/”+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秒时间内,可能已经发生了好几次鼠标键盘事件,所有需要在事件发生时记录下事件类型及状态,当程序获得执行机会时,读取刚才这些记录,处理事件,删除记录。

 

介绍及源代码下载:

http://www.cnblogs.com/piyeyong/archive/2011/12/30/2307366.html

HTML5 PK FLASH

目前Flash占据网页动画90%的市场, FB, 人人,开心,腾讯,4399的游戏基本都是Flash,这全赖于adobe把as2的脚本语言改为面向对象的as3, 令flash注入生机,但也因为太依赖flash player,以苹果以首的大腕杯葛flash

html5不依赖flash, 基于浏览器, 有人就说这是flash的终结者. 但由于http不支持长连接, websocket就应运而生, 有点类似http+tcp, google chrome和ie9都宣布支持, 貌似一个兼容ios, android, wp7 平台就要横空出世,但由于javascript始终不如as3好用,还有websocket的标准还没最终定, html5的何去何从让我们拭目而待.

 

discuz

discuz!–风行全国的开源论坛和SNS架构

大家是不是觉得这个头像很熟悉,好象哪里都有?是,这是大名鼎鼎的discuz!的标志

Discuz! 是康盛Comsenz推出的一套通用的社区论坛软件系统,中小网站采用率很高,风行祖国(听说不能叫中国{#emotions_dlg.laughing})南北,多伦多的YORKBBS和51好象也采用了

好处: 有个技术团队帮你开发, 投资者关注市场就够了

缺点: 网站扩容性不好,大网站象qq,163,新浪都不采用