Как сделать мертвые зоны на JS или CSS при перемещение div блока в div?

Question

[jenya_zhilin]

У меня есть игра, где необходимо перемещаться по локации, но есть зоны, например, дома, на которые залазить нельзя и нужно сделать так, чтобы персонаж (div объект) не мог залезть на дом, сделать это надо желательно на JS.

Comments

[Rustam Bainazarov]

…это надо желательно на JS.

А почему в тегах HTML и CSS? Ну, собственно, на CSS и HTML это сделать нельзя и не надо, даже если как-то можно.

[Михаил]

А можете код дасть!?

Answer 1

[Jack Williams]

То, что вам нужно называется коллизиями. Почитайте о них тут

Если у вас дом квадратный, то все очень просто. Просто отслеживайте координаты и не давайте игроку продвинуться дальше стен дома. Он должен 'ударяться' о них и останавливаться.

А вообще, для разработки игр в браузере давным давно есть всякие движки.

Comments

[jenya_zhilin]

А это возможно через CSS?

[Jack Williams]

jenya_zhilin, Вообще никак. И вообще, игровые движки уже есть готовые, думаю, вам стоит на них обратить внимание. И игры на html и css - плохая идея. Используйте canvas.

Answer 2

[xmoonlight]

Это коллизии и коллайдеры.
Коллайдер - это объект коллизий. Т.е. это то виртуальное тело, которое взаимодействует с такими же подобными.
Коллайдер - может быть квадратным (только в простых играх с полем в виде прямоугольной сетки), круглым или овальным (чаще всего), контурным (редко, т.к. очень затратны расчёты).

Создайте коллайдеры для всех объектов и проверяйте их на столкновения.
Если есть столкновение - не давайте объекту двигаться в сторону вектора точки столкновения.

Comments

[jenya_zhilin]

а есть сайт, где наглядно показано, т.к. я новичок в JS?

[xmoonlight]

jenya_zhilin, нет. Вначале - учите js.