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

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

以下是新代码，已更新fiddle demo

$("#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;
}

Answer 2

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

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

点击Fiddle

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

2 个答案: