在十六进制网格中搜索鼠标所在元素的有效方法

<div id="hex-grid"></div>

#hex-grid {
    position: relative;
    width: 800px;
    height: 600px;
}

.hex {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #64b5f6;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

const gridContainer = document.getElementById('hex-grid');
const hexSize = 40; // 每个六边形的宽度和高度
const gridWidth = 20; // 网格宽度（列数）
const gridHeight = 15; // 网格高度（行数）

// 创建六边形网格
for (let q = 0; q < gridHeight; q++) {
    for (let r = 0; r < gridWidth; r++) {
        const hex = document.createElement('div');
        hex.className = 'hex';
        const x = hexSize * Math.sqrt(3) * (r + q / 2);
        const y = hexSize * (3 / 2) * q;
        hex.style.left = `${x}px`;
        hex.style.top = `${y}px`;
        gridContainer.appendChild(hex);
    }
}

// 检测鼠标位置所在的六边形
gridContainer.addEventListener('mousemove', (event) => {
    const mouseX = event.clientX - gridContainer.offsetLeft;
    const mouseY = event.clientY - gridContainer.offsetTop;

    for (let q = 0; q < gridHeight; q++) {
        for (let r = 0; r < gridWidth; r++) {
            const hex = gridContainer.children[q * gridWidth + r];
            const x = parseInt(hex.style.left);
            const y = parseInt(hex.style.top);
            const dx = mouseX - x;
            const dy = mouseY - y;

            // 简单的碰撞检测
            if (dx > 0 && dx < hexSize * Math.sqrt(3) && dy > 0 && dy < hexSize * (3 / 2)) {
                console.log(`Mouse is over hex at (${r}, ${q})`);
                return;
            }
        }
    }
});