Событие для массива объектов
Имеется гексагональное игровое поле состоящее из дмумерного массива объектов Image. Необходимо создать функцию онклик, чтобы по клику на любой хекс выдавало текст. Вот генерация поля
var fieldStartX = 0;
var fieldStartY = 0;
var fieldHex = [];
for (var i = 0; i < 10; i++) {
fieldHex[i] = [];
fieldStartY = fieldStartY + 45;
if (i % 2 == 0) fieldStartX = 70;
else fieldStartX = 0;
for (var j = 0; j < 6; j++) {
fieldHex[i][j] = new Image();
fieldHex[i][j].width = 100;
fieldHex[i][j].height = 100;
fieldHex[i][j].style.position = "absolute";
fieldHex[i][j].style.left = fieldStartX + "px";
fieldHex[i][j].style.top = fieldStartY + "px";
fieldHex[i][j].src = "image/hex_blue.png";
document.body.appendChild(fieldHex[i][j]);
fieldStartX = fieldStartX + 140;
}
}
функция должна быть такого вида
fieldHex[][].onclick = function(){
alert("Текст");
}
ПОнятно, что в таком виде не работает. Если проставить конкретные значения fieldHex[1][1].onclick то работает, но это совсем не то, что нужно. Помогите сделать функцию обработчик события клика, чтобы были кликабельны все элементы массива fieldHex вот ссылка кодепен для удобства https://codepen.io/Sergeev2/pen/LBMgKa |
|
https://codepen.io/anon/pen/zLyMKM
делегирование - вешаем обработчик на общий парент, смотрим event.target - https://learn.javascript.ru/event-delegation |
не совсем то. То, что вы предложили, это проверка клика по изображению. Будет любая другая картинка сработает этот же обработчик. Я не могу добиться, чтобы клик срабатывал именно на элементы массива. например, при клике выдать номер хекса в двумерном массиве. То есть не на какое-то изображение на странице, а на конкретный элемент массива image, чтобы можно было по этому элементу информацию вытащить, номер элемента или координаты
|
...
fieldHex[i][j]._someData = ...;
.....................
if (event.target._someData) {
}
|
Цитата:
Цитата:
|
Самовар,
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
<script>
var fieldStartX = 0;
var fieldStartY = 0;
var fieldHex = [];
for (var i = 0; i < 10; i++) {
fieldHex[i] = [];
fieldStartY = fieldStartY + 45;
if (i % 2 == 0) fieldStartX = 70;
else fieldStartX = 0;
for (var j = 0; j < 6; j++) {
fieldHex[i][j] = new Image();
fieldHex[i][j].width = 100;
fieldHex[i][j].height = 100;
fieldHex[i][j].style.position = "absolute";
fieldHex[i][j].style.left = fieldStartX + "px";
fieldHex[i][j].style.top = fieldStartY + "px";
fieldHex[i][j].src = "http://javascript.ru/cat/list/donkey.gif";
fieldHex[i][j].onclick = test;
document.body.appendChild(fieldHex[i][j]);
fieldStartX = fieldStartX + 140;
}
}
function test(e) {
alert(e.target.style.left);
}
</script>
|
дилетант про, огромное спасибо) причем оказалось куда проще чем думал
|
Цитата:
<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 Как вы решили проблему, что курсор не точно попадает в шестиугольник (поскольку на самом деле это квадрат), из-за чего при щелчке по одному шестиугольнику берутся координаты от другого шестиугольника? |
| Часовой пояс GMT +3, время: 12:15. |