Question

我在codepen上制作了一个diep.io迷你游戏，你可以升级重装和射击，但是当你射击两次以上时，子弹会以不同的速度相互重叠。你可以在这里看到：

https://codepen.io/TheAndersMan/pen/gwKmYy

这是我的HTML：

    <div class="wrap">
      <div class="body"></div>
      <div class="barrel"></div>
      <div class="bullets">
      </div>
    </div>

这是我的CSS：

    .wrap {
      position: absolute;
      top: 30vh;
      left: 40vw;
      display: flex;
    }
    .wrap .body {
      width: 200px;
      height: 200px;
      background: #00b2e1;
      border-radius: 100%;
      border: 6px solid black;
      z-index: 1;
    }
    .wrap .barrel {
      width: 150px;
      height: 125px;
      background: #666;
      margin-top: calc(75px / 2);
      margin-left: -50px;
      z-index: 0;
      border: 6px solid black;
    }
    .wrap .bullets {
      margin-top: calc(75px / 2);
      margin-left: -125px;
      display: flex;
    }
    .wrap .bullets .bullet {
      width: 125px;
      height: 125px;
      border-radius: 100%;
      background: #F14E54;
      border: 6px solid black;
      animation: bulletMove 3s linear 1;
    }

    @keyframes bulletMove {
      0% {
        margin-left: -125px;
      }
      100% {
        margin-left: 60vw;
      }
    }

我的JS：

    var fireRate = 1,
      fireInterval = null,
      loadNum = 0;

    function fire() {
      console.log("BAM!");
      let bullet = document.createElement("div");
      document.body.appendChild(bullet);
      bullet.classList.add("bullet");
      setTimeout(function() {
        bullet.remove();
      }, 2000)
      document.querySelector(".bullets").appendChild(bullet);
    }

    function startFire() {
      fire();
      fireInterval = setInterval(fire, 1000 / fireRate);
    }

    function stopFire() {
      clearInterval(fireInterval);
    }

对不起，这很多，我只是想给你（几乎）完整的图片，如果你真的去看笔并亲自看到，那可能会更有意义。

所以，如果你能帮助我解决为什么子弹会改变速度和重叠的原因。

Answer 1

My variant.

所以这就是我的想法。

您创建div.bullet并将其附加到.bullets容器。然后使用left-margin为它们制作动画。问题是，边缘将推动项目和所有后来的兄弟姐妹因为它影响内联流，基本上创造了一个差距，而不是真正移动任何东西。（display:flex使它们基本上是内联而不是块级。）

想象一下，您有三个兄弟元素，并设置为display:inline。在第二个上设置margin-left会导致第二个和第三个改变位置。

在我的变体中，我切换到绝对定位并使用left来定位它们。这使它们脱离文档的正常流程，使它们不再对其周围元素产生影响。（我也稍微改变了z-index。）

我注意到你试图这样做，但看起来你还没有把position:absolute放在父母那里，所以定位搞砸了。

Div重叠并且速度错误

1 个答案: