← Así se hace un juego: Snake de Daily Challenge · Lección 7/16

El cuerpo es una cola

1/8

Una lista de casillas

La serpiente no es un dibujo: es un arreglo de casillas { x, y }, con la cabeza en la posición 0. Al empezar mide tres. El constructor de snake.js elige la dirección con más camino libre desde la salida y pone el cuerpo detrás, en sentido contrario:

this.body = [start, { x: start.x - dir0.x, y: start.y - dir0.y }, { x: start.x - 2 * dir0.x, y: start.y - 2 * dir0.y }];

Pintarla es recorrer el arreglo: la casilla 0 con el verde claro y el resto con el verde normal.

leccion.js

1const COLS = 10, ROWS = 5;
2const start = { x: 4, y: 2 }, dir0 = { x: 1, y: 0 };   // mirando a la derecha
3const body = [start,
4  { x: start.x - dir0.x, y: start.y - dir0.y },
5  { x: start.x - 2 * dir0.x, y: start.y - 2 * dir0.y }];
6
7function pintar(body) {
8  const t = Array.from({ length: ROWS }, () => Array(COLS).fill("."));
9  body.forEach((b, i) => { t[b.y][b.x] = i === 0 ? "C" : "s"; });
10  for (const fila of t) console.log(fila.join(""));
11}
12
13console.log(body);
14pintar(body);

$ node leccion.js

Pulsa CORRER (o Ctrl+Enter).

Qué mirar

La cabeza (C) en la columna 4 y el cuerpo a su izquierda, porque mira a la derecha. Cambia dir0 a { x: 0, y: 1 } (hacia abajo) y el cuerpo queda arriba de la cabeza.

Toda la lección en una página

Una lista de casillas

this.body = [start, { x: start.x - dir0.x, y: start.y - dir0.y }, { x: start.x - 2 * dir0.x, y: start.y - 2 * dir0.y }];

Pintarla es recorrer el arreglo: la casilla 0 con el verde claro y el resto con el verde normal.

1const COLS = 10, ROWS = 5;
2const start = { x: 4, y: 2 }, dir0 = { x: 1, y: 0 };   // mirando a la derecha
3const body = [start,
4  { x: start.x - dir0.x, y: start.y - dir0.y },
5  { x: start.x - 2 * dir0.x, y: start.y - 2 * dir0.y }];
6
7function pintar(body) {
8  const t = Array.from({ length: ROWS }, () => Array(COLS).fill("."));
9  body.forEach((b, i) => { t[b.y][b.x] = i === 0 ? "C" : "s"; });
10  for (const fila of t) console.log(fila.join(""));
11}
12
13console.log(body);
14pintar(body);

La cabeza (C) en la columna 4 y el cuerpo a su izquierda, porque mira a la derecha. Cambia dir0 a { x: 0, y: 1 } (hacia abajo) y el cuerpo queda arriba de la cabeza.

Moverse: entra por delante, sale por detrás

Para avanzar no se mueve cada pedazo. Se calcula la casilla nueva de la cabeza, se mete al principio con unshift y se saca el último con pop. Todo lo de en medio se queda donde estaba, y aun así la serpiente parece reptar.

this.body.unshift(head); … this.body.pop();

Es una cola de doble extremo (deque): se mete por un lado y se saca por el otro. En un arreglo, unshift cuesta O(n) porque recorre todo para hacer lugar, pero aquí n nunca pasa de 16 × 17 = 272 casillas: no se nota.

1const COLS = 10, ROWS = 5;
2const body = [{ x: 4, y: 2 }, { x: 3, y: 2 }, { x: 2, y: 2 }];
3const pintar = () => {
4  const t = Array.from({ length: ROWS }, () => Array(COLS).fill("."));
5  body.forEach((b, i) => { t[b.y][b.x] = i === 0 ? "C" : "s"; });
6  return t.map(f => f.join("")).join("  ");
7};
8
9const pasos = [{ x: 1, y: 0 }, { x: 0, y: 1 }, { x: 0, y: 1 }, { x: -1, y: 0 }];
10console.log("inicio  ", pintar());
11for (const dir of pasos) {
12  const head = { x: body[0].x + dir.x, y: body[0].y + dir.y };
13  body.unshift(head);   // entra la cabeza
14  body.pop();           // sale la cola
15  console.log("paso    ", pintar());
16}
17console.log("largo:", body.length);

Cada renglón de la salida es el tablero entero aplanado (sus cinco filas una tras otra). La serpiente avanza, baja dos y da vuelta a la izquierda, y el largo sigue en 3: por cada cabeza que entra sale una cola.

Nunca de reversa

El control se lee en cada tick, pero la serpiente sólo se mueve cada interval ticks. Por eso hay dos direcciones: dir, la que lleva, y nextDir, la que pediste para el próximo paso.

if (mask & BTN.UP && this.dir.y !== 1) this.nextDir = { x: 0, y: -1 }; else if (mask & BTN.DOWN && this.dir.y !== -1) this.nextDir = { x: 0, y: 1 }; …

Cada condición prohíbe la contraria: si vas hacia abajo (dir.y === 1), arriba se ignora. Y se compara contra dir, la dirección real, no contra la pedida. Si vas a la derecha y en el mismo paso aprietas arriba y luego izquierda, la izquierda se ignora: si no, la cabeza se metería en su propio cuello.

1const BTN = { UP: 1, DOWN: 2, LEFT: 4, RIGHT: 8 };
2const s = { dir: { x: 1, y: 0 }, nextDir: { x: 1, y: 0 } };   // va a la derecha
3
4function leer(mask) {
5  if (mask & BTN.UP && s.dir.y !== 1) s.nextDir = { x: 0, y: -1 };
6  else if (mask & BTN.DOWN && s.dir.y !== -1) s.nextDir = { x: 0, y: 1 };
7  else if (mask & BTN.LEFT && s.dir.x !== 1) s.nextDir = { x: -1, y: 0 };
8  else if (mask & BTN.RIGHT && s.dir.x !== -1) s.nextDir = { x: 1, y: 0 };
9}
10
11leer(BTN.LEFT);
12console.log("izquierda yendo a la derecha:", s.nextDir);
13leer(BTN.UP);
14console.log("arriba:", s.nextDir);
15leer(BTN.LEFT);
16console.log("izquierda antes de moverse:", s.nextDir);
17s.dir = s.nextDir;   // llega el tick en que se mueve
18leer(BTN.LEFT);
19console.log("izquierda ya yendo arriba:", s.nextDir);

La primera izquierda se ignora (sería reversa). Arriba se acepta. La segunda izquierda también se ignora, porque dir sigue siendo «derecha» hasta que la serpiente se mueva. Ya moviéndose hacia arriba, la izquierda sí entra.