One Step at a Time es-419 Explainer

Explicador de Pies, no me fallen ahora

Objetivo de este acertijo: Hacer que el cuerpo se mueva cuando lo pulses.
Tutorial de la solución: Cuando pulsas el cuerpo, un pie da un paso. Si ves el código, verás que dentro de la función de flecha hay un comando .transition() que mueve un pie al azar. Debes agregar un comando similar para body, las únicas diferencias es que debes usar body en lugar de pickRandom(foot) y debido a que body es un círculo, su posición horizontal es determinada por el atributo 'cx' en lugar del atributo 'x'.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

var distance = 0;
body.on('click', () => {
  distance = distance + 15;
  pickRandom(foot).transition().attr('x', distance);
  body.transition().attr('cx', distance);    
});

Conceptos de JavaScript: expresión binaria (+), bloque de código (función), funciones de llamada, ES6
Conceptos de Grasshopper: pickRandom()
Conceptos de D3: .attr(‘cx’,), .attr(‘x’,), .on(‘click’,), .transition()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

var tether = svg.append('rect').attr('width',length).attr('height',16).attr('fill','white').attr('y',72);

var walker = svg.append('g');
var left = walker.append('rect').attr('width',80).attr('height',40).attr('x',0).attr('y',10).attr('fill', 'lightseagreen');
var right = walker.append('rect').attr('width',80).attr('height',40).attr('x',0).attr('y',110).attr('fill', 'teal');
var body = walker.append('circle').attr('r',40).attr('cx',0).attr('cy',80).attr('fill','mediumturquoise');

var foot = [left, right];

walker.on('click', ()=>{
   tether.attr('width',body.attr('cx')); 
});

tether.on('click',()=>{
    distance=0;
    body.transition().duration(1000).attr('cx',0).ease(d3.easeBackInOut);
    d3.selectAll('rect').transition().duration(1000).attr('x',0).ease(d3.easeBackInOut);
    tether.transition().duration(1000).attr('width',0).ease(d3.easeBackInOut);
});
1 Like