index.html

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// Hexagon properties
const hexSize = 50; // Size of each hexagon
const hexWidth = Math.sqrt(3) * hexSize;
const hexHeight = 2 * hexSize;
const offsetX = hexWidth * 0.75;
const offsetY = hexHeight * 0.5;
const rows = 10;
const cols = 10;

// Hex map storage
let hexGrid = [];

// Function to generate a hexagonal grid
function generateHexGrid() {
    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            let x = col * offsetX;
            let y = row * hexHeight + (col % 2 ? offsetY : 0);
            hexGrid.push({ x, y, type: getRandomTerrain() });
        }
    }
}

// Function to draw hexagons
function drawHex(x, y, type) {
    ctx.beginPath();
    for (let i = 0; i < 6; i++) {
        let angle = (Math.PI / 3) * i;
        let px = x + hexSize * Math.cos(angle);
        let py = y + hexSize * Math.sin(angle);
        ctx.lineTo(px, py);
    }
    ctx.closePath();
    ctx.fillStyle = getTerrainColor(type);
    ctx.fill();
    ctx.stroke();
}

// Function to assign random terrain types
function getRandomTerrain() {
    const terrains = ["water", "plains", "forest", "mountain"];
    return terrains[Math.floor(Math.random() * terrains.length)];
}

// Function to get terrain color
function getTerrainColor(type) {
    switch (type) {
        case "water": return "#3A80BA";
        case "plains": return "#C2B280";
        case "forest": return "#228B22";
        case "mountain": return "#A9A9A9";
        default: return "#FFFFFF";
    }
}

// Function to render the map
function renderMap() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    hexGrid.forEach(hex => drawHex(hex.x, hex.y, hex.type));
}

// Initialize and draw map
generateHexGrid();
renderMap();