面向对象原生JavaScript案例炫彩小球

面向对象其实对于初学者来说还是比较难以理解的，以前看到一个面试题目 面向对象是什么？ 面向对象是一种思想，千万别入坑了；

这次给大家带来的是一个鼠标移动产生小球的案例，不是我不想给大家分享如何去认识面向对象，因为我觉得，做案例比什么画图理解，或者是字面意思更好理解一点；

那么来吧宝贝；

先上点简单的CSS

<style type="text/css">
        *{margin: 0;padding: 0;}
        body{background: #000;}
</style>

再来HTML

<div id="box">
        <div class="ball"></div>
</div>

最后重头戏来了JavaScript

<script>
        //构造一个函数
        function Ball(x,y,r){
            //x,y,r等待传参
            this.x = x;
            this.y = y;
            this.r = r;
            //透明度
            this.opacity=0.5;
            //随机生成散发的位置，如果等于零，则再次循环随机
            do{
                this.dx = parseInt(Math.random()*10)-5;
                this.dy = parseInt(Math.random()*10)-5;
            }while(this.dx ==0 && this.dy ==0)
            //颜色放入数组
            var colors = ["#996","#c1c","#c63","#85a","#19c","#6cc","#96c",'#f90', '#ff0', '#09c', '#c06', '#f99', '#9c3','#6cc', '#9cc'];
            //随机获取颜色数组的下标
            this.color = colors[parseInt(Math.random()*colors.length)];

            //初始化
            this.init();
            //把当前这个小球放入下面的数组里面
            BallArr.push(this);
        }

        //初始化样式,上树
        Ball.prototype.init = function(){

            //生成div放入this.dom中
            this.dom = document.createElement("div");
            //在#box中插入这个(this.dom)里面
            document.getElementById("box").appendChild(this.dom);
　　　　　　　//当然大家也可以不用把样式也在这里面可以放到css里面然后加一个className
            //小球样式
            //小球定位
            this.dom.style.position = "absolute";
            //left值等于x轴减去半径
            this.dom.style.left = this.x - this.r +"px";
            //top值等于y轴减去半径
            this.dom.style.top = this.y - this.r +"px";
            //width等于半径*2
            this.dom.style.width = this.r*2 +"px";
            //height等于半径*2
            this.dom.style.height = this.r*2 +"px";
            //backgroundColor等于上面颜色的随机数组
            this.dom.style.backgroundColor = this.color;
            //div方体变圆形
            this.dom.style.borderRadius = "50%";
            //拿到透明度
            this.dom.style.opacity = this.opacity;

        }
        //更新移动
        Ball.prototype.update = function(){
            //移动的位置等于x,y加上自己
            this.x += this.dx;
            this.y += this.dy;
            //更新的时候半径慢慢变小
            this.r--;
            //如果0大于等于更新的半径则执行goDiu()移除;
            if(this.r <=0){
                this.goDiu()
            }
            //只更新半径是没用的,所以我们也要把上面的样式也整体更新一下,不然小球很生硬
            this.dom.style.left = this.x - this.r +"px";
            this.dom.style.top = this.y - this.r +"px";
            this.dom.style.width = this.r * 2 +"px";
            this.dom.style.height = this.r * 2 +"px";
        }
        //移除小球
        Ball.prototype.goDiu = function(){
            //找到父元素(#box)才能删掉子元素(this.dom)
            document.getElementById("box").removeChild(this.dom);
            //for循环进行删除,反过来循环才不会影响数组的位置和判断
            for(var i = BallArr.length-1; i>=0; i--){
                //如果BallArr下标等于当前的数组的下标
                if(BallArr[i]=== this){
                    //删除BallArr的一项
                    BallArr.splice(i,1);
                }
            }
        }
        // console.log(this.x);
        // 每次new一个Ball就放到这个数组里面
        var BallArr = [];
        //创建一个定时器,每20毫秒更新一次
        setInterval(function(){
            //循环BallArr的下标来更新
            for(var i = 0;i<BallArr.length;i++){
                BallArr[i].update();
            }

        },20)
        //添加鼠标移动DOM操作
        document.onmousemove = function(e){
            //获取鼠标移动的x轴位置
            var x = e.clientX;
            //获取鼠标移动的y轴位置
            var y = e.clientY;
            //传参x,y,半径;
            new Ball(x,y,30);
        }
    </script>

这个案例基本上每一步，我都分析出来了，应该是比较好理解的；

自己也写了一遍；等下我上传到服务器上面给大家发个演示吧

还是一样的如果本文有上面技术问题，或者措辞问题大家可以在面留言