[入门教程]使用Cocos2d-html5游戏引擎编写一个简单的游戏 第十回合:游戏结束

游戏结束

  完成了之前内容之后,这个章节的内容就看起来很简单了,就是实现当飞机碰到敌机之后游戏结束。切换到游戏结束场景。

  首先,我们在src文件夹下新建一个GameOverScene.js文件,这个文件定义了游戏结束场景。

  文件内容如下:
var GameOverLayer = cc.LayerColor.extend({

    init:function(){
        this._super();
        this.setColor(cc.c4(126,126,126,126));

        var winSize = cc.Director.getInstance().getWinSize();

        // 创建一个标签用于显示“GameOver”字符串
        // 第一个参数是内容,第二个是字体,第三个是字体大小
        var _label = cc.LabelTTF.create("GameOver","Thonburi",40);
        // 设置位置
        _label.setPosition(cc.p(winSize.width/2,winSize.height/2));

        this.addChild(_label);

        return true;
    }
})
//这个方法创建了GameOverLayer层,并调用这个层的init方法进行初始化
GameOverLayer.create = function(){
    var gameOverLayer = new GameOverLayer();
    if(gameOverLayer && gameOverLayer.init()){
        return gameOverLayer;
    }
    return null;
}

var GameOverScene = cc.Scene.extend({
    _layer:null,

    init:function(){
        // 这个场景加入了一个GameOverLayer层
        this._layer = GameOverLayer.create();
        this.addChild(this._layer);

        return true;
    }
})
//这个方法创建了GameOverScene场景,并调用这个场景的init方法进行初始化
GameOverScene.create = function(){
    var scene = new GameOverScene();
    if(scene && scene.init()){
        return scene;
    }
    return null;
}

```

      这样就可以了吗?还没,如果直接运行会发现,GameOverScene没有找到。我们需要在cocos2d.js这个配置文件进行配置,在c变量中有个appFiles的成员,在这个成员中加入新添加的GameOverScene.js。以后我们每添加源代码就需要在cocos2d.js文件中进行配置,切记!
var c = {
        COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
        box2d:false,
        chipmunk:false,
        showFPS:true,
        loadExtension:false,
        frameRate:60,
        renderMode:0,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
        tag:'gameCanvas', //the dom element to run cocos2d on
        engineDir:'../cocos2d/',
        //SingleEngineFile:'',
        appFiles:
            'src/resource.js',
            'src/myApp.js',
            'src/GameOverScene.js'//add your own files in order here
        ]
    };

```

      现在再运行程序就没问题了!发现游戏已经从游戏的场景切换到游戏结束的场景了,现在对场景,层的概念有了更形象的理解了吧。到这里,我们的小游戏已经完成了。 
  



上一篇:http://www.cocoachina.com/bbs/read.php?tid=188223

谢谢楼主. 成功了

交作业

qianqianqian.duapp.com/cocos2dhtml5/FirstCocos2d/

如何判断结束,没有说明啦?

在UpdateGame里面写
// 获得我飞机的碰撞矩形
var myPlane = this.plane.getBoundingBox();

然后在
var target = this._targets*;
后面写
// 获得敌机的碰撞矩形
var targetRect = target.getBoundingBox();
if(cc.rectIntersectsRect(myPlane, targetRect)){
console.log(“GameOver”);
var gameOverScene = GameOverScene.create();// 创建结束场景
cc.Director.getInstance().replaceScene(cc.TransitionProgressRadialCCW.create(1.2,gameOverScene)); // 场景转换代码
}*

不错的教程,学习了

怎么在webform里面把游戏提取出来 发布 打包啊?

不错,谢谢

教程阅读完毕,特来致谢:14:

getBoundingBox()为什么没有执行呢,还请楼主帮忙解释

参考子弹和敌机的就碰撞。:13:

非常 不错,跟着练习就行,感觉非常适合入门,谢谢啦!

V3.6.1需要改的:


cc.Director.getInstance().replaceScene(cc.TransitionProgressRadialCCW.create(1.2,gameOverScene)); // 场景转换代码
改成
cc.director.runScene(cc.TransitionProgressRadialCCW.create(1.2,gameOverScene)); // 场景转换代码