0

星が輝くアニメーションを作成しようとしています。

function ShowStars()
{
    //if ($('img.star').length > 5)
    //  return;

    var x = Math.floor(Math.random() * gameAreaWidth) - 70;
    var y = Math.floor(Math.random() * gameAreaHeight);

    var star = document.createElement("img");
    star.setAttribute("class", "star");
    star.setAttribute("src", imagesPath + "star" + GetRandom(1, 3) + ".png");
    star.style.left = x + "px";
    star.style.top = y + "px";
    gameArea.appendChild(star);
    // Light.
    setTimeout(function () { star.setAttribute("class", "star shown"); }, 0);
    // Put out.
    setTimeout(function () { star.setAttribute("class", "star"); }, 2000);
    // Delete.
    setTimeout(function () { gameArea.removeChild(star); }, 4000);

    setTimeout(function () { ShowStars(); }, 500);
}

星の数を調整することになっている次のコードのコメントを外すまでは正常に機能します。

//if ($('img.star').length > 5)
//  return;

次に、作成された星が削除されていないかのように動作を停止します（最初の5つの星が点滅した後、何も起こりません）。jQueryセレクターが後でそれらを選択するのはなぜgameArea.removeChild(star);ですか？親ノードからそれらを削除するだけで十分ではありませんか？

ブラウザ：GoogleChrome17。

よろしく、

4

2 に答える 2

1

コメントアウトされた行をに変更します

if ($('img.star').length > 5) {
  setTimeout(function () { ShowStars(); }, 500);
  return;
}

ShowStarsの再帰を継続します。

于 2012-06-29T06:36:48.613 に答える
0

回避策があります。星を動的に作成せずに、HTMLに挿入して（<img id="star1">... <img id="starN">、Nは合計数）、ライトを付けて既存のノードを消します。それでも、上記の質問でノードを削除することの何が問題になっているのかを理解したいと思います。

于 2012-06-29T04:25:09.980 に答える