Как изменить угол движения «шарика»?

Question

[Робот]

Демо: https://jsfiddle.net/xLLmzuje/1/

Ситуация: шарик двигается смещением отступов на 1 пиксель, поэтому он двигается строго под углом 45%. Т.е. сейчас так:


Хочется поменять угол падения, пока мне ничего не пришло в голову лучше чем сменить по одной координате сдвиг с 1 на 2 пикселя, т.е. так:


Если угол надо ещё уменьшить, то прибавим ещё пиксель:


Проблемы:
1) Между 1 и 2 картинкой остаётся довольно большая "слепая зона" в которую получается я не могу отправить шар.
2) В этом решении при той же частоте setInterval значительно возрастает скорость шарика, т.к. он начинает преодолевать за 1 интервал расстояние не в 1 а в 4 пикселя например.
Вопрос: есть какие-то методы, функции для более гибкого управления полётом шарика, что бы не так топорно всё было?

Answer 1

[Александр Аксентьев]

шарик однопиксельный? Поэтому и не выйдет, мельче-то некуда. Увеличить шарик и расчитывать его путь вектороми(victorjs.org/) и будет ок.

пример, не очень хороший, но рабочий по мере возможностей :D
https://github.com/S-anasol/network
game.sanasol.ws/network

Comments

[Робот]

В примере вначале шарик 20х20 пикселей victorjs.org спасибо, посмотрю

[Александр Аксентьев]

Робот: обновил ответ

[Робот]

Вот во втором примере на game.sanasol круги-то видно что двигаются по простым угловым траекториям, а вот пульки выпускаемые как летят интересно )))

[Александр Аксентьев]

Робот: пульки летят по векторам как раз. Правда скорость равномерную я так и не осилил + траектория "качается", видимо как раз из-за пикселей.

[Робот]

Александр Аксентьев: да я заметил что траектория качается, завтра постараюсь изучить всё подробнее, если что уточню в комментариях, ещё раз спасибо

[Александр Аксентьев]

Робот: пострелял сейчас, она уже не качается как раньше. Я давно делал забыл уже. Раньше пульки летеле по волнистой линии вообще как на сайте victorjs летает стрелочка.
Пример игры запускается на ноде, она мультиплеерная) Управление WASD + мышь

Answer 2

[Виталий Артемьев]

https://jsfiddle.net/5gczy45L/
Вот держи, подредактировал твой код.
В переменной angle записан угол движения

Comments

[Робот]

Супер! Я всё долго думал должна же быть возможность как-то через sin, cos сделать. Только я не понял берём Угол 45, умножаем на Пи 3,14 = 141,3 теперь делим его на 180 = 0,785 - это аргумент итоговый, подаём его в Math.sin и получаем ответ в радианах? (выходит 0,706) т.е. в итоге за один setInterval шар смещается на 0,7 пикселя?

[Виталий Артемьев]

Робот: 0,706 это не в радианах, а в пикселях. https://habrastorage.org/files/5eb/854/23e/5eb8542...
Что бы сместить шар по этому вектору, надо просто сместить его на n пикселей вниз, и на n пикселей вправо. Вот у нас и получается прямоугольный треугольник, а дальше все просто по теореме Пифагора.
Math.sin(angle * Math.PI / 180); - это смещение по оси Y
Math.cos(angle * Math.PI / 180); - это смещение по оси X

[Виталий Артемьев]

То есть при 45 градусах
Math.sin(angle * Math.PI / 180) = 0.706 пикселей первый катет
Math.cos(angle * Math.PI / 180) = 0.706 пикселей второй катет
А гипотенуза (она же вектор движения шара) равна одному пикселю

[Робот]

Виталий Артемьев: Спасибо за разъяснение, теперь понятнее всё стало

Answer 3

[mad_god]

Слышали ли Вы что-нибудь о дробных значениях? Когда к координаты Х и У умножаются на дробный, а не целый коеффициент? Приведение затем к целому, расположит шарик в нужных координатах.

Comments

[mad_god]

Простите, конечно же, прибавить, а не умножить )) Что-то я сонный писал...

Answer 4

[sanex3339]

Проведите в Paint'е линию диагональную, вот по пикселям этой линии и должен двигаться шарик, ну а движение реализовывать через вектора (и только через них), как написал Александр Аксентьев.