雷电html代码,基于HTML5的游戏制作（雷电飞机设计游戏）

雷电飞机设计游戏

游戏演示：

游戏设计步骤

1.导入素材

2.参考代码：

飞机大战

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

飞机大战

分数：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.orignx=x;

this.origny=y;

this.width=image.width/n;

this.height=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){

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

//3帧换一次图片

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 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.orignx=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

var betweenY=(y>=this.y)&&(y

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

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

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;

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(image,300*Math.random(),20*Math.random(),2));

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

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 (vari=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);

}

}