¿Alguien sabe si hay alguna API de detección de colisiones para HTML5 Canvas ...?

Question

He estado experimentando el lienzo HTML5 mediante la codificación de la aplicación básica de mapas mentales. He intentado averiguar si hay alguna API de JavaScript utilizada para gestionar objetos en el lienzo, como la detección de colisiones entre imágenes o formas. Creo que no es una buena idea escribir la mía, ya que podría haber una buena API. Cualquier persona tiene pista o alguna información sobre esto. Te agradecería mucho.

Answer 1

Últimamente he estado experimentando con esto yo mismo. Descubrí que Box2DJS es un gran motor de física newtoniano, si quieres probarlo. http://box2d-js.sourceforge.net/

Al principio es difícil entender el concepto, pero a medida que avanza se hace más fácil, y también viene con algunos buenos ejemplos. Box2D ha sido portado a muchos idiomas y la mayoría utiliza los mismos métodos, o muy similares, por lo que la documentación para cualquier puerto probablemente se adapte a sus necesidades.

Buena suerte :).

EDIT: He encontrado un enlace a esta documentación en el sitio indicado anteriormente: http://www.kyucon.com/doc/box2d/ (no podía hacerlo un hipervínculo debido a mi reputación me baja que limita a una por correo, yo soy un novato; P)

es para Box2DFlashAS3, pero afirman que "las API Box2DJS son completamente [la] mismos que los de Box2DFlashAS3"

EDIT: Ah, acabo de notar que buscabas detección de colisiones, no la física, mi mal. .. Quizás Box2D todavía podría funcionar, pero quizás no. Lo siento por eso ...

Answer 2

Echa un vistazo a Cake. Es un plug-in de gráfico de escena para elementos de lienzo. No creo que haga la detección de colisión, pero quizás lo ayude a orientarse. Al menos puede adjuntar manejadores de eventos para enmascarar objetos con él.

Answer 3

Box2DWeb tiene detección de colisión usando Box2D.Dynamics.b2ContactListener.

Box2DWeb es un puerto del Box2DFlash 2.1a (por lo que tiene DebugDraw y ContactListeners). Hay un ejemplo a continuación que distribuye todos los eventos de contacto.

var contactListener = new Box2D.Dynamics.b2ContactListener();   
    contactListener.BeginContact = function(contact) { 
     console.log('something just hit something else'); 

     // example to narrow the field 
     if(contact instanceof Box2D.Dynamics.Contacts.b2PolyAndCircleContact) { 
      // collision of circle to polygon 
     } 
    }; 

world.SetContactListener(contactListener); 

Answer 4

Tome un vistazo a GameJS, que es un puerto de Javascript PyGame (conocida biblioteca de juegos para Python). Tiene un concepto de sprites y grupos de sprites y tiene una detección de colisión bastante avanzada.