JavaScript躁动的小球面向对象实现
2017-04-20 本文已影响0人
LorenaLu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
body,html {
height: 100%;
}
#wrap {
height: 100%;
background-color: black;
position: relative;
}
.boll {
border-radius: 50%;
position: absolute;
}
</style>
<script type="text/javascript">
// 工具函数，产生[min, max)范围内的随机数
// min <= x < max;
function randFn(min, max) {
return parseInt(Math.random() * (max-min) + min);
}
// 创建构造函数，由构造函数获取小球对象
function Boll () {
// 小球的尺寸：随机数
var wh = randFn(20, 50);
this.width = wh;
this.height = wh;
// 小球初始坐标点
this.left = randFn(0, document.body.offsetWidth-wh);
this.top = randFn(0, document.body.offsetHeight-wh);
// 小球颜色：随机
this.color = 'rgba(' + randFn(0,256) + ',' + randFn(0,256) + ',' + randFn(0,256) + ',' + Math.random() + ')';
// 小球运动速度:随机
this.speedX = randFn(-10, 10);
this.speedY = randFn(-10, 10);
// 开辟属性，保存创建出来的DOM节点
this.div = document.createElement('div');
}
// 添加绘制小球的方法
Boll.prototype.draw = function () {
this.div.className = 'boll';
this.div.style.width = this.width + 'px';
this.div.style.height = this.height + 'px';
this.div.style.left = this.left + 'px';
this.div.style.top = this.top + 'px';
this.div.style.backgroundColor = this.color;
// 把标签拼接进文档流
var wrap = document.querySelector('#wrap');
wrap.appendChild(this.div);
}
Boll.prototype.run = function () {
console.log(this);
var self = this;
setInterval(function () {
if (self.div.offsetLeft + self.div.offsetWidth >= document.body.offsetWidth || self.div.offsetLeft < 0) {
self.speedX *= -1;
}
if (self.div.offsetTop + self.div.offsetHeight >= document.body.offsetHeight || self.div.offsetTop < 0) {
self.speedY *= -1;
}
self.div.style.left = self.div.offsetLeft + self.speedX + 'px';
self.div.style.top = self.div.offsetTop + self.speedY + 'px';
}, 10);
}
window.onload = function () {
for (var i = 0; i < 100; i++) {
var boll = new Boll();
boll.draw();
boll.run();
}
}
</script>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>
