Tetromino es-419 Explainer

Explicador de Tetrominó

Objetivo de este acertijo: Mover el rectángulo a su lugar.

Tutorial de la solución: El bloque se debe mover a la derecha y hacia abajo. Puedes hacerlo cambiando las coordenadas 'x' e 'y' del object longBlock. Al aumentar 'x', lo moverá a la derecha, y al aumentar 'y', lo moverá hacia abajo. Los valores que necesitas son x=120 e y=150. Para cambiar estos valores debes usar una llamada .attr(). .attr() toma dos argumentos separados por una coma: el primer argumento es el nombre del atributo que quieres cambiar ('x' o 'y'), y el segundo argumento es el valor en el que quieres definir el atributo (120 o 150).

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

longBlock.attr('x', 120).attr('y', 150);

Conceptos de JavaScript: expresión de miembro, identificadores
Conceptos de D3: .attr(‘x’,), .attr(‘y’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

var pieces = svg.append('g');
pieces.attr('transform','scale(0.85)');

const max = Math.max(window.innerWidth, window.innerHeight);
for (let i = 0; i <= max; i += 30) {
    pieces.append('line').attr('x1',i).attr('y1',0).attr('x2',i).attr('y2',max).attr('stroke-width',1).attr('stroke','black');
    pieces.append('line').attr('x1',0).attr('y1',i).attr('x2',max).attr('y2',i).attr('stroke-width',1).attr('stroke','black');
}

var jPiece = pieces.append('path');
var lPiece = pieces.append('path');
var oPiece = pieces.append('path');
var sPiece = pieces.append('path');
var tPiece = pieces.append('path');
var zPiece = pieces.append('path');

jPiece.attr('fill','blue').attr('d','M 0 0 L 0 30 L 60 30 L 60 60 L 90 60 L 90 0 Z');
lPiece.attr('fill','orange').attr('d','M 0 0 L 0 60 L 30 60 L 30 30 L 90 30 L 90 0 Z');
oPiece.attr('fill','yellow').attr('d','M 0 0 L 0 60 L 60 60 L 60 0 Z');
sPiece.attr('fill','green').attr('d','M 0 0 L 0 60 L 30 60 L 30 90 L 60 90 L 60 30 L 30 30 L 30 0 Z');
tPiece.attr('fill','purple').attr('d','M 0 0 L 0 30 L 30 30 L 30 60 L 60 60 L 60 30 L 90 30 L 90 0 Z');
zPiece.attr('fill','red').attr('d','M 0 0 L 0 30 L 30 30 L 30 60 L 90 60 L 90 30 L 60 30 L 60 0 Z');

// traslada la esquina superior izquierda a la posición final (con la posición de rotación final en mente), luego gira.
jPiece.attr('transform','translate(270,180) rotate(90)');
lPiece.attr('transform','translate(0,270) rotate(-90)');
oPiece.attr('transform','translate(60,210) rotate(0)');
sPiece.attr('transform','translate(240,210) rotate(90)');
tPiece.attr('transform','translate(150,240) rotate(-90)');
zPiece.attr('transform','translate(90,150) rotate(90)');

// Agrega borde a las unidades.
d3.selectAll('path').attr('stroke','black').attr('stroke-width',0.25);

// Unidad de estudiante
var longBlock = pieces.append('rect');
longBlock.attr('width', 30).attr('height',120).attr('fill','cyan');