Tetromino Motion explainer

The aim of this puzzle: Make the blue block move into place when you tap it.
Walkthrough of the solution: You can see that the yellow block is a good example of what you want the blue block to do. It should move over, then down. The .on('click',...) commands are running the moveYellow and moveBlue functions, but the moveBlue function is currently empty. First, you need to add the longBlock identifier and add a .transition() so the block will slide. You have to tell it where to slide to first (x=120) which you do using an .attr(). It will move too fast, so you should also add .duration() with around 300ms. Now your long blue block will slide right above the slot, and it’s ready to drop. Add another .transition() to the end of the same command. And then, add another .attr() and .duration(). This time, the block needs to go to .attr('y', 150) and since it’s a little further to slide, give it about 1200ms. The main point to remember is that each .transition() marks the beginning of a new animation within your command, and all of the calls (the functions that start with a dot/period) are connected to the transition on their left.
Sample code solution:
(Tap below to reveal)

function moveYellow() {
  squareBlock.transition()
      .duration(900)
      .attr('x', 0)
    .transition()
      .duration(1500)
      .attr('y', 180);
  nextBlock();
}
function moveBlue() {
  longBlock.transition()
      .duration(300)
      .attr('x', 120)
    .transition()
      .duration(1200)
      .attr('y', 150);
}
squareBlock.on('click', moveYellow);
longBlock.on('click', moveBlue);

JavaScript Concepts: Code Block (function), Member Expression, Identifiers
D3 Concepts: .transition(), .duration(), .attr(‘x’,), .on(‘click’,)

1 Like