ES6面向对象之弹性小球

2018-11-06 本文已影响4人前端来入坑
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>
ES6面向对象之弹性小球

猜你喜欢

热点阅读
