Chess Maze

Guide chess pieces through 3D maze islands. Collect every coin, dodge the obstacles, and reach the flag — one move at a time.

DesignNext.jsWebGLThree.js
Visit site
Chess Maze

Industry & context

Browser-based puzzle games have to earn attention in a tab — no install step, no app store, and often a first visit on mobile. Chess Maze sits in the casual puzzle space for players who enjoy chess movement but want short, spatial brain-teasers instead of full matches. The audience spans desktop and phone browsers, so clarity of valid moves, readable objectives, and smooth touch controls matter as much as level design. The product also needed room to grow: official campaigns, player-made levels, and competitive progression.

Overview

The challenge was to make real chess rules feel natural inside irregular 3D mazes — ring-shaped boards, floating islands, keys and locked gates, pressure plates, and move budgets — without overwhelming new players. We approached it with a progressive tutorial that introduces each piece type on its own, then opens into themed chapters with voxel biomes, collect-and-optimize objectives, and a completion loop built around fewer moves and a global leaderboard. A built-in level editor and share-by-link flow turn the game into a small creative platform, not just a fixed level pack.

Research

Playtesting and iteration focused on what makes chess-movement puzzles click in 3D: players need to read legal moves instantly, see objective progress at a glance, and feel rewarded for finding cleaner routes. That shaped the UX — click or drag-to-move with animated valid-move highlights, a skippable level-intro camera sweep, touch-aware camera hints on mobile, and clear objective tracking throughout each level. Community feedback also drove the editor and sharing flow: build a maze, test-play it in the browser, share a link, and optionally publish it for others to play.

Tech & process

Chess Maze is built as a TypeScript monorepo with Next.js on the frontend and a full-stack backend for accounts, levels, and leaderboards. React Three Fiber and Three.js power the WebGL scene — voxel Staunton-style pieces, biome scenery, and a custom GLSL sky shader give each chapter a distinct low-poly world. Game logic lives in a hand-rolled chess engine where move generation is filtered through maze layout, key/lock gating, and pressure-plate rules, with automated tests covering core gameplay. Levels are authored as structured data, editable in a built-in 3D builder, and served through a managed database layer. The app deploys on Vercel with a pipeline suited to frequent content and feature updates.

Results

Chess Maze is live at chess-maze.com as a free, no-install browser game on desktop and mobile. Official chapters introduce the mechanics and expand into themed voxel worlds; players can also design custom levels, share them with a link, and contribute to a community catalog. A global leaderboard ranked by move count gives the game a replay loop that rewards planning and optimization rather than one-and-done solves.