Perché la mia palla (oggetti) non si restringe / scompare?

http://jsfiddle.net/goldrunt/jGL84/42/ questo è dalla linea 84 in questo violino JS. Ci sono 3 diversi effetti che possono essere applicati alle palle da linee scomposte 141-146. L'effetto "rimbalzo" funziona come dovrebbe, ma l'effetto "asplode" non fa nulla. Dovrei includere la funzione 'restringi' all'interno della funzione asplode?

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

Il tuo codice ha alcuni problemi.

Innanzitutto, nella tua definizione:

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è locale nell'ambito nell'ambito shrinke quindi non accessibile al codice in updatecui si sta tentando di chiamarlo. L'ambito JavaScript è basato sulle funzioni, quindi updatenon può essere visto asplodeperché non è all'interno shrink. ( Nella tua console , vedrai un errore come:. Uncaught ReferenceError: asplode is not defined)

Potresti prima provare invece a spostarti asplodeal di fuori di 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);
}

Tuttavia, il codice presenta molti altri problemi che non rientrano nell'ambito di questa domanda:

• setIntervalsi aspetta una funzione. setInterval(shrink(p), 100)fa sì che setIntervalper ottenere il valore di ritorno di immediato invocato shrink(p) . Probabilmente vuoi

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

• Il tuo codice for (var i = 0; i < 100; i++) { p.radius -= 1; }probabilmente non fa quello che pensi che faccia. Ciò eseguirà immediatamente l'operazione di decremento 100 volte, quindi mostrerà visivamente il risultato. Se si desidera ridare il rendering della palla ad ogni nuova dimensione, sarà necessario eseguire ogni singolo decremento all'interno di un callback di temporizzazione separato (come setIntervalun'operazione).

• .splicesi aspetta un indice numerico, non un oggetto. Puoi ottenere l'indice numerico di un oggetto con indexOf:

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

• Prima che il tuo intervallo scada per la prima volta, la balls.splicedichiarazione è già avvenuta (è successo circa 100ms fa, per l'esattezza). Presumo che non sia quello che vuoi. Invece, dovresti avere una funzione di decremento che viene ripetutamente chiamata da setIntervale infine esegue balls.splice(p,1)dopo p.radius == 0.

setInterval(shrink(p),100);

Questo non fa quello che pensi che faccia. Questo chiama shrink, lo passa pe quindi passa il risultato a setInterval. shrink(p)ritorna undefined, quindi questa riga in realtà non inserisce nulla su un intervallo.

Probabilmente vuoi:

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