ES6面向对象之弹性小球.gif
还不知道ES6继承的小伙伴可以参考https://www.jianshu.com/p/3d09c6fe330e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6面向对象之弹性小球</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
class Ball{
constructor(domObj,num,width,height,bgColor,left,top,leftInc,topInc,timespace,leftDirection,topDirection) {
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
this.domObj = domObj;
this.num = num || null;
this.width = width || 100;//宽高颜色
this.height = height || 100;
this.bgColor = bgColor || randomRgbColor();
this.left = left || newRandom(50,clientWidth-scrollLeft-this.width);//当前位置
this.top = top || newRandom(50,clientHeight-scrollTop-this.height);
this.leftInc = leftInc || newRandom(2,4);//速度
this.topInc = topInc || newRandom(2,4);
this.timespace = timespace || newRandom(5,20);
this.leftDirection = leftDirection ||newRandom(1,2);//方向
this.topDirection = topDirection || newRandom(1,2);
this.myTimer = null;
}
//小球碰撞弹回
}
class moveBall extends Ball{
constructor(domObj,num,width,height,bgColor,left,top,leftInc,topInc,timespace,leftDirection,topDirection) {
super(domObj,num,width,height,bgColor,left,top,leftInc,topInc,timespace,leftDirection,topDirection)//继承并调用父类的参数
}
go() {
this.myTimer = setInterval(() => {
this.left = this.left + this.leftInc*this.leftDirection;//改变球球当前位置
this.top = this.top + this.topInc*this.topDirection;
//网页网页被卷去的高和左
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
//网页可视区域宽高
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (this.left-scrollLeft <= 0) {
//碰到左边缘改变方向
this.leftDirection = 1;
//横向滚动掉的距离>可视区域的宽度-球球的宽度
//offsetWidth返回元素的padding+border+width属性之和
}else if(this.left - scrollLeft>=clientWidth - this.domObj.offsetWidth) {
//碰到右边缘改变方向
this.leftDirection = -1;
}
if (this.top-scrollTop <= 0) {
//碰到上边缘改变方向
this.topDirection = 1;
//纵向滚动掉的距离>可视区域的高度-球球的高度
}else if(this.top - scrollTop>=clientHeight - this.domObj.offsetHeight) {
//碰到下边缘改变方向
this.topDirection = -1;
}
//改变小球位置
this.domObj.style.left = this.left + "px";
this.domObj.style.top = this.top + "px";
this.domObj.style.backgroundColor = this.bgColor;
this.domObj.style.width = this.width + "px";
this.domObj.style.height = this.height + "px";
this.domObj.style.position = "absolute";
this.domObj.style.borderRadius = "50%";
},this.timespace);
}
}
window.onload = function() {
let ballnum = (num) => {
let that = num;
console.log(that);
for (let i=0; i<num; i++) {
//创建出小球
let myDiv = document.createElement('div');
myDiv.id = "ball"+i;
document.body.appendChild(myDiv);
let ball = new moveBall($("ball"+i),that);
ball.go();//调用子类中的方法
}
}
//调用，可以传入多个球，目前用3个演示
ballnum(3);
}
function newRandom(x,y) {
//x-y里面的随机整数获取
let a = Math.floor(Math.random()*(y-x))+x;
return a;
}
function randomRgbColor() {
//生成随机RGB颜色
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b}`;
}
</script>
</body>
</html>
