JS面向对象--对象创建实例

一.此实例主要进行了面向对象以构造函数方式创建的简单应用
html+css

#wrap{width:500px;height:500px;	border:1px solid red;position:relative;}
#target{position:absolute;width:100px;height:50px;background:green; left:200px; }
 .bullet{width:30px;	height:30px;background:red;position:absolute;bottom:0;left:235px; }
 
<div id="wrap">
		<div id="target">div>
	div>

JS部分：

var wrap=document.querySelector("#wrap");
	var target=document.querySelector("#target");
	target.blood=100;//自定义子弹打击物的血量属性
	target.isdie=false;//自定义当前子弹打击物的是否存活属性
//创建子弹函数
//每一个子弹添加一个计时器来进行移动
	// function createBullets(parent){
	// 	var bullet=document.createElement('div');
	// 	bullet.className='bullet';
	// 	parent.appendChild(bullet);

	// }
	
//构造函数-->可以替换上面的创建子弹函数的写法
	function Bullets(parent){
		this.tag=document.createElement('div');
		//给标签添加属性名--即添加className
		this.tag.className='bullet';
		//要先进行标签的创建和添加到父元素，然后获取标签的属性值才可以获得其中的值
		this.add=function(){
			parent.appendChild(this.tag);
		}
		this.move=function(){
			var currentTop=this.tag.offsetTop;
			var bullet=this.tag;
			//在计时器中不要使用this，计时器是window的函数，如果使用this，指代的是window
			var timer=setInterval(function(){
				currentTop-=10;
				if(currentTop<=target.offsetHeight)
					{	
					target.blood-=100;//打击物收到撞击之后的掉血
					clearInterval(timer);
					bullet.remove();
					//判断当血量为0时的结果,并且根据打击物的自定义属性判断当前如果打击物的target.isdie属性为true时不再走下面的if循环语句
				    if(target.blood<=0&&target.isdie==false)
				    	{
				    		target.isdie=true;
				    		alert("game over!");
				            clearInterval(timer);
				    		target.remove();//打击物消失
				    	}	
				    }
      	bullet.style.top=currentTop+'px';
			},100); 
	
		}
		//如果想要实现标签的创建并且添加到父元素超前于属性值的获得，可以在构造函数中就调用这个函数，即进行如下操作：
		this.add();
	}
	wrap.onclick=function()
	{var bullet=new Bullets(this);
		bullet.move();}

实例及效果说明：
1.target自定义属性的使用方法
此处进行了两个自定义属性的定义：
target.blood=100;//自定义子弹打击物的血量属性
target.isdie=false;//自定义当前子弹打击物的是否存活属性
其中,被打击物的isdie属性最后与血量属性的与判断决定了打击物最终的形态。
2.面向对象的构造函数的写法以及其中的this的指代方法的使用