A familiar board, with a little more magic.
A chess project exploring how new rules, sound, and atmosphere can change the experience of a familiar strategy game.
Explore how it works ↓Explore the project
Open the design and demonstrations, then follow the references for more detail.
The design, in more detail
Definition
A tactical 2.5D browser chess game combining classical piece mechanics with symmetrical elemental spell drafting, procedural Web Audio foley synthesis, and an offline Minimax AI worker.
The problem
Classical chess has been deeply solved by opening books and engine memorization, while chess variants often abandon the spatial discipline and elegant balance of the original game.
The approach
ChessArcane maintains the complete classical move rulebook while introducing symmetrical elemental rune cards drafted at the start of each match. Built in Vite + React + TypeScript with a 2.5D tilting perspective board, it features custom procedural Web Audio API foley sounds that synthesize physical stone clicks and arcane resonances without external MP3 audio files.
How it works
- 2.5D Tilting Perspective Board: Rendered with dynamic CSS transforms and tactile lighting to emulate physical tabletop play.
- Symmetrical Rune Drafting: Both players draft identical elemental spell cards (earth barrier, wind gust, fire spark) before play begins.
- Procedural Web Audio Foley: Synthesizes stone impact clicks, slide friction, and magical resonances mathematically in the browser.
- Minimax AI Web Worker: Executes alpha-beta pruning search on an isolated background thread to guarantee 60 FPS UI responsiveness.
- Zero-Latency Offline Matches: Runs entirely in the client browser with hot-seat multiplayer and local bot matches.
Project notes
- Perspective
- 2.5D Dynamic Tilt
- Audio Engine
- Procedural Web Audio API
- AI Worker
- Minimax + Alpha-Beta
These are the project’s documented design notes. Consult the linked implementation and its version before relying on a specific capability.
Development history & next steps
Board Engine & Chess Logic
Implemented standard FIDE chess rules, legal move generation, and check detection.
Procedural Audio & Runecraft
Engineered Web Audio synthesis nodes for tactile stone foley and drafted elemental spells.
2.5D Perspective & AI Bot
Added perspective camera tilt, particle shaders, and background worker Minimax bot.
What comes next
Adding P2P WebRTC matchmaking for instantaneous browser-to-browser competitive play.
Source material & related links
Follow the documentation, repositories, and related sites behind this project.
Vite, React, TypeScript codebase, Web Audio sound generators, and chess bot algorithms.
Topics: Chess · Game Dev · Web Audio · React · TypeScript · AI · Minimax