CreateJS實現打飛機小遊戲
阿新 • • 發佈：2019-01-06
之前對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()遊戲更新場景。
buildGame.init();建立遊戲場景，飛機的精靈動畫物件。
init: function() {
buildGame.buildMsg();
buildGame.buildSpriteSheet();
buildGame.buildPlayer();
buildGame.buildEnemy();
buildGame.buildSpace();
},用到的圖片素材以及相應的幀資料：
//建立精靈動畫表
buildSpriteSheet: function() {
var data = {
images: [preload.getResult('sprite')],
frames: [
[0, 0, 38, 42],
[37, 0, 42, 42],
[79, 0, 37, 42],
[116, 0, 42, 42],
[158, 0, 37, 42],
[0, 70, 64, 64],
[64, 70, 64, 64],
[128, 70, 64, 64],
[192, 70, 64, 64],
[256, 70, 64, 64],
[320, 70, 64, 64],
[384, 70, 64, 64],
[448, 70, 64, 64],
[512, 70, 64, 64],
[576, 70, 64, 64],
[640, 70, 64, 64],
[704, 70, 64, 64],
[768, 70, 64, 64]
],
animations: {
ship: 0,
enemy1: 1,
enemy2: 2,
enemy3: 3,
enemy4: 4,
exp: {
frames: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
speed: .5
}
}
};
buildGame.spriteSheet = new createjs.SpriteSheet(data);
},這裡要吐槽一下，createjs沒有合適的動畫轉換工具可以直接生成圖片素材與幀資料，美中不足啊。
素材中有5種飛機，選1個為我們可操作的主角後，剩下4個插入敵機種類的陣列中。
//建立玩家的飛機
buildPlayer: function() {
Plane.player = new createjs.Sprite(buildGame.spriteSheet, 'ship');
//getBounds方法返回當前物件寬高
console.log(Plane.player.getBounds());
Plane.width = Plane.player.getBounds().width;
Plane.height = Plane.player.getBounds().height;
Plane.player.x = (stage.canvas.width - Plane.width) / 2;
Plane.player.y = stage.canvas.height - Plane.height;
stage.addChildAt(Plane.player, 0);
},
//建立敵機
buildEnemy: function() {
var e1, e2, e3, e4;
e1 = new createjs.Sprite(buildGame.spriteSheet, "enemy1");
e2 = new createjs.Sprite(buildGame.spriteSheet, "enemy2");
e3 = new createjs.Sprite(buildGame.spriteSheet, "enemy3");
e4 = new createjs.Sprite(buildGame.spriteSheet, "enemy4");
enemyPlane.enemyClip.push(e1, e2, e3, e4);
},//星空背景
buildSpace: function() {
var i, star, starSky, w, h, alpha;
for (i = 0; i < 200; i++) {
starSky = new createjs.Container();
star = new createjs.Shape();
w = Math.floor(Math.random() * stage.canvas.width);
h = Math.floor(Math.random() * stage.canvas.height);
alpha = Math.random();
star.graphics.beginFill("#45D0DE").drawCircle(0, 0, 2);
star.x = w;
star.y = h;
star.alpha = alpha;
starSky.addChild(star);
updateGame.starSpace.push(star);
stage.addChild(starSky);
}
},敵機從種類陣列中隨機克隆種類放入編隊陣列，以編隊的形式進入場景。
//敵機物件
var enemyPlane = {
//敵機種類陣列
enemyClip: [],
//敵機佇列陣列
enemysQueue: [],
//敵機增加時間（速度）
addSpeed: 1000,
//敵機移動時間（速度）
moveSpeed: 5000,
//敵機佇列數量
enemynNum: 15,
//隨機新增一類敵機進入戰場
addEnemy: function() {
var random = Math.floor((Math.random() * enemyPlane.enemyClip.length));
//克隆隨機種類敵機放入佇列陣列
var randomPlane = enemyPlane.enemyClip[random].clone();
var randomPlaneWidth = randomPlane.getBounds().width;
randomPlane.x = Math.floor((Math.random() * (stage.canvas.width - randomPlaneWidth * 2)));
randomPlane.y = -100;
enemyPlane.enemysQueue.push(randomPlane);
stage.addChild(randomPlane);
}
};玩家飛機通過按鍵發射子彈，同時將發射的子彈插入一個數組。
//飛機物件
var Plane = {
lives: 3,
score: 0,
speed: 9,
player: {},
width: 0,
height: 0,
fires: [],
//發射子彈
playFire: function() {
if (updateGame.run) {
var fire = new createjs.Shape();
fire.graphics.beginFill('#FF0').drawRect(0, 0, 6, 6).endFill();
fire.x = Plane.player.x - 3 + Plane.width / 2;
fire.y = Plane.player.y;
createjs.Sound.play('shot');
Plane.fires.push(fire);
stage.addChild(fire);
}
}
}; //子彈與敵機的碰撞檢測
checkCollision: function() {
for (var i = 0; i < Plane.fires.length; i++) {
var fire = Plane.fires[i];
for (var j = 0; j < enemyPlane.enemysQueue.length; j++) {
var enemy = enemyPlane.enemysQueue[j];
var fx = fire.x;
var fy = fire.y;
var ex = enemy.x;
var ey = enemy.y;
var ew = enemy.getBounds().width;
var eh = enemy.getBounds().height;
//判斷子彈有沒有進入敵機矩形區域內
var pt = fy < ey + eh && fy > ey && fx > ex && fx < ex + ew && ey > 0;
if (pt) {
Plane.score += 10;
Plane.fires.splice(i, 1);
enemyPlane.enemysQueue.splice(j, 1);
stage.removeChild(fire);
stage.removeChild(enemy);
createjs.Sound.play('explosion');
var exp1 = new createjs.Sprite(buildGame.spriteSheet, 'exp');
exp1.x = enemy.x;
exp1.y = enemy.y;
stage.addChild(exp1);
//爆炸動畫結束時從舞臺清除
exp1.addEventListener('animationend', function(e) {
stage.removeChild(e.target);
});
};
};
};
}, //子彈飛行
updateFire: function() {
for (var i = 0; i < Plane.fires.length; i++) {
var nextY = Plane.fires[i].y - 10;
if (nextY <= 0) { //如果子彈飛出場景，在子彈陣列中去掉，並在stage中刪除元素
console.log(Plane.fires[i]);
stage.removeChild(Plane.fires[i]);
Plane.fires.splice(i, 1);
continue;
}
Plane.fires[i].y = nextY;
};
},
//敵機飛行
updateEnemy: function() {
var pl = Plane.player;
var plx = Plane.player.x;
var ply = Plane.player.y;
var plw = Plane.player.getBounds().width;
var plh = Plane.player.getBounds().height;
//佇列內的敵機依次出現
for (var i = 0; i < enemyPlane.enemysQueue.length; i++) {
var ep = enemyPlane.enemysQueue[i];
var randomPlaneWidth = ep.getBounds().width;
var randomPlaneHeight = ep.getBounds().height;
createjs.Tween.get(ep).wait(enemyPlane.addSpeed * i).to({
x: Math.floor((Math.random() * (stage.canvas.width - randomPlaneWidth * 2))),
y: stage.canvas.height
}, enemyPlane.moveSpeed, createjs.Ease.sineInOut(-2));
// 敵機飛出場景移除
if (ep.x >= stage.canvas.width || ep.y >= stage.canvas.height) {
enemyPlane.enemysQueue.splice(ep, 1);
stage.removeChild(ep);
console.log(enemyPlane.enemysQueue);
continue;
}
//玩家飛機與敵機碰撞處理
var pz_x = Math.abs(ep.x - plx) <= randomPlaneWidth / 2 + plw / 2;
var pz_y = Math.abs(ep.y - ply) <= randomPlaneHeight / 2 + plh / 2;
if (pz_x && pz_y && updateGame.run) {
Plane.lives--;
createjs.Sound.play('explosion');
var exp1 = new createjs.Sprite(buildGame.spriteSheet, 'exp');
exp1.x = plx;
exp1.y = ply;
stage.addChild(exp1);
//爆炸動畫結束時從舞臺清除
exp1.addEventListener('animationend', function(e) {
stage.removeChild(e.target);
if (Plane.lives == 0) {
createjs.Ticker.setPaused(true); //暫停遊戲
alert('遊戲結束');
} else {
var setTime = setTimeout(function() {
buildGame.buildPlayer();
updateGame.run = true;
clearTimeout(setTime);
}, 1000);
};
});
stage.removeChild(Plane.player);
updateGame.run = false;
break;
};
};
//如果佇列內沒有敵機新增敵機
if (enemyPlane.enemysQueue.length == 0) {
for (var i = 0; i < enemyPlane.enemynNum; i++) {
enemyPlane.addEnemy();
};
};
},