0

私はこのコードを持っています:

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 にアニメーション化する必要があります

4

2 に答える 2

0

開始クリック ハンドラーを少し変更しました。敵のアニメーションは独自のタイマーに移動し、新しい敵の作成間隔内に、作成された時間が最大に達したかどうかを確認するチェックが追加されました。

これが新しいコード、更新されたフィドルのデモです

$("#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;
}
于 2013-07-20T12:19:09.653 に答える
0

クリア間隔の位置を変更し、いくつかの条件チェックを追加しました

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

ここをチェック

于 2013-07-20T12:19:57.220 に答える