Side To Side es-419 Explainer

Explicador de Lado a lado

Objetivo de este acertijo: Hacer que el globo caiga desde una posición diferente cada vez que pulses en él.

Tutorial de la solución: La posición horizontal del globo se controla usando el atributo 'cx' que se puede definir con el comando balloon.attr('cx',...). Para obtener una posición aleatoria, debes usar la función pickRandom() y el identificador position. position es un arreglo de números que se puede usar como valores 'cx'.

Tarjeta de repaso:
El acertijo Revienta tu burbuja debe ayudarte a practicar las habilidades que necesitas para completar Recógelo. Cuando lo resuelvas, intenta averiguar qué hace cada parte del código y cuándo es importante el orden de las llamadas de función.

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

Dado que esta parte del tema final del curso Animaciones II y evalúa sus conocimientos, no hay solución del código de ejemplo.

Conceptos de Grasshopper: pickRandom()

Conceptos de D3: .attr('cx')

Código adicional (código oculto que se ejecuta antes del código del acertijo):

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