html飞机向上发射子弹,HTML5飞机大战

飞机大战

你的浏览器不支持canvas画布元素，请更新浏览器获得演示

飞机大战

分数:0分

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

document.addEventListener("keydown",onkeydown);

var Plan = function (image,x,y,n) {

this.image = image;

this.x = x;

this.y = y;

this.originX = x;

this.originY = y;

this.width = image.height;

this.isCaught = false;

this.frm = 0;

this.dis = 0;

this.n = n;

};

Plan.prototype.getCaught = function(bool){

this.isCaught = bool;

if (bool == false){

this.orignx = 0;

this.origny = this.y;

}

};

Plan.prototype.testPoint = function(x,y){

var betweenX = (x >= this.x) && (x <= this.x + this.width);

var betweenY = (y >= this.y) && (y <= this.y + this.height);

return betweenX && betweenY;

};

Plan.prototype.move = function(dx,dy){

this.x += dx;

this.y += dy;

};

Plan.prototype.Y = function(){

return this.y;

};

//不断下移飞机

Plan.prototype.draw = function(ctx){

ctx.save();

ctx.translate(this.x,this.y);

ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height);

ctx.restore();

this.y++;

this.x = this.orignx + 20 * Math.sin(Math.PI / 100*this.y);

this.dis++;

if(this.dis >= 3){//3帧换图

this.dis = 0;

this.frm++;

if(this.frm >= this.n) this.frm = 0;

}

};

//原地不动画飞机

Plan.prototype.draw2 = function(ctx){

ctx.save();

ctx.translate(this.x,this.y);

ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height);

ctx.restore();

this.dis++;

if(this.dis >= 3){//3帧换图

this.dis = 0;

this.frm++;

if(this.frm >= this.n) this.frm=0;

}

};

//检测飞机碰撞

//将所有子弹对象的矩形区域与敌机对象的矩形区域逐一检测，如果重叠则说明子弹与敌机的碰撞

Plan.prototype.hitTestObject=function(planobj){

if(iscolliding(this.x,this.y,this.width,this.height,

planobj.x,planobj.y,planobj.width,planobj.height))

//发生碰撞

return true;

else

return false;

}

function isColliding(ax,ay,aw,ah,bx,by,bw,bh)

{

if(ay > by + bh || by > ay + ah

|| ax > bx + bw || bx > ax + aw)

return false;

else

return true;

}

//子弹类

var Bullet = function(image,x,y){

this.image=image;

this.x = x;

this.y = y;

this.orignX = x;

this.orignY = y;

this.width = image.width/4;

this.height = image.height;

this.isCaught = false;

this.frm = 0;

this.dis = 0;

}

Bullet.prototype.testPoint = function(x,y){

var betweenX = (x >= this.x) && (x <= this.x + this.width);//

var betweenY = (y >= this.y) && (y <= this.y + this.height);

return betweenX && betweenY;

};

Bullet.prototype.move=function(dx,dy){

this.x += dx;

this.y += dy;

};

Bullet.prototype.Y = function(){

return this.y;

};

Bullet.prototype.draw = function(ctx){

ctx.save();

ctx.translate(this.x,this.y);

ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height);

ctx.restore();

this.y--;

this.dis++;

if(this.dis >= 10){//10帧换图

this.dis = 0;

this.frm++;

if(this.frm >= 4) this.frm = 0;

}

};

Bullet.prototype.hitTestObject = function(planobj){

if(isColliding(this.x,this.y,this.width,this.height,

planobj.x,planobj.y,planobj.width,planobj.height))//发生碰撞

return true;

else

return false;

}

//爆炸动画

var Bomb=function(image,x,y){

this.image = image;

this.x = x;

this.y = y;

this.width = image.width/6;

this.height = image.height;

this.frm = 0;

this.dis = 0;

};

Bomb.prototype.draw2 = function(ctx){

ctx.save();

ctx.translate(this.x,this.y);

if(this.frm >= 6) return ;

ctx.drawImage(this.image,this.frm*this.width,0,this.width,this.height,0,0,this.width,this.height);

ctx.restore();

this.dis++;

if(this.dis >= 10){//10帧换图

this.dis = 0;

this.frm++;

}

};

var plan1,plan2,plan3,plan4,caughtplan = null;

var isClick = false;

var mouseX,mouseY,preX,preY;

var plans=[];

var bullets=[];

var bombs=[];

var score=0;

var overflag=false;//游戏是否结束，true为结束

var myplane;//己方飞机

var image = new Image();

var image2 = new Image();

var image3 = new Image();

var image4 = new Image();

var image5 = new Image();

var bakground = new Image();

bakground.src='map_0.png';

image.src='plan.png';//自己飞机图片

image.οnlοad=function(){

};

image2.src='bomb.png';//爆炸图片

image2.οnlοad=function(){

}

image3.src='enemy.png';//敌机图片

image3.οnlοad=function(){

myplane=new Plan(image,300*Math.random(),400,6);

plan_interval=setInterval(function(){

plans.push(new Plan(image3,300*Math.random(),20*Math.random(),2));

},3000);//3秒产生1架敌机

setInterval(function(){

context.clearRect(0,0,320,480);

context.drawImage(bakground,0,0);

//画自己方飞机

if(!overflag)//游戏没有结束

myplane.draw2(context);//原地不动

//画敌人飞机

for(var i=plans.length - 1; i >= 0; i--){

if (plans[i].Y() > 400)

plans.splice(i,1);//删除敌机

else

plans[i].draw(context);

}

//画子弹

for (var i = bullets.length - 1; i >= 0; i--){

if (bullets[i].Y() < 100)

bullets.splice(i,1);//删除子弹

else

bullets[i].draw(context);

}

//碰撞检测

//判断敌机碰到玩家自己飞机

for (var i = plans.length - 1; i >= 0; i--){

e1 = plans[i];

if(e1!=null && myplane!=null && myplane.hitTestObject(e1))

{

clearInterval(plan_interval);//清除定时器，不再产生敌机

plans.splice(i,1);//删除敌机

bombs.push(new Bomb(image2, myplane.x, myplane.y));

message_txt.innerHTML='敌机碰到玩家自己飞机，游戏结束';

overflag=true;

}

}

//判断子弹碰到敌机

for(var j = bullets.length - 1; j >= 0; j--){

var b1=bullets[j];

for(var i = plans.length - 1;i >= 0; i--){

e1 = plans[i];

if (e1!=null && b1!=null && b1.hitTestObject(e1))//击中敌机

{

plans.splice(i,1);//删除敌机

bullets.splice(i,1);//删除此颗子弹

bombs.push(new Bomb(image2,b1.x,b1.y-36));

message_txt.innerHTML='敌机被击中，加20分';

score+=20;

score_txt.innerHTML='分数：'+score+'分';

}

}

}

//画炸弹

for (var i = bombs.length - 1;i >= 0; i--){

if (bombs[i].frm >= 6)

bombs.splice(i,1);//删除子弹

else

bombs[i].draw2(context);

}

},1000/60);

};

image4.src='bullet.png';//子弹图片

image4.οnlοad=function(){

};

function onKeydown(e){

if(e.keyCode==32){//空格

//发射子弹

bullets.push(new Bullet(image4,myplane.x,myplane.y-36));

}else if(e.keyCode==37){//向左

myplane.move(-10,0);

}else if(e.keyCode==39){//向右

myplane.move(10,0);

}else if(e.keyCode==38){//向上

myplane.move(0,-10);

}else if(e.keyCode==40){//向下

myplane.move(0,10);

}

}

```

来源：oschina

链接：https://my.oschina.net/u/4460892/blog/3209467