Kit de inicio: match-3

Kit de inicio: match-3

El Starter Kit Match-3 de Kenney, que es un proyecto de Godot, pasado a TypeScript y un canvas 2D para Fogón: la misma mecánica, los mismos tamaños y los mismos tiempos. Un tablero de 8 × 8, fichas que se intercambian arrastrando, líneas de tres o más que se borran, lo de arriba que cae y fichas nuevas que entran, en cadena, con sus rebotes, sus chispas y sus sonidos.

En la demo: arrastrá una ficha hacia la de al lado (con el mouse o con el dedo). Si quedan tres iguales en línea, se van; si no, vuelven a su lugar. ?width=6&height=10 en la dirección cambia el tamaño del tablero.

Es solo la página. No hay sala ni red: todo pasa en el navegador de cada uno. server/room.ts es la sala vacía que Fogón le pide a cualquier proyecto.

Qué es de quién

• El kit original (el código en GDScript) es de Kenney, con licencia MIT: su texto está en [LICENSE-kenney.md](LICENSE-kenney.md).
• El fondo, la chispa, las manos del cursor, los sonidos y tres de las fichas (la gema, el pasto y los pinches) son de Kenney y están en dominio público (CC0).
• Dos fichas no son las del kit. Las suyas llevan el logo de Godot y un personaje con el nombre de Kenney; acá hay en su lugar un bloque azul con una estrella y un corazón, pintados por código en el mismo estilo (client/match3/tiles.ts).
• El port a TypeScript es nuestro, también MIT. El kit no tiene texto; la letra de la demo es Lilita One, de Google Fonts.

Los archivos

Todo lo que se reusa está en client/match3/ y no necesita ningún paquete. client/main.ts es solo la demo: crea el juego y cuenta las fichas que se van.

Cómo se usa en un juego

fogon pieces add starter-match-3

Eso trae client/match3/. Las imágenes y los sonidos (400 KB) no viajan con el juego: se cargan de la demo publicada de esta pieza (https://play.fogon.page/starter-match-3/match3/).

import { loadAssets, Match3 } from "./match3";

const canvas = document.querySelector("canvas")!; // con su tamaño dado por CSS
const game = new Match3(canvas, await loadAssets(), { width: 8, height: 8 });

let score = 0;
game.onMatch = (tiles, combo) => (score += tiles.length * 10 * combo); // combo: 1, 2, 3… en una cadena
game.onSwap = (matched) => console.log(matched ? "bien" : "esas no hacen línea");
game.onSettled = () => console.log("el tablero espera otra jugada");

game.start(); // dibuja y avanza solo; con un bucle propio: game.update(dt) y game.draw()

El juego escucha el mouse y los dedos sobre el canvas, se acomoda cuando cambia el tamaño de la ventana y prende el sonido con el primer toque. Para servir los archivos desde tu juego, copiá public/match3/ de esta pieza a tu public/ y cargalos con loadAssets({ base: "./match3/" }).

Otro tablero, otras fichas

const assets = await loadAssets();
const coin = new Image();
coin.src = "./moneda.png"; // 128 × 128, con su borde adentro
await coin.decode();

new Match3(canvas, assets, {
  width: 6,
  height: 9,
  tiles: [...assets.tiles, coin], // seis clases de ficha: más difícil
  background: false, // el fondo lo pone la página
});

Una ficha es una imagen cuadrada (se dibuja de 64 px sobre un tablero de 68 px por casilla); su clase es su lugar en la lista. paintTile muestra cómo pintar una por código, con el borde blanco y la línea oscura de las del kit.

Lo que se puede mirar y tocar

game.grid[columna][fila] es la ficha de cada casilla (type, column, row), game.findMatches() las que están en línea ahora, game.swap(a, b) hace una jugada como si la hubieran arrastrado, y game.swapping dice si el tablero todavía se está acomodando.

Lo que quedó distinto del original

• Las dos fichas con logo, cambiadas por las pintadas (arriba).
• El primer tablero espera. En el kit se puede agarrar una ficha mientras el tablero recién armado todavía borra sus líneas; acá se puede recién cuando queda quieto, como después de cualquier jugada.
• En pantallas angostas el tablero se agranda hasta ocupar el ancho. En el kit, la pantalla de 1280 × 720 se achica entera y en un teléfono parado el tablero queda diminuto.
• El fondo cubre toda la pantalla (recortado si hace falta) en vez de quedar del tamaño de la pantalla del kit.
• Las chispas eran partículas de la placa de video; acá son cuatro imágenes dibujadas con los mismos números.

Límites

• Como el kit: no hay puntaje, ni jugadas contadas, ni fin de partida, y no revisa si quedan jugadas posibles. Es una base; los avisos (onMatch, onSwap, onSettled) son para armar eso encima.
• Un solo jugador. Para hacerlo entre varios hace falta una sala que reparta el tablero.
• Los sonidos son .ogg, como en el kit: los Safari viejos no los reproducen, y ahí el juego anda mudo.

Licencia

MIT (el código, de Kenney y nuestro). Imágenes y sonidos: CC0, de Kenney; las dos fichas pintadas, MIT.