Bowl A Strike es-419 Explainer

Explicador de Tira una chuza

Objetivo de este acertijo: Hacer rodar la bola y derribar todos los pinos.
Tutorial de la solución: Ves que la función bowlBall del código de inicio tiene una .transition() y nada después de ella; debe tener por lo menos un .attr(), y, específicamente, 'cy' debe ir a cero para que la bola se mueva hacia la parte superior de la pantalla y hacia los pinos. La otra parte que se debe agregar a este comando es el cambio de la duración. Sin .duration(), el valor por defecto de la transición será 250ms; define la duración en 2000ms anexando .duration(2000) a la .transition(). Por último, la función bowlBall debe estar completa, pero no hará nada hasta que se le llame a acción, y debes ejecutarla pulsando la bola. ¡Este es el momento de usar .on('click',...)! bowlBall se ejecuta cuando haces clic en ball; el comando se ve así: ball.on('click', bowlBall); Recuerda que puedes leer el comando .on('click',...) al revés para asegurarte de tener cada parte en el lugar correcto.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

function bowlBall(){
  ball.transition()
    .duration(2000)
    .attr('cy', 0);
  knockPins();
}

ball.on('click', bowlBall);

Conceptos de JavaScript: bloque de código (función), identificadores, expresión de miembro
Conceptos de D3: .transition(), .duration(), .attr(‘cy’,), .on(‘click’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

var floor = svg.append('rect').attr('fill', 'tan').attr('width',190).attr('height', 300);
var laneDivider1 = svg.append('rect').attr('fill', 'red').attr('width', 5).attr('height', 300).attr('x', 175);
var laneDivider2 = svg.append('rect').attr('fill', 'red').attr('width', 5).attr('height', 300).attr('x', 10);

// First Row
var pin1 = svg.append('circle').attr('r', 10).attr('fill', 'white').attr('cx', 95).attr('cy', 110);

// Second Row
var pin2 = svg.append('circle').attr('r', 10).attr('fill', 'white').attr('cx', 80).attr('cy', 80);
var pin3 = svg.append('circle').attr('r', 10).attr('fill', 'white').attr('cx', 110).attr('cy', 80);

// Third Row
var pin4 = svg.append('circle').attr('r', 10).attr('fill', 'white').attr('cx', 65).attr('cy', 50);
var pin5 = svg.append('circle').attr('r', 10).attr('fill', 'white').attr('cx', 95).attr('cy', 50);
var pin6 = svg.append('circle').attr('r', 10).attr('fill', 'white').attr('cx', 125).attr('cy', 50);

// Fourth Row
var pin7 = svg.append('circle').attr('r', 10).attr('fill', 'white').attr('cx', 50).attr('cy', 20);
var pin8 = svg.append('circle').attr('r', 10).attr('fill', 'white').attr('cx', 80).attr('cy', 20);
var pin9 = svg.append('circle').attr('r', 10).attr('fill', 'white').attr('cx', 110).attr('cy', 20);
var pin10 = svg.append('circle').attr('r', 10).attr('fill', 'white').attr('cx', 140).attr('cy', 20);

// Moving to draw on top of pins, and cy from 250 to 200 because ball was off screen- Frankie
var ball = svg.append('circle').attr('r', 20).attr('cx', 95).attr('cy', 190).attr('fill', 'blue');

function knockPins(){
    pin1.transition().delay(725).remove();

    pin2.transition().delay(800).remove();
    pin3.transition().delay(800).remove();

    pin4.transition().delay(875).remove();
    pin5.transition().delay(850).remove();
    pin6.transition().delay(875).remove();

    pin7.transition().delay(925).remove();
    pin8.transition().delay(900).remove();
    pin9.transition().delay(900).remove();
    pin10.transition().delay(925).remove();
}