时间戳

首页 > 解决方案 > JavaScript innerHTML 几秒钟

javascript - JavaScript innerHTML 几秒钟

问题描述

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

我能够获得敌人和导弹之间碰撞的位置，并#explosion使用innerHTML. 我很困惑如何在 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;
}

标签： javascript

解决方案

如果没有其余的代码，很难给你一个准确的展示，但这主要是我的评论所指的。

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

推荐阅读