飞机大战(简易版)

数据集没有发出来,只有完整版的代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>飞机大战</title>
<style>
	html,body{
		position: relative;
		width: 100%;
		height: 100%;
	}
	h1{
		font-size: 6rem;
		
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-50%,-50%);
		
		background: linear-gradient(to bottom,red,blue);
		-webkit-text-fill-color:transparent;
		-webkit-background-clip: text;
		
		z-index: 1;
		cursor: progress;
	}
	#tips{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		
		z-index: 1;
		
		font-size: 20px;
		
	}
	#tips svg{
		width: 30px;
		height: 30px;
	}
	#tips span{
		display: inline-block;
		height: 30px;
		line-height: 30px;
	}
	#start{
		font-size: 16px;
		font-weight: 800;
		text-align: center;
		line-height: 60px;
		
		width: 120px;
		height: 60px;
		
		border-radius: 80px 70px;
		margin: 0 auto;

		/*设置手型*/
		cursor: pointer;
		
		box-shadow: 1px 2px 0 1px #606060,
					-1px 0 0 1px #606060;
	}
	#start:hover{
		font-size: 20px;
		font-weight: 1.2em;
		background: url('img/start.gif');
		background-size: 100% 100%;
	}
	#canvas{
		
		background: url('img/background.png') repeat;
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		
		z-index: 0;
	}	
</style>
</head>

<body>
<h1>飞机大战</h1>
<div id="tips">
	<div>
		<svg t="1586957990263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4430" width="200" height="200"><path d="M489.90890884 1017.28884579l0-662.73273745L551.27305136 354.55610835 551.27305135 1017.28884579l-61.3641425-2e-8z" fill="" p-id="4431"></path><path d="M306.28092891 358.28692148L515.86227332 1.43220042l215.24570478 356.85472106-424.82704919 0z" fill="" p-id="4432"></path></svg>
		<svg t="1586958009679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4551" width="200" height="200"><path d="M533.74591785 14.43962576l0 652.37753843L473.34059007 666.81716419 473.34059007 14.43962576l60.40532778 1e-8z" fill="" p-id="4552"></path><path d="M714.5047106 673.81131166L508.1980747 1025.0901777l-211.88249064-351.27886604 418.18912654 0z" fill="" p-id="4553"></path></svg>
		<svg t="1586958037827" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5320" width="200" height="200"><path d="M1017.28884579 534.09109115l-662.73273745 1e-8L354.55610835 472.72694864 1017.28884579 472.72694864l-2e-8 61.36414251z" fill="" p-id="5321"></path><path d="M358.28692148 717.71907109L1.43220042 508.13772668l356.85472106-215.24570478 0 424.82704919z" fill="" p-id="5322"></path></svg>
		<svg t="1586958054232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6089" width="200" height="200"><path d="M6.71115421 489.90890885l662.73273745-1e-8L669.44389165 551.27305136 6.71115421 551.27305136l2e-8-61.36414251z" fill="" p-id="6090"></path><path d="M665.71307852 306.28092891L1022.56779958 515.86227332l-356.85472106 215.24570478 0-424.82704919z" fill="" p-id="6091"></path></svg>
	<span>移动方向</span></div>
	<div id="start">开始游戏</div>
</div>
<canvas id="canvas" width="600" height="700"></canvas>
<script>
	var canvas=document.getElementById("canvas");
	if(canvas.getContext){
		var cxt=canvas.getContext("2d");
	}else{
		console.log("你的浏览器不支持HTML5画板");
	}
	
	var scores=0;  //分数
	var bumps=[];  //数组,存放炮弹
	var armys=[];  //敌机
	var armyBumps=[];  //敌机炮弹
	
	
	//敌机类
	function Army(){
		this.x=parseInt(Math.random()*19)*30;
		this.y=20;
		this.w=30;
		this.h=30;
		armys.push(this);
		
		
	}
	//画敌机
	Army.prototype.paintArmy=function(){
		const img=new Image();
		img.src='img/plane-1.png';
		
		img.onload=()=>{
			cxt.drawImage(img,this.x,this.y,this.w,this.h);
		}
	}
	//敌机自动向前移动
	Army.prototype.move=function(){
		const img=new Image();
		img.src='img/plane-1.png';
		
		let armyY=armys.filter((item)=>{
			return item.y<=700;
		})
		armyY.forEach((item)=>{
			cxt.clearRect(item.x,item.y,item.w,item.h);
			item.y+=20;
		})

		armyY.forEach((item)=>{
			cxt.drawImage(img,item.x,item.y,item.w,item.h);
		})
			
	}
	/*
	//敌机开火
	Army.prototype.Fire=function(){
		const img=new Image();
		img.src='img/fire-1.png';
		img.οnlοad=()=>{
			
			armys.forEach((item)=>{
				cxt.drawImage(img,item.x+5,item.y+20,20,20);
				armyBumps.push([item.x+5,item.y+20]);
			})
			//定时器,0.3s一次
			setInterval(()=>{
				//过滤出界的
				armyBumps.filter((item)=>{
					return item[1]+20<=700;
				})
				
				armyBumps.forEach((item)=>{
					cxt .clearRect(item[0],item[1],20,20);
					item[1]+=20;
				})
				
				armyBumps.forEach((item)=>{
					cxt.drawImage(img,item[0],item[1],20,20);
				})
				 
			},500)
		}
	}
	*/
	
	//碰撞检测
	Army.prototype.boom=function(){
		armys.forEach((item,index)=>{
			bumps.forEach((em,dx)=>{
				if(em[0]>=item.x && em[0]<=item.x+item.w && Math.abs(item.y-em[1])<=item.h){
					setTimeout(()=>{
						//清除子弹
						cxt.clearRect(em[0],em[1],6,10);
						//清除敌机
						cxt.clearRect(item.x,item.y,item.w,item.h);
					},200)
					
					//重新弄画图
					let img1=new Image();
					img1.src="img/over-0.png";
					img1.onload=()=>{
						cxt.drawImage(img1,item.x,item.y,item.w,item.h);
					}
					
					setTimeout(()=>{
						cxt.clearRect(item.x,item.y,item.w,item.h);
					},150)
					
					let img2=new Image();
					img2.src="img/over-1.png";
					img2.onload=()=>{
						cxt.drawImage(img2,item.x,item.y,item.w,item.h);
					}
					
					setTimeout(()=>{
						cxt.clearRect(item.x,item.y,item.w,item.h);
					},150)
					
					let img3=new Image();
					img3.src="img/over-2.png";
					img3.onload=()=>{
						cxt.drawImage(img3,item.x,item.y,item.w,item.h);
					}
					
					setTimeout(()=>{
						cxt.clearRect(item.x,item.y,item.w,item.h);
					},150)
					
					let img4=new Image();
					img4.src="img/over.png";
					img4.onload=()=>{
						cxt.drawImage(img4,item.x,item.y,item.w,item.h);
					}
					
					setTimeout(()=>{
						cxt.clearRect(item.x,item.y,item.w,item.h);
					},150)
					
					//把两者从存储的数组中删除
					bumps.splice(dx,1);
					armys.splice(index,1);
					
					scores++;
					cxt.clearRect(0,0,100,20);
					score();
				}
			})
		})
	}
	
	
	//自己类
	function plane(){
		this.w=40;
		this.h=40;
		this.x=canvas.width/2-this.w/2;
		this.y=canvas.height-this.h;
	}
	
	//显示自己的飞机
	plane.prototype.paintPlane=function(){
		const img=new Image();
		img.src="img/plane-2.png";
		//等到图片加载完成才可以使用,否则width===0 && height===0
		//写一个回调函数
		img.onload=()=>{
			cxt.drawImage(img,this.x,this.y,this.w,this.h);
		}
	}
	//清除函数
	plane.prototype.clearPlane=function(){
		cxt.clearRect(this.x,this.y,40,40);
	}
	
	plane.prototype.moveLeft=function(){
		this.clearPlane();
		if(this.x>0){
			this.x-=10;
		}
		this.paintPlane();
	}
	
	plane.prototype.moveRight=function(){
		this.clearPlane();
		if(this.x+40<canvas.width){
			this.x+=10;
		}
		this.paintPlane();
	}
	
	/*
	plane.prototype.moveUp=function(){
		this.clearPlane();
		if(this.y>40){
			this.y-=10;
		}
		this.paintPlane();
	}
	
	plane.prototype.moveDown=function(){
		this.clearPlane();
		if(this.y+40<canvas.height){
			this.y+=10;
		}
		this.paintPlane();
	}
	
	*/
	
	//发射炮弹
	plane.prototype.fire=function(){
		const img=new Image();
		img.src="img/fire-0.png";
		img.onload=()=>{
			//定时器,0.3s一次
			setInterval(()=>{
				//过滤出界的
				let bump=bumps.filter((item)=>{
					return item[1]>=0;
				})
				//添加新的
				cxt.drawImage(img,this.x+17,this.y-10,6,10);
				//添加进存储的数组
				bumps.push([this.x+17,this.y-10]);
				//先清除
				bump.forEach((item)=>{
					cxt.clearRect(item[0],item[1],6,10);
					item[1]-=20;
				})
				//再绘画
				bump.forEach((item)=>{
					cxt.drawImage(img,item[0],item[1],6,10);
				})
				 
			},100)
		}
	}
	
	plane.prototype.gameOver=function(){
		armys.forEach((item)=>{
			if(item.x+30>=this.x && item.x<=this.x+this.w && this.y===item.y+30){
				return true;
			}
		})
	}
	
	//显示分数
	function score(){
		cxt.font="20px Arial";
		cxt.fillStyle="#000";
		cxt.fillText("分数:"+scores,3,20);
	}
	
	
	(function game(){
		var startgame=document.getElementById("start");
		startgame.addEventListener('click',startGame);
	
	
	
	function startGame(){
		document.getElementById("tips").style.opacity="0";
		document.getElementsByTagName("h1")[0].style.opacity="0";
		startgame.removeEventListener('click',startgame);
		score();
		
		var planes=new plane();
		planes.paintPlane();
		planes.fire();
		
		let time=setInterval(()=>{
			let army=new Army();
			army.paintArmy();
			army.move();
			//army.Fire();
			(function over(){
				army.boom();
				//canvas动画,自动补帧 window.requestAnimationFrame()函数
				window.requestAnimationFrame(over);
			})()
			
		},300)
		
		
		
		//键盘监听移动
		document.addEventListener('keydown',(event)=>{
			//left  37
				//right  39
				//up 38
				//down  40
			switch(event.keyCode){
				case 37:
					planes.moveLeft();
					break;
				
				case 39:
					planes.moveRight();
					break;
				/*
				case 38:
					planes.moveUp();
					break;
				case 40:
					planes.moveDown();
					break;
				*/
			}
		})
	}
		
	})()
	
	
	
	
</script>
</body>
</html>

上一篇:Cisco anyconnect ***或思科防火墙控制平面黑名单


下一篇:Java小白-如何用线程做飞机大战?