Javascript 单击按钮时出现图像动画问题

我有以下代码：

function CreateAndAnimateEnemyImg() {
  var nh = Math.floor(Math.random() * w + 30);
  var enemy = document.createElement('img');
  enemy.src = 'enemy.jpg';
  enemy.className = 'Enemy';
  pane.append(enemy);
  enemy.onload = function () {
    enemy.style.top = nh + 'px';
  }
}

$("#Start").click(function () {
  var x = setInterval(function () {
    CreateAndAnimateEnemyImg();
    $('.Enemy').animate({ 'left': '-=20px' });
    time--;
  }, 20);

  if (time == 0) {
    timeElapsed = true;
    clearInterval(x);
  }
});

这是

---

我知道我的逻辑是错误的，我希望你帮助我解决单击时的问题。应创建新图像并设置动画，计数器应初始化。当计数器设置为0时，应停止创建新图像，但创建的图像仍应设置为左-20px

修改开始单击处理程序一点敌方动画被移动到自己的计时器，并在“创建新敌人”间隔内添加检查，查看创建时间是否达到最大值

这是更新后的新代码

---

我已经改变了清除间隔的位置，并添加了一些条件检查

if (time > 0) {
 $('.Enemy').animate({ 'left': '-=20px' });
 time--;
 console.log(time);
 if(time == 0){
   timeElapsed = true;
   clearInterval(x);
 }
}

检查这里

if (time > 0) {
 $('.Enemy').animate({ 'left': '-=20px' });
 time--;
 console.log(time);
 if(time == 0){
   timeElapsed = true;
   clearInterval(x);
 }
}