Hop Around es-419 Explainer

Puzzle Explainer
#1

Explicador de Brinca

Objetivo de este acertijo: Hacer que player brinque a la derecha cuando se pulse yellowButton.

Tutorial de la solución: La animación para brincar tiene 2 .transition(): primero, mueve player hacia el lado y levántalo, segundo, deja caer player y deja que rebote.

blueButton .on('click',) ya está completo. La primera .transition() tiene .attr('cx',playerCX).attr('cy',100). Eso moverá el círculo hacia la izquierda usando el valor playerCX actualizado y hasta 100. yellowButton también debe tener un .attr('cy',100) para que player suba a medida que se mueve hacia el lado.

La segunda .transition() para blueButton mueve 'cy' nuevamente al suelo, que está almacenado en playerCY. Para hacer que el círculo rebote, .ease() de .transition() se debe cambiar. D3 tiene una función de aceleración llamada easeBounce, a la que se puede acceder usando d3.easeBounce. Dentro de la función de flecha, yellowButton, adjunta otra .transition() seguida de .attr('cy',playerCY) y luego .ease(d3.easeBounce). El orden del último .attr() y .ease() se puede cambiar, siempre que ambos vayan después de la segunda .transition().

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

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

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

Conceptos de D3: .attr('cx',), .attr('cy',), .ease(), .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-30;
let player = svg.append('circle').attr('r',30).attr('cx',playerCX).attr('cy',playerCY).attr('fill',pickRandom(color));

let blueButton = svg.append('rect').attr('width',50).attr('height',50).attr('x',0).attr('y',0).attr('fill','#4285F4');
let yellowButton = svg.append('rect').attr('width',50).attr('height',50).attr('x',50).attr('y',0).attr('fill','#F4B400');
#2
#3