Имам анимация, използваща JS и Fabric.js, при която кръговете са повече около екрана. Опитвам се да ги задържа в конкретна област, но имам някои проблеми.
След известно четене вчера си помислих, че тестването, за да се види дали кръгът е вътре в правоъгълника (техния контейнер), ще бъде доста просто, но все още не го накарах да работи правилно.
Кръговете се създават в долната част на екрана, където е и техният контейнер. С кода, който имам, те „изплуват“ до върха и остават там на едно място.
Конзолните регистрационни файлове, които имам, показват, че те са извън правоъгълника веднага, така че предполагам, че нещо не е наред с моята функция за сблъсък.
Моята цел е те да останат в рамките на съдържащото се движение и когато ударят ръбовете, трябва да сменят посоката, така че да останат отново вътре.
Благодаря за всяка помощ.
РЕДАКТИРАНЕ: РЕДАКТИРАНО, ЗА ДА ПОЗВОЛИ МАЛКО ЯСНОТА И ИЗПОЛЗВАНЕТО НА ОТКРИВАНЕТО НА COLSIOSN ОТ-ДОЛУ, КАТО СЕГА МИСЛЯ, че ПРОБЛЕМЪТ Е В ОТГОВОРЪТ ВМЕСТО В ОТКРИВАНЕТО.
Функция за сблъсък:
функция testCollision(кръг, правоъгълник) {
return circle.left + circle.radius < rectangle.left + rectangle.width/2 //right side
&& circle.left - circle.radius < rectangle.left - rectangle.width/2 //left side
&& circle.top + circle.radius < rectangle.top + rectangle.height/2 //top
&& circle.top - circle.radius < rectangle.top - rectangle.height/2;
}
ляво = x & горе = y
Има стойности maxX и maxY, които са ширината и височината на контейнера.
това е тестът:
if(testCollision(circle, rect) == false){
var r = Math.atan2(y - maxY / 2, x - maxX / 2);
vx = -Math.cos(r);
vy = -Math.sin(r);
}
всяка помощ е изключително ценена, благодаря!