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

Una pantalla de 160 × 192

1/7

Píxeles virtuales

Todos los juegos dibujan en una pantalla de 160 × 192 píxeles, la proporción de la Atari 2600. No importa si tu teléfono tiene 400 o 1400 píxeles de ancho: el juego sólo conoce esos 160.

En core/renderer.js el canvas se crea de ese tamaño exacto y se apaga el suavizado:

canvas.width = VW; canvas.height = VH; this.ctx.imageSmoothingEnabled = false;

Y pintar es casi siempre una sola cosa: un rectángulo de color, rect(x, y, w, h, color). El programa imita ese renderer con letras: cada carácter vale un bloque de 10 × 10 píxeles.

leccion.js

1const VW = 160, VH = 192, BLOQUE = 10;
2
3// Un renderer de mentira: pinta letras en vez de píxeles
4class Renderer {
5  constructor() {
6    this.filas = Array.from({ length: Math.ceil(VH / BLOQUE) }, () => Array(VW / BLOQUE).fill(" "));
7  }
8  rect(x, y, w, h, color) {
9    for (let fy = Math.floor(y / BLOQUE); fy < Math.ceil((y + h) / BLOQUE); fy++)
10      for (let fx = Math.floor(x / BLOQUE); fx < Math.ceil((x + w) / BLOQUE); fx++)
11        if (this.filas[fy] && fx < this.filas[fy].length) this.filas[fy][fx] = color;
12  }
13  clear(color) { this.rect(0, 0, VW, VH, color); }
14  mostrar() { for (const f of this.filas) console.log("|" + f.join("") + "|"); }
15}
16
17const r = new Renderer();
18r.clear(".");
19r.rect(0, 0, 160, 16, "=");      // el marcador de arriba
20r.rect(70, 96, 30, 10, "s");     // tres casillas de serpiente
21r.rect(120, 56, 10, 10, "f");    // una fruta
22r.mostrar();

$ node leccion.js

Pulsa CORRER (o Ctrl+Enter).

Qué mirar

Salen 16 columnas por 20 renglones de letras: 160 × 192 entre 10. El marcador mide 16 píxeles, y por eso el tablero empieza en el píxel 16, a media letra: la serpiente (en el píxel 96, la salida real de snake_01) y la fruta ocupan dos renglones cada una. La pantalla de verdad no tiene ese problema; el dibujo con letras es más burdo. Mueve la fruta cambiando el 120 y el 56.

Tutorial de Canvas (MDN) ↗

Toda la lección en una página

Píxeles virtuales

Todos los juegos dibujan en una pantalla de 160 × 192 píxeles, la proporción de la Atari 2600. No importa si tu teléfono tiene 400 o 1400 píxeles de ancho: el juego sólo conoce esos 160.

En core/renderer.js el canvas se crea de ese tamaño exacto y se apaga el suavizado:

canvas.width = VW; canvas.height = VH; this.ctx.imageSmoothingEnabled = false;

Y pintar es casi siempre una sola cosa: un rectángulo de color, rect(x, y, w, h, color). El programa imita ese renderer con letras: cada carácter vale un bloque de 10 × 10 píxeles.

1const VW = 160, VH = 192, BLOQUE = 10;
2
3// Un renderer de mentira: pinta letras en vez de píxeles
4class Renderer {
5  constructor() {
6    this.filas = Array.from({ length: Math.ceil(VH / BLOQUE) }, () => Array(VW / BLOQUE).fill(" "));
7  }
8  rect(x, y, w, h, color) {
9    for (let fy = Math.floor(y / BLOQUE); fy < Math.ceil((y + h) / BLOQUE); fy++)
10      for (let fx = Math.floor(x / BLOQUE); fx < Math.ceil((x + w) / BLOQUE); fx++)
11        if (this.filas[fy] && fx < this.filas[fy].length) this.filas[fy][fx] = color;
12  }
13  clear(color) { this.rect(0, 0, VW, VH, color); }
14  mostrar() { for (const f of this.filas) console.log("|" + f.join("") + "|"); }
15}
16
17const r = new Renderer();
18r.clear(".");
19r.rect(0, 0, 160, 16, "=");      // el marcador de arriba
20r.rect(70, 96, 30, 10, "s");     // tres casillas de serpiente
21r.rect(120, 56, 10, 10, "f");    // una fruta
22r.mostrar();

Agrandar sin que se vea borroso

160 píxeles en un teléfono serían una estampita. Así que el canvas se agranda con CSS, pero sólo por números enteros: ×2, ×3, ×4. Si fuera ×2.5, unos píxeles saldrían de 2 y otros de 3, y las letras de 3 × 5 se verían chuecas.

Esto es fit(), tal cual está en el renderer:

const s = Math.max(1, Math.floor(Math.min(availW / VW, availH / VH)));

Busca la escala que cabe a lo ancho y a lo alto, se queda con la menor y la redondea hacia abajo. Y el CSS del canvas lleva image-rendering: pixelated, para que el navegador agrande cada píxel como un cuadro duro en vez de difuminarlo.

1const VW = 160, VH = 192;
2function fit(availW, availH) {
3  return Math.max(1, Math.floor(Math.min(availW / VW, availH / VH)));
4}
5
6const pantallas = [
7  ["teléfono chico", 360, 560],
8  ["teléfono grande", 412, 760],
9  ["tableta", 820, 1000],
10  ["laptop", 1366, 680],
11];
12for (const [nombre, w, h] of pantallas) {
13  const s = fit(w, h);
14  console.log(nombre.padEnd(16), "x" + s, "->", VW * s + "x" + VH * s, "px");
15}

En la laptop manda la altura: 680 / 192 da 3.5, que baja a ×3. En el teléfono chico manda el ancho: 360 / 160 = 2.25, ×2. Sobra un poco de espacio a los lados, y es el precio de los píxeles parejos.

Dónde cae cada casilla

Snake no piensa en píxeles sino en casillas. Arriba de snake.js están sus medidas:

export const CELL = 10, COLS = 16, ROWS = 17, HUD = 16;

16 columnas de 10 píxeles = 160: el ancho exacto de la pantalla.
17 renglones de 10 = 170, más los 16 del marcador (HUD) = 186, que caben en 192.

Para pintar la casilla (x, y) se convierte a píxeles: x * CELL a lo ancho y HUD + y * CELL a lo alto, porque el tablero empieza debajo del marcador. Así pinta el cuerpo render():

r.rect(b.x * CELL, HUD + b.y * CELL, CELL, CELL, color)

Un comentario del archivo cuenta por qué 10 píxeles: «se ve mejor en teléfono que 20x22 de 8px».

1const CELL = 10, COLS = 16, ROWS = 17, HUD = 16;
2
3function aPixel(casilla) {
4  return { px: casilla.x * CELL, py: HUD + casilla.y * CELL };
5}
6
7console.log("esquina de arriba:", aPixel({ x: 0, y: 0 }));
8console.log("salida de snake_01:", aPixel({ x: 7, y: 8 }));
9console.log("esquina de abajo:", aPixel({ x: COLS - 1, y: ROWS - 1 }));
10console.log("alto usado:", HUD + ROWS * CELL, "de 192");

La última casilla empieza en el píxel 176 y termina en el 185: sobran 6 píxeles abajo. La lógica del juego nunca habla de píxeles; sólo render hace la cuenta.