2017年8月21日
Create.js开发算术大师游戏(终结篇)
近期比较忙，博客也很久没更新了，讲真其实我的博客水平没那么高，自己写的小东西也是本着怕自己忘记，也算是给自己提醒，诶 最近记忆里不是很好，
先看html：
<canvas id=”game-canvas” width=”1280″ height=”720″></canvas>
上js代码 依旧是入口文件，配置文件，预加载文件
window.init = () => {
letloadingValue=$(“#loading span”);
window.queue=newc.LoadQueue();
window.queue.installPlugin(createjs.Sound);
window.queue.addEventListener(“complete”, (ev)=>{
window.game=newGame();
$(“#loading”).hide();
});
window.queue.addEventListener(“progress”, (ev)=>{
loadingValue.text((ev.progress*100).toFixed() +”%”);
})
window.queue.loadManifest([
{ id: “pointsound”, src: “music/pointsound.mp3” },
{ id: “noMuc”, src: “music/noMuc.mp3” },
{ id: “s2”, src: “music/s2.mp3” },
{ id: “nzb”, src: “music/nzb.mp3” },
])
window.queue.loadManifest([
{ id: “1”, src: “image/assest/1.png”},
{ id: “2”, src: “image/assest/2.png”},
{ id: “3”, src: “image/assest/3.png”},
{ id: “4”, src: “image/assest/4.png”},
{ id: “5”, src: “image/assest/5.png”},
{ id: “6”, src: “image/assest/6.png”},
{ id: “restart”, src: “image/assest/restart.png”},
{ id: “scBtn”, src: “image/direPic/scBtn.png”},
{ id: “sgBtn”, src: “image/direPic/sgBtn.png”},
{ id: “pjBtn”, src: “image/direPic/middle.png”},
{ id: “getScore”, src: “image/assest/getScore.png”},
{ id: “gamebg”, src: “image/assest/gamebg.png”},
{ id: “timer”, src: “image/assest/timer.png”}
]);
}
貌似没啥变化，还是老一套，
ok看游戏逻辑代码处理，
class Game {
constructor(){
this.stage=newc.Stage(“game-canvas”);
c.Touch.enable(this.stage);
this.stage.enableMouseOver();
this.width=this.stage.canvas.width;
this.height=this.stage.canvas.height;
this.nTimeCount=300;
this.gameDataSheet();
this.render();
createjs.Sound.play(“s2”, createjs.Sound.INTERRUPT_NONE,0,0,-1,1,0);
}
获取canvas，触屏事件，鼠标监听事件,舞台宽，舞台高，倒计时，心跳计时，bgm，
render(){
this.stage.update();
window.requestAnimationFrame(()=>{
this.render();
})
}
gameDataSheet(){
window.ceil=window.localStorage.vision;
window.score=0;
this.firstScreen();
}
firstScreen() {
vargameView;
this.gameView=newcreatejs.Container();
this.stage.addChild(this.gameView);
this.gamebg();
this.bgMain(); //游戏背景
this.Layout(); //游戏布局按钮，游戏逻辑
this.fCountTime(); //倒计时模块
}
killScore(){
letgameView;
this.gameView=newcreatejs.Container();
this.stage.addChild(this.gameView);
this.bgMain(); //游戏背景
//得分面板
varscorePanel=newcreatejs.Bitmap(window.queue.getResult(“getScore”));
scorePanel.x=390;
scorePanel.y=50;
this.gameView.addChild(scorePanel);
// 得分
lettext_score=newcreatejs.Text(window.score,”38px Arial”, “#ffffff”);
text_score.x=710;
text_score.y=190;
text_score.textAlign=”center”;
this.gameView.addChild(text_score);
// 重新开始
varrestart=newcreatejs.Bitmap(window.queue.getResult(“restart”));
restart.x=560;
restart.y=0;
createjs.Tween.get(restart).to({ x:restart.x, y:restart.y+400 }, 700,createjs.Ease.backOut);
this.gameView.addChild(restart);
restart.addEventListener(“mousedown”,(ev)=>{
window.location.href=”index.html”;
})
}
// 倒计时
fCountTime() {
lettext_sum=newcreatejs.Text(this.nTimeCount, “20px Arial”, “#ffffff”);
text_sum.x=1227;
text_sum.y=9;
text_sum.textAlign=”center” ;
this.gameView.addChild(text_sum);
window.upSteTimeOut=setTimeout(()=>{
if(this.nTimeCount>0){
this.nTimeCount–;
text_sum.text=this.nTimeCount;
this.gameView.removeChild(text_sum);
this.fCountTime();
}else{
window.clearInterval(window.upSteTimeOut);
this.reset();
this.killScore();
}
},1000)
}
//游戏布局处理
Layout(){
vartimer,getHero,insect,redImgHero,sgBtns,scBtns,pjBtns;
varheroContainer=newcreatejs.Container();
window.currentIndex=babyEye.randomRange(1, 7);
getHero=window.queue.getResult(currentIndex);
insect=newcreatejs.Bitmap(getHero);
insect.scaleX=insect.scaleY=ceil;
insect.regX=148;
insect.regY=28;
heroContainer.addChild(insect);
heroContainer.x=this.width/2;
heroContainer.y=this.height/6;
this.gameView.addChild(heroContainer);
//3按钮
sgBtns=newcreatejs.Bitmap(window.queue.getResult(“sgBtn”));
sgBtns.x=850;
sgBtns.y=300;
this.gameView.addChild(sgBtns);
//1按钮
scBtns=newcreatejs.Bitmap(window.queue.getResult(“scBtn”));
scBtns.x=320;
scBtns.y=320;
this.gameView.addChild(scBtns);
//2按钮
pjBtns=newcreatejs.Bitmap(window.queue.getResult(“pjBtn”));
pjBtns.x=580;
pjBtns.y=260;
this.gameView.addChild(pjBtns);
//倒计时图
this.timer=newcreatejs.Bitmap(window.queue.getResult(“timer”));
this.timer.x=1139;
this.timer.y=4;
this.gameView.addChild(this.timer);
游戏核心主逻辑
if(window.currentIndex==5||window.currentIndex==6){
scBtns.addEventListener(“mousedown”,(ev)=>{
this.gameView.removeChild(heroContainer);
console.log(window.score);
this.builderSuccess();
})
}else{
scBtns.addEventListener(“mousedown”,(ev)=>{
heroContainer.scaleX=heroContainer.scaleY+0.1;
this.buildrFail();
})
}
//3判断
if(window.currentIndex==3||window.currentIndex==2){
sgBtns.addEventListener(“mousedown”,(ev)=>{
this.gameView.removeChild(heroContainer);
this.builderSuccess();
})
}else{
sgBtns.addEventListener(“mousedown”,(ev)=>{
heroContainer.scaleX=heroContainer.scaleY+0.1;
this.buildrFail();
})
}
//2判断
if(window.currentIndex==1||window.currentIndex==4){
pjBtns.addEventListener(“mousedown”,(ev)=>{
this.gameView.removeChild(heroContainer);
this.builderSuccess();
})
}else{
pjBtns.addEventListener(“mousedown”,(ev)=>{
heroContainer.scaleX=heroContainer.scaleY+0.1;
this.buildrFail();
})
}
}
builderSuccess(){
//视标缩放代码算法
if(ceil==0.10000000000000014){ // 0.20000000000000015
ceil=ceil-0.3;
ceil+=0.3;
}else{
ceil=ceil-0.1;
}
//分数成绩代码算法
if(window.score<100){
window.score=window.score+10;
window.speed=window.speed+0.02;
}else if(window.score == 100){
window.score=100;
}
this.success(); //你真棒
window.clearInterval(window.upSteTimeOut); //清除倒计时
this.reset(); //清除画布所有内容
this.firstScreen(); //画布刷新
}
得分逻辑
buildrFail(){
window.speed=window.speed-0.1;
this.fail();
if(window.score<=0){
window.score=0;
}else{
window.score=window.score-10;}
window.clearInterval(window.upSteTimeOut);
this.reset();
this.firstScreen();
}
//成功处理
success(){
createjs.Sound.play(“nzb”, createjs.Sound.INTERRUPT_NONE, 0, 0, 0, 1, 0);
$(“#sucImg”).show(500);
$(“#sucImg”).hide(500);
}
//失败处理
fail(){
createjs.Sound.play(“noMuc”, createjs.Sound.INTERRUPT_NONE, 0, 0, 0, 1, 0);
$(“#failImg”).show(500);
$(“#failImg”).hide(500);
}
//移除画布所有
reset(){
this.stage.removeAllChildren();
this.stage.removeAllEventListeners();
}
//播放背景
gamebg(){
letgamebg=window.queue.getResult(“gamebg”);
letgamebgs=newcreatejs.Bitmap(gamebg);
gamebgs.x=0;
gamebgs.y=20;
this.gameView.addChild(gamebgs);
}