Complete HTML5 SameGame clone built with Phaser 4, powered by a fully headless TypeScript game engine. It features a clean separation between logic and rendering, reusable core mechanics, and an efficient implementation based on object pooling and delta-driven animations.

A dense grid hides simple shapes. This example uses a greedy algorithm to extract the true external perimeter from binary grid data, removing all internal edges and collapsing hundreds of cells into a clean geometric outline. Everything that follows, such as rendering, collision and movement, becomes simpler once the grid turns into a shape.

A Tiled collision layer is just a dense grid of cells. By applying greedy rectangle merging, that grid can be reduced to a small set of non-overlapping rectangles that describe the exact same area, but are far cheaper to use at runtime. Full JavaScript example available with source code.