Black Hole es-419 Explainer

Puzzle Explainer
#1

Explicador de Agujero negro

Objetivo de este acertijo:
Este acertijo usa conceptos de JavaScript que aprendiste previamente (variables y controladores de eventos) con conceptos de D3 enseñados anteriormente (método de transición, método de duración y atributos).

En concreto, usarás un controlador de eventos y una variable para animar los atributos dinámicos 'cx' y 'cy' de los círculos SVG.

Tutorial de la solución:
En el código con el que comienzas, hay dos declaraciones de variables, x e y, una función, collapse, un blackHole y un controlador de eventos. Las variables x e y corresponden a algún número entre 0 y 200 y se usan como valores para los atributos'cx' y 'cy' de blackHole. La función collapse contiene una animación incompleta en stars. La animación no está completa porque le falta un atributo y valor para que stars cambie. Debajo de esta función, hay un controlador de eventos que llama a la función collapse cuando se pulsa blackHole. Debido a que la animación está incompleta, no sucede nada cuando pulsas blackHole. En este acertijo, completarás la animación dentro de la función collapse para que stars se anime cuando pulses blackHole.

Para completar el acertijo, agrega .attr('cx', x) y attr('y', y) después de .duration(4000) que está dentro de la función collapse. Ahora, cuando pulses blackHole, todas las estrellas se moverán a blackHole.

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

let x = pickRandom(200)
let y = pickRandom(200)

function collapse() {
    stars.transition()
.duration(4000)
.attr('cx', x)
.attr('cy', 100);
}

blackHole.attr('cx', x).attr('cy', y)
blackHole.on('click', collapse);

Conceptos de JavaScript: variable, controlador de eventos, función
Conceptos de D3: atributo, .duration(), .transition()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

for (let i =0; i<155; i++){
let white = svg.append('circle')
.attr('r',.5 + Math.random()*2)
.attr('cx',Math.random()*window.innerWidth)
.attr('cy',Math.random()*window.innerHeight)
.attr('fill','white')
.attr('opacity',`${0.2*pickRandom(9)}`);
}

for (let i =0; i<5; i++){
let yellow = svg.append('circle')
.attr('r',.5 + Math.random()*2)
.attr('cx',Math.random()*window.innerWidth)
.attr('cy',Math.random()*window.innerHeight)
.attr('fill','yellow')
.attr('opacity',`${0.5*pickRandom(9)}`);
}

                
for (let i =0; i<155; i++){
let grey = svg.append('circle')
.attr('r',.5 + Math.random()*2)
.attr('cx',Math.random()*window.innerWidth)
.attr('cy',Math.random()*window.innerHeight)
.attr('fill','grey')
.attr('opacity',`${0.2*pickRandom(9)}`);
}
                
let stars =d3.selectAll('circle')

let blackHole =  svg.append('circle')
.attr('r',30 + Math.random()*2)
.attr('fill','black')
1 Like
#2
#3