粒子动画-躁动的小球代码全

最新推荐文章于 2024-07-08 17:13:54 发布

大勺孙喜贵

最新推荐文章于 2024-07-08 17:13:54 发布

阅读量679

点赞数

分类专栏： canvas 文章标签： canvas

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
<script>
   //获取到canvas
   var canvas = document.querySelector('#canvas');
   //设置上下文对象
   var ctx = canvas.getContext('2d');
   //设置画布的宽 高
   var w = canvas.width = window.innerWidth;
   var h = canvas.height = window.innerHeight;
   //封装一个随机数函数
   function randomFn(min,max){
       return parseInt(Math.random()*(max-min) + min);
   }
   //创建关于小球的构造函数，x:x轴中心坐标点;y:y轴中心坐标点;size:小球半径；speedx:小球在x轴方向上的速度，speedy: 小球在y轴方向上的速度，
   //color: 小球颜色
   function Ball(x,y,size,speedx,speedy,color){
       this.x = x;
       this.y = y;
       this.size = size;
       this.speedX = speedx;
       this.speedY = speedy;
       this.color = color;
   }
   //绘制小球
   Ball.prototype.draw = function () {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
        ctx.fill();
   }
   //躁动的小球，核心思想不断改变小球的坐标，如果小球到达边界，则将速度设置为相反数，形成了反弹效果
   Ball.prototype.run = function(){
       //当小球处于快超过x轴边界时，取相反速度，就有了反弹效果
       if(this.x + this.size >= w){
           this.speedX = - this.speedX;
       }
       //当小球处于快超过y轴边界时，取相反速度，就有了反弹效果
       if(this.y + this.size >= h){
           this.speedY = - this.speedY;
       }
       if(this.x - this.size <= 0){
           this.speedX = -this.speedX;
       }
       if(this.y - this.size <= 0){
           this.speedY = -this.speedY;
       }
       //当小球的速度恰好随机为0时，小球是静止在页面上的，从体验角度上来说不太美观，所以当在x轴的速度与在y轴的速度同时为0时，重新定义速度
       if(this.speedX == 0 && this.speedY == 0){
           this.speeX = randomFn(-7,7);
           this.speedY = randomFn(-7,7);
       }


       this.x += this.speedX;
       this.y += this.speedY;
   }

   //当两个小球相撞或有重叠时，改变颜色
   Ball.prototype.xiangzzhuang = function(){
       for(var i = 0 ; i < balls.length; i++){
           if(!(this === balls[i])){
               //此处运用到了勾股定理
               var dx = this.x - balls[i].x;
               var dy = this.y - balls[i].y;
               var distance = Math.sqrt(dx*dx+dy*dy);
               if(distance < this.size + balls[i].size){
                   balls[i].color = this.color = 'rgb('+ randomFn(0,255) +',' + randomFn(0,255) + ',' + randomFn(0,255)  + ')';
               }
           }
       }
   }
   var balls = [];
   function loop(){
       //绘制画布的背景颜色
       ctx.fillStyle = 'rgba(0,0,0,0.3)';
       ctx.fillRect(0,0,w,h);
       //创建30个小球
        while(balls.length < 30){
            var ball = new Ball(
                randomFn(0,w),
                randomFn(0,h),
                randomFn(10,20),
                randomFn(-7,7),
                randomFn(-7,7),
                'rgb('+ randomFn(0,255) +',' + randomFn(0,255) + ',' + randomFn(0,255)  + ')'
            )
            balls.push(ball);
        }

        for(var i = 0; i < balls.length; i++){
            balls[i].draw();
            balls[i].run();
            balls[i].xiangzzhuang();
        }
        //window提供的API动画，以电脑屏幕刷新频率为基准（16.6ms就刷新一次，人类肉眼根本觉察不到），所以不会造成动画卡顿的现象
       window.requestAnimationFrame(loop);
   }
   loop();
</script>
</html>