18 - 五彩小球 - 面向对象

HTML结构

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

Css样式

<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #ball {
            width: 100%;
            height: 100%;
            background-color: #000;
        }
</style>

Js代码

// Underscore是一个类库,上面有好多方法,网上可以下载到
<script src="js/Underscore-min.js"></script>
// 外链一个面向对象文件
<script src="js/ColorBall.js"></script>
/**
 * 1.构造函数
 * @param option 可选参数
 * @constructor
 */

function ColorBall(option) {
    this._init(option);
}


/**
 * 2.构造函数的原型库
 * @type {{constructor: ColorBall}}  构造器:构造函数
 */

ColorBall.prototype = {

    // 获得当前构造函数
    constructor: ColorBall,

    // 1. 添加属性
    _init: function (option) {
        var option = option || {};
        // 1.1 必要的属性
        this.parentId = option.parentId;
        this.x = option.x || 0;
        this.y = option.y || 0;
        this.r = 60;
        this.bgColor = option.bgColor || 'green';

        // 1.2 变化的属性
        this.dX = _.random(-5, 5);
        this.dY = _.random(-5, 5);
        this.dR = _.random(1, 3);

        // 1.3 把实例化的小球装入数组
        ballArr.push(this);
    },

    // 2. 绘制小球
    render: function () {

        // 2.1 创建节点
        var parentNode = document.getElementById(this.parentId);
        var childNode = document.createElement('div');
        parentNode.appendChild(childNode);

        // 2.2 设置定位
        parentNode.style.position = 'relative';
        childNode.style.position = 'absolute';

        // 2.3 设置属性
        childNode.style.left = this.x + 'px';
        childNode.style.top = this.y + 'px';
        childNode.style.width = this.r + 'px';
        childNode.style.height = this.r + 'px';
        childNode.style.borderRadius = '50%';
        childNode.style.backgroundColor = this.bgColor;
    },

    // 3. 小球开始运动
    update: function () {

        // 3.1 小球位置的变化轨迹
        this.x += this.dX;
        this.y += this.dY;
        this.r -= this.dR;

        // 3.2 判断半径值
        if (this.r < 0) {
            this.r = 0;

            // 如果小球的半径小于0的话 就把小球移除数组
            ballArr = _.without(ballArr, this);
        }
    }
}


<script>
    // 1. 获取标签
    var ball = document.getElementById('ball');

    // 2. 定义小球数组和颜色数组
    var ballArr = [];
    var colorArr = ['pink', 'red', 'purple', 'blue', 'green', 'orange', 'skyblue', 'white'];

    // 3. 创建小球装入数组
    ball.onmousemove = function (event) {
        var event = event || window.event;
        new ColorBall({
            parentId: 'ball',
            x: event.clientX,
            y: event.clientY,
            bgColor: colorArr[_.random(0, colorArr.length - 1)]
        });
    }

    // 4. 开始定时器
    setInterval(function () {
        // 4.1 先把创建的div清屏
        for (var i = 0; i < ball.children.length; i++) {
            ball.removeChild(ball.children[i]);
        }

        // 4.2 绘制小球和小球的动画
        for (var i = 0; i < ballArr.length; i++) {
            ballArr[i].render();
            ballArr[i].update();
        }
    }, 50);
</script>

特效展示

五彩小球