2017年7月17日
Create.js开发剪刀石头布游戏（一）
很长时间没有写博客了，不知道大家有没有想我，哈哈哈，今天分享一款游戏 叫做剪刀石头布，想必大家小时候都玩过，传送门入口:https://github.com/894658027/HTML5-Games/tree/master/CreateJs/finger-guessing%20game，如果你想直接玩请直接点击链接，话不多说直接上代码，
首先html代码：
<canvasid=”gameView”width=”1280″height=”720″></canvas>
js核心代码：
文件入口与配置：(这里直接用es6来编写的)
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/6.png”},
{ id: “5”, src: “image/assest/5.png”},
{ id: “6”, src: “image/assest/4.png”},
{ id: “panel”, src: “image/assest/panel.png”},
{ id: “xiong”, src: “image/assest/xiong.png”},
{ id: “guang”, src: “image/assest/guang.png”},
{ id: “scBtn”, src: “image/direPic/scBtn.png”},
{ id: “sgBtn”, src: “image/direPic/sgBtn.png”},
{ id: “pjBtn”, src: “image/direPic/middle.png”},
{ id: “score”, src: “image/direPic/score.png”},
]);
}
与加载内容与配置入口文件搭配完成，
classGame {
constructor(){
this.stage=newc.Stage(“gameView”);
c.Touch.enable(this.stage);
this.stage.enableMouseOver();
this.width=this.stage.canvas.width;
this.height=this.stage.canvas.height;
this.gameDataSheet();
this.render();
createjs.Sound.play(“s2”, createjs.Sound.INTERRUPT_NONE,0,0,-1,1,0);
}
获取舞台，触屏事件，坚挺鼠标事件，等宽，等高，localstory存储，requireAnimationFrame计时器，bgm播放无限循环，
ok ，接下来是心跳计时代码，
render(){
this.stage.update();
window.requestAnimationFrame(()=>{
this.render();
})
}
这里就不多说了 ，接下来是 localstory接受键值设置与游戏场景添加
gameDataSheet(){
window.ceil=window.localStorage.vision;
window.score=0;
console.log(ceil);
this.firstScreen();
}
其余的请看下一篇：其中包含，布局与游戏玩法主逻辑，得分功能计算累加，计时器等，