Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Инвентарь для игры (https://javascript.ru/forum/misc/66408-inventar-dlya-igry.html)

spo 13.12.2016 21:26

Инвентарь для игры
 
Прошу подсказать как лучше реализовать инвентарь для игры.

Имеем следующее http://codepen.io/anon/pen/RoeVpo

Cцена #stage содержит два элемента #display и #inventory
Внутрь #display помещен элемент #door
Внутрь #inventory помещен элемент #key

#stage
	#display
		#door
	#inventory
		#key


При клике на предмет в инвентаре #key, курсор меняет изображение на изображение предмета. Если быть точнее курсор прячется и к его координатам привязывается изображение.
Данный подход выбран вместо простой смены изображения курсора через стили, потому что в последнем случае он не сможет перекрыть стили css, в которых установлено изображение курсора по умолчанию.

Далее, при наведении и клике на элементе #door необходимо получить результат данных событий. Но после того как курсор был скрыт а к его координатам было привязано изображение, никакие из перечисленных событий не срабатывают.

Если я правильно понимаю то нужно высчитывать и проверять координаты наводимого элемента.
Есть ли возможность обойтись без математики или это единственный способ?

Буду признателен за другие варианты решения.

spo 13.12.2016 23:08

Да но это события html5, причем у меня перетаскивания как такового не подразумевается. Перетаскивание должно происходить по клику.

1. Кликнул на предмет в инвентаре - получил элемент (с изображением предмета) привязанный к координатам курсора. Так же этот подход использую для того чтобы спозиционировать изображение таким образом чтобы курсор был в его центре.
2. Навел курсор или кликнул на элемент сцены - получил событие.

Почему после первого шага не срабатывает события наведения на другие элементы сцены?

spo 14.12.2016 00:40

Сместил координату изображения таким образом чтобы оно не перекрывало курсор и события заработали.

Понял почему не срабатывало.
Судя по всему решением данной задачи будет проверка объектов на столкновение.

spo 14.12.2016 00:52

Просто не хотелось бы смешивать использование js и html5.
А еще читал тут https://learn.javascript.ru/drag-and-drop написано что "нельзя ограничить перенос внутри заданной зоны" по этому хотелось все сделать с использованием событий мыши.

p.s.: А еще я не понимаю как с html5 событиями сделать так, чтобы при клике стартовал DnD.


Часовой пояс GMT +3, время: 11:20.