createjs-打豆豆小游戏制作（4）

在前面游戏的主要部分已经完成了，然后就是一些次要的场景了，包括菜单、游戏得分结果、游戏设置界面（其实只有一个设置音效是否打开）和游戏的说明界面。

1.菜单
菜单这个场景只包含三个按钮，开始游戏、设置和说明。MenuScene这个类继承自Container，里面放置了这三个按钮，设定好按钮的位置，绑上相应的事件就可以了。

(function(window){
    function MenuScene()
    {
        this.Container_constructor();

        this.gd=new GlobalData();
        this.startButton=new SHLTextButton("开始游戏",200,60,"#ffffff",38,"#00cfef","#0093d9");
        this.startButton.x=(this.gd.canvas.width-200)/2;
        this.startButton.y=this.gd.canvas.height/2-120;
        this.startButton.on("click",this.onStartButton,this);
        this.addChild(this.startButton);

        this.settingButton=new SHLTextButton("设置",160,50,"#ffffff",34,"#00cfef","#0093d9");
        this.settingButton.x=(this.gd.canvas.width-160)/2;
        this.settingButton.y=this.gd.canvas.height/2-40;
        this.settingButton.on("click",this.onSetting,this);
        this.addChild(this.settingButton);

        this.introductionButton=new SHLTextButton("说明",160,50,"#ffffff",34,"#00cfef","#0093d9");
        this.introductionButton.x=(this.gd.canvas.width-160)/2;
        this.introductionButton.y=this.gd.canvas.height/2+30;
        this.introductionButton.on("click",this.onIntroduction,this);
        this.addChild(this.introductionButton);
    }

    var p=createjs.extend(MenuScene,createjs.Container);

    p.onStartButton=function(e)
    {
        this.dispatchEvent(new createjs.Event("restart"));
    };

    p.onSetting=function(e)
    {
        this.dispatchEvent(new createjs.Event("setting"));
    };

    p.onIntroduction=function(e)
    {
        this.dispatchEvent(new createjs.Event("introduction"));
    }

    window.MenuScene=createjs.promote(MenuScene,"Container");
}(window));

2.结果界面
这个与菜单界面大同小异，有一点不同就是有一个显示分数的Text

(function(window){
    function ResultScene(scroe)
    {
        this.Container_constructor();
        this.scroe=scroe;
        this.gd=new GlobalData();

        this.resultText=new createjs.Text("最终得分： "+scroe, "30px Microsoft Yahei", "#000000");
        this.resultText.textAlign="center";
        this.resultText.x=this.gd.canvas.width/2;
        this.resultText.y=this.gd.canvas.height/2-100;
        this.addChild(this.resultText);

        this.restartButton=new SHLTextButton("重新开始",180,50,"#ffffff",30,"#00cfef","#0093d9");
        this.restartButton.x=(this.gd.canvas.width-180)/2;
        this.restartButton.y=(this.gd.canvas.height-60)/2+10;
        this.restartButton.on("click",this.onRestart,this);
        this.addChild(this.restartButton);


        this.backButton=new SHLTextButton("返回",60,30,"#ffffff",14,"#00cfef","#0093d9");
        this.backButton.x=(this.gd.canvas.width-60)/2;
        this.backButton.y=(this.gd.canvas.height-30)/2+80;
        this.backButton.on("click",this.onBack,this);
        this.addChild(this.backButton);
    }
    var p=createjs.extend(ResultScene,createjs.Container);

    p.onBack=function(e)
    {
        this.dispatchEvent(new createjs.Event("backbutton"));
    };

    p.onRestart=function(e)
    {
        this.dispatchEvent(new createjs.Event("restart"));
    };

    p.setScroe=function(s)
    {
        this.resultText.text="最终得分： "+s;
    };

    window.ResultScene=createjs.promote(ResultScene,"Container");
}(window));

3.设置界面
只有一个设置音效的开关，点击音效按钮切换音效的开关

(function(window)
{
    function SettingScene()
    {
        this.Container_constructor();

        this.gd=new GlobalData();
        this.button=new SHLTextButton("音效",160,50,"#ffffff",34,"#00cfef","#0093d9");
        this.button.x=(this.gd.canvas.width-160)/2-100;
        this.button.y=this.gd.canvas.height/2-100;
        this.button.on("click",this.onClick,this);
        this.addChild(this.button);

        this.switchLabel=new createjs.Text("开", "34px Microsoft Yahei", "#000000");
        this.switchLabel.x=(this.gd.canvas.width)/2+50;
        this.switchLabel.y=(this.gd.canvas.height)/2-100;
        this.addChild(this.switchLabel);

        this.backButton=new SHLTextButton("返回",60,30,"#ffffff",14,"#00cfef","#0093d9");
        this.backButton.x=(this.gd.canvas.width-60)/2;
        this.backButton.y=(this.gd.canvas.height-30)/2+40;
        this.backButton.on("click",this.onBack,this);
        this.addChild(this.backButton);
    }

    var p=createjs.extend(SettingScene,createjs.Container);

    p.onClick=function(e)
    {
        if(this.gd.isSoundOn)
        {
            this.gd.isSoundOn=false;
            this.switchLabel.text="关";
        }
        else
        {
            this.gd.isSoundOn=true;
            this.switchLabel.text="开";
        }
    };

    p.onBack=function(e)
    {
        this.dispatchEvent(new createjs.Event("backbutton"));
    };

    window.SettingScene=createjs.promote(SettingScene,"Container");
}(window));

4.说明界面
最简单的一个场景，只有一段说明文字和返回按钮

(function(window)
{
    function IntroductionScene()
    {
        this.Container_constructor();

        this.gd=new GlobalData();

        this.introductionText=new createjs.Text("", "30px Microsoft Yahei", "#000000");
        this.introductionText.text="点击空白方格\n在方格所在的十字上\n相同颜色的豆豆即可消除\n并得到分数";
        this.introductionText.x=260;
        this.introductionText.y=130;
        this.addChild(this.introductionText);

        this.backButton=new SHLTextButton("返回",60,30,"#ffffff",14,"#00cfef","#0093d9");
        this.backButton.x=(this.gd.canvas.width-60)/2;
        this.backButton.y=(this.gd.canvas.height-30)/2+80;
        this.backButton.on("click",this.onBack,this);
        this.addChild(this.backButton);
    }

    var p=createjs.extend(IntroductionScene,createjs.Container);

    p.onBack=function(e)
    {
        this.dispatchEvent(new createjs.Event("backbutton"));
    };

    window.IntroductionScene=createjs.promote(IntroductionScene,"Container");
}(window));

以上是打豆豆小游戏的所有源码，使用了easeljs、perloadjs和soundjs三个库，createjs里面的tweenjs没有用到。
总之我是很喜欢打豆豆这个小游戏，玩这个游戏加起来的时间比开发的时间长多了，主要是以前玩flash版的玩了好多。。。