Форум

Самовар · #1 (**permalink**) 10.08.2018, 12:29

Имеется гексагональное игровое поле состоящее из дмумерного массива объектов 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

Nexus · #2 (**permalink**) 10.08.2018, 12:34

https://codepen.io/anon/pen/LBMXRK?editors=1010

Alexandroppolus · #3 (**permalink**) 10.08.2018, 12:35

https://codepen.io/anon/pen/zLyMKM

делегирование - вешаем обработчик на общий парент, смотрим event.target - https://learn.javascript.ru/event-delegation

Самовар · #4 (**permalink**) 10.08.2018, 12:49

не совсем то. То, что вы предложили, это проверка клика по изображению. Будет любая другая картинка сработает этот же обработчик. Я не могу добиться, чтобы клик срабатывал именно на элементы массива. например, при клике выдать номер хекса в двумерном массиве. То есть не на какое-то изображение на странице, а на конкретный элемент массива image, чтобы можно было по этому элементу информацию вытащить, номер элемента или координаты

Alexandroppolus · #5 (**permalink**) 10.08.2018, 12:53

...
fieldHex[i][j]._someData = ...;

.....................

if (event.target._someData) {
    
  }

Nexus · #6 (**permalink**) 10.08.2018, 12:56

Сообщение от Самовар

Я не могу добиться, чтобы клик срабатывал именно на элементы массива.

По элементу массива нельзя кликнуть.

Сообщение от Самовар

чтобы можно было по этому элементу информацию вытащить, номер элемента или координаты

event.target - элемент из массива fieldHex.

Dilettante_Pro · #7 (**permalink**) 10.08.2018, 13:52

Самовар,

<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>

Самовар · #8 (**permalink**) 10.08.2018, 14:11

дилетант про, огромное спасибо) причем оказалось куда проще чем думал

Malleys · #9 (**permalink**) 10.08.2018, 14:26

Сообщение от Самовар

клик срабатывал именно на элементы массива.

Он сработает на элементе, но выдаст индекс массива

<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 Как вы решили проблему, что курсор не точно попадает в шестиугольник (поскольку на самом деле это квадрат), из-за чего при щелчке по одному шестиугольнику берутся координаты от другого шестиугольника?

Форум

Справочник

Discord чат

Курсы javascript