躁动小球--鼠标圆形绘制

最新推荐文章于 2022-02-16 14:08:47 发布

置顶 HeiShanLaoYao889

最新推荐文章于 2022-02-16 14:08:47 发布

阅读量441

点赞数 1

分类专栏： JavaScript 文章标签： JS特效面向对象封装

本文链接：https://blog.csdn.net/TomBody/article/details/54428769

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>躁动的小球</title>
    <style media="screen">
      *{
        margin: 0px;
        padding: 0px;
      }
      #canvas{
        box-shadow: 0px 0px 10px black;
        display: block;
        margin: 50px auto;
        background: black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="800" height="800"></canvas>

  </body>
  <script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //随机函数
    function randomSize(min,max){
      return Math.floor(Math.random()*(max -min)+min);
    }
    // function randomColor(){
    //   var r = randomSize(0,255);
    //   var g = randomSize(0,255);
    //   var b = randomSize(0,255);
    //    return "rgb(" + r +"," + g + "," + b +")";
    // }

    //创建小球对象
    function Ball(){
      var speedX,speedY;
      //速度
      speedX = randomSize(1,3);
      speedY = randomSize(1,3);

      //半径
      this.r = randomSize(5,8);
      //圆心
      this.x = randomSize(this.r,canvas.width-this.r);
      this.y = randomSize(this.r,canvas.height -this.r);
      //方向
      this.speedX = randomSize(1,3) == 1 ? speedX : -speedX;
      this.speedY = randomSize(1,3) == 1 ? speedY : -speedY;
      //颜色
      this.color = "green";
    }
    //定义方法绘制小球
    Ball.prototype.draw = function(){
      ctx.beginPath();
      ctx.arc(this.x,this.y,this.r,0,360);
      ctx.closePath();
      ctx.fillStyle = this.color;
      ctx.fill();
    }
    //定义方法完成小球的移动
    Ball.prototype.move = function (){
      //改变中心的的x,y
      this.x+=this.speedX;
      this.y +=this.speedY;
    //进行边界判断
    if (this.x >=canvas.width-this.r) {
      this.speedX *=-1;
    } else if (this.x <=this.r) {
      this.speedX *=-1;
    }
    if (this.y >=canvas.height-this.r) {
      this.speedY *=-1;
    } else if (this.y <=this.r) {
      this.speedY *=-1;
    }
  }
  //生成小球对象
  var balls = [];
  for (var i = 0; i < 500; i++) {
    var ball = new Ball();
    balls.push(ball);
  }
//定义以鼠标点为圆心的圆
  //球形两两碰撞检测
  function ArcCollision(e1,e2){
    var lx = e1.x -e2.x;
    var ly = e1.y -e2.y;
    //球心距
    var dis = Math.sqrt(Math.pow(lx,2)+Math.pow(ly,2));
    //如果两个圆心距dis<50  就返回true
    if (dis <= 50 ) {
      return true;
    }else {
      return false;
    }
  }
  //定义一个空数组存储当前满足条件的点
  var circle = [];
  //定义一个圆规定小球在此范围(以鼠标为中心的圆)内方可连线
  var rs =150;
  //画圆检测函数
  function drawCircle(){
    //每次调用之前清空数组;
    circle = [];
    for (var i = 0; i < balls.length; i++) {
      var lx = balls[i].x -mousePoint.x;
      var ly = balls[i].y -mousePoint.y;
      //球心距
      var dis = Math.sqrt(Math.pow(lx,2)+Math.pow(ly,2));
      //如果两个圆心距dis<rs  就把该点放到数组中
      if (dis <= rs ) {
        circle.push(balls[i])
      }
    }
  }
  //检测划线函数
  function collisionLine(balls){
    for (var i = 0; i < balls.length; i++) {
      for (var j = i+1; j < balls.length; j++) {
        //进行距离检测
        var result = ArcCollision(balls[i],balls[j]);
        if (result) {
          //画线函数
          drawLine(balls[i],balls[j]);
        }
      }
    }
  };
    //画线函数
    function drawLine(startPoint,endPoint){
      ctx.beginPath();
      ctx.moveTo(startPoint.x,startPoint.y);
      ctx.lineTo(endPoint.x,endPoint.y);
      ctx.closePath();
      ctx.strokeStyle = "white";
      ctx.lineWidth = 1;
      ctx.stroke();
    }
  //创建鼠标点的对象
  function Point(x,y){
    this.x = x;
    this.y = y;
  }
  //创建鼠标的点对象  初始化
  var mousePoint = new Point(canvas.width/2,canvas.height/2);
  //事件处理函数
  canvas.onmousemove = function(e){
    var even = e || event;
    mousePoint.x = even.clientX - canvas.offsetLeft;
    mousePoint.y = even.clientY - canvas.offsetTop;
  }
  canvas.onmouseleave = function(){
    mousePoint.x =canvas.width/2;
    mousePoint.y =canvas.height/2;
  }
  //让小球躁动起来
  function animation(){
    //每次动起来之前,清除画布
    ctx.clearRect(0,0,canvas.width,canvas.height);

    //遍历小球数组,让每一个小球动起来
    for (var i = 0; i < balls.length; i++) {
      balls[i].move();
      balls[i].draw();
    };
    drawCircle();
    collisionLine(circle);
      window.requestAnimationFrame(animation);
      //调用检测画线函数

  }
  animation();


  </script>
</html>