Explicação de Lado a lado
Objetivo deste desafio: Fazer o balão cair de uma posição diferente cada vez que se toca nele.
Passo a passo da solução: A posição horizontal do balão é controlada usando-se o atributo 'cx' que pode ser definido com o comando balloon.attr('cx',...). Para obter uma posição aleatória, é preciso usar a função pickRandom() e o identificador position. position é uma array de números que podem ser usados como valores 'cx'.
Cartão de revisão:
O desafio Estourar a bola deve ajudá-lo a praticar as habilidades necessárias para completar o desafio Pegue-o. Quando você resolver, tente descobrir o que cada parte do código faz e quando a ordem das chamadas de função é importante.
Solução do código de exemplo:
(Toque abaixo para revelar)
Como isso é parte do tópico final do curso Animações II e está testando seus conhecimentos, não há solução do código de exemplo.
Conceitos do Grasshopper: pickRandom()
Conceitos de D3: .attr('cx')
Código Adicional (código oculto executado antes do código do desafio):
var position = [];
for (var i=35; i<=window.innerWidth-35; i+=5) {
position.push(i);
}
svg.append('rect').attr('fill','silver').attr('y',165+35).attr('width',window.innerWidth).attr('height',window.innerHeight-200);
