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

上一篇中介绍了这个小游戏的主要部分和用到的两个类，这篇介绍app.js这个类，这里面主要的就是游戏的入口和各个场景之间的切换。
源码：

window.onload=function() {
    //获取canvas元素
    var canvas=document.getElementById("myCanvas");
    //根据canvas元素来创建出来舞台
    var stage=new createjs.Stage("myCanvas");
    //检测是否支持触摸，然后把stage设置为可以接受触摸事件，如果不设置的话，在移动设备上不能点击
    if(createjs.Touch.isSupported())
    {
        createjs.Touch.enable(stage);
    }
    //设置游戏的帧数为30
    createjs.Ticker.framerate=30;
    //侦听tick事件来更新舞台，这一点和flash不一样，必须要调用update，舞台才能更新
    createjs.Ticker.addEventListener("tick",function(e) {
        stage.update();
    });

    //这个是前面说过的单例类，获得stage的引用，以方便使用
    var gd=new GlobalData();
    gd.stage=stage;
    gd.canvas=canvas;

    //创建一个背景，由于我也不会画图，就这样随机画了40圆，然后随机位置放在bg这个容器里面，把bg添加到stage上，这样就有了一个五彩缤纷的背景
    var bg=new createjs.Container();
    stage.addChild(bg);
    var i;
    for(i=0;i<40;i++)
    {
        var rx=canvas.width*Math.random();
        var ry=canvas.height*Math.random();
        var rd=30+30*Math.random();
        var circle=new createjs.Shape();
           circle.graphics.beginFill("rgba("+Math.round(255*Math.random())+","+Math.round(255*Math.random())+","+Math.round(255*Math.random())+","+0.5*Math.random()+")");
        circle.graphics.drawCircle(rx,ry,rd);
        circle.graphics.endFill();
        circle.cache(-rd+rx,-rd+ry,2*rd,2*rd);
        bg.addChild(circle);
    }

    //预加载，这个之前有篇介绍过，先加载了一个manifest文件（在下面给出了manifest的内容），里面是一个json，这个json包含了要用到的资源，然后再根据这个json加载资源
    var resource=new createjs.LoadQueue();
    //加入Sound插件，这样后面就可以直接使用加载好的音频资源
    resource.installPlugin(createjs.Sound);
    var manifestLoader=new createjs.LoadQueue();
    manifestLoader.on("fileload",function(e){
        //在加载好manifest文件后，根据文件里的内容加载资源
        resource.on("complete",onResourceComplete);
        //这里第二个参数是baseurl，baseurl加上manifest里面的src就是资源的路径了
        resource.loadManifest(e.result,true,"assets/")
    },this,true);
    manifestLoader.loadManifest("assets/manifest.json");

    function onResourceComplete(e) {
        //加载完以后用单例类获取到resource的引用，方便后面用，然后初始化菜单界面
        console.log("resource load complete");
        gd.resource=resource;
        initMenu();
    }


    //初始化菜单，添加菜单场景会发出的事件
    var menuScene;
    function initMenu() {
        if(menuScene==null)
        {
            menuScene=new MenuScene();
            menuScene.on("restart",onRestart);
            menuScene.on("setting",onSetting);
            menuScene.on("introduction",onIntroduction);
        }
        stage.addChild(menuScene);
    }

    //开始游戏和重新开始游戏都调用同一个函数
    function onRestart(e) {
        console.log("restart");
        if(menuScene.parent!=null)
        {
            menuScene.parent.removeChild(menuScene);
        }
        if(resultScene!=null&&resultScene.parent!=null)
        {
            resultScene.parent.removeChild(resultScene);
        }
        initGame();
    }

    function onSetting(e) {
        console.log("setting");
        if(menuScene.parent!=null)
        {
            menuScene.parent.removeChild(menuScene);
        }
        initSetting();
    }

    function onIntroduction(e) {
        console.log("introduction");
        if(menuScene.parent!=null)
        {
            menuScene.parent.removeChild(menuScene);
        }
        initInroduction();
    }

    //显示游戏界面，并侦听游戏界面的事件，这里把上一次游戏场景设置为null，然后重新new出来新的游戏场景
    var gameScene;
    function initGame() {
        if(gameScene!=null)
        {
            gameScene=null;
        }
        gameScene=new GameScene();
        gameScene.on("gameover",onGameOver);
        gameScene.on("backbutton",onBack);
        gd.scroe=0;
        stage.addChild(gameScene);
    }

    function onGameOver(e) {
        console.log("gameOver");
        if(gameScene!=null&&gameScene.parent!=null)
        {
            gameScene.parent.removeChild(gameScene);
            gameScene=null;
        }
        initResult();
    }

    function onBack(e) {
        console.log("gameBack");
        if(gameScene!=null&&gameScene.parent!=null)
        {
            gameScene.parent.removeChild(gameScene);
            gameScene=null;
        }
        if(resultScene!=null&&resultScene.parent!=null)
        {
            resultScene.parent.removeChild(resultScene);
        }

        if(introductionScene!=null&&introductionScene.parent!=null)
        {
            introductionScene.parent.removeChild(introductionScene);
        }
        if(settingScene!=null&&settingScene.parent!=null)
        {
            settingScene.parent.removeChild(settingScene);
        }
        initMenu();
    }

    //显示得分结果的场景，如果还没有显示过结果，resultScene是null，这时new出来一个新的resultScene，如果不是null，那么更新resultScene的显示内容，然后显示出来就好了
    var resultScene;
    function initResult() {
        if(resultScene!=null)
        {
            resultScene.setScroe(gd.scroe);
        }
        else
        {
            resultScene=new ResultScene(gd.scroe);
            resultScene.on("backbutton",onBack);
            resultScene.on("restart",onRestart);
        }
        stage.addChild(resultScene);
    }

    //说明场景，如果是null的话就是就new一个新的出来，如果不是就直接显示了，反正没什么变化的内容。。。。
    var introductionScene;
    function initInroduction() {
        if(introductionScene!=null)
        {

        }
        else
        {
            introductionScene=new IntroductionScene();
            introductionScene.on("backbutton",onBack);
        }
        stage.addChild(introductionScene);
    }

    //设置界面也是跟上面一样
    var settingScene;
    function initSetting() {
        if(settingScene!=null)
        {

        }
        else
        {
            settingScene=new SettingScene();
            settingScene.on("backbutton",onBack);
        }
        stage.addChild(settingScene);
    }
};

manifest的内容

[
  {"src":"1.png","id":"image1"},
  {"src":"2.png","id":"image2"},
  {"src":"3.png","id":"image3"},
  {"src":"4.png","id":"image4"},
  {"src":"5.png","id":"image5"},
  {"src":"6.png","id":"image6"},
  {"src":"7.png","id":"image7"},
  {"src":"8.png","id":"image8"},
  {"src":"9.png","id":"image9"},
  {"src":"10.png","id":"image10"},
  {"src":"wrong.mp3","id":"wrongSound"},
  {"src":"right.mp3","id":"rightSound"}
]