Collision detection in html5-canvas

Ich versuche zu bauen, ein Spiel, wo der Benutzer sollte der Kreis im inneren eine vertikale Leiste, aber ich habe Probleme in der collision-detection-Funktion. Hier mal mein jsfiddle : http://jsfiddle.net/seekpunk/QnBhK/1/

 if (collides(Bluecircle, longStand)) {
    Bluecircle.y = longStand.y2;
    Bluecircle.x = longStand.x2;
 }
 else if (collides(Bluecircle, ShortStand)) {
    Bluecircle.y = ShortStand.y2;
    Bluecircle.x = ShortStand.x2;
 }
function collides(a, bar) {
   return a.x == bar.x1 && a.y == bar.y1;
}
  • Als ich aus dem code sehen in der Frage, die Sie vergleichen die genauen ball zu koordinieren, um genaue Wand-zu koordinieren. Die Chancen, dass diese Koordinaten Zusammenfallen, sind ziemlich klein, versuchen Sie, die Bewertung der Tatsache, dass der ball innerhalb einer Fläche. Oder eine bar, die im inneren einer Kugel des radius. Wie Math.abs(a.x - bar.x1) < radius
InformationsquelleAutor Sora | 2014-01-02
  1. 8

    [ Editiert um Tippfehler korrigieren und Unterlassung ]

    Hier ist, wie zu treffen-testen Sie ein Rechteck und einen Kreis für die Kollision:

    Demo: http://jsfiddle.net/m1erickson/n6U8D/

        var circle={x:100,y:290,r:10};
    var rect={x:100,y:100,w:40,h:100};

    //return true if the rectangle and circle are colliding
    function RectCircleColliding(circle,rect){
        var distX = Math.abs(circle.x - rect.x-rect.w/2);
        var distY = Math.abs(circle.y - rect.y-rect.h/2);

        if (distX > (rect.w/2 + circle.r)) { return false; }
        if (distY > (rect.h/2 + circle.r)) { return false; }

        if (distX <= (rect.w/2)) { return true; } 
        if (distY <= (rect.h/2)) { return true; }

        var dx=distX-rect.w/2;
        var dy=distY-rect.h/2;
        return (dx*dx+dy*dy<=(circle.r*circle.r));
    }

    [Hinzugefügt Antwort gegeben Klarstellung]

    ...Und dies ist, wie um zu testen, ob der Kreis ist vollständig innerhalb des Rechtecks

    Demo: http://jsfiddle.net/m1erickson/VhGcT/

    //return true if the circle is inside the rectangle
function CircleInsideRect(circle,rect){
    return(
        circle.x-circle.r>rect.x &&
        circle.x+circle.r<rect.x+rect.w &&
        circle.y-circle.r>rect.y &&
        circle.y+circle.r<rect.y+rect.h
    )
}
    • kann u bitte aktualisieren Sie meine jsfiddle
    • AUA! Es war spät, als ich gepostet meine Antwort und es war ein Tippfehler und Auslassungen. Ist jetzt behoben...Sehr Leid!
    • vielen Dank für diese wunderbare Lösung, aber ich habe noch eine Frage wenn es dir nichts ausmacht ... Ihre Lösung erkennt die Kollision perfekt aber es ist trotzdem zu machen, dass die Funktion nur erkennen, wenn der ball, geben Sie den parameter des Rechtecks auf andere Weise, wenn der ball innerhalb des Rechtecks und danke
    • Ich bin mir nicht sicher, was Sie Fragen. Die Funktion gibt false zurück, während der ball nicht berühren die vertikale Leiste und dann true zurückgeben, im moment berührt es das bar. So werden Sie wissen, in dem moment der Kollision, wenn der test wechselt von false auf true.
    • ja ich verstehe, ich werde meine Frage anders formulieren : ist es möglich, den ball zu erkennen, wenn es nur innerhalb der parameter des Rechtecks ?( wenn der ganze ball nur innerhalb des Rechtecks ) habe ich meine Frage klar ?
    • Ah..klar jetzt! Ich aktualisiert meine Antwort für diese neuen Informationen. Viel Glück mit Ihrem Projekt!

    InformationsquelleAutor markE
Schreibe einen Kommentar