Skip to content

WIRXL

projects & experiments

wirxl.com // projects // hexon

Hexon

[ game ]

What it is

A hexagonal take on the 1010 / Trigon line-clearing puzzle. You drag pieces onto a 61-cell hex grid and clear lines along three axes instead of the usual two. Three modes: Classic, a two-minute Timed run, and a Daily Challenge seeded from the date. Gems you earn feed a shop of deliberately theatrical one-shot power-ups.

Why I built it

I wanted a puzzle game that didn’t feel like every other square-grid one, without inventing something nobody would understand on sight. Hexes clear on three axes, and that one change makes you think differently about every single placement.

It started as a test of whether I could make hex geometry and line-clearing feel good to play. Then it kept growing, because each idea suggested the next one. Combos led to power-ups, power-ups led to a shop.

How it works

One HTML file, vanilla JavaScript, drawing straight to a canvas. The grid uses cube coordinates for the hexes, which is what makes three-axis line detection manageable rather than miserable.

Rendering scales by devicePixelRatio so it stays sharp on phones, and every drag coordinate has to divide back out by that same ratio to make the touch position agree with the board position. That alignment was easily the fiddliest part of the build. I eventually abandoned the floating “ghost” piece under the thumb altogether and replaced it with a semi-transparent preview on the board itself, offset above where your finger is.

Leaderboards run on a small PHP backend that reads and writes flat JSON files, top 50 per mode. The Daily board gets its own date-stamped file, created the first time someone plays that day. Everything else lives in localStorage: gems, high scores, unlocked themes, frenzy inventory, audio preferences.

The particle system checks core count and available memory, then scales its particle counts and frame rate to match. Low-end phones choke on the bigger clears otherwise.

What I’d change

Score submission has no server-side validation, so the leaderboard simply takes the client’s word for it. Fine while it’s a toy. Not fine the moment anyone actually cares about the board.

The Chain Reaction power-up traces a scrappier path across the grid than the clean pattern I had in mind. I shelved it as too fiddly for the payoff, and it still nags at me.

▚ stack

JavaScriptHTML5 CanvasPHPCSSlocalStorage

added

View it