☰

ボール（オブジェクト）が縮小/消失しないのはなぜですか? 質問する

tag-icon • tag-icon javascript html
ボール（オブジェクト）が縮小/消失しないのはなぜですか? 質問する

http://jsfiddle.net/goldrunt/jGL84/42/これは、この JS フィドルの 84 行目からのものです。141 行目から 146 行目をコメント解除すると、ボールに適用できる 3 つの異なる効果があります。「バウンス」効果は期待どおりに機能しますが、「asplode」効果は何も機能しません。asplode 関数内に「shrink」関数を含める必要がありますか?

// balls shrink and disappear if they touch
var shrink = function(p) {
    for (var i = 0; i < 100; i++) {
        p.radius -= 1;
    }
    function asplode(p) {
        setInterval(shrink(p),100);
        balls.splice(p, 1);
    }
}

ベストアンサー1

コードにいくつか問題があります。

まず、あなたの定義では：

var shrink = function(p) {
    for (var i = 0; i < 100; i++) {
        p.radius -= 1;
    }

    function asplode(p) {
         setInterval(shrink(p),100);
        balls.splice(p, 1);
    }
}

asplodeはスコープ内でローカルであるため、呼び出しを試みているshrinkコードからはアクセスできません。JavaScript のスコープは関数ベースなので、スコープ内にないため参照できません。(updateupdateasplodeshrinkコンソールで次のようなエラーが表示されますUncaught ReferenceError: asplode is not defined。

asplodeまず、の外側に移動してみてくださいshrink:

var shrink = function(p) {
    for (var i = 0; i < 100; i++) {
        p.radius -= 1;
    }
}

function asplode(p) {
     setInterval(shrink(p),100);
     balls.splice(p, 1);
}

ただし、コードにはこの質問の範囲外となる問題がいくつかあります。

  • setInterval関数を期待しますsetInterval(shrink(p), 100)。setInterval戻り値の即時呼び出し shrink(p)おそらくあなたは

    setInterval(function() { shrink(p) }, 100)

  • おそらくあなたのコードはfor (var i = 0; i < 100; i++) { p.radius -= 1; }あなたが考えている通りには動作しないでしょう。これはすぐに減算操作を100回実行し、それから結果を視覚的に表示します。ボールを新しいサイズごとに再レンダリングする場合は、個別のタイミング コールバック (操作などsetInterval) 内で個々の減分を実行する必要があります。

  • .spliceオブジェクトではなく数値インデックスが必要です。オブジェクトの数値インデックスは次のように取得できますindexOf。

    balls.splice(balls.indexOf(p), 1);

  • 間隔が初めて実行されるときには、ステートメントはすでに実行されています (正確には、約 100 ミリ秒前に実行されています)。これは望んでいることではないと思います。代わりに、 によって繰り返し呼び出され、最終的にの後に実行されるballs.splice減分関数を用意する必要があります。setIntervalballs.splice(p,1)p.radius == 0

おすすめ記事