Walk Around pt-br Explainer

Explicação de Passeio

Objetivo deste desafio: Fazer que os botões azul e amarelo moverem o player para cima e para baixo.

Passo a passo da solução: O código começa com os botões verde e vermelho já funcionando. Cada um deles tem uma chamada .on('click',) anexada a ele. Dentro de suas funções de seta, eles têm 2 comandos: 1º atualizar o valor de playerCY e depois .transition() (muda) o player para seu novo valor 'cy'. Para fazer o player mover para a esquerda e direita, é necessário ter comandos semelhantes, mas usando 'cx' e playerCX.

O botão azul deve fazer com que o player vá para a esquerda. Mover-se para a esquerda significa diminuir o valor 'cx'. Dentro da função de seta do blueButton, diminua o valor de playerCX em 30 usando playerCX -= 30;. Então, na próxima linha da função, defina o atributo 'cx' do player para o playerCX recém atualizado. player.attr('cx',playerCX) não animará o movimento, então será preciso adicionar uma .transition() entre player e .attr().

Para que o player se mova para a direita sempre que o yellowButton for tocado, você tem os mesmos comandos que o blueButton, mas em vez de playerCX diminuindo em 30, ele deve aumentar em 30.

Solução do código de exemplo:

(Toque abaixo 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);

});

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

Conceitos do Grasshopper: pickRandom()

Conceitos de D3: .attr('cx',), .attr('cy',), .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/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');