-1
        <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";
}
3
  • De uma olhada nessas duas questões e veja se o ajuda em algo: Questão1 e Questão2 Commented 17/05/2020 às 1:13
  • A questao2 era exatamente o que eu tinha em duvida muito obrigado @AugustoVasques
    – Marcelo
    Commented 17/05/2020 às 2:06
  • Olhe a primeira com atenção, pois lá tem coisas que também vão o ajudar com o que está fazendo. Commented 17/05/2020 às 2:09

1 Resposta 1

-3

Se entendi bem sua pergunta: você está tentando realizar uma animação de movimento com elementos da classe 'bounce', mas quer uma espécie de alerta se um 'objeto circular' (.circleBase { border-radius: 50%;) tocar outro no ecrã. É isso?

Caso afirmativo, então você obtém o deslocamento e a dimensão das caixas e verifica se elas se sobrepõem. O link abaixo explica como fazer, mas não tem como evitar a detecção de sobreposição nas curvas, ou seja a detecção será na DIV e não na área do círculo.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .