Stop Short es-419 Explainer

Puzzle Explainer
#1

Explicador de Parada corta

Objetivo de este acertijo: Detener el movimiento del cuadro cuando pulses el botón rojo.

Tutorial de la solución: Cuando el código comienza a ejecutarse, box.transition()... comienza a animar box. box seguirá moviéndose hasta que se aplique otra .transition() a box, o la transición original termine o se interrumpa con box.interrupt().

Dentro de la definición de la función stopBox(), agrega box.interrupt(). Cuando ese comando ejecuta una transición, se cancelarán las animaciones en box. La última línea del código ya conecta la función stopBox con el botón usando button.on('click',stopBox).

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

function stopBox() {
  box.interrupt();
}
box.transition().ease(d3.easeLinear).duration(10000).attr('x', 0);
button.on('click', stopBox);

Conceptos de JavaScript: bloque de código (función)

Conceptos de D3: .attr('x',), .duration(), .ease(), .interrupt(), .on('click',...), .transition()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

let box = svg.append('rect')
.attr('width',100)
.attr('height',100)
.attr('x',window.innerWidth-100)
.attr('y',60)
.attr('fill',`hsl(${50+Math.random()*250},100%,50%)`);
                
let button = svg.append('circle')
.attr('r',30)
.attr('cx',30)
.attr('cy',30)
.attr('fill','red');
#2
#3