Interactive Board Game Prototype

This is an Interactive Board Game Prototype (“Wildfire”). It is a standalone, browser-based puzzle game where the player defends a “home” tile from procedurally generated “fire” tiles spreading across a 6x6 grid. It functions as an excellent study in grid mathematics, DOM-based state management, and turn-based game loops built entirely without canvas rendering or heavy game engine frameworks.

Specs

• Weight: ~10 KB. Zero external dependencies.
• Performance: High. Uses standard DOM manipulation and class toggling. The grid is rendered using CSS Grid, which handles layout reflows efficiently.
• Theming / Customization: Includes a fully functional light/dark mode toggle. State is saved to localStorage. Theming is handled via root CSS variables (--color-primary, --color-neutral).
• Responsiveness: Fixed grid size (repeat(6, 40px)). The container centers via flexbox, but the game board does not scale down for very small screens (under 300px wide).
• Graceful Degradation: Fails completely without JavaScript, as the entire game logic, board population, and event handling are script-driven.

Anatomy

The architecture separates the visual structure from the mathematical game state.

• HTML (The Skeleton): The #game container holds the .dice area, the #board (containing the .grid and row/col .numbering), the .actions panel, and the bottom .menu. A hidden <svg> block at the bottom stores the symbol definitions (<defs>) for use via <use xlink:href="...">.
• CSS (The Skin): SCSS compiles into a strict CSS Grid layout. The dice logic (.dice__cube[data-value="x"]) uses complex, overlapping radial-gradient backgrounds to draw physical dice pips based solely on a data attribute.
• JS (The Nervous System): A custom state machine. It manages the game loop: newGame() (initial setup), rollDice() (generates random coordinates), spreadFire() (calculates adjacent tiles using modulo math), and playerAction() (handles click events and updates the DOM state).

Logic

The core mathematical elegance lies in the 1D to 2D Grid Mapping used for fire spreading and neighbor detection.

let nthSquare = ((row - 1) * 6) + col;
// ...
let neighboringSquares =[];
if (nthSquare > 6) { neighboringSquares.push(nthSquare - 6); } // top
if (nthSquare < 31) { neighboringSquares.push(nthSquare + 6); } // bottom
if (nthSquare % 6 !== 0) { neighboringSquares.push(nthSquare + 1); } // right
if ((nthSquare - 1) % 6 !== 0) { neighboringSquares.push(nthSquare - 1); } // left

Instead of using a complex 2D array (e.g., grid[x][y]), the game treats the 6x6 board as a flat 1-dimensional array of 36 items. To find neighbors, it uses simple arithmetic: subtracting 6 moves you “up” a row, adding 6 moves you “down”. The modulo operator (% 6) acts as an edge-detection mechanic, preventing the fire from wrapping around the board from the right edge (nthSquare % 6 !== 0) to the left edge.

Feel

Tactile and tense. The interface feels like a digital tabletop game. The dice rolling is abstracted to numbers, but the visual rendering of the pips via CSS gradients roots the experience in physical reality. The delayed execution of the fire spreading (setTimeout) creates a distinct “enemy turn” cadence, building anticipation as the player waits to see where the fire will spark next. The SVGs snap into the grid with satisfying precision, making the defense actions (dig, douse) feel impactful.