游戏运行中
我方飞机的状态:
var heros1 = []; // 飞机未被撞击时的状态 heros1[0] = new Image; heros1[0].src = "img/hero1.png" heros1[1] = new Image; heros1[1].src = "img/hero2.png" // 飞机被撞击的状态 heros1[2] = new Image; heros1[2].src = "img/hero_blowup_n1.png" heros1[3] = new Image; heros1[3].src = "img/hero_blowup_n2.png" heros1[4] = new Image; heros1[4].src = "img/hero_blowup_n3.png" heros1[5] = new Image; heros1[5].src = "img/hero_blowup_n4.png"
初始化飞机的数据:
var heros = { img: heros1, length: heros1.length, width: 99, height: 124, frame: 2 /*区分飞机是否碰撞的状态*/ }
创建飞机的构造函数
function hero(her) { this.img = her.img; this.length = her.length; this.width = her.width; this.height = her.height; this.frame = her.frame; // 图片索引 this.starindex = 0; // 飞机的位置 this.x = WIDTH / 2 - this.width / 2; this.y = HEIGHT - 150 // 飞机是否被撞击 this.dash = false; /*飞机未被撞击*/ // 碰撞以后会产生动画 是否撞完了 this.candel = false; // 撞击方法 this.bang = function() { this.dash = true; } // 绘制飞机paint方法 this.paint = function() { context.drawImage(this.img[this.starindex], this.x, this.y) }; // 运动的方法 this.step = function() { if(!this.dash) { this.starindex++; this.starindex = this.starindex % 2; } else { this.starindex++; if(this.starindex == this.length) { life--; if(life == 0) { start = GAMEOVER; this.starindex = this.length - 1 } else { sky2 = new hero(heros) } } } } // 射击的方法 this.time = 0; this.shoot = function() { this.time++; if(this.time % 3 == 0) { bulled.push(new bulls(bull)); } } }
创建飞机的对象
var sky2 = new hero(heros)
让飞机随着鼠标运动
首先获取鼠标在画布中的位置然后赋给飞机,并让其居中
canvas.onmousemove = function(event) { var event = event || window.event; if(start == RUNNING) { // 获取鼠标在画布中的位置 var x = event.offsetX; var y = event.offsetY; sky2.x = x - sky2.width / 2 sky2.y = y - sky2.height / 2 } }
绘制子弹
子弹的图片
var img1 = new Image(); img1.src = "img/bullet1.png";
初始化子弹数据
var bull = { img: img1, width: 9, height: 21 }
创建子弹的构造函数
function bulls(bb) { this.img = bb.img; this.width = bb.width; this.height = bb.height; // 绘制坐标 this.x = sky2.x + sky2.width / 2 - this.width / 2; this.y = sky2.y - this.height - 10; // 绘制方法 this.paint = function() { context.drawImage(this.img, this.x, this.y) }; // 移动的方法 this.step = function() { this.y -= 10; }; // 碰撞属性 this.candel = false; // 碰撞方法 改变碰撞属性 this.bang = function() { this.candel = true; } }
var sky3 = new bulls(bull);
建立数组储存子弹对象
var bulled = [];
绘制所有子弹的方法
function suoyou() { for(var i = 0; i < bulled.length; i++) { bulled[i].paint(); } }
绘制所有子弹运动的方法
function yidong() { for(var i = 0; i < bulled.length; i++) { bulled[i].step(); } }
清除无用的子弹 (碰撞的和超出边界的)
function qingchu() { for(i = 0; i < bulled.length; i++) { if(bulled[i].candel || bulled[i].y < -bulled[i].height) { bulled.splice(i, 1) } }
效果图
敌方飞机
敌方飞机的图片
var enemy1 = []; /*小飞机*/ enemy1[0] = new Image(); enemy1[0].src = "img/enemy1.png"; enemy1[1] = new Image(); enemy1[1].src = "img/enemy1_down1.png"; enemy1[2] = new Image(); enemy1[2].src = "img/enemy1_down2.png"; enemy1[3] = new Image(); enemy1[3].src = "img/enemy1_down3.png"; enemy1[4] = new Image(); enemy1[4].src = "img/enemy1_down4.png"; var enemy2 = []; /*中飞机*/ enemy2[0] = new Image(); enemy2[0].src = "img/enemy2.png"; enemy2[1] = new Image(); enemy2[1].src = "img/enemy2_down1.png"; enemy2[2] = new Image(); enemy2[2].src = "img/enemy2_down2.png"; enemy2[3] = new Image(); enemy2[3].src = "img/enemy2_down3.png"; enemy2[4] = new Image(); enemy2[4].src = "img/enemy2_down4.png"; var enemy3 = []; /*大飞机*/ enemy3[0] = new Image(); enemy3[0].src = "img/enemy3_n1.png"; enemy3[1] = new Image(); enemy3[1].src = "img/enemy3_n2.png"; enemy3[2] = new Image(); enemy3[2].src = "img/enemy3_down1.png"; enemy3[3] = new Image(); enemy3[3].src = "img/enemy3_down2.png"; enemy3[4] = new Image(); enemy3[4].src = "img/enemy3_down3.png"; enemy3[5] = new Image(); enemy3[5].src = "img/enemy3_down4.png"; enemy3[6] = new Image(); enemy3[6].src = "img/enemy3_down5.png"; enemy3[7] = new Image(); enemy3[7].src = "img/enemy3_down6.png";
初始化所有飞机的数据
var Enemy1 = {/*小飞机*/ img: enemy1, length: enemy1.length, width: 57, height: 51, type: 1, /*飞机类型 1是小飞机*/ frame: 1, /*飞机的动态小中飞机为同一种*/ life: 1, score: 1 } var Enemy2 = {/*中飞机*/ img: enemy2, length: enemy2.length, width: 69, height: 95, type: 2, frame: 1, life: 3, score: 3 } var Enemy3 = {/*大飞机*/ img: enemy3, length: enemy3.length, width: 169, height: 258, type: 3, frame: 2, life: 10, score: 150 }
创造敌方飞机的构造函数
function dffj(df) { this.img = df.img; this.length = df.length; this.width = df.width; this.height = df.height; this.type = df.type; this.frame = df.frame; this.life = df.life; this.score = df.score; // 敌方飞机的坐标 this.x = Math.random() * (WIDTH - this.width); this.y = -this.length; // 敌方飞机是否被撞击 this.down = false; // 敌方飞机是否被删除 this.del = false; // 敌方飞机的索引 this.startindex = 0; // 敌方飞机的绘制的方法 this.paint = function() { context.drawImage(this.img[this.startindex], this.x, this.y) } // 敌方飞机的运动方法 this.step = function() { if(!this.down) { this.startindex++; // 小中飞机下标是0,大飞机是0和1之间切换 this.startindex = this.startindex % this.frame; this.y+=10; } else { this.startindex++; if(this.startindex == this.length) { this.del = true; /*飞机被删除*/ this.startIndex = this.length - 1; /*飞机停留在最后一张图片*/ } } } // 碰撞造成数据的变化 this.bang = function() { this.life--; if(this.life == 0) { this.down = true; score += this.score; } } // 判断是否碰撞 this.hit = function(unm) { // 传参可以我方飞机也可以是子弹·数据 return this.height + this.y > unm.y && this.y < unm.y + unm.height && this.x + this.width > unm.x && this.x < unm.x + unm.width } }
定义数组用于储存产生的敌方飞机
var dfj = []; // 将创造的敌方飞机的对象放入数组中 function enterEnemies() { var rand = Math.floor(Math.random() * 100); if(rand < 5) { dfj.push(new dffj(Enemy1)); } else if(rand < 7) { dfj.push(new dffj(Enemy2)); } else if(rand == 60) { if (dfj&&dfj.length) { if(dfj[0].type != 3 && dfj.length > 2) { dfj.splice(0, 0, new dffj(Enemy3)); } } } }
绘制所有敌方飞机
function sydj() { for(var i = 0; i < dfj.length; i++) { dfj[i].paint(); } }
绘制所有敌机的运动
function djyd() { for(var i = 0; i < dfj.length; i++) { dfj[i].step(); } }
删除敌机(超出边界和摧毁的)
function deldj() { for(var i = 0; i < dfj.length; i++) { if(dfj[i].del || dfj[i].y > HEIGHT) { dfj.splice(i, 1); } } }
效果图
考虑撞击情况
function hit() { // 撞击的是我方飞机 for(var i = 0; i < dfj.length; i++) { // if(dfj[i].hit(sky2)) { dfj[i].bang(); sky2.bang(); } // 撞击的是子弹 for(var j = 0; j < bulled.length; j++) { if(dfj[i].hit(bulled[j])) { bulled[j].bang(); dfj[i].bang(); } } } }
// 飞机的生命值和得分 function paintText() { context.font = "bold 24px Arial"; context.fillText("SCORE:" + score, 10, 30); context.fillText("LIFE:" + life, 400, 30); } // 暂停 canvas.onmouseover = function() { if(start == PAUSE) { start = RUNNING; } } canvas.onmouseout = function() { if(start == RUNNING) { start = PAUSE; } } // 暂停图片 var pause = new Image(); pause.src = "img/game_pause_nor.png"; // 游戏结束的方法 function gameover() { context.font = "bold 50px Arial"; context.fillText("GAME OVER", 90, 300) }
最终定时器
// 飞机的生命值和得分 function paintText() { context.font = "bold 24px Arial"; context.fillText("SCORE:" + score, 10, 30); context.fillText("LIFE:" + life, 400, 30); } // 暂停 canvas.onmouseover = function() { if(start == PAUSE) { start = RUNNING; } } canvas.onmouseout = function() { if(start == RUNNING) { start = PAUSE; } } // 暂停图片 var pause = new Image(); pause.src = "img/game_pause_nor.png"; // 游戏结束的方法 function gameover() { context.font = "bold 50px Arial"; context.fillText("GAME OVER", 90, 300) }
效果图