how to identify a collision between a moving random div and one that I’m moving

Question

        <div id="player" class="circleBase "></div>
        <div class="saida circleBase" id="saida1" title="saida 1"></div>
        <div class="bouncer circleBase" id="bouncer1" title="bouncer 1"></div>
        <div class="bouncer circleBase" id="bouncer2" title="bouncer 2"></div>
        <div class="bouncer circleBase" id="bouncer3" title="bouncer 3"></div>
        <div class="bouncer circleBase" id="bouncer4" title="bouncer 4"></div>
        <div class="bouncer circleBase" id="bouncer5" title="bouncer 5"></div>
        <div class="bouncer circleBase" id="bouncer6" title="bouncer 6"></div>
        <div class="bouncer circleBase" id="bouncer7" title="bouncer 7"></div>
        <div class="bouncer circleBase" id="bouncer8" title="bouncer 8"></div>
    </div>

   background: rgb(77, 75, 75);
 }

 #player {
  width: 50px;
  height: 50px;
  background: #ccc;
  border: 3px solid #000;
  position: relative;
  left: 0;
  top: 0;
 }
 .circleBase {
  border-radius: 50%;
  behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
#sistema {
  width: 50px;
  height: 50px;
  position: relative;
  background: red;
  border: 3px solid #000;
  left: 0;
  top: 0;
}

#container{
  position:absolute; 
  margin: 10px;
  width:1325px; 
  height:610px;
  border: 3px solid #000;
  background-color: springgreen;
}
.bouncer{
  position:absolute; 
  width: 50px;
  height: 50px;
  background: red;
  border: 3px solid #000;
  left: 0;
  top: 0;
}
.saida{
  position:absolute; 
  width: 50px;
  height: 50px;
  background: rgb(112, 203, 219);
  border: 3px solid #000;
  left: 0;
  top: 0;
}

{
    $('.bouncer').click( function(){
        alert('clicaram no: ' + $(this).attr('title'));
    });
});

$(function() {
    var minSpeed = .05;
    var maxSpeed = .40;
    var varSpeed = .005;

    function startBounce(element) {
        var container = element.parent();
        var width = container.innerWidth() - element.outerWidth();
        var height = container.innerHeight() - element.outerHeight();

        var vertSpeed = ((Math.random() * (maxSpeed - minSpeed)) + minSpeed);
        var horzSpeed = ((Math.random() * (maxSpeed - minSpeed)) + minSpeed);
        bounce(element, vertSpeed, height, 'top');
        bounce(element, horzSpeed, width, 'left');
    }

    function bounce(element, speed, max, dir) {
        speed += ((Math.random() * varSpeed) - (varSpeed / 2));
        speed = speed < minSpeed ? minSpeed : (speed > maxSpeed ? maxSpeed : speed)
        var time = max / speed;
        var position = element.position();
        if (position[dir] < 2) {
            target = max;
        } else {
            target = 0;
        }

        var style = {
            queue: false
        };
        style[dir] = target;
        element.animate(style, {
            duration: time,
            queue: false,
            easing: "linear",
            complete: function() {
                bounce(element, time, max, dir);
            }
        });
    }

    startBounce($('#bouncer1'));
    startBounce($('#bouncer2'));
    startBounce($('#bouncer3'));
    startBounce($('#bouncer4'));
    startBounce($('#bouncer5'));
    startBounce($('#bouncer6'));
    startBounce($('#bouncer7'));
    startBounce($('#bouncer8'));
    startBounce($('#saida1'));
});

let player = document.querySelector('#player');
let x = 0;
let y = 0;

let velocidade = 50;

window.onkeydown = () => {
  let key = event.keyCode;
  let velocity = 10;
  let pixel = "px";

  //Detecta qual tecla do direcional do teclado foi pressionada e calcula um deslocamento absoluto 
  if (key == 37) x -= velocidade;
  if (key == 38) y -= velocidade;
  if (key == 39) x += velocidade;
  if (key == 40) y += velocidade;

  //Reposiciona o personagem
  player.style.left = x + "px";
  player.style.top = y + "px";
}

Answer 1

If I understand your question correctly: you are trying to perform a motion animation with elements of the class 'Bounce', but you want a kind of warning if a 'circular object' (.circleBase { border-Radius: 50%;) touches another on the screen. That’s it?

If so, then you get the displacement and dimension of the boxes and check if they overlap. The link below explains how to do, but there is no way to avoid the detection of overlap in the curves, ie the detection will be in the DIV and not in the area of the circle.

https://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection