html5飞机大战小游戏开发,html5 飞机大战

【实例简介】自定义飞机图片数量，子弹图片，速度

【实例截图】

【核心代码】

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

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

document.addEventListener("keydown",onkeydown);

var message_txt=document.getElementById("message_txt");

var score_txt=document.getElementById("score_txt");

var plans=[];

var bullets=[];

var bombs=[];

var score=0;

var overflag=false;

var mBitposY0,mBitposY1;

var mScreenWidth=320;

var mScreenHeight=480;

var myplane;

var image=new Image();

var image2=new Image();

var image3=new Image();

var image4=new Image();

var image5=new Image();

var background0=new Image();

background0.src="map_0.png";

var background1=new Image();

background1.src="map_1.png";

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.width/n;

this.height=image.height;

this.frm=0;

this.dis=0;

this.n=n;

}

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

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

var betweemY=(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.originX 20*Math.sin(Math.PI/100 * this.y);

this.dis ;

if(this.dis>=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.y ;

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

this.dis ;

if(this.dis>=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 init(){

mBitposY0=-mScreenHeight;

mBitposY1=-mScreenHeight;

}

function updateBg(){

mBitposY0 =5;

mBitposY1 =5;

if(mBitposY0== mScreenHeight){

mBitposY0=-mScreenHeight;

}

if(mBitposY1== mScreenHeight){

mBitposY1=-mScreenHeight;

}

}

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);

init();

plan_interval=setInterval(function(){

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

},3000);

setInterval(function(){

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

context.drawImage(background0,0,mBitposY0);

context.drawImage(background1,0,mBitposY1);

updateBg();

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()<0)

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);

}

}

/* var Actor=function (x,y,w,h){

this.x=x;

this.y=y;

this.w=w;

this.h=h;

}

Actor.prototype.isCollidingWidth=function(px,py){

if(px>this.x && pxthis.y && py

return true;

else

return false;

}

Actor.prototype.isCollidingWidth=function(another){

if(isCollidingWidth(another.x,another.y) || isCollidingWidth(another.x another.w,another.y)

|| isCollidingWidth(another.x,another.y another.h)

||isCollidingWidth(another.x another.w,another.y another.h))

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.width=image.width/4;

this.height=image.height;

this.frm=0;

this.dis=0;

}

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

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

var betweemY=(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){

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);

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){

this.dis=0;

this.frm ;

}

}