js写飞机大战_地图，我方战机发射子弹

ゝ一纸荒年。 2022-05-10 10:08 186阅读 0赞

效果图：

![70][]

代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		
    	</body>
    </html>
    <script type="text/javascript">
    
    //飞机大战中每个javascript对象都对应着dom对象
    //javascript对象中存储着每个dom对象的数据。
    
    //面向对象做飞机大战。
    //一、项目中有哪些类
    //地图类，移动的物体（敌机类，我方战机类，子弹类）
    
    function Map(obj){
    	this.domObj = null;//地图的dom对象，是JavaScript对象对应的dom对象
    	this.width = obj.width;
    	this.height = obj.height;
    	this.bgImg = obj.bgImg;	
    	this.myPlanes = [];//我方战机数组
    	this.enemyPlanes = [];//敌方战机数组
    	this.createUI();
    }
    
    Map.prototype.createUI = function(){
    	this.domObj  = document.createElement("div");
    	this.domObj.style.cssText = "position:relative;overflow:hidden";
    	this.domObj.style.width = this.width+"px";
    	this.domObj.style.height = this.height+"px";
    	this.domObj.style.backgroundImage = "url("+this.bgImg+")";
    	document.body.appendChild(this.domObj);
    }
    
    //移动的物体
    function MoverObj(obj){
    	if(arguments.length>0){
    		let defaultObj = {
    			map:null,//所属的地图对象（JavaScript对象）
    			width : 0,
    			height : 0,
    			left : 0,
    			top : 0,
    			bgImg :"",
    			directionLeft : 0,
    			directionTop : 0,
    			incLeft : 0,
    			incTop : 0,
    			timeSpace : 16
    		};
    		//把传来的数据赋给defaultObj;
    		for(let key in obj){
    			defaultObj[key] = obj[key]; 
    		}
    		
    		for(let key in defaultObj){
    			this[key] = defaultObj[key];
    		}
    		
    		this.domObj = null;//DOM对象	
    		this.myTimer = null;		
    		this.createUI();
    	}
    }
    
    MoverObj.prototype.createUI = function(){
    	this.domObj  = document.createElement("div");
    	this.domObj.style.cssText = "position:absolute";
    	this.domObj.style.width = this.width+"px";
    	this.domObj.style.height = this.height+"px";
    	this.domObj.style.left = this.left+"px";
    	this.domObj.style.top = this.top+"px";
    	this.domObj.style.backgroundImage = "url("+this.bgImg+")";
    	this.domObj.setAttribute("ord",this.ord);
    	this.map.domObj.appendChild(this.domObj);
    }
    
    MoverObj.prototype.go = function(){
    	this.myTimer = setInterval(()=>{
    		this.left = this.left+this.directionLeft*this.incLeft;
    		this.top = this.top+this.directionTop*this.incTop;
    		
    		this.judgeEdge&&this.judgeEdge();//调用子类特有处理边界的函数
    		
    		this.domObj.style.left = this.left +"px";
    		this.domObj.style.top = this.top +"px";
    
    	},this.timeSpace);
    }
    
    function MyPlane(obj){
    	//建立继承关系
    	MoverObj.apply(this,arguments);//继承父类的所有的属性
    	this.bullets = [];
    }
    //建立继承关系，继承的是父类的prototype方法
    MyPlane.prototype = new MoverObj();
    
    MyPlane.prototype.addEvent = function(){
    	this.map.domObj.onmousemove = (event)=>{
    		
    		let evt = event || window.event;
    		//地图距离页面左上角的距离
    		let offsetLeft = this.map.domObj.offsetLeft;
    		let offsetTop = this.map.domObj.offsetTop;
    		
    		this.left = evt.pageX - offsetLeft - this.width/2;
    		this.top = evt.pageY - offsetTop - this.height/2;
    		
    		if(this.left<=0){
    			this.left=0;
    		}else if(this.left>=this.map.width-this.width){
    			this.left=this.map.width-this.width;
    		}
    		
    		if(this.top<=0){
    			this.top=0;
    		}else if(this.top>=this.map.height-this.height){
    			this.top=this.map.height-this.height;
    		}
    		
    		this.domObj.style.left = this.left+"px";
    		this.domObj.style.top = this.top+"px";		
    	}
    }
    
    //射击（发射子弹）
    MyPlane.prototype.shoot = function(){
    	//启动定时器创建子弹
    	let ord = 0;
    	setInterval(()=>{
    		ord++;
    		let b = new Bullet({
    			map:this.map,
    			myPlane:this,
    			width : 6,
    			height : 14,
    			left : this.left+(this.width-6)/2,
    			top : this.top-14,
    			bgImg : "img/bullet1.png",
    			directionTop : -1,
    			incTop : 21,
    			timeSpace : 200,
    			ord:ord
    		});
    		b.go();
    		this.bullets.push(b);
    	},200);
    }
    
    //子弹
    function Bullet(obj){
    	MoverObj.apply(this,arguments);
    	obj.myPlane = obj.myPlane;//子弹所属的战机
    }
    
    Bullet.prototype = new MoverObj();
    
    Bullet.prototype.judgeEdge = function(){
    	if(this.top<=-this.height){
    		//删除（停定时器，删数组，删外观）
    		window.clearInterval(this.myTimer);
    		//1)、删数组（在我方战机的子弹数组里删除）
    		let index = this.myPlane.bullets.indexOf(this);
    		this.myPlane.bullets.splice(index,1);
    		
    		//2)、删外观
    		this.domObj.parentNode.removeChild(this.domObj);		
    	}
    }
    
    
    function EnemyPlane(){
    	MoverObj.apply();	
    }
    EnemyPlane.prototype = new MoverObj();
    
    
    window.onload = function(){
    	//二、步骤
    	//1、地图
    	let m = new Map({
    		width:480,
    		height:600,
    		bgImg:"img/bg.jpg"
    	});
    	
    	//2、我方战机
    	let myPlane = new MyPlane({
    		map:m,//我方战机所属的地图对象
    		width : 98,
    		height : 122,
    		left : (m.width-98)/2,
    		top : m.height-122,
    		bgImg : "img/me.png"
    	});
    	myPlane.addEvent();
    	myPlane.shoot();
    	
    	
    }
    
    
    
    </script>

[70]: /images/20220510/443e12a88fae4b2599aaefeb694bed16.png