javascript - 单击按钮时的图像动画问题

Question

我有这个代码：

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);
  }
});

这是jsfiddle

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

Answer 1

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

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

在这里检查小提琴

Answer 2

稍微修改了开始点击处理程序。敌人动画被移动到它自己的计时器并在创建新敌人间隔内添加检查以查看创建时间是否达到最大值。

这是新代码，更新的小提琴演示

$("#Start").click(function () {
  intervalPoint = setInterval(function () {
    CreateAndAnimateEnemyImg();
    time--;
    if (time == 0) 
    StopTimer();
  }, 20);

  setInterval(function () {
    $('.Enemy').animate({ 'left': '-=20px' });
  }, 20);

});

function StopTimer(){
  timeElapsed = true;
  clearInterval(intervalPoint);
  time = 3;
}