飞机大战02_可以有两个玩家，可以击中飞机，可以有积分，可以暂停

客官°小女子只卖身不卖艺 2022-05-10 10:08 148阅读 0赞

代码：

1、地图类，文件名：map.js

//地图类，移动的物体（敌机类，我方战机类，子弹类）
    
    let singlton = (function(){	
    	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.score = null;//积分板。
    		this.createUI();
    	}
    	
    	Map.prototype.createUI = function(){
    		this.domObj  = document.createElement("div");
    		this.domObj.style.cssText = "position:relative;overflow:hidden";
    		//this.domObj.style.cssText = "position:relative";
    		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);
    	}
    
    	let instance;
    	
    	return {
    		getInstance:function(obj){
    			if(instance==undefined){
    				instance = new Map(obj);
    			}else{
    				for(let key in obj){
    					instance[key]  = obj[key];	
    				}
    			}
    			return instance;
    		}
    	}
    	
    })();

2、移动的物体（敌机，我方战机，子弹的父类），文件名：MoverObj.js

//移动的物体
    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,
    			domObj : null,//DOM对象	
    			myTimer : null,
    			isPause:false
    		};
    		//把传来的数据赋给defaultObj;
    		for(let key in obj){
    			defaultObj[key] = obj[key]; 
    		}
    		
    		for(let key in defaultObj){
    			this[key] = defaultObj[key];
    		}		
    		this.createUI();
    		this.gameControl();//订阅游戏的控制
    	}
    }
    
    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.style.backgroundSize=this.width+"px "+this.height+"px";
    	this.domObj.setAttribute("ord",this.ord);	
    	this.map.domObj.appendChild(this.domObj);
    }
    
    MoverObj.prototype.go = function(){
    	this.myTimer = setInterval(()=>{
    		
    		if(this.isPause){
    			return;
    		}
    		//一、移动
    		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";
    	
    		//2、移动的同时要完成的事情。
    		this.subDo&&this.subDo();
    
    	},this.timeSpace);
    }
    
    MoverObj.prototype.gameControl = function(){
    	gameObj.addSubscriber((isPause)=>{
    		this.isPause = isPause;
    	});
    }

3、我方战机，文件名：myPlane.js

4、子弹类，文件名：bullet.js

//子弹
    function Bullet(obj){
    	MoverObj.apply(this,arguments);
    	obj.myPlane = obj.myPlane;//子弹所属的战机
    }
    
    Bullet.prototype = new MoverObj();
    
    Bullet.prototype.judgeEdge = function(){
    	if(this.top<=-this.height){
    		this.die();
    	}
    }
    
    //子弹消失
    Bullet.prototype.die = function(){
    	//删除（停定时器，删数组，删外观）
    	window.clearInterval(this.myTimer);
    	//1)、删数组（在我方战机的子弹数组里删除）
    	let index = this.myPlane.bullets.indexOf(this);
    	this.myPlane.bullets.splice(index,1);
    	
    	//2)、删外观
    	this.domObj.parentNode&&this.domObj.parentNode.removeChild(this.domObj);
    
    }
    
    Bullet.prototype.subDo = function(){
    	this.isHited();
    }
    
    //是否击中敌机
    Bullet.prototype.isHited = function(){
    	
    	//循环所有敌机
    	let enemyPlanes = this.map.enemyPlanes;
    	for(let i in enemyPlanes){
    		//子弹的位置
    		let bLeft = this.left;
    		let bRight = this.left+this.width;
    		let bTop = this.top;
    		let bBottom = this.top+this.height;
    		//敌机的位置
    		let eLeft = enemyPlanes[i].left;
    		let eRight = enemyPlanes[i].left+enemyPlanes[i].width;
    		let eTop = enemyPlanes[i].top;
    		let eBottom= enemyPlanes[i].top+enemyPlanes[i].height;
    		
    		//横向：子弹右边大于等于敌机的左边，子弹左边小于等于敌机的右边
    		//纵向：子弹的上边小于等于敌机下边，子弹下边大于等于敌机的上边
    		if((bRight>=eLeft && bLeft<=eRight)
    			&&
    			(bTop<=eBottom && bBottom>=eTop)
    			&&
    			(eTop>=0)
    		){
    			//子弹消失
    			this.die();
    			//敌机消失
    			enemyPlanes[i].boom();
    			//我方战机的积分增加
    			this.myPlane.addScore(enemyPlanes[i].level);
    			break;
    		}		
    	}
    }

5、敌机类，文件名：enemyPlane.js

6、积分板类，文件名：score.js

7、观察者模式（为游戏暂停服务），文件名：observer.js

//发布订阅模式的代码
    var observer = {
    	//订阅（订阅功能）
    	addSubscriber:function(callback){
    		this.subscribers.push(callback);//
    	},
    	
    	//退订(功能)
    	removeSubscriber:function(callback){
    		let index = this.subscribers.indexOf(callback);
    		this.splice(index,1);
    	},
    	
    	//发布
    	publish:function(what){
    		for(let i in this.subscribers){
    			if(typeof this.subscribers[i]==='function'){
    				this.subscribers[i](what);
    			}
    		}
    	},
    	
    	//让某个对象具备发布订阅功能
    	make:function(obj){
    		for(let key in this){
    			obj[key] = this[key];
    		}
    		obj.subscribers=[];
    	}
    }

8、HTML文件，plane.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<input type="button" id="btnPause" value="游戏暂停" />
    	</body>
    </html>
    <script ></script>
    
    <script type="text/javascript" src="js/score.js" ></script>
    <script type="text/javascript" src="js/map.js" ></script>
    <script type="text/javascript" src="js/MoverObj.js" ></script>
    <script type="text/javascript" src="js/myPlane.js" ></script>
    <script type="text/javascript" src="js/enemyPlane.js" ></script>
    <script type="text/javascript" src="js/bullet.js" ></script>
    <script type="text/javascript" src="js/observer.js"></script>
    <script type="text/javascript">
    
    //定义一个观察者对象,游戏控制
    let gameObj = {
    	
    };
    observer.make(gameObj);
    gameObj.isPause = false;
    
    //当游戏暂停时，需要通知各个对象；
    gameObj.toggle=function(){
    	this.isPause = !this.isPause;
    	this.publish(this.isPause);
    }
    
    
    window.onload = function(){
    	document.getElementById("btnPause").onclick = function(){
    		this.value = this.value=="游戏暂停"?"游戏继续":"游戏暂停";
    		gameObj.toggle();		
    	}
    	//二、步骤
    	//1、地图
    	
    	let m = singlton.getInstance({
    		width:480,
    		height:600,
    		bgImg:"img/bg.jpg"
    	});
    
    	//2、我方战机
    	let myPlane1 = new MyPlane({
    		map:m,//我方战机所属的地图对象
    		name:"张尧",
    		width : 98,
    		height : 122,
    		left : (m.width-98)/2,
    		top : m.height-122,
    		bgImg : "img/me.png",
    		incLeft:10,
    		incTop:10,
    		leftKey:37,
    		topKey:38,
    		rightKey:39,
    		downKey:40
    	});
    	myPlane1.addEvent();
    	myPlane1.shoot();
    	m.myPlanes.push(myPlane1);//把创建的飞机放到飞机数组
    	
    	let myPlane2 = new MyPlane({
    		map:m,//我方战机所属的地图对象
    		name:"路鹏",
    		width : 96,
    		height : 57,
    		left : (m.width-96)/2,
    		top : m.height-57,
    		bgImg : "img/myplane.png",
    		incLeft:10,
    		incTop:10,
    		leftKey:65,//a键
    		topKey:87,//w键
    		rightKey:68,//d键
    		downKey:83//s键
    	});
    	myPlane2.addEvent();
    	myPlane2.shoot();
    	m.myPlanes.push(myPlane2);//把创建的飞机放到飞机数组
    	
    	//3、创建敌机
    	createEnemyPlane(m);
    	
    	
    	//4、创建积分板
    	let score = new Score({
    		map:m,
    		width : 200,
    		height: 50,
    		bgColor:"pink",
    		fontSize : "18px",
    		color : "green"
    	});	
    }
    
    function createEnemyPlane(m){
    	let ord=0;
    	setInterval(function(){
    		if(gameObj.isPause){
    			return;
    		}
    		ord++;
    		let e = new EnemyPlane({
    			map:m,//所属地图
    			width : 59,
    			height : 36,
    			left : parseInt(Math.random()*(m.width-59)),
    			top : -36,
    			bgImg : "img/plain1.png",
    			directionTop : 1,
    			incTop : 36,
    			timeSpace : 1000,
    			ord:ord,
    			boomImgs:["img/plain1_die1.png","img/plain1_die2.png","img/plain1_die3.png"],
    			level:10
    		});
    		m.enemyPlanes.push(e);
    		e.go();
    	},1000);
    }
    
    </script>