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版的玩了好多。。。