18 - 五彩小球 - 面向对象

---

HTML结构

Css样式

Js代码

// Underscore是一个类库,上面有好多方法,网上可以下载到

// 外链一个面向对象文件

/**
 * 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);
        }
    }
}

特效展示

五彩小球