Divs重疊並出錯速度

我正在codepen上製作diep.io迷你遊戲，您可以升級重新加載和拍攝，但是當您拍攝兩次以上時，子彈以不同的速度前進並相互重疊。你可以在這裏看到自己：Divs重疊並出錯速度

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); 
    }

對不起，這很多，我只是想給你（幾乎）完整的圖片，如果你真的去了筆，看到它自己，它可能會更有意義。

所以，如果你能幫助我解決爲什麼子彈改變速度和重疊，這將是偉大的。

來源

2016-10-16 TheAndersMan

我認爲它發生的是，div在「讓子彈」內創建。當你再次調用它時，已經有一個它正在運行的實例，所以它從當前項目符號開始，不重疊，從當時第一個項目符號的起始位置開始，然後從第二個項目符號開始開始。您可能想要改變您創建div元素的方式以及您如何追加這些孩子？ – Leo

@Leo我會怎麼做呢？ – TheAndersMan

也許試圖在每次觸發時創建一個不同的子彈變量？我認爲這是你的問題，如果我是在JQuery中，例如，我會克隆該元素，使其與其他.bullet DOM元素分開 – Leo

My variant.

因此，這裏是我想是怎麼回事。

您創建div.bullet並將其附加到.bullets容器。然後你使用left-margin爲它們設置動畫。事情是，保證金將推動項目和所有後來的兄弟姐妹，因爲它影響內聯流動，基本上造成了一個缺口，而不是真正的移動任何東西。（display:flex使它們基本上是內聯的而不是塊級別的。）

想象一下，您有三個元素是兄弟並且設置爲display:inline。第二個設置margin-left會導致第二個和第三個位置改變。

在我的變體中，我切換到絕對定位並使用left來定位它們。這使它們脫離文檔的正常流程，以便它們不再對其周圍的元素產生影響。（我也改變了z-index一點。）

我注意到它看起來像你試過這樣做，但它也看起來像你沒有把position:absolute對父母，所以定位搞砸了。

來源

2016-10-16 03:37:53 Ouroborus

謝謝！這正是我需要的。 – TheAndersMan

Divs重疊並出錯速度

回答

相關問題