Hop Around pt-br Explainer

Explicação de Saltar por aí

Objetivo deste desafio: Fazer o player saltar para a direita quando o yellowButton for tocado.

Passo a passo da solução: A animação do salto tem 2 .transition(): a 1ª move o player para o lado e o levanta, a 2ª solta o player e o deixa saltar.

O .on('click',) de blueButton já está completo. A 1ª .transition() tem .attr('cx',playerCX).attr('cy',100). Isso moverá o círculo para a esquerda, usando o valor atualizado do playerCX até 100. O yellowButton também deve ter um .attr('cy',100) para que o player suba à medida que se desloca para o lado.

A 2ª .transition() do blueButton move o 'cy' de volta para o chão, que está armazenado em playerCY. Para fazer o círculo saltar, o .ease() da .transition() tem que ser alterado. D3 tem uma função de aceleração chamada easeBounce que pode ser acessada usando-se d3.easeBounce. Dentro da função de seta do yellowButton, anexe outra .transition() seguida de .attr('cy',playerCY) e depois .ease(d3.easeBounce). A ordem do último .attr() e .ease() pode ser trocada, desde que os dois venham após a 2ª .transition().

Solução do código de exemplo:
(Toque abaixo 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);
});

Conceitos de JavaScript: Operador de atribuição (+=, -=), Bloco de código (função de seta), Expressão de membro, Identificadores

Conceitos de D3: .attr('cx',), .attr('cy',), .ease(), .on('click',), .transition()

Código Adicional (código oculto executado antes do código do desafio):

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');