基本信息
源码名称:html5 飞机大战
源码大小:0.12M
文件格式:.zip
开发语言:CSS
更新时间:2020-01-05
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
自定义飞机图片数量,子弹图片,速度
自定义飞机图片数量,子弹图片,速度
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.onload=function(){ } image2.src="bomb.png"; image2.onload=function(){ } image3.src="enemy.png"; image3.onload=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.onload=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 && px<this.x this.w && px>this.y && py<this.y this.h) 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 ; } }