este problema se puede abordar de diferentes maneras, pero en este caso te mostramos la que en nuestra opinión es la resolución más completa.
Solución:
Aquí hay una rutina de rectángulo delimitador muy simple. Se espera que ambos a y b ser objetos con x, y, width y height propiedades:
function isCollide(a, b)
Para ver esta función en acción, aquí hay un codepen gentilmente creado por @MixerOID.
Lo primero que debe tener es la función real que detectará si tiene una colisión entre la pelota y el objeto.
En aras del rendimiento, sería excelente implementar alguna técnica de detección de colisiones cruda, por ejemplo, rectángulos delimitadores, y una más precisa si es necesario en caso de que se detecte una colisión, de modo que su función se ejecute un poco más rápido pero usando exactamente el mismo bucle.
Otra opción que puede ayudar a aumentar el rendimiento es realizar un procesamiento previo con los objetos que tiene. Por ejemplo, puede dividir el área completa en celdas como una tabla genérica y almacenar el objeto apropiado que se encuentra dentro de las celdas particulares. Por lo tanto, para detectar la colisión, está detectando las celdas ocupadas por la pelota, obtenga los objetos de esas celdas y use su función de detección de colisiones.
Para acelerarlo aún más, puede implementar 2d-tree, quadtree o R-tree.
Una respuesta sin jQuery, con elementos HTML como parámetros:
Este es un mejor enfoque que verifica la posición real de los elementos a medida que se muestran en la ventana gráfica, incluso si son absolutos, relativos o han sido manipulados mediante transformaciones:
function isCollide(a, b)
Acuérdate de que te brindamos la opción de decir si acertaste tu traba en el momento justo.