Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.08.2018, 12:29
Интересующийся
Отправить личное сообщение для Самовар Посмотреть профиль Найти все сообщения от Самовар
 
Регистрация: 28.03.2017
Сообщений: 26

Событие для массива объектов
Имеется гексагональное игровое поле состоящее из дмумерного массива объектов 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
Ответить с цитированием
  #2 (permalink)  
Старый 10.08.2018, 12:34
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,937

https://codepen.io/anon/pen/LBMXRK?editors=1010
Ответить с цитированием
  #3 (permalink)  
Старый 10.08.2018, 12:35
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 609

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

делегирование - вешаем обработчик на общий парент, смотрим event.target - https://learn.javascript.ru/event-delegation
Ответить с цитированием
  #4 (permalink)  
Старый 10.08.2018, 12:49
Интересующийся
Отправить личное сообщение для Самовар Посмотреть профиль Найти все сообщения от Самовар
 
Регистрация: 28.03.2017
Сообщений: 26

не совсем то. То, что вы предложили, это проверка клика по изображению. Будет любая другая картинка сработает этот же обработчик. Я не могу добиться, чтобы клик срабатывал именно на элементы массива. например, при клике выдать номер хекса в двумерном массиве. То есть не на какое-то изображение на странице, а на конкретный элемент массива image, чтобы можно было по этому элементу информацию вытащить, номер элемента или координаты
Ответить с цитированием
  #5 (permalink)  
Старый 10.08.2018, 12:53
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 609

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

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

if (event.target._someData) {
    
  }
Ответить с цитированием
  #6 (permalink)  
Старый 10.08.2018, 12:56
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,937

Сообщение от Самовар
Я не могу добиться, чтобы клик срабатывал именно на элементы массива.
По элементу массива нельзя кликнуть.
Сообщение от Самовар
чтобы можно было по этому элементу информацию вытащить, номер элемента или координаты
event.target - элемент из массива fieldHex.
Ответить с цитированием
  #7 (permalink)  
Старый 10.08.2018, 13:52
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,789

Самовар,
<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>

Последний раз редактировалось Dilettante_Pro, 10.08.2018 в 13:55.
Ответить с цитированием
  #8 (permalink)  
Старый 10.08.2018, 14:11
Интересующийся
Отправить личное сообщение для Самовар Посмотреть профиль Найти все сообщения от Самовар
 
Регистрация: 28.03.2017
Сообщений: 26

дилетант про, огромное спасибо) причем оказалось куда проще чем думал
Ответить с цитированием
  #9 (permalink)  
Старый 10.08.2018, 14:26
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 725

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

Последний раз редактировалось Malleys, 10.08.2018 в 17:45.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
перебор массива объектов phoenix200689 Общие вопросы Javascript 5 27.07.2017 09:42
forEach для ассоциативного массива raja Общие вопросы Javascript 2 12.10.2016 17:08
Отменить событие для ячейки таблицы kot_k_k jQuery 4 19.02.2016 12:46
Вызов свойств объектов из массива или объекта с параметрами Sanu0074 jQuery 4 22.05.2015 10:18
Методы для объектов JavaScript olgaa Общие вопросы Javascript 3 05.05.2013 18:26