Warum schrumpfen/verschwinden meine Kugeln (Objekte) nicht?

http://jsfiddle.net/goldrunt/jGL84/42/
das ist ab Zeile 84 in dieser JS-Geige. Es gibt 3 verschiedene Effekte, die auf die Bälle angewendet werden können, indem die Zeilen 141-146 auskommentiert werden. Der ‘Bounce’-Effekt funktioniert wie er sollte, aber der ‘Asplode’-Effekt macht nichts. Soll ich die ‘Shrink’-Funktion in die Asplode-Funktion aufnehmen?

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

Ihr Code hat ein paar Probleme.

Zunächst in Ihrer Definition:

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 ist lokal für den Bereich innerhalb shrink und daher für den Code in nicht zugänglich update wo Sie versuchen, es anzurufen. Der Umfang von JavaScript ist funktionsbasiert, also update kann nicht sehen asplode weil es nicht drin ist shrink. (In Ihrer Konsolesehen Sie einen Fehler wie: Uncaught ReferenceError: asplode is not defined.)

Sie könnten zuerst versuchen, sich zu bewegen asplode außerhalb 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);
}

Ihr Code weist jedoch mehrere weitere Probleme auf, die außerhalb des Bereichs dieser Frage liegen:

• setInterval erwartet eine Funktion. setInterval(shrink(p), 100) verursacht setInterval um das zu bekommen Rückgabewert von sofort aufgerufen shrink(p). Du willst wahrscheinlich

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

• Dein Code for (var i = 0; i < 100; i++) { p.radius -= 1; } macht wahrscheinlich nicht das, was du denkst. Dadurch wird die Dekrementoperation sofort 100 Mal ausgeführt, und dann das Ergebnis visuell darstellen. Wenn Sie den Ball in jeder neuen Größe neu rendern möchten, müssen Sie jede einzelne Dekrementierung innerhalb eines separaten Timing-Callbacks (wie a setInterval Betrieb).

• .splice erwartet einen numerischen Index, kein Objekt. Sie können den numerischen Index eines Objekts mit erhalten indexOf:

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

• Wenn Ihr Intervall zum ersten Mal läuft, wird die balls.splice -Anweisung ist bereits erfolgt (es geschah vor ungefähr 100 ms, um genau zu sein). Ich nehme an, das ist nicht das, was Sie wollen. Stattdessen sollten Sie eine dekrementierende Funktion haben, die wiederholt von aufgerufen wird setInterval und tritt schließlich auf balls.splice(p,1) nach p.radius == 0.

setInterval(shrink(p),100);

Das macht nicht das, was du denkst. Das ruft shrinkgeht vorbei pund übergibt dann das Ergebnis an setInterval. shrink(p) kehrt zurück undefinedalso fügt diese Zeile eigentlich nichts in ein Intervall ein.

Sie möchten wahrscheinlich:

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