|
Сообщение от Самовар
|
|
клик срабатывал именно на элементы массива.
|
Он сработает на элементе, но выдаст индекс массива
<body><style>img {
clip-path: polygon(99% 50%, 74.5% 92.4%, 25.5% 92.4%, 1% 50%, 25.5% 7.6%, 74.5% 7.6%);
}
img:hover {
filter: brightness(1.2);
}</style>
<script>
let fieldStartX = 0;
let fieldStartY = 0;
const r = 30;
const fieldHex = [];
for (let i = 0; i < 10; i++) {
fieldHex[i] = [];
fieldStartY += .5 * Math.sqrt(3) * r;
if (i % 2 == 0)
fieldStartX = 1.5 * r;
else
fieldStartX = 0;
for (let j = 0; j < 6; j++) {
const image = new Image();
image.width = 2 * r;
image.height = 2 * r;
image.style.position = "absolute";
image.style.left = fieldStartX + "px";
image.style.top = fieldStartY + "px";
image.src = "http://javascript.ru/cat/list/donkey.gif";
image.onclick = () => test(i, j);
document.body.appendChild(image);
fieldHex[i][j] = image;
fieldStartX += 3 * r;
}
}
function test(x, y) {
alert(`Кликнули в шестиугольник (${x}, ${y})`);
}
</script>
UPD Добавил возможность изменения радиуса окружности описанной вокруг шестиугольника. Остальные параметры сетки стали зависеть от радиуса r
UPD2 Как вы решили проблему, что курсор не точно попадает в шестиугольник (поскольку на самом деле это квадрат), из-за чего при щелчке по одному шестиугольнику берутся координаты от другого шестиугольника?