飞鸟

class FlyBird{
constructor() {
this.ele = document.createElement(‘img’);
this.init(); //初始化

}
init(){
	//设置src属性,指定图片
	this.ele.src = 'img/1.gif';
	//加到页面
	document.body.appendChild(this.ele);
	//设置大小
	this.ele.style.width = this.randomInt(50,100) + 'px';
	this.ele.style.height = this.randomInt(50,100) + 'px';
	//定位
	this.ele.style.position = 'absolute';
	//初始化速度
	this.speedX = this.randomInt(3,8);
	this.speedY = this.randomInt(3,8);
	this.fly();
	this.drag();
}
fly(){
	setInterval(()=>{
		let left = this.ele.offsetLeft + this.speedX;
		let top = this.ele.offsetTop + this.speedY;
		//边界
		if(left <= 0){
			left = 0;
			this.speedX *= -1;
		}else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
			left = document.documentElement.clientWidth - this.ele.offsetWidth;
			this.speedX *= -1;
		}
		if(top <= 0){
			top = 0;
			this.speedY *= -1;
		}else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
			top = document.documentElement.clientHeight - this.ele.offsetHeight;
			this.speedY *= -1;
		}
		this.ele.style.left = left + 'px';
		this.ele.style.top = top + 'px';
	},30)
}
drag(){
	this.ele.onmousedown = (evt)=>{
		let e = evt || window.event;
		this.disX = e.offsetX;
		this.disY = e.offsetY;
		document.onmousemove = (evt)=>{
			let e = evt || window.event;
			let left = e.pageX - this.disX;
			let top = e.pageY - this.disY;
			//边界
			if(left <= 0){
				left = 0;
			}else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
				left = document.documentElement.clientWidth - this.ele.offsetWidth;
			}
			if(top <= 0){
				top = 0;
			}else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
				top = document.documentElement.clientHeight - this.ele.offsetHeight;
			}
			this.ele.style.left = left + 'px';
			this.ele.style.top = top + 'px';
		}
		document.onmouseup = function(){
			document.onmousemove = null;
		}
		document.ondragstart = function(){
			return false;
		}
	}
}
randomInt(min,max){
	return Math.floor(Math.random() * (max - min + 1) + min);
}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值