JavaScript innerHTML for few seconds

Question

我遵循了如何使用 JS/HTML 构建基本游戏的教程，现在我正在扩展它。游戏在这里

• 按空格键开火
按向右
• 箭头向右转，按向左箭头向左转

我能够获得敌人和导弹之间碰撞的位置，并使用innerHTML向 html 添加新#explosion。我很困惑如何在 1 秒后消除爆炸。

const explosion = (topEn, leftEn) => {
document.getElementById('explosions').innerHTML +=
`
<div id="explosion" style='
left:${leftEn}px;
top: ${topEn}px;
'></div>
`;
}

#explosion{
background-image: url("assets/explosion.png");
height: 50px;
width: 50px;
position: absolute;
}

Answer 1

如果没有你的其余代码，很难给你一个确切的节目，但这在很大程度上是我的评论所指的。

const explosion = (topEn, leftEn, delay = 1000) => {
const div = document.createElement('div');
div.id = 'explosion';
div.style.top = topEn + 'px';
div.style.left = leftEn + 'px';
document.getElementById('explosions').append(div);
setTimeout(() => {
div.remove()
}, delay);
}
explosion(200, 200, 1000);
setTimeout(()=> explosion(300, 400, 800), 500)

#explosion {
background-image: url("assets/explosion.png");
height: 50px;
width: 50px;
position: absolute;
/* I added this to be able to see the divs*/
background-color: red;
}
body, html, #explosions {
height: 100%;
width: 100%;
}

<div id="explosions"></div>

笔记：

如果你打算同时在 DOM 中有多个相同类型的元素(即爆炸(，你应该转向使用类而不是 ID。 ID 是唯一标识符，因此虽然您可以拥有具有相同 ID 的多个元素，但它会导致意外的结果。如果您的游戏在任何给定时间能够发生 1 次以上的爆炸，请将#explosion移至.explosion