Cell-Grid-2

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hexagonales Bienenwaben-Muster</title>
    <style>
        #hexContainer {
            width: 500px;
            height: 500px;
            border: 2px solid #333;
            position: relative;
            overflow: hidden;
        }
        canvas {
            cursor: default; /* Default cursor for the canvas */
        }
    </style>
</head>
<body>

<div id="hexContainer"></div>

<script>
    // Eigenschaften des Hexagons
    const hexSize = 20; // Radius jedes Hexagons
    const hexWidth = 2 * hexSize; // Breite des Hexagons
    const hexHeight = Math.sqrt(3) * hexSize; // Höhe des Hexagons
    const hexHorizontalSpacing = hexWidth * 0.95; // Horizontaler Abstand für versetzte Spalten
    const hexVerticalSpacing = hexHeight; // Volle Höhe für jede Reihe
    const totalRows = 14;
    const totalCols = 13;

    // Create a 2D array to represent the grid with specific object data
    const gridData = [];

    // Helper functions
    function drawHexagon(ctx, x, y, fillColor = '#e0e0e0') {
        ctx.beginPath();
        for (let i = 0; i < 6; i++) {
            const angle = Math.PI / 3 * i + Math.PI / 6; // Rotated so the point is upwards
            const px = x + hexSize * Math.cos(angle);
            const py = y + hexSize * Math.sin(angle);
            if (i === 0) {
                ctx.moveTo(px, py);
            } else {
                ctx.lineTo(px, py);
            }
        }
        ctx.closePath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.fillStyle = fillColor;
        ctx.fill();
    }

    // Initializes the grid with random red and blue cells
    function initializeGrid() {
        // Generate an empty grid
        for (let row = 0; row < totalRows; row++) {
            gridData[row] = [];
            for (let col = 0; col < totalCols;...