Canvas против игры DOM Element и столкновения

Question

Так что я пытаюсь сделать небольшую игру как для практики и развлечения (первый раз я пытался) никогда не имел ничего общего с ним до ..

Вы можете увидеть, что я До сих пор я пытался: http://myfirstgame.e-ddl.com/ работал над ним как 6-8 часов или около того. До сих пор я понял, что лучше спросить, прежде чем продолжать.

У меня есть это сейчас, у меня есть основной цикл, который запускается каждые 20 миллисекунд или около того. Ihis цикл вызывает 2 функции:

1. Берите нажатия клавиш (которые итерацию через массив препятствий и проверить, если в будущем позиция игрока сталкиваются с препятствиями любого объекта и изменить свойства игроков для будущих значений положения).

2. Он проходит через массив «need update» и изменяет детали CSS элемента, чтобы отразить сделанные изменения.

У меня есть несколько вопросов:

• СОБРАННЫЕ хорошая идея обрабатывать столкновение? если не то, что было бы лучше (я имею в виду около 800-1500 предметов препятствий на карте, игра замедляется).

• Чтобы вычислить расстояние, я использую расстояние между двумя точками уравнения. Если у меня только 1 точка, угол и расстояние. Как найти 2-й пункт (x, y)?

• Что было бы лучше, холст или DOM? (не важный вопрос, как я уже делал это с DOM).

Answer 1

Спасибо всем.

Я нашел решение того, что я искал.

о столкновении, как я это делал, было совершенно неправильно, я перечислил правильный путь дальше.

о расстоянии - решение, которое я придумал, проверяет расстояние от текущего положения игрока до объекта, если шаг игрока больше, чем расстояние, вычесть шаг с расстояния и пройти это расстояние.

как для холста, так и для дома - похоже, у них есть свои кроны и профи.

Теперь для столкновения правильный способ сделать это - создать массив карт пикселей. поэтому, если ваш холст или контейнерный узел имеет ширину: 800 по высоте: 500, у вас будет 2d-массив, который отображает эти пиксели

, а затем, когда я проверяю позицию, я просто проверяю, действительно ли текущее положение игрока + шаги к будущей позиции объект.

так как:

if(array[300][500]){ 
    return false; 
} 

Вот что я узнал.

Если у кого-то есть лучшее решение, то это дайте мне знать.