Bowl a Strike pt-br Explainer

Explicação de Fazer um strike

Objetivo deste desafio: Fazer a bola rolar e derrubar todos os pinos.
Passo a passo da solução: Você vê que na função bowlBall do código inicial tem uma .transition() sem nada depois dela - deve ter pelo menos um .attr() e, especificamente, 'cy' deve ir a zero para que a bola se mova em direção à parte superior da tela e em direção aos pinos. A outra parte a acrescentar a este comando é alterar a duração. Sem a .duration(), a transição assume o padrão de 250 ms - defina a duração para 2000 ms anexando .duration(2000) à .transition(). Por último, a bowlBall deve estar completa, mas não fará nada até que seja chamada à ação e você quer que ela funcione quando você tocar na bola - esse é o momento de usar .on('click',...)! bowlBall deve ser executada ao clicar em ball, então o comando fica assim: ball.on('click', bowlBall); Lembre-se que é possível ler o comando .on('click',...) de trás para frente para ter certeza de que cada peça está no lugar certo.
Solução do código de exemplo:
(Toque abaixo para revelar)

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

ball.on('click', bowlBall);

Conceitos de JavaScript: Bloco de Código (função), Identificadores, Expressão de Membro
Conceitos de D3: .transition(), .duration(), .attr(‘cy’,), .on(‘click’,)
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

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

[/details]