Создание браузерных 3d-игр с нуля на чистом html, css и js. Часть 1/2

[yushin7676]

Мне гугл подсказал, что лучше не использовать ни то, ни другое, а посоветовал использовать requestAnimationFrame.

[vtarasoff]

не знаю, нужна ли демка. там три файла всего, можно скопипастить html, js и css и все самому посмотреть. я так и делал

[iArtyom25]

Все нормально по итогу отрабатывает? у меня коллизия на двух стенках(одна за мной, вторая передо мной) не отрабатывает.

[yushin7676]

Все правильно подметил, в последнем коде в script.js (функция сollosion()) есть ошибка:
if ((x0**2 + y0**2 +… там где map[i][1]**2 + map[i][2]**2 должно стоять map[i][6]**2 + map[i][7]**2

[vtarasoff]

Да, точно)

[vtarasoff]

Там вот с этим условием касяк какой-то (я так и не понял, как это условие работает):

if ((x0**2 + y0**2 + z0**2 + dx**2 + dy**2 + dz**2) < (map[i][1]**2 + map[i][2]**2)){

вот если его убрать, то все ок будет.

[yushin7676]

Тоже можно, но тогда будут проверяться коллизии на все прямоугольники (цифры уже поправил). Хотя готовая игра работала даже на древнем ноутбуке, условие проверки коллизий должно быть:)

[vtarasoff]

ну да, тут всего 5 дивов. врядли они нагрузку какую-то прям создадут

[domix32]

Облагородить бы это современным JS. Ну, или хотя бы пеленки if else заменить на switch..case

[yushin7676]

А что вы понимаете под современным javascript?

[domix32]

let и const вместо var, классы вместо функций, for..of вместо индексирования массива в каждой строчке, форматирование строк через шаблонные литералы, а не плюсики. Универсальная выборка нод DOM через doument.querySelector. Ну и из стилистических — избавление от магии (600-0? 98 вместа 100 пикселей чего-то p.s. outline), копипаста (например rzc*deg встречается четырежды в последней функции — отличный кандидат в локальные константы), вышеупомянутые switch..case на символы. Возможно хорошей идеей будет создание класса точки vec2/vec3/vec4 чтобы не передавать в функции по стопицот параметров. Не знаю насколько они будут прожорливее массивов, но на таких масштабах это незначительно.
Live demo тоже было бы неплохо сделать. Есть js fiddle, есть github pages, выбирай на вкус.
А так ждем вторую часть.