子弹可以飞了，完事儿之后就可以添加敌机了
其实这里面所有的敌机基本上都类似，这里只说一种，然后现在把代码弄过来：
/////////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; //当前绘制的图片在数组中的下标
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; //我方英雄开始撞毁程序
}
}
}
首先先要设置下这个飞机的参数变量，先介绍下：
x坐标，首先是先想下飞机怎么出来，然后呢因为x坐标就是屏幕的横向宽度，所以直接用canvas的宽度，因为图片从顶点画的，到最后的位置只能是图片的右边挨着屏幕右边，所以要减去一个图片的宽度
y坐标，开始的时候基本上可以设置为图片的高度，这样每次移动的时候才能显示出来，看起来好点
宽高就是图片的宽高了
index,用于图片更换的时候，也就是这个敌机死亡的时候需要切换动画，这时候才能用到，否则基本都是0就可以了
speed，也就是敌机飞行速度，这个的话可以根据自己想要的效果去设置，可以在后面根据分数去增加减少等等
removable,用于判断这个敌机是不是删除了
blood,对于敌机来说是血格，这个的话，可以解释为可以接受几次子弹的打击
crashed,是否被撞毁，
移动方法呢和上面的子弹差不多，一个正一个反，这个就不说了
验证方法，主要是判断每个敌机和子弹，主机的判断，先检验是否和子弹碰撞，因为子弹放在子弹列表里，所以要循环判断下，如果被打了，判断下是不是有血格，如果没有就可以执行删除程序了，然后就是判断是不是和主机碰撞
然后就可以弄中号大号敌机了，这里面的方法和小型敌机几乎是一模一样，所以这里就不说了
敌机弄完之后就可以放到敌机列表里面了:
//所有敌机组成的列表
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 () {
/*敌机生成的要求：
*何时生成敌机是随机的，不是定时或者连续的
*小号敌机的概率最大，中号其次，大号最少
*思路：0~199随机数 小号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函数，这个现在来说下，主要就是说下生成敌机的要求，这个的话主要就随机设置了，设置完之后直接判断下生成的数来判断生成的敌机种类，这个的话，也可以修改下，增加游戏难度，也可以和分数挂钩，这样就可以变的越来越难了
最后说下分数和剩余主机生命值的方法里面基本也没什么东西，主要就是画下数字文字而已，只是这些分数变化的时候就可以自己随意玩了，嘻嘻嘻嘻
后面还有俩函数，一个暂停和开始，这里只是简单的改了下状态，大家可以让用户更好的体验，可以和其他游戏一样，弄点按钮，弄个设置啊什么的
因为有个暂停，所以函数也弄了一个，把所有的东西都清空下就可以了，这里的话，用的法子是直接把一个图片画下，就相当于是覆盖所有东西了
终于到最后了，gameover函数，当游戏结束的时候可以画出自己想要出来的画面，可以用文字来弄出来，当然也可以把现在一些分享啊什么的按钮弄上去，这里要看大家怎么弄了
//绘制当前得分和剩余英雄数量
function drawStat() { //绘制统计数据
ctx.font = '25px Helvetica';
ctx.fillStyle = '#333';
//绘制当前的游戏得分
var score = 'SCORE: ' + heroScore;
ctx.fillText(score, 10, 35);
//绘制剩余的英雄数量
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);
}
好了，到此为止，就算是真个项目结束了，最近看了下，感觉写这些东西看的人比较多点，所以最近我会找下一些特效什么的，写成公众号，希望大家也帮忙找找人过来关注下公众号，我会努力加油的！！！
