Side to Side pt-br Explainer

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