Explicador de Manzana mala
Objetivo de este acertijo: Elimina la badApple de la cesta.
Tutorial de la solución: La función takeOut se ejecutará cada vez que hagas clic en badApple. La función takeOut() cambia el color de badApple a verde lima. Puedes eliminar el .attr('fill','lime'), ya que badApple se va a eliminar y no verás su color. Luego, agregas la llamada .remove() a badApple dentro del bloque de código de la función para obtener badApple.remove(). Ahora, una vez que se llama a la función takeOut(), badApple se eliminará.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
function takeOut() {
badApple.remove();
}
badApple.on('click',takeOut);
Conceptos de JavaScript: bloque de código (función)
Conceptos de D3: .on('click',...), .remove()
Código adicional (código oculto que se ejecuta antes del código del acertijo):
for (let x of Array(20)) {
svg.append('circle').attr('r',30).attr('cx', 50+pickRandom(95)).attr('cy', 50+pickRandom(35)).attr('fill',`rgb(${200+pickRandom(55)},20,20)`);
}
let badApple = svg.append('circle').attr('r',30).attr('cx', 50+pickRandom(95)).attr('cy', 50+pickRandom(35)).attr('fill','maroon');
let basket = svg.append('g').attr('transform',`scale(20) translate(1,4)`).attr('stroke','grey').attr('stroke-width',0.1);
basket.append('path').attr('d','M 0 0 L 2 0 L 2.5 7 L 1 7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
basket.append('path').attr('d','M 2 0 L 4 0 L 4 7 L 2.5 7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
basket.append('path').attr('d','M 4 0 L 6 0 L 5.5 7 L 4 7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
basket.append('path').attr('d','M 6 0 L 8 0 L 7 7 L 5.5 7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);