Walk Around explainer

The aim of this puzzle: Make the blue and yellow buttons move the player up and down.

Walkthrough of the solution: The code starts with the green and red buttons already working. Each one has an .on('click',) call attached to it. Inside their arrow functions, they have 2 commands: 1st update the playerCY value, and then .transition() the player to its new 'cy' value. To make the player move left and right, you’ll want to have similar commands but using 'cx' and playerCX.

The blue button should make the player go to the left. Moving left means decreasing the 'cx' value. Inside the arrow function for the blueButton, decrease the playerCX value by 30 using playerCX -= 30;. Then on the next line in the function, set 'cx' attribute of the player to the newly updated playerCX. player.attr('cx',playerCX) will not animate the movement, so you’ll want to add a .transition() between the player and .attr().

To make the player move to the right whenever the yellowButton is tapped, you have the same commands as the blueButton, but instead of playerCX decreasing by 30, it should increase by 30.

Sample code solution:
(Tap below to reveal)

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

JavaScript Concepts: Assignment Operator (+=, -=),Code Block (arrow function), Member Expression, Identifiers

Grasshopper Concepts: pickRandom()

D3 Concepts: .attr('cx',), .attr('cy',), .on('click',), .transition()
Additional Code (hidden code that runs before the puzzle’s code):

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

Not sure what’s wrong

How come you joined 53 minutes ago and you are at this puzzle already?

Ive worked and saved on my accound…

@Grasshopper_Frankie, can you please explain this section of the Additional code that runs before the puzzle’s code?

I believe that this arrow function should be creating a new array of HSL (hue-saturation-lightness) colours using the map( ) method.

Is the ...Array(36) part of the code a shorthand way of listing the numbers 1 to 35? Or am I completely off track?