Stage Fright es-419 Explainer

Puzzle Explainer
#1

Explicador de Miedo escénico

Objetivo de este acertijo: Hacer la transición del círculo a rojo cuando lo pulsas.
Tutorial de la solución: Si ejecutas el código de inicio, verás que curtain se sube cuando la pulsas. En realidad está cambiando la altura del rectángulo. Debes hacer algo similar con performer, debe ir cambiando su color a rojo cuando haces clic en él. La parte curtain.on('click',...) esperará que hagas clic en la cortina y luego ejecutará una función; en este caso una función de flecha. Puedes copiar el comando para curtain y simplemente cambiar el identificador (de curtain aperformer). Luego, debes cambiar el atributo que se está cambiando, de ‘altura’ a ‘relleno’. Solo recuerda que el artista cambie a ‘red’ o al menos tenga algún tono de rojo.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

curtain.on('click', () => {
  curtain.transition()
.attr('height', 25)
.duration(1000);
});

performer.on('click', () => {
  performer.transition()
.attr('fill', 'tomato')
.duration(1000);
});

Conceptos de JavaScript: bloque de código (función de flecha), expresión de miembro, identificadores
Conceptos de D3: .attr(‘height’,), .attr(‘fill’,), .duration(), .transition(), .on(‘click’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

var rg = pickRandom(255);
var color = 'rgb('+rg+','+rg+','+(255-pickRandom(10))+')';

var performer = svg.append('circle').attr('fill',color).attr('cx', 100).attr('cy',150).attr('r',30);

var stage = svg.append('g');
var curtain = stage.append('rect').attr('fill', 'orangered').attr('x',0).attr('y',0).attr('height',175).attr('width',200);

var folds = 10;
for (var i=0; i< folds; i++) {
    stage.append('rect').attr('width',5).attr('height',175).attr('x',i*200/folds).attr('fill','red');
}

stage.append('rect').attr('width',200).attr('height',5).attr('y',175).attr('fill','gold');

stage.on('click',()=>{
    stage.selectAll('rect').filter('[fill=red]').transition().attr('transform','scale(1 0.14286)').duration(1000);
    stage.selectAll('rect').filter('[fill=gold]').transition().attr('y',25).duration(1000);
    curtain.transition().attr('height',25).duration(1000);
});
1 Like
#2
#3