Tetromino pt-br Explainer

Explicação de Tetrominó

Objetivo deste desafio: Mover o retângulo para o lugar certo.

Passo a passo da solução: O bloco precisa se mover para a direita e para baixo. É possível fazer isso alterando as coordenadas 'x' e 'y' do objeto longBlock. O aumento de 'x' vai movê-lo para a direita e o aumento de 'y' vai movê-lo para baixo. Os valores que você precisa são x=120 e y=150. A maneira de mudar estes valores é através de uma chamada .attr(). O .attr() aceita dois argumentos separados por uma vírgula - o 1º argumento é o nome do atributo que você deseja alterar ('x' ou 'y'), e o 2º argumento é o valor ao qual você deseja definir o atributo (120 ou 150).

Solução do código de exemplo:

(Toque abaixo para revelar)


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

Conceitos de JavaScript: Expressão de Membro, Identificadores

*Conceitos de D3: .attr(‘x’,), .attr(‘y’,)

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


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

// translade o canto superior esquerdo para a posição final (com a posição de rotação final em mente) e, em seguida, gire.

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

// Adicionar borda às peças.

d3.selectAll('path').attr('stroke','black').attr('stroke-width',0.25);

// Peça do Aluno

var longBlock = pieces.append('rect');

longBlock.attr('width', 30).attr('height',120).attr('fill','cyan');