Проверка на то, что находится ли один объект в другом

Question

У меня есть прицел(class=aim) который бегает в пространстве и попадает на мишени. Как сделать так, чтобы при наведении этого прицела(class=aim) на мишень(class=target) менялся цвет мишени(class=class=target).

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section id="section">
        <div class="row">
            <div class="column">
                <p>Игрок Антон</p>
                <p class="try">Попытка 1</p>
                <p class="try">Попытка 2</p>
                <p class="try">Попытка 3</p>
            </div>

            <div class="column">
                <div class="round">
                    <div class="aim" id="aim">
                        <div class="little-aim" id="little-aim"></div>
                    </div>
                    <div class="little-round target" id="center"></div>
                    <div class="middle-round target"></div>
                    <div class="big-round target" id="scene"></div>
                </div>
            </div>

            <div class="column">

            </div>
        </div>

    </section>
</body>
<script>

    aim = document.getElementById("aim")
    var littleAim = document.getElementById("little-aim")
    var position = aim.style.transform
    var scene = document.getElementById("scene")
    var size = 1.5;
    var isPlay = true
    function IsPlay(value) {
        isPlay = value
    }

    function moveAim() {
        if (!!!scene) {
            return;
        }
        var time = 300;
        var timeTransitionMin = time * 2;
        var timeTransitionMax = time * 4;
        var timeIntervalMin = time;
        var timeIntervalMax = time * 2;

        GWcreatePart(scene);



        function GWcreatePart(scene) {
            setInterval(function () {
                if (isPlay == true) {
                    var tempTime = getRandomInt(timeTransitionMin, timeTransitionMax);
                    aim.style.transition = tempTime + "ms all";
                    aim.style.transform = 'translateX(' + getRandomInt(-scene.getBoundingClientRect().width + 200 / size, scene.getBoundingClientRect().width + 200 / size) + 'px) translateY(' + getRandomInt(-scene.getBoundingClientRect().height / size, scene.getBoundingClientRect().height / size) + 'px)';
                }

            }, getRandomInt(timeIntervalMin, timeIntervalMax));
        }

        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }
    }
    document.addEventListener('DOMContentLoaded', moveAim)
</script>

</html>

Answer 1

А что тут сложного? Чуть позже прокоментирую. Если есть вопросы - задавайте.

const targets =   document.querySelectorAll('.target-container');

addEventListener('mousemove',(e)=>{
  const box = sniper.getBoundingClientRect();
  const sw = box.width, sh = box.height, sl=box.left, st=box.top;
  const sx = sl+sw/2, sy = st+sh/2;
 
  sniper.style.left = - sw/2 + e.pageX + 'px';
  sniper.style.top = - sh/2 + e.pageY + 'px';
  
  targets.forEach(target=>{
    const box = target.getBoundingClientRect();
    const tw = box.width, th = box.height, tl=box.left, tt=box.top;
    const tx = tl+tw/2, ty = tt+th/2;
    
    const len = Math.hypot(sx-tx,sy-ty);
    
    target.classList[len<tw/2?'add':'remove']('active');
  });
});

* {box-sizing: border-box;}
body {
  width: 100vw;
  height: 100vh;
  margin:0;
  padding: 0;
  cursor: none;
}
.target-list {
  width:100vw;
  height: 100vh;
  display:flex;
  justify-content: space-evenly;
  align-items: flex-end;
  padding: 3rem;
  }

svg.target>circle.red { fill: #f00; }
svg.target>circle.white { fill: #fff; }
.target-container,
.sniper-container{ width: 3rem; height: 3rem; }

.sniper-container { 
left: calc(50vw - 1.5rem);
top: calc(50vh - 1.5rem);
position: fixed; }
.target-container, svg.target>circle{
  transition: all 200ms;
}
.target-container.active{
  filter: drop-shadow(0px 0px 6px #f00);
}
.target-container.active svg.target>circle.red { fill: #2c7; }

<div class="target-list">
<div class="target-container">

<svg class="target" viewBox="0 0 64 64">
  <circle cx="32" cy="32" r="32" class="red"/>
  <circle cx="32" cy="32" r="26" class="white"/>
  <circle cx="32" cy="32" r="20" class="red"/>
  <circle cx="32" cy="32" r="14" class="white"/>
  <circle cx="32" cy="32" r="8" class="red"/>
</svg>
</div>
<div class="target-container">

<svg class="target" viewBox="0 0 64 64">
  <circle cx="32" cy="32" r="32" class="red"/>
  <circle cx="32" cy="32" r="26" class="white"/>
  <circle cx="32" cy="32" r="20" class="red"/>
  <circle cx="32" cy="32" r="14" class="white"/>
  <circle cx="32" cy="32" r="8" class="red"/>
</svg>
</div>

<div class="target-container">

<svg class="target" viewBox="0 0 64 64">
  <circle cx="32" cy="32" r="32" class="red"/>
  <circle cx="32" cy="32" r="26" class="white"/>
  <circle cx="32" cy="32" r="20" class="red"/>
  <circle cx="32" cy="32" r="14" class="white"/>
  <circle cx="32" cy="32" r="8" class="red"/>
</svg>
</div>

</div>

<div id="sniper" class="sniper-container">
  <svg viewBox="0 0 64 64">
    <g stroke-width="4" stroke="#000">
    <circle cx="32" cy="32" r="24" fill="none"/>
    <path d="M 32 0 v 16 M 0 32 h 16 M 48 32 h 16 M 32 48 v 16"/>
    </g>
  </svg>
</div>

Хотите чтобы двигалось, держите. На лицо отсутсвие физики и логики, но мне лень писать что-то логичное на нелогичный вопрос. И тем не менее помогаю.

   const ptCnt = 5;
      const particles = [];
      let target;

      const svgParticles = `
<svg xmlns="http://www.w3.org/2000/svg" class="target" viewBox="0 0 64 64">
  <circle cx="32" cy="32" r="32" fill="red"/>
  <circle cx="32" cy="32" r="26" fill="white"/>
  <circle cx="32" cy="32" r="20" fill="red"/>
  <circle cx="32" cy="32" r="14" fill="white"/>
  <circle cx="32" cy="32" r="8" fill="red"/>
</svg>`;
      const imgParticles = `data:image/svg+xml,` + encodeURIComponent(svgParticles);
      const svgSniper = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <g stroke-width="4" stroke="#000">
  <circle cx="32" cy="32" r="24" fill="none"/>
  <path d="M 32 0 v 16 M 0 32 h 16 M 48 32 h 16 M 32 48 v 16"/>
  </g>
</svg>
  `;
      const imgSniper = `data:image/svg+xml,` + encodeURIComponent(svgSniper);

      class Particle {
        x;
        y;
        r;
        vx;
        vy;
        i;
        src;
        constructor(props) {
          Object.assign(this, props);
          this.i = new Image();
          this.i.src = this.src;
          this.i.style.width = 2 * this.r + 'px';
          this.i.style.height = 2 * this.r + 'px';
          this.i.style.position = 'fixed';
          this.move(this.x, this.y);
          document.body.appendChild(this.i);
        }
        move(dx, dy) {
          this.x += dx;
          this.y += dy;
          this.update();
          return [this.x, this.y];
        }
        moveTo(x, y) {
          this.x = x;
          this.y = y;
          this.update();
          return [this.x, this.y];
        }
        next(a) {
          this.move(a * this.vx, a * this.vy);
          return [this.x, this.y];
        }
        update() {
          this.i.style.left = this.x - this.r + 'px';
          this.i.style.top = this.y - this.r + 'px';
        }
        static diaposParticles(p1, p2) {
          return Math.hypot(p1.x - p2.x, p1.y - p2.y) - p1.r - p2.r;
        }
        static diaposBorder(p1, brd) {
          switch (brd) {
            case 'n':
              return p1.y - p1.r;
            case 'e':
              return innerWidth - p1.x - p1.r;
            case 's':
              return innerHeight - p1.y - p1.r;
            case 'w':
              return p1.x - p1.r;
          }
        }

        static bounceParticles(p1, p2) {
          p1.vx = -p1.vx;
          p1.vy = -p1.vy;
          p2.vx = -p2.vx;
          p2.vy = -p2.vy;
        }
        static bounceBorder(p1, brd) {
          switch (brd) {
            case 'n':
              return (p1.vy = Math.max(-p1.vy, p1.vy));
            case 'e':
              return (p1.vx = Math.min(-p1.vx, p1.vx));
            case 's':
              return (p1.vy = Math.min(-p1.vy, p1.vy));
            case 'w':
              return (p1.vx = Math.max(-p1.vx, p1.vx));
          }
        }
      }

      init();

      function init() {
        for (let i = 0; i < ptCnt; i++) {
          particles.push(generate(imgParticles));
        }
        target = generate(imgSniper);
        target.i.src = imgSniper;
        target.i.style.zIndex = 5;
        nextFrame();
      }

      function generate(src) {
        let minSide = Math.min(innerWidth, innerHeight);
        let r = (Math.random() * minSide) / 20 + 0.05 * minSide;
        let x = Math.random() * (innerWidth - 2 * r) + r;
        let y = Math.random() * (innerHeight - 2 * r) + r;
        let s = Math.random() * 25;
        let d = Math.random() * 2 * Math.PI;
        let vx = s * Math.sin(d);
        let vy = -s * Math.cos(d);
        return new Particle({
          r,
          x,
          y,
          vx,
          vy,
          src,
        });
      }

      function nextFrame() {
        for (let i = 0; i < ptCnt; i++) {
          ['n', 'e', 's', 'w'].map(brd => {
            if (0 > Particle.diaposBorder(particles[i], brd)) {
              Particle.bounceBorder(particles[i], brd);
            }
          });
        }
        for (let i = 0; i < ptCnt; i++) {
          for (let j = i + 1; j < ptCnt; j++) {
            if (0 > Particle.diaposParticles(particles[i], particles[j])) {
              Particle.bounceParticles(particles[i], particles[j]);
            }
          }
        }
        ['n', 'e', 's', 'w'].map(brd => {
          if (0 > Particle.diaposBorder(target, brd)) {
            Particle.bounceBorder(target, brd);
          }
        });
        for (let i = 0; i < ptCnt; i++) {
          particles[i].i.classList[-target.r > Particle.diaposParticles(particles[i], target) ? 'add' : 'remove'](
            'active'
          );
        }

        for (let i = 0; i < ptCnt; i++) {
          particles[i].next(1);
        }
        target.next(1);
        setTimeout(nextFrame, 50);
      }

      .active {
        filter: hue-rotate(-120deg);
      }

БЛОГ НА HUSL

Проверка на то, что находится ли один объект в другом

Ответы (1 шт):