I have created a mini game inspired by diep.io on codepen, where you can upgrade your reload and shooting capabilities. However, I have encountered an issue where the bullets start moving at different speeds and end up overlapping each other after shooting more than twice. Check it out for yourself here:
https://codepen.io/TheAndersMan/pen/gwKmYy
Below is the HTML code:
<div class="wrap">
<div class="body"></div>
<div class="barrel"></div>
<div class="bullets">
</div>
</div>
Here is the CSS code:
.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;
}
}
And here is the JavaScript code:
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);
}
It might seem like a lot, but I wanted to provide you with the complete picture. It would be easier to understand if you viewed the code on the pen itself.
If you can help me figure out why the bullets are changing speeds and overlapping, I would greatly appreciate it.