2017年8月21日

Create.js开发算术大师游戏(终结篇)

作者 admin

近期比较忙，博客也很久没更新了，讲真其实我的博客水平没那么高，自己写的小东西也是本着怕自己忘记，也算是给自己提醒，诶最近记忆里不是很好，

先看html：

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

}

Create.js开发算术大师游戏(终结篇)

44 条评论在 “Create.js开发算术大师游戏(终结篇)”

发表评论取消回复

Create.js开发算术大师游戏(终结篇)

44 条评论在 “Create.js开发算术大师游戏(终结篇)”

发表评论 取消回复

发表评论取消回复