子彈可以飛了园蝠，完事兒之后就可以添加敵機了
其實這里面所有的敵機基本上都類似，這里只說一種痢士，然后現(xiàn)在把代碼弄過來：
/////////V6版本新增加內容/////////
//小號敵機
function Enemy1(imgs) {
this.x = Math.random() * (canvasWidth - imgs[0].width);
this.y = -imgs[0].height;
this.width = imgs[0].width;
this.height = imgs[0].height;
this.index = 0; //當前繪制的圖片在數(shù)組中的下標
this.speed = 7; //小敵機每42ms移動的距離——即飛行速度
this.removable = false; //可以刪除了嗎
this.blood = 1; //小敵機只有1格血
this.crashed = false; //是否被撞毀
this.draw = function () {
ctx.drawImage(imgs[this.index], this.x, this.y);
}
this.counter = 0;
this.move = function () {
this.counter++;
this.y += this.speed;
this.checkHit(); //碰撞檢查
//若飛出下邊界或炸毀了彪薛，則可以刪除了
if (this.crashed && this.counter % 2 === 0) {
if (this.index === 0) this.index = 1;
else if (this.index < imgs.length - 1) this.index++;
else {
this.removable = true;
heroScore += 5;
}
}
if (this.y >= canvasHeight) { //飛出下邊界
this.removable = true;
}
}
////碰撞檢驗////
/*
碰撞的四個條件：
obj1.x + obj1.width >= obj2.x
obj2.x + obj2.width >= obj1.x
obj1.y + obj1.height >= obj2.y
obj2.y + obj2.height >= obj1.y
*/
this.checkHit = function () {
//每個敵機必須和我方的每個子彈進行碰撞檢驗
for (var i in bulletList.arr) {
var b = bulletList.arr[i];
/*console.log('1'+this.x+'-'+this.y);
console.log('2'+this.width+'-'+this.height);
console.log('3'+b.x+'-'+b.y);
console.log('4'+b.width+'-'+b.height);*/
if ((this.x + this.width >= b.x)
&& (b.x + b.width >= this.x)
&& (this.y + this.height >= b.y)
&& (b.y + b.height >= this.y)) {
this.blood--;
if (this.blood <= 0) { //沒有血格了，開始撞毀進程
this.crashed = true;
}
b.removable = true;
}
}
//每個敵機必須和我方英雄做碰撞檢驗
if ((this.x + this.width >= hero.x)
&& (hero.x + hero.width >= this.x)
&& (this.y + this.height >= hero.y)
&& (hero.y + hero.height >= this.y)) {
hero.crashed = true; //我方英雄開始撞毀程序
}
}
}
首先先要設置下這個飛機的參數(shù)變量怠蹂，先介紹下：
x坐標善延，首先是先想下飛機怎么出來，然后呢因為x坐標就是屏幕的橫向寬度城侧，所以直接用canvas的寬度易遣，因為圖片從頂點畫的，到最后的位置只能是圖片的右邊挨著屏幕右邊，所以要減去一個圖片的寬度
y坐標，開始的時候基本上可以設置為圖片的高度涂乌，這樣每次移動的時候才能顯示出來芯急，看起來好點
寬高就是圖片的寬高了
index,用于圖片更換的時候，也就是這個敵機死亡的時候需要切換動畫，這時候才能用到，否則基本都是0就可以了
speed，也就是敵機飛行速度火脉，這個的話可以根據(jù)自己想要的效果去設置，可以在后面根據(jù)分數(shù)去增加減少等等
removable,用于判斷這個敵機是不是刪除了
blood,對于敵機來說是血格柒啤，這個的話倦挂，可以解釋為可以接受幾次子彈的打擊
crashed,是否被撞毀，
移動方法呢和上面的子彈差不多担巩，一個正一個反方援，這個就不說了
驗證方法，主要是判斷每個敵機和子彈兵睛，主機的判斷肯骇，先檢驗是否和子彈碰撞，因為子彈放在子彈列表里祖很，所以要循環(huán)判斷下笛丙，如果被打了，判斷下是不是有血格假颇，如果沒有就可以執(zhí)行刪除程序了胚鸯，然后就是判斷是不是和主機碰撞
然后就可以弄中號大號敵機了，這里面的方法和小型敵機幾乎是一模一樣笨鸡，所以這里就不說了
敵機弄完之后就可以放到敵機列表里面了:
//所有敵機組成的列表
var enemyList;
function EnemyList() {
this.arr = []; //保存所有的敵機
this.add = function (enemy) { //增加新敵機
this.arr.push(enemy);
}
this.remove = function (i) { //刪除指定的敵機
this.arr.splice(i, 1);
}
this.draw = function () { //繪制所有的敵機
for (var i in this.arr) {
this.arr[i].draw();
}
}
this.move = function () { //讓所有的敵機移動
this.generate(); //生成新的敵人
for (var i in this.arr) {
var e = this.arr[i];
e.move();
if (e.removable) {
this.remove(i);
}
}
}
//隨機生成一個敵機
this.generate = function () {
/*敵機生成的要求：
*何時生成敵機是隨機的姜钳，不是定時或者連續(xù)的
*小號敵機的概率最大坦冠，中號其次，大號最少
*思路：0~199隨機數(shù) 小號0/1/2/3/4/5 中號6/7/8 大號9 其它值不生成敵機
*進一步擴展：可以將6/9/10設置為變量哥桥，以增加游戲難度
*/
var num = Math.floor(Math.random() * 200);
if (num < 6) {
this.add(new Enemy1(imgsEnemy1));
} else if (num < 9) {
this.add(new Enemy2(imgsEnemy2));
} else if (num < 10) {
this.add(new Enemy3(imgsEnemy3));
}
}
}
這個的話辙浑，和子彈列表差不多，都有添加刪除畫和移動方法拟糕，最后呢多出來一個generate函數(shù)判呕，這個現(xiàn)在來說下，主要就是說下生成敵機的要求送滞，這個的話主要就隨機設置了侠草，設置完之后直接判斷下生成的數(shù)來判斷生成的敵機種類，這個的話犁嗅，也可以修改下边涕，增加游戲難度，也可以和分數(shù)掛鉤褂微，這樣就可以變的越來越難了
最后說下分數(shù)和剩余主機生命值的方法里面基本也沒什么東西功蜓，主要就是畫下數(shù)字文字而已，只是這些分數(shù)變化的時候就可以自己隨意玩了宠蚂，嘻嘻嘻嘻
后面還有倆函數(shù)霞赫，一個暫停和開始，這里只是簡單的改了下狀態(tài)肥矢，大家可以讓用戶更好的體驗，可以和其他游戲一樣叠洗，弄點按鈕甘改，弄個設置啊什么的
因為有個暫停，所以函數(shù)也弄了一個灭抑，把所有的東西都清空下就可以了十艾，這里的話，用的法子是直接把一個圖片畫下腾节，就相當于是覆蓋所有東西了
終于到最后了忘嫉，gameover函數(shù)，當游戲結束的時候可以畫出自己想要出來的畫面案腺，可以用文字來弄出來庆冕，當然也可以把現(xiàn)在一些分享啊什么的按鈕弄上去，這里要看大家怎么弄了
//繪制當前得分和剩余英雄數(shù)量
function drawStat() { //繪制統(tǒng)計數(shù)據(jù)
ctx.font = '25px Helvetica';
ctx.fillStyle = '#333';
//繪制當前的游戲得分
var score = 'SCORE: ' + heroScore;
ctx.fillText(score, 10, 35);
//繪制剩余的英雄數(shù)量
var heros = 'HEROS: ' + heroCount;
var w = ctx.measureText(heros).width;
ctx.fillText(heros, canvasWidth - w - 10, 35);
}
/***階段5：游戲暫停***/
canvas.onmouseout = function () { //鼠標移出畫布
if (curPhase === PHASE_PLAY) {
curPhase = PHASE_PAUSE;
}
}
canvas.onmouseover = function () { //鼠標移入畫布
if (curPhase === PHASE_PAUSE) {
curPhase = PHASE_PLAY;
}
}
function drawPause() { //繪制暫停提示圖標
var x = canvasWidth / 2 - imgGamePauseNor.width / 2;
var y = canvasHeight / 2 - imgGamePauseNor.height / 2;
ctx.drawImage(imgGamePauseNor, x, y);
}
/***階段6：游戲結束***/
function drawGameover() {
ctx.font = '50px Helvetica';
ctx.fillStyle = '#ccc';
ctx.strokeStyle = '#333';
var txt = 'GAME OVER';
var w = ctx.measureText(txt).width;
var x = canvasWidth / 2 - w / 2;
var y = canvasHeight / 2 + 50 / 2;
ctx.fillText(txt, x, y);
ctx.strokeText(txt, x, y);
}
好了劈榨，到此為止访递，就算是真?zhèn)€項目結束了，最近看了下同辣，感覺寫這些東西看的人比較多點拷姿，所以最近我會找下一些特效什么的惭载，寫成公眾號，希望大家也幫忙找找人過來關注下公眾號响巢，我會努力加油的Ｃ杼稀！踪古！
