Hey there! I totally get how frustrating it can be to nail that Hexxagon board layout—hex grids have their own quirks, especially when you're trying to get the concentric ring structure right. Let's build the board and pieces step by step using HTML, CSS, and vanilla JS, so you can focus on the game logic later.

Step 1: HTML Structure #

We'll start with a simple container for the board; all the hex cells will be generated dynamically with JS.

<div class="hexxagon-board"></div>

Step 2: CSS for Hex Cells & Pieces #

We'll use clip-path to create the hexagonal shape for each cell, and CSS Grid to arrange them into the correct layout. For pieces, we'll use simple circular divs with distinct colors for each player.

/* Board container */
.hexxagon-board {
  display: grid;
  grid-template-columns: repeat(7, 60px); /* 7 columns to fit the 3-radius hex grid */
  grid-template-rows: repeat(7, 70px); /* 7 rows with vertical spacing for hexes */
  gap: 5px;
  justify-content: center;
  margin: 2rem auto;
}

/* Hexagonal cell style */
.hex-cell {
  width: 60px;
  height: 70px;
  background-color: #e0e0e0;
  /* Clip path to make a perfect hexagon */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hex-cell:hover {
  background-color: #d0d0d0;
}

/* Game pieces */
.piece {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #333;
}

.piece.player1 {
  background-color: #4285f4; /* Google blue for player 1 */
}

.piece.player2 {
  background-color: #ea4335; /* Google red for player 2 */
}

Step 3: JS to Generate the Board & Initial Pieces #

Hex grids are easiest to work with using axial coordinates (q, r). We'll generate all 37 cells for a standard Hexxagon board, convert those coordinates to CSS Grid positions, and add the initial pieces (center + 6 corner cells, split between two players).

const boardContainer = document.querySelector('.hexxagon-board');
const boardRadius = 3; // Standard Hexxagon board has a radius of 3 (3 steps from center to edge)

// Convert axial coordinates (q, r) to CSS Grid row/column positions
function axialToGrid(q, r) {
  // Center the grid at row 4, column 4 (since we're using 7x7 grid, 1-based indexing)
  const col = 3 + q;
  // Offset rows to fix hex alignment (accounts for the "stagger" of hex grids)
  const row = 3 + r + Math.floor(q / 2);
  return { row: row + 1, col: col + 1 }; // Grid uses 1-based indexing
}

// Generate all hex cells and initial pieces
for (let q = -boardRadius; q <= boardRadius; q++) {
  const rMin = Math.max(-boardRadius, -q - boardRadius);
  const rMax = Math.min(boardRadius, -q + boardRadius);
  
  for (let r = rMin; r <= rMax; r++) {
    const { row, col } = axialToGrid(q, r);
    const hexCell = document.createElement('div');
    
    hexCell.classList.add('hex-cell');
    hexCell.style.gridRow = row;
    hexCell.style.gridColumn = col;
    // Store axial coordinates for later game logic
    hexCell.dataset.q = q;
    hexCell.dataset.r = r;

    // Add initial pieces (matches standard Hexxagon starting layout)
    let player = 0;
    if (q === 0 && r === 0) {
      player = 1; // Center cell belongs to player 1
    } else if ((q === 3 && r === -3) || (q === -3 && r === 3) || (q === 0 && r === 3)) {
      player = 1; // Three corner cells for player 1
    } else if ((q === 3 && r === 0) || (q === -3 && r === 0) || (q === 0 && r === -3)) {
      player = 2; // Three corner cells for player 2
    }

    if (player !== 0) {
      const piece = document.createElement('div');
      piece.classList.add('piece', `player${player}`);
      hexCell.appendChild(piece);
    }

    boardContainer.appendChild(hexCell);
  }
}

Key Notes #

• Grid Alignment: The axialToGrid function handles the staggered row offset that's essential for hex grids to line up correctly.
• Scalability: To make the board bigger/smaller, just adjust boardRadius and update the CSS grid dimensions (e.g., radius 4 would need a 9x9 grid).
• Game Logic Prep: Each cell stores its axial coordinates in data-q and data-r—this will make it easy to implement movement rules later.

This setup gives you a fully functional Hexxagon board with initial pieces, ready for you to add movement, capture, and other game mechanics. Let me know if you need help tweaking any part of it!

内容的提问来源于stack exchange，提问作者Abdu Fayad