飞机大作战游戏 3----（运用H5和Js制作）

游戏运行中

我方飞机的状态：

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 / 2sky2.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)}

 效果图

转载于:https://www.cnblogs.com/xuhanghang/p/10125908.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！