之前对createJs体验了一下,正好看到网上有一篇教程,试着也写了一个打飞机的小游戏,UI相对比较简单,主要记录下实现游戏逻辑的思路。
window.onload = function() {
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
preload = new createjs.LoadQueue(false);
//如果载入声音,必须先注册createjs.Sound
preload.installPlugin(createjs.Sound);
// 导入资源创建舞台
game.init();
};
init: function() {
var progressText = new createjs.Text("", "20px Arial", "#dd4814");
progressText.x = stage.canvas.width / 2;
progressText.y = stage.canvas.height / 2;
progressText.textAlign = 'center';
stage.addChild(progressText);
function startPreload() {
var manifest = [{
id: 'sprite',
src: 'plane.png'
}, {
id: 'shot',
src: 'shot.mp3'
}, {
id: "explosion",
src: 'explosion.mp3'
}];
preload.setMaxConnections(3);
preload.maintainScriptOrder = true;
preload.on("progress", loadProgress);
preload.on("error", loadError);
preload.on("complete", loadComplete);
preload.loadManifest(manifest);
}
startPreload();
function loadProgress(e) {
progressText.text = "已加载 " + (preload.progress * 100 | 0) + " %";
console.log(progressText.text);
}
function loadError(e) {
console.log(e);
}
function loadComplete(e) {
stage.removeChild(progressText);
game.handleComplete();
}
},
加载好需要用到的库以后,先运行init方法载入游戏资源;如果要播放声音,需先preload.installPlugin(createjs.Sound)注册createjs.Sound,不然后面直接调用方法播放音频文件会出错。
// 创建游戏界面,设置按键
handleComplete: function() {
buildGame.init();
buildGame.setContorl();
game.startGame();
},
//开始游戏
startGame: function() {
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', function() {
updateGame.init();
stage.update();
});
}
在startGame方法里,设置帧频,stage.update(