Explicador de Orificio en la pared
Objetivo de este acertijo: Cambiar la ubicación del ladrillo dorado para llenar el hollo.
Tutorial de la solución: brick es un rectángulo. La posición de un rectángulo se determina por su esquina superior izquierda. La distancia desde el lado izquierdo de la pantalla es su valor 'x'. La distancia desde la parte superior de la pantalla es su valor 'y'. Para mover brick 2 filas hacia abajo, debes aumentar su valor 'y'.
Cada ladrillo tiene 25 de alto, así que mover 2 ladrillos hacia abajo aumenta 'y' a 50. Luego, para mover el ladrillo 2 espacios hacia la derecha, tienes que aumentar 'x' en dos anchos de ladrillo. Cada ladrillo tiene 50 de ancho, asi que 2 ladrillos a la derecha equivale 100.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
let brick = svg.append('rect')
.attr('fill', 'gold')
.attr('width', 50)
.attr('height', 25)
.attr('x', 100)
.attr('y', 50);
Conceptos de D3: .append(), .attr('fill',), .attr('height',), .attr('width',), .attr('x',), .attr('y',)
Código adicional (código oculto que se ejecuta antes del código del acertijo):
// Another Brick in the Wall
let brickW = 50;
let brickH = 25;
for (let i = 0; i <= 400/brickH; i++) {
for (let j = 0; j <= 400/brickW; j++) {
svg.append('rect').attr('width', brickW).attr('height',brickH).attr('fill',`rgb(${178+30*(Math.random()-0.5)},${34+20*(Math.random()-0.5)},${34+20*(Math.random()-0.5)})`).attr('stroke','white').attr('x',(j-0.5*(i%2))*brickW).attr('y',i*brickH);
}
}
d3.selectAll('rect').attr('opacity', (d,i)=> i===20?0:1);