Обнаруживающий объект, достигающий изображения

Question

Я новый в этом поле, и у меня есть вопрос -
У меня есть изображение и объект. Назовем объект, "ball".
Мяч движется, и в какой-то момент он достигает изображения. И вот моя проблема -
Как я могу обнаружить, что мяч коснулся изображения?
Заранее спасибо.

Answer 1

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

Answer 2

Если вы работаете с 2D, вы можете просто использовать простое обнаружение столкновений Rectanlge. В основном, чтобы проверить, находится ли прямоугольник в столкновении с другим прямоугольником, вы должны проверить его положение X и Y с его шириной и высотой.

Ниже у меня есть jsfiddle пример с использованием html5 тег Canvas

jsfiddle: https://jsfiddle.net/e2dmef7q/

код, который проверяет наличие столкновений

function Mathematics() 
{ 

} 

Mathematics.prototype.PointInRect = function(pnt_x, pnt_y, rect_x, rect_y, rect_w, rect_h) 
{ 
    if ((pnt_x >= rect_x) && (pnt_x <= rect_x + rect_w - 1)) 
    { 
     if ((pnt_y >= rect_y) && (pnt_y <= rect_y + rect_h - 1)) 
     {return true;} 
    } 
    return false; 
} 

Mathematics.prototype.RectToRectCollision = function(rect1_x, rect1_y, rect1_w, rect1_h, 
          rect2_x, rect2_y, rect2_w, rect2_h) 
{ 
    // top-left corner 
    if (this.PointInRect(rect1_x, rect1_y, rect2_x, rect2_y, rect2_w, rect2_h)){return true;} 
    // top-right corner 
    if (this.PointInRect(rect1_x + rect1_w - 1, rect1_y, rect2_x, rect2_y, rect2_w, rect2_h)){return true;} 
    // bottom-right corner 
    if (this.PointInRect(rect1_x + rect1_w - 1, rect1_y + rect1_h - 1, rect2_x, rect2_y, rect2_w, rect2_h)){return true;} 
    // bottom-left corner 
    if (this.PointInRect(rect1_x, rect1_y + rect1_h - 1, rect2_x, rect2_y, rect2_w, rect2_h)){return true;} 
    // Check to see if rectangle 2 is hit any part of rectanlge 1 
    // top-left corner 
    if (this.PointInRect(rect2_x, rect2_y, rect1_x, rect1_y, rect1_w, rect1_h)){return true;} 
    // top-right corner 
    if (this.PointInRect(rect2_x + rect2_w - 1, rect2_y, rect1_x, rect1_y, rect1_w, rect1_h)){return true;} 
    // bottom-right corner 
    if (this.PointInRect(rect2_x + rect2_w - 1, rect2_y + rect2_h - 1, rect1_x, rect1_y, rect1_w, rect1_h)){return true;} 
    // bottom-left corner 
    if (this.PointInRect(rect2_x, rect2_y + rect2_h - 1, rect1_x, rect1_y, rect1_w, rect1_h)){return true;} 
    // If there is no collision 
    return false; 
} 

Просто быстренько RectToRectCollision берет х , y, ширина и высота двух прямоугольников. Затем он использует функцию PointInRect, чтобы проверить, находится ли точка прямоугольника внутри другого прямоугольника.

P.S. мой код, который я предоставил, из старого примера, который у меня есть, и может показаться немного пугающим. Но сайт Mozilla содержит некоторую приятную информацию о 2D-столкновении https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection