HTML5飞机大战

大城市里の小女人 提交于 2020-03-23 22:32:47

3 月,跳不动了?>>>

<html>
<head>
    <meta charset="UTF-8">
    <title>飞机大战</title>
</head>
<body>
<canvas id="myCanvas" width="320" height="480" style="border: solid">
    你的浏览器不支持canvas画布元素,请更新浏览器获得演示
</canvas>
<div id="message_txt" style="display: block;">飞机大战</div>
<div id="score_txt" style="display: block;">分数:0分</div>
<script type="text/javascript">
    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.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);

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


</script>
</body>
</html>```
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!