效果图:
代码:
<!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>