如何在elapsedTime中使用document.createElement？

Question

我在为一个学校项目做一个游戏。前提是会有敌人从屏幕的右边过来，你必须杀死他们。我已经成功地创建了它们，以便显示它们，但我不能设法使它们不同时出现。有什么关于我该怎么做的建议吗？

(抱歉，如果这是糟糕的表述，我对这些东西非常陌生)

我尝试过使用elapsedTime函数来实现我的目标的不同方法，但我似乎一点也不能让它工作。

function createEnemy() {
  for(var i = 0; i < antallFiender; i++) {
    var nyFiende = document.createElement("img");
    nyFiende.setAttribute("src", "tenor.gif");
    nyFiende.setAttribute("class", "zombie");
    nyFiende.style.top = Math.floor(Math.random()*800) + "px";

    barnetEl.appendChild(nyFiende);
  }
  var zombieEl = document.querySelectorAll(".zombie");
}

Answer 1

您可以使用JavaScript setInterval函数。使用此函数，您可以在第一个参数中传递回调，并将时间间隔(以毫秒为单位)作为第二个参数，这是两次调用回调之间的时间。所以它会是这样的：

function createEnemy() {
  var nyFiende = document.createElement("img");
  nyFiende.setAttribute("src", "tenor.gif");
  nyFiende.setAttribute("class", "zombie");
  nyFiende.style.top = Math.floor(Math.random()*800) + "px";

  barnetEl.appendChild(nyFiende);
  var zombieEl = document.querySelectorAll(".zombie");
}

setInterval(createEnemy, 1000);

这样，每隔1秒，你的函数就会被调用来创建一个敌人。

如果您想停止调用函数，您应该将间隔分配给一个变量，这样您就可以使用clearInterval停止它，如下所示：

var enemyInterval = setInterval(createEnemy, 1000);

clearInterval(enemyInterval);

希望能对你有所帮助。