2017年7月19日
Create.js开发剪刀石头布游戏（终结篇）
上篇文章写到了游戏与加载与文件配置入口，接下来会给大家介绍游戏布局，以及核心玩法的逻辑：
firstScreen() {
vargameView;
this.gameView=newcreatejs.Container();
this.stage.addChild(this.gameView);
this.bgMain();
varlogScore=1,logSum=2, logSom=1, logRow=1, logClos=3, logZi=3,getHero,insect,getHeros,redImgHero,
sgBtn_1,sgBtns,scBtn_1,scBtns,pjBtn_1,pjBtns,left_press,left_pres;
letbitmaps= [];
//得分面板
letPanel=newcreatejs.Bitmap(window.queue.getResult(“panel”));
Panel.x=420;
Panel.y=-10;
this.gameView.addChild(Panel);
//得分面板
letscorePanel=newcreatejs.Bitmap(window.queue.getResult(“score”));
scorePanel.x=1150;
scorePanel.y=6;
this.gameView.addChild(scorePanel);
// 熊组图片
letxiongGroup=newcreatejs.Bitmap(window.queue.getResult(“xiong”));
xiongGroup.x=1;
xiongGroup.y=500;
xiongGroup.scaleX=xiongGroup.scaleY=0.6;
this.gameView.addChild(xiongGroup);
// 光头强图片
letguangGroup=newcreatejs.Bitmap(window.queue.getResult(“guang”));
guangGroup.x=930;
guangGroup.y=500;
guangGroup.scaleX=guangGroup.scaleY=0.7;
this.gameView.addChild(guangGroup);
// 熊抓
varheroContainer=newcreatejs.Container();
window.currentIndex=babyEye.randomRange(1, 4);
getHero=window.queue.getResult(currentIndex);
insect=newcreatejs.Bitmap(getHero);
insect.scaleX=insect.scaleY=ceil;
insect.regX=39;
insect.regY=29;
heroContainer.addChild(insect);
heroContainer.x=490;
heroContainer.y=300;
this.gameView.addChild(heroContainer);
// 光头强手
varheroContainers=newcreatejs.Container();
window.current=babyEye.randomRange(5, 7);
getHeros=window.queue.getResult(current);
redImgHero=newcreatejs.Bitmap(getHeros);
redImgHero.scaleX=redImgHero.scaleY=ceil;
redImgHero.regX=39;
redImgHero.regY=29;
heroContainers.addChild(redImgHero);
heroContainers.x=800;
heroContainers.y=300;
this.gameView.addChild(heroContainers);
//右边赢按钮
sgBtn_1=window.queue.getResult(“sgBtn”);
sgBtns=newcreatejs.Bitmap(sgBtn_1);
sgBtns.scaleX=sgBtns.scaleY=0.7;
sgBtns.x=780;
sgBtns.y=520;
this.gameView.addChild(sgBtns);
//左边赢按钮
scBtn_1=window.queue.getResult(“scBtn”);
scBtns=newcreatejs.Bitmap(scBtn_1);
scBtns.scaleX=scBtns.scaleY=0.7;
scBtns.x=390;
scBtns.y=520;
this.gameView.addChild(scBtns);
//平局按钮
pjBtn_1=window.queue.getResult(“pjBtn”);
pjBtns=newcreatejs.Bitmap(pjBtn_1);
pjBtns.scaleX=pjBtns.scaleY=0.7;
pjBtns.x=580;
pjBtns.y=520;
this.gameView.addChild(pjBtns);
// 计算得分
window.text_sum=newcreatejs.Text(window.score, “26px Arial”, “#ffffff”);
window.text_sum.x=1229;
window.text_sum.y=7;
window.text_sum.textAlign=”center” ;
this.gameView.addChild(window.text_sum);
//左边赢判断
if(window.currentIndex==1&&window.current==6||window.currentIndex==2&&window.current==4||window.currentIndex==3&&window.current==5){
scBtns.addEventListener(“click”,(ev)=>{
this.gameView.removeChild(heroContainer);
this.gameOpinion();
})
}else{
scBtns.addEventListener(“click”,(ev)=>{
this.gameOpinFail();
})
}
//右边赢判断
if(window.currentIndex==3&&window.current==4||window.currentIndex==1&&window.current==5||window.currentIndex==2&&window.current==6){
sgBtns.addEventListener(“click”,(ev)=>{
this.gameOpinion();
})
}
else{
sgBtns.addEventListener(“click”,(ev)=>{
this.gameOpinFail();
})
}
//平局判断
if(window.currentIndex==1&&window.current==4||window.currentIndex==2&&window.current==5||window.currentIndex==3&&window.current==6){
pjBtns.addEventListener(“click”,(ev)=>{
this.gameView.removeChild(heroContainer);
this.gameOpinion();
})
}
else{
pjBtns.addEventListener(“click”,(ev)=>{
this.gameOpinFail();
})
}
}
可见场景图片的添加与游戏算法逻辑代码，
gameOpinion(){
if(ceil==0.10000000000000014){
ceil=ceil-0.3;
ceil+=0.3;
}else{
ceil=ceil-0.1;
}
this.success();
window.score+=1;
this.reset();
this.firstScreen();
}
得分统计代码，
gameOpinFail(){
this.fail();
if(window.score==0){
window.score=0;
}else{
window.score=window.score-1;
window.text_sum.text=window.score;
}
this.reset();
this.firstScreen();
}
得分小于等于0逻辑处理
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();
}
清除画布所有的监听事件于与所有对象
bgMain(){
if(ceil==1){
this.canvasBgeight();
}else if(ceil == 0.9&&ceil == 0.8){
this.canvasBgseven();
}
elseif(ceil==0.7000000000000001){
this.canvasBgsix();
}
elseif(ceil==0.6000000000000001){
this.canvasBgfive();
}else if(ceil == 0.5000000000000001){
this.canvasBgfour();
}else if(ceil == 0.40000000000000013){
this.canvasBgthree();
}else if(ceil == 0.30000000000000016&&ceil == 0.20000000000000015){
this.canvasBgtwo();
}else if(ceil == 0.10000000000000014){
this.canvasBgone();
}
背景切换逻辑处理机制
}
github游戏地址：https://github.com/894658027/HTML5-Games/tree/master/CreateJs/fingerGuessing