使用 cocos2d-html5 和 cqwrap 快速实现 Flappy Bird 游戏

发表于 5年以前 | 总阅读数：1155 次

毫无疑问，最近手机游戏届最大的赢家无疑是 Flappy Bird 的作者。谁也没想到这样一款简单的脑残游戏竟然能够火爆到这种程度。

惊讶归惊讶吧，作为程序猿，我们更多时候还是淡定滴研究技术，因此本文也还是以如何开发这样一款"脑残游戏"为讨论主题。

游戏的准备工作

因为我们要做一个一模一样的游戏，所以我们准备与官方扑腾小鸟长得非常相似的素材。由于这款游戏实在太火爆了，因此网络上各种版本的山寨，所以素材并不难找。将这些素材使用 Texture Packer 工具拼接好，那么我们的游戏准备工作就完成了。

使用类库

在这里我们使用 cocos2d-html5-2.2.2，在 cocos2d-html5官方，可以下载到这个版本。

另外我们使用一个叫做 cqwrap 的库，这是一个我为 cocos2dx-jsb 和 cocos2dx-html5 定制的扩展，我在前一个开源的游戏 HappyGo 中也使用了它，可以从 github 的这个项目中获得它的代码。

开始编码

素材有了，框架也有了，这样就可以开工了。

首先，这样一个简单的游戏，我们只需要一个场景，我们把它命名为 PlayScene

在 src/view/ 目录下创建一个 play_scene.js 的文件，

var layers = require("cqwrap/layers"),
        BaseScene = require("cqwrap/scenes").BaseScene;
    var GameLayer = layers.GameLayer, BgLayer = layers.BgLayer;

    var MyScene = BaseScene.extend({
        init:function () {
            this._super();

            //添加静态的背景
            var bg = new BgLayer("res/bg.png");
            this.addChild(bg);
        }
    });

    module.exports = MyScene;

我们首先创建了一个场景，在这个场景里面，我们添加了一个静态的背景层。在cqwrap中，封装了一个BgLayer的类，用来创建静态的背景层。

这样，我们就建立了一个只有一个远背景层的场景。

创建前景

我们在背景的基础上创建一个前景层，小鸟、水管和其他元素都在这个层上


    var layers = require("cqwrap/layers"),
        BaseScene = require("cqwrap/scenes").BaseScene;
    var GameLayer = layers.GameLayer, BgLayer = layers.BgLayer;

    var MyScene = BaseScene.extend({
        init:function () {
            this._super();

            //添加静态的背景
            var bg = new BgLayer("res/bg.png");
            this.addChild(bg);

            //添加前景层
            var layer = new MyLayer();
            this.addChild(layer);
        }
    });

    module.exports = MyScene;

我们创建了一个MyLayer实例，作为前景层，我们在下面的代码里展示 MyLayer 的基本结构：


    var MyLayer = GameLayer.extend({
        init: function(){
            this._super();
            return true;
        }
    });

我们仅仅创建了一个游戏层，这个层继承自 GameLayer，GameLayer是cqwrap提供的一个类，用来创建包括精灵和动作事件的层。

在游戏场景中加载资源

首先我们得把素材资源加载进来，在 cocos2d-html5 中，我们可以通过 SpriteFrameCache 将之前打包的资源加载进来


    var MyLayer = GameLayer.extend({
        init: function(){
            this._super();

            //加载游戏素材资源
            var cache = cc.SpriteFrameCache.getInstance();
                cache.addSpriteFrames("res/flappy_packer.plist", "res/flappy_packer.png");

            return true;
        }
    });

实现一个"往前移动"的效果

在 Flappy Bird 中，小鸟看起来在往前飞翔，是因为用地面的图片做了一个动画效果

var MyLayer = GameLayer.extend({
        init: function(){
            this._super();

            //加载游戏素材资源
            var cache = cc.SpriteFrameCache.getInstance();
                cache.addSpriteFrames("res/flappy_packer.plist", "res/flappy_packer.png");

            //显示地面
            var ground = cc.createSprite("res/ground.png", {
                anchor: [0, 0],
                xy: [0, 0],
                zOrder: 3
            });

            //让地面运动起来
            ground.moveBy(0.5, cc.p(-120, 0)).moveBy(0, cc.p(120, 0)).repeatAll().act();

            this.addChild(ground);

            return true;
        }
    });

飞翔的小鸟

有了一个会"前进"的地面之后，我们只要在空中放置一只小鸟，那么就可以制造出飞翔的效果了：

//我是一只小小小小鸟
    var bird = cc.createSprite("bird1.png", {
        anchor: [0.5, 0],
        xy: [220, 650],
        zOrder: 2
    });

    this.addChild(bird);

cc.createSprite 是一个非常方便的方法，它是由cqwrap库提供的额外方法，可以用来更方便地创建各种 Sprite.

现在我们创建了一只在空中的小鸟，它看起来会不断向前进，但是看起来比较奇怪，因为它的翅膀是不动的。

我们可以执行动画，让小鸟动起来----


    //给小鸟增加飞行动画
    bird.animate(0.6, "bird1.png", "bird2.png", "bird3.png").repeat().act();
    bird.moveBy(0.3, cc.p(0, -20)).reverse().repeatAll().act();

现在，我们拥有了一只在空中不断飞翔的小鸟

响应 touch/鼠标事件

在 cqwrap 中，一个 GameLayer 是一个代理，它可以代理精灵们的事件，甚至可以代理自身的事件----

this.delegate(this);    //将Layer的touch事件代理给Layer自身
    this.on("touchstart", function(){
        //事件处理函数 
    });

让小鸟往高处飞

我们添加让小鸟往高处飞的事件----

this.on("touchstart", function(){
        bird.stopAllActions();
        bird.animate(0.2, "bird1.png", "bird2.png", "bird3.png").repeat().act();

        var jumpHeight = Math.min(1280 - birdY, 125);
        bird.moveBy(0.2, cc.p(0, jumpHeight)).act();

        bird.rotateTo(0.2, -30).act(); 
    });

让小鸟会掉落下来

this.on("touchstart", function(){
        var birdX = bird.getPositionX();
        var birdY = bird.getPositionY();
        var fallTime = birdY / 1000;

        bird.stopAllActions();
        bird.animate(0.2, "bird1.png", "bird2.png", "bird3.png").repeat().act();

        var jumpHeight = Math.min(1280 - birdY, 125);
        bird.moveBy(0.2, cc.p(0, jumpHeight)).act();

        bird.rotateTo(0.2, -30).act();
        bird.delay(0.2).moveTo(fallTime, cc.p(birdX, 316), cc.EaseIn, 2)
            .then(function(){
                //小鸟掉落下来了

            }).act();
        bird.delay(0.2).rotateTo(fallTime, 90, 0, cc.EaseIn, 2).act();    
    });

现在我们有了一只会飞的小鸟，点击鼠标让它飞起来，如果不点击，它就会掉到地上。

精灵的 animate 方法可以播放帧动画，只需要传给它每一帧的图片就行了，repeat表示重复播放，可以传一个参数表示次数，不传的话表示无限次重复。

创建水管和让水管移动起来

function createHose(dis){
        var hoseHeight = 830;
        var acrossHeight = 250;
        var downHeight = 200 + (400 * Math.random() | 0);
        var upHeight = 1000 - downHeight - acrossHeight;

        var n = (self.hoses.length / 2) | 0;
        var hoseX = dis + 400 * n;

        var hoseDown = cc.createSprite("holdback1.png", {
            anchor: [0.5, 0],
            xy: [hoseX, 270 + downHeight - 830],
        });

        var hoseUp = cc.createSprite("holdback2.png", {
            anchor: [0.5, 0],
            xy: [hoseX, 270 + downHeight + acrossHeight],
        });

        self.addChild(hoseDown);
        self.addChild(hoseUp);

        var moveByDis = hoseX+500;
        hoseUp.moveBy(moveByDis/200, cc.p(-moveByDis, 0)).then(function(){
            hoseUp.removeFromParent(true);
        }).act();
        hoseDown.moveBy(moveByDis/200, cc.p(-moveByDis, 0)).then(function(){
            createHose(-500);
            var idx = self.hoses.indexOf(hoseDown);
            self.hoses.splice(idx, 2);
            self.scoreBuf ++;
            hoseDown.removeFromParent(true);
        }).act();

        self.hoses.push(hoseDown, hoseUp);

    };

我们将上下两半部分水管的卡通分别计算位置，让缺口保持固定的大小，出现位置随机，然后将水管从屏幕外面往中间移动。

由于考虑性能，我们回收使用过的水管精灵，所以我们把当前可用的精灵放在一个队列中，根据队列的数量来计算新生成的水管精灵的位置。

计算小鸟和水管的碰撞

//碰撞检测
    self.checker = self.setInterval(function(){
        //cc.log(111);
        var score = 0;

        //这里可以用 boundingBox 的 上下左右的中间点来判断碰撞，会更准确一些
        var box = bird.getBoundingBox();
        var bottom = cc.p(box.x + box.width / 2, box.y);
        var right = cc.p(box.x + box.width, box.y + box.height / 2);
        var left = cc.p(box.x, box.y + box.height / 2);
        var top = cc.p(box.x + box.width / 2, box.y + box.height);

        self.hoses.some(function(hose){
            var box = hose.getBoundingBox();

            if(hose.getPositionX() <= 220) score ++;

            //cc.log(score);

            if(hose.getPositionX() > 0 && hose.getPositionX() < 720
                //&& cc.rectIntersectsRect(hose.getBoundingBox(), bird.getBoundingBox())
                && (cc.rectContainsPoint(box, left)
                    || cc.rectContainsPoint(box, right)
                    || cc.rectContainsPoint(box, top)
                    || cc.rectContainsPoint(box, bottom))){
                //cc.log([hose.getBoundingBox(), bird.getBoundingBox()]);
                layerMask.fadeIn(0.1).fadeOut(0.1).act();
                Audio.playEffect("audio/sfx_hit.ogg");
                self.status = "falling";
                return true;
            }
        });

        //碰撞后小鸟掉下来，地面、水管都停止运动
        if(self.status == "falling"){
            self.clearInterval(self.checker);
            ground.stopAllActions();

            self.hoses.forEach(function(o){
                o.stopAllActions();
                //o.removeFromParent(true);
            });
        }

    }, 50)

基本的原理就这些了，剩下的就是一些细节，最终完整版的扑腾小鸟演示点这里体验