js动画之面向对象二
面向对象，就是将一系列具有相同属性的元素提取出来，需要用的时候就new一个。
- 先看效果图：
- 分析：这些小球有相同动作，相同的“外貌”，所以将它提出来封装成一个对象，然后通过点击事件new这个对象。
- 完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {margin: 0;padding: 0;}
div{width: 50px;height: 50px;position: absolute;left: 0;border-radius:50%;background: red;}
</style>
</head>
<body>
<button onclick="addDiv()">click</button>
<script>
function addDiv(){
// new一个div对象
let breakout = new Breakout(20,50);
breakout.init();
}
function Breakout(x,y) { //对象 构造函数
this.x = x;
this.y = y;
}
Breakout.prototype = { //原型方法
init() { //初始化系统
this.createDiv();
this.divStar(); //初始化div
},
createDiv(){
let brick = document.createElement("div");
document.body.appendChild(brick);
this.Odiv = brick;
},
divStar() {
console.log(this)
this.Odiv.style.top = this.y + 'px';
this.Odiv.style.left = this.x + 'px';
this.disX = 3;
this.disY = 3;
this.maxWidth = window.innerWidth - this.Odiv.offsetWidth - this.disX;
this.maxHeight = window.innerHeight - this.Odiv.offsetHeight - this.disY;
this.ballMove();
},
ballMove() { //div开始运动
function auto() {
if (this.x >= this.maxWidth) this.disX *= -1;
if (this.y >= this.maxHeight) this.disY *= -1;
if (this.x < 0) this.disX *= -1;
if (this.y < 0) this.disY *= -1;
this.x += this.disX;
this.y += this.disY;
this.Odiv.style.left = this.x + 'px';
this.Odiv.style.top = this.y + 'px';
window.requestAnimationFrame(auto.bind(this));
}
auto.call(this);
},
}
</script>
</body>
</html>
