Here is the code inside your arrow function. I’ve put the calls on separate lines and added some indentation just to make explaining easier.
interrupt is used to cancel any transitions currently running on the object that the
interrupt is attached to. The
interrupt will also cancel out any commands that come after it in a chain of calls.
Why the balloon is not resetting when clicked on.
Each time you tap the balloon, the arrow function does run. But the circle doesn’t move to the top of the screen, because the
interrupt is blocking the commands to do that.
Why the balloon is not “popping” when touching the floor.
The popping is done when the
remove() function is executed. When you attach
remove to a
transition, it gets run once the
duration time has elapsed, in this case, after 2 seconds. Except there is an
interrupt in this chained call, which cancels all of the calls after it, including the
Why is “.interrupt” necessary if setting cy >165 causes it to go beyond the floor regardless.
interrupt should be used to stop the circle from falling (which is a
transition). Once that
transition is canceled, the
attr calls for
'cy' can be applied to the
circle. What you’re really asking about is, why do we need to
remove the circle when
'cy' hits 165 since it falls off the screen anyway. This is because we want to end the game (make the circle untappable) right when it touches the floor, not after the top has fallen below the screen.
The code you’ve provided shouldn’t complete this puzzle – there’s a mistake when we check the order of the “reset” and “falling” parts of the code, but I’ll be sure to fix this. The
interrupt().attr('cx', pickRandom(position)).attr('cy', 35) should be the first part of the function, since you want the reset action to happen right when you tap the circle, before it starts falling again.