Arcade · Prototype

2048

Merge tiles. Reach 2048. Keep going

Prototype

4 × 4 Grid

beginner Difficulty

Canvas 2D + PixiJS Engine

2048

// TILE MERGE ENGINE v2.0.4.8

> GRID: 4 × 4 MATRIX

> ← → ↑ ↓ SLIDE ALL TILES

> MATCHING TILES MERGE ON COLLISION

> TARGET: 2048 TILE VALUE

> GAME OVER WHEN NO MOVES REMAIN

PRESS [ENTER] TO INITIATE

Specs

Difficulty: beginner
Grid: 4 × 4
Engine: Canvas 2D + PixiJS

Topics

gamepuzzle2048mergecanvas

Languages

TypeScript 74%
Svelte 16%
CSS 10%

About

Why I built this

2048 is the game I played most on my phone — simple rules, deep strategy. The implementation challenge was making tile merges feel right: adaptive font sizing so "2" and "2048" both look good, value-based colors that make the board scannable at a glance, and blocking engine-input mouse clicks so they don't accidentally trigger slides. It's a puzzle game wedged into an arcade engine, which required some creative adapter work.

Highlights

Slide & Merge Arrow keys slide all tiles — matching values combine

Adaptive Text Font size scales with tile value — 2 to 2048+ all readable

Value Colors Each power of 2 has a unique color for instant recognition

Game Over Detection Checks all possible moves — ends when no merges remain

Canvas Text Layer Separate canvas overlay for crisp, readable numbers

Tech Stack

Canvas 2D

PixiJS

game-preset-arcade

Capture-phase blocker

Dev Notes

The engine-input mouse module converts clicks to directional swipes — great for snake, terrible for 2048. A capture-phase event listener blocks clicks before they reach the engine.

Tile numbers are rendered on a separate Canvas 2D layer because PixiJS text objects would be overkill for 16 cells that update once per move.

Font sizing uses three ratio tiers (0.42, 0.34, 0.28 of cell size) based on digit count, with per-value text colors for contrast against the tile background.