Cuarenta ladrillos, y ni uno está escrito a mano.
const spawnBrick = useSpawn(Brick);
for (let row = 0; row < BRICK_ROWS; row++) {
for (let col = 0; col < BRICK_COLS; col++) {
spawnBrick({ row, col });
}
}Dos bucles, una rejilla
Un bucle recorre una lista. Dos bucles anidados recorren una rejilla: por cada fila, todas las columnas. Cinco filas por ocho columnas, cuarenta pasadas, cuarenta ladrillos.
Y la posición sale de la aritmética, no de una tabla:
const x = MARGIN_X + col * (BRICK_W + GAP_X);
const y = TOP + row * (BRICK_H + GAP_Y);Empieza en el margen y avanza un ladrillo más un hueco por cada columna. Cambia
BRICK_COLS a 12 y el muro se rehace solo. Con cuarenta posiciones escritas a mano,
cambiar el diseño sería una tarde.
El color también sale de la fila:
tint: getColor(ROW_COLORS[row]),ROW_COLORS es una lista de cinco colores y ROW_COLORS[row] coge el que corresponde:
[0] el primero, [1] el segundo. Las listas empiezan a contar en cero, siempre, en
todos los lenguajes que te vas a encontrar.
Un segundo fichero
Aquí pasa algo nuevo: hay dos pestañas encima del editor. bricks.ts es un fichero
aparte, y el principal lo trae con:
import { BRICK_COLS, BRICK_ROWS, Brick } from './bricks';No es ceremonia: es el momento natural. El fichero de antes hacía una cosa; ahora hay dos temas (la partida y los ladrillos) y cada uno cabe entero en su cabeza. Un fichero por tema es lo que hace que un juego siga siendo editable a los tres meses.
useSpawn: un objeto propio para cada ladrillo
const spawnBrick = useSpawn(Brick);
spawnBrick({ row: 0, col: 3 });Hasta ahora creabas sprites sueltos en la escena. useSpawn prepara una fábrica de
ladrillos, y cada vez que la llamas nace un objeto con identidad propia que agrupa todo lo
que Brick registre: su sprite, su estado, sus bucles. Lo que le pasas entre paréntesis le
llega a Brick como argumento.
De momento parece un envoltorio sin ganancia. En el capítulo siguiente es lo que te va a permitir borrar un ladrillo concreto sin tocar los otros treinta y nueve.
¿Qué hace exactamente un `for`?
for (let col = 0; col < 8; col++) {
// ...
}Tres partes separadas por punto y coma:
let col = 0: empieza contando en cero.col < 8: sigue mientras esto sea cierto.col++: y después de cada vuelta, súmale uno.
Así que el bloque se ejecuta con col valiendo 0, 1, 2, 3, 4, 5, 6 y 7. Ocho vueltas. Al
llegar a 8 la condición falla y se acaba.
Cuando pones un for dentro de otro, el de dentro da la vuelta entera por cada vuelta
del de fuera. Cinco vueltas por fuera × ocho por dentro = cuarenta.
Ahora tú
Prueba BRICK_ROWS = 8. Prueba BRICK_COLS = 4 (fíjate en que el muro se queda corto: el
ancho del ladrillo es fijo, así que quedan huecos a la derecha).
Y cambia los colores de ROW_COLORS. Son cinco cadenas; puedes poner cualquier color de
CSS.
La bola todavía atraviesa los ladrillos como si nada. Eso es el capítulo siguiente.