Какой хороший способ создать границы движения для "комнаты" в игре HTML5 Canvas?

Question

Итак, у меня была попытка создать небольшую игру с использованием canvas и Javascript, и я дошел до того, что немного персонажа двигался по экрану, а на заднем плане нарисовано плоское изображение комнатысортов.

Каков наилучший способ приблизиться к определению, где субъект игрока может и не может двигаться?Если это просто квадратная комната, то достаточно просто сравнить края с игроком x и y, но это становится более сложным, если у меня есть различные формы фона, и я бы хотел, чтобы игрок мог двигаться.

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

Спасибо

Answer 1

Пожалуйста, дайте больше в следующий раз.Это 2D игра сверху вниз?Я предполагаю, что так.

Есть несколько способов, в зависимости от того, что вы хотите сделать, и уровня детализации.

Если комнаты почти все прямоугольные, вы можете просто увидеть, еслиобъект полностью содержится внутри них.

Если нет, вы могли бы использовать алгоритмы rect-intersects-line, или вы могли бы превратить карту в один большой путь (при этом центр пути был либо пустым, либо нет)и используйте IsPointInPath (я бы посоветовал сделать свой собственный, но не использовать Canvas '), чтобы увидеть, все ли несколько ключевых точек геометрии игрока находятся внутри (или снаружи)

Наконец, если вы хотите *При столкновении 1010 * на пиксель вы должны создать упрощенную черную PNG-карту (или что-то подобное) вашего уровня и использовать холст-призрак, как я делаю для проверки удара здесь. Затем протестируйте несколько пикселейна силуэт игрока и посмотреть, являются ли они черными или нет.Если кто-либо из них не чёрный, игрок вышел за пределы!

Answer 2

Я на этот раз попытался создать простую игру на холсте html5, похожую на ту, над которой вы сейчас работаете (я думаю, это обычная идея).Я предлагаю вам поработать над механизмом столкновений, по крайней мере, это была моя идея:

• создать еще один слой поверх того, который у вас есть в качестве фона,
• назначитьто же самое изображение границы (прозрачное) для каждого объекта, который вы хотите, чтобы ваш игрок не проходил,
• , тогда вы должны рассчитать, когда координаты XY игрока находятся над этим объектом
• if (collides) {doне проходить} else {go}

Таким образом, вы можете остановить движение игрока через стену или другой твердый объект.

Я посмотрел HTML5 + Столкновение в Google, но ничего интересного не показаловверх, может быть, вам следует попробовать другие поиски или быть первым, кто воплотил идею в жизнь (у меня только начальный этап).

Answer 3

ИЗД.