A tiny JavaScript library for board-game style grids. Check edges, rotate tiles, find open spots. No dependencies, about 3 KB.
Define tile edges once. The grid checks every neighbour before a tile is placed.
Rotate tiles in quarter turns. Edges follow the rotation for you.
Get every free position next to the board to build hints or simple AI players.
Add the script to your page:
<script src="/dist/meeplegrid.js"></script>
Create a grid and place tiles:
const grid = new MeepleGrid.Grid();
const road = { id: "road", edges: { n: "field", e: "road", s: "field", w: "road" } };
const city = { id: "city", edges: { n: "city", e: "road", s: "field", w: "road" } };
grid.place(road, 0, 0); // first tile goes anywhere
grid.canPlace(city, 1, 0); // true: road meets road
grid.place(city, 1, 0, 1); // false: rotated edges do not match
grid.openSpots(); // [{ x: 0, y: -1 }, { x: -1, y: 0 }, ...]
In Node.js: const MeepleGrid = require("./meeplegrid.js");
new Grid({ match }) | Creates an empty grid. match(a, b) compares two edges, strict equality by default. |
grid.canPlace(tile, x, y, turns) | Returns true if the cell is free, touches the board and all edges match. |
grid.place(tile, x, y, turns) | Places the tile and returns the placed cell, or false. |
grid.get(x, y) | Returns the tile at a position or null. |
grid.openSpots() | Lists free positions next to placed tiles. |
grid.bounds() | Returns { minX, minY, maxX, maxY } of the board. |
MeepleGrid.rotate(edges, turns) | Rotates an edge map clockwise by quarter turns. |
A live demo you can play in the browser, example projects and a free tile pack with 48 PNG tiles in three seasons. See examples.
openSpots() and custom edge matching.