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

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);
}
};

[
{"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"}
]