JavaScript鼠标移动不断渲染小球（面向对象）_轨迹球鼠标面向对象-CSDN博客

本文链接：https://blog.csdn.net/weixin_43449246/article/details/118788923

这篇博客介绍了如何使用HTML5的Canvas API创建一个动态小球动画。通过JavaScript，作者展示了如何定义小球类，包括其坐标、半径、颜色等属性，以及如何实现小球的初始化、更新和碰撞检测。随着鼠标的移动，新的小球实例被创建，每个都有不同的运动轨迹，增加了视觉效果。此外，升级版中还加入了小球的透明度和大小变化，增强了动画的动态感。

摘要由CSDN通过智能技术生成

初级版：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
	body{
		background-color: #000000;
	}
	.ball{
		position: absolute;
		border-radius: 50%;
	}
    </style>
</head>

<body>

    <script>
		function Ball(x,y){
			//x,y是圆心坐标
			this.x=x;
			this.y=y;
			this.r=20;
			//小球颜色
			this.color='white';
			this.init();
			//小球和y的增量y
			this.dx=parseInt(Math.random()*20)-10;
			this.dy=parseInt(Math.random()*20)-10;
			ballarr.push(this);//这里的this不是类本身，而是实例
		}
		Ball.prototype.init=function(){
			this.dom=document.createElement('div');
			this.dom.className='ball';
			this.dom.style.width=this.r*2+'px';
			this.dom.style.height=this.r*2+'px';
			this.dom.style.left=this.x-this.r+'px';
			this.dom.style.top=this.y-this.r+'px';
			this.dom.style.backgroundColor=this.color;
			//上树
			document.body.appendChild(this.dom);
		}
		Ball.prototype.update=function(){
			this.x +=this.dx;
			this.y +=this.dy;
			this.dom.style.width=this.r*2+'px';
			this.dom.style.height=this.r*2+'px';
			this.dom.style.left=this.x-this.r+'px';
			this.dom.style.top=this.y-this.r+'px';
		}
		var ballarr=[];
		
		setInterval(function(){
			for(var i=0;i<ballarr.length;i++){
				ballarr[i].update();
			}
		},20)
		document.onmousemove=function(e){
			var x=e.clientX;
			var y=e.clientY;
			new Ball(x,y);
			//当new一个实例的时候，首先会对小球进行初始化，并且渲染到dom,然后这个实例会被追加到数组里。
			//定时器会遍历每一个数组，然后更新小球的轨迹
			//而当鼠标移动的时候，把获得的鼠标定位传入实例，
			//只要不断地移动鼠标，就能不断地创建运动轨迹不一样的实例
		}
    </script>
</body>

</html>

升级版：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: black;
        }

        .ball {
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <script>
        // 小球类
        function Ball(x, y) {
            // 属性x、y表示的是圆心的坐标
            this.x = x;
            this.y = y;
            // 半径属性
            this.r = 20;
            // 透明度
            this.opacity = 1;
            // 小球背景颜色，从颜色数组中随机选择一个颜色
            this.color = colorArr[parseInt(Math.random() * colorArr.length)];
            // 这个小球的x增量和y的增量，使用do while语句，可以防止dX和dY都是零
            do {
                this.dX = parseInt(Math.random() * 20) - 10;
                this.dY = parseInt(Math.random() * 20) - 10;
            } while (this.dX == 0 && this.dY == 0)

            // 初始化
            this.init();
            // 把自己推入数组，注意，这里的this不是类本身，而是实例
            ballArr.push(this);
        }
        // 初始化方法
        Ball.prototype.init = function () {
            // 创建自己的dom
            this.dom = document.createElement('div');
            this.dom.className = 'ball';
            this.dom.style.width = this.r * 2 + 'px';
            this.dom.style.height = this.r * 2 + 'px';
            this.dom.style.left = this.x - this.r + 'px';
            this.dom.style.top = this.y - this.r + 'px';
            this.dom.style.backgroundColor = this.color;
            // 上树
            document.body.appendChild(this.dom);
        };
        // 更新
        Ball.prototype.update = function () {
            // 位置改变
            this.x += this.dX;
            this.y -= this.dY;
            // 半径改变
            this.r += 0.2;
            // 透明度改变
            this.opacity -= 0.01;
            this.dom.style.width = this.r * 2 + 'px';
            this.dom.style.height = this.r * 2 + 'px';
            this.dom.style.left = this.x - this.r + 'px';
            this.dom.style.top = this.y - this.r + 'px';
            this.dom.style.opacity = this.opacity;

            // 当透明度小于0的时候，就需要从数组中删除自己，DOM元素也要删掉自己
            if (this.opacity < 0) {
                // 从数组中删除自己
                for (var i = 0; i < ballArr.length; i++) {
                    if (ballArr[i] == this) {
                        ballArr.splice(i, 1);
                    }
                }
                // 还要删除自己的dom
                document.body.removeChild(this.dom);
            }
        };


        // 把所有的小球实例都放到一个数组中
        var ballArr = [];

        // 初始颜色数组
        var colorArr = ['#66CCCC', '#CCFF66', '#FF99CC', '#FF6666', 
    '#CC3399', '#FF6600'];

        // 定时器，负责更新所有的小球实例
        setInterval(function () {
            // 遍历数组，调用调用的update方法
            for (var i = 0; i < ballArr.length; i++) {
                ballArr[i].update();
            }
        }, 20);

        // 鼠标指针的监听
        document.onmousemove = function (e) {
            // 得到鼠标指针的位置
            var x = e.clientX;
            var y = e.clientY;

            new Ball(x, y);
        };
    </script>
</body>

</html>