Walk Around es-419 Explainer

Explicador de Pasea

Objetivo de este acertijo: Hacer que los botones azul y amarillo muevan player hacia arriba y hacia abajo.

Tutorial de la solución: El código comienza con los botones verde y rojo que ya están funcionando. Cada uno tiene una llamada .on('click',) adjunta. Dentro de sus funciones de flecha, tienen 2 comandos: Primero, actualiza el valor playerCY y luego, .transition() (cambia) player a su nuevo valor 'cy'. Para que player se mueva hacia la izquierda y hacia la derecha, debes tener comandos similares, pero usar 'cx' y playerCX.

El botón azul debe mover player hacia la izquierda. Para hacerlo, se debe disminuir el valor 'cx'. Dentro de la función de flecha de blueButton, disminuye el valor playerCX en 30 mediante playerCX -= 30;. Luego, en la siguiente línea en la función, define el atributo 'cx' de player en el recientemente actualizado valor playerCX. player.attr('cx',playerCX) no animará el movimiento, por lo que debes agregar .transition() entre player y .attr().

Para mover player hacia la derecha, cada vez que pulses yellowButton, tendrás los mismos comandos que blueButton, pero en lugar de disminuir playerCX en 30, debes aumentarlo en 30.

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

greenButton.on('click', ()=>{
  playerCY -= 30;
  player.transition().attr('cy', playerCY);
});
redButton.on('click', ()=>{
  playerCY += 30;
  player.transition().attr('cy', playerCY);
});
blueButton.on('click', ()=>{
  playerCX -= 30;
  player.transition().attr('cx', playerCX);
});
yellowButton.on('click', ()=>{
  playerCX += 30;
  player.transition().attr('cx', playerCX); 
});

Conceptos de JavaScript: operador de asignación (+=, -=), bloque de código (función de flecha), expresión de miembro, identificadores

Conceptos de Grasshopper: pickRandom()

Conceptos de D3: .attr('cx',), .attr('cy',), .on('click',), .transition()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);

let playerCX = window.innerWidth/2;
let playerCY = window.innerHeight/2;
let player = svg.append('circle').attr('r',30).attr('cx',playerCX).attr('cy',playerCY).attr('fill',pickRandom(color));

let greenButton = svg.append('rect').attr('width',50).attr('height',50).attr('x',50).attr('y',0).attr('fill','#0F9D58');
let blueButton = svg.append('rect').attr('width',50).attr('height',50).attr('x',0).attr('y',50).attr('fill','#4285F4');
let redButton = svg.append('rect').attr('width',50).attr('height',50).attr('x',50).attr('y',50).attr('fill','#DB4437');
let yellowButton = svg.append('rect').attr('width',50).attr('height',50).attr('x',100).attr('y',50).attr('fill','#F4B400');
1 Like