Half And Half es-419 Explainer

Explicador de Mitad y mitad

Objetivo de este acertijo: Hacer que el rectángulo de la derecha cambie de color cada vez que lo pulses

Tutorial de la solución: El rectángulo izquierdo ya funciona, así que sólo tienes que copiar su código y cambiar left a right. Comencemos con la definición de la función changeRight(). Esta función debe definir el atributo 'fill' del rectángulo right en un color aleatorio. pickRandom(color) te dará un color aleatorio que se puede usar como el segundo argumento de right.attr('fill',...).

Para que esa función se ejecute cada vez que pulses el rectángulo right, usa un controlador de eventos. El método .on('click',...) se puede aplicar al rectángulo right, así que cada vez que se pulse el rectángulo right, ejecutará la función de devolución de llamada en el segundo argumento. Al final de tu código, agrega right.on('click', changeRight). Asegúrate de usar changeRight sin paréntesis porque se usa como función de devolución de llamada.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


function changeLeft() {

left.attr('fill', pickRandom(color));

}

function changeRight() {

right.attr('fill', pickRandom(color));

}

left.on('click', changeLeft);

right.on('click', changeRight);

Conceptos de JavaScript: bloque de código (función)

Conceptos de Grasshopper: pickRandom()

Conceptos de D3: .append(), .attr('cx',), .attr('cy',), .attr('fill',), .attr(r,), .on('click',...)

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

[details]

1 Like

¿Y el código oculto?