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

今日终于得空，补一篇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