Disinfect es-419 Explainer

Explicador de Desinfecta

Objetivo de este acertijo: Eliminar las colonias bacterianas.

Tutorial de la solución: Verás que si ejecutas el código y haces clic en el gotero, este desaparecerá. ¡Eso es lo que quieres que suceda también cuando haces clic en las bacterias! Veamos cómo lo hace el gotero para que podamos copiarlo en las bacterias. Hay dos funciones: removeDropper y cure. removeDropper tiene un comando que dice: dropper.remove() la cual es el código que elimina el gotero de la pantalla. La definición de la función de cura está vacía, por lo que debes agregar un comando para eliminar bacteria de la pantalla: bacteria.remove();

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


function removeDropper() {

dropper.remove();

}

function cure() {

bacteria.remove();

}

dropper.on('click', removeDropper);

bacteria.on('click', cure);

Conceptos de JavaScript: bloque de código (función), expresión de miembro, identificadores

Conceptos de D3: .remove(), .on(‘click’,)

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


for (var i=0; i<numDiv; i++) {

svg.append('circle').attr('cx',window.innerWidth*Math.random()).attr('cy',window.innerHeight*Math.random()).attr('r',0).attr('fill','yellowgreen').transition().duration(60000).ease(d3.easeLinear).attr('r',100);

}

var bacteria = d3.selectAll('circle');

var dropper = svg.append('g').attr('transform','scale(4) translate(65 -5) rotate(45 0 0)');

var sample = dropper.append('path').attr('d','M 12 48 C 12 50 10 52 10 60 L 8 60 C8 52 6 50 6 48 Z').attr('fill','yellowgreen').attr('opacity',1);

var glass = dropper.append('path').attr('d','M 6 12 C 6 0 12 0 12 12 C 14 12 14 18 12 18 L 12 48 C 12 50 10 52 10 60 L 8 60 C8 52 6 50 6 48 L 6 18 C 4 18 4 12 6 12 Z').attr('fill','silver').attr('opacity',0.5).attr('stroke','grey').attr('stroke-width',0.2);

var rubber = dropper.append('path').attr('d','M 6 12 C 6 0 12 0 12 12 C 14 12 14 18 12 18 L 6 18 C 4 18 4 12 6 12 Z').attr('stroke','grey').attr('stroke-width',0.2);