Here’s my 3D implementation of a classic boardgame favorite Abalone in Three.js. I couldn’t find a version that focused heavily on visual presentation, so I took a crack at building my own.
My goals were:
- A tactile, physically convincing presentation
- Two modes of play: local PvP and a custom AI opponent
- High performance (instanced marbles, compact board representation) across devices
- As always, single file. No build, no framework, no bundler.
CodePen | GitHub Pages | Source
The board geometry is generated procedurally, including the marble sockets, so lighting and wood grain remain consistent across the entire surface.
I custom-built the game AI. It searches several moves ahead using standard techniques, with a few optimizations to keep move evaluation fast. A single move generator is shared between player input validation and AI search, avoiding duplicate rule logic and keeping the rules implementation consistent. I’d appreciate feedback on AI strength (is it too easy, too hard, or about right?)
Subtle bloom and FXAA make the marble highlights stand out without a noticeable performance cost.
Thanks for taking a look.