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);
}
}