JavaScript高级学习之彩色小球球-阿里云开发者社区

JavaScript高级学习之彩色小球球

2022-12-28 83

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript高级学习之彩色小球球

js实现小球跟随鼠标移动

相信有很多朋友们，都没有见过这个库吧，也许你知道jQuery、bootstrap等等，但是这个说实话我也是最近才用到的，Underscore.js是一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象，Underscore提供了100多个函数,包括常用的: map, filter, invoke当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等。

Underscore官网

这是实现的效果。

首先大家需要知道onmousemove的意思

<div onmousemove="myFunction()">鼠标指针移动到这。</div>

菜鸟教程onmousemove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五彩小球</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html, body, #box{
            width: 100%;
            height: 100%;
        }
        #box{
            background-color: #000;
        }
    </style>
</head>
<body>
    <div id="box"></div>
<script src="js/Underscore-min.js"></script>
<script src="js/Ball.js"></script>
<script>
    // 1. 获取标签
    var box = document.getElementById('box');
    // 2. 监听鼠标在盒子上的移动
    // 颜色数组 和 小球数组
    var colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'purple', 'pink'];
    var ballArr = [];
    box.onmousemove = function (ev1) {
        var e = ev1 || window.event;
        // 2.1 创建小球,装入小球数组
        var ball = new Ball({
                parentId: 'box',
                left: e.clientX,
                top: e.clientY,
                bgColor:colorArr[_.random(0, colorArr.length - 1)]
                });
        ball.render();
        ballArr.push(ball);
    };
   // 3. 定时器
    setInterval(function () {
        // 清除上一帧产生的小球
        for(var i=0; i<box.children.length; i++){
            box.children[i].remove();
        }
        // 绘制小球和让小球移动
        for(var j=0; j<ballArr.length; j++){
            ballArr[j].render();
            ballArr[j].update();
        }
    }, 50);
</script>
</body>
</html>

还有两个js文件：

function Ball(options) {
    this._init(options);
}
Ball.prototype = {
    _init: function (options) {
        options = options || {};
        // 1. 必要的属性
        this.parentId = options.parentId;
        this.left = options.left;
        this.top = options.top;
        this.r = 60;
        this.bgColor = options.bgColor || 'red';
        // 2. 小球变化的量
        this.dX = _.random(-5, 5);
        this.dY = _.random(-5, 5);
        this.dR = _.random(1, 3);
    },
    render: function () {
        var parentNode = document.getElementById(this.parentId);
        var childNode = document.createElement('div');
        parentNode.appendChild(childNode);
        childNode.style.position = 'absolute';
        childNode.style.left = this.left + 'px';
        childNode.style.top = this.top + 'px';
        childNode.style.width = this.r + 'px';
        childNode.style.height = this.r + 'px';
        childNode.style.borderRadius = '50%';
        childNode.style.backgroundColor = this.bgColor;
    },
    update: function () {
        this.left += this.dX;
        this.top += this.dY;
        this.r -= this.dR;
        if(this.r <= 0){
            this.r = 0;
            ballArr = _.without(ballArr, this);
        }
    }
};