2016-03-31 5 views
1

Ich habe derzeit zwei Objekte bulletList und enemyList jeweils mit Eigenschaften ihrer X- und Y-Position auf Leinwand. Was ich programmieren will, ist herauszufinden, auf welcher Seite die Kugel die Gegner trifft. Die if-Anweisung läuft nach der testCollision FunktionFinden Sie, welche Seite des Rechtecks ​​kollidiert nach testCollision Funktion

Bisher habe ich diese erstellt haben:

if(bulletLocationY < enemyLocationY) 

    console.log("Above"); 

if(bulletLocationY > enemyLocationY) 

    console.log("Below"); 


if(bulletLocationX < enemyLocationX) 
    console.log("Left"); 


if(bulletLocationX > enemyLocationX) 
    console.log("Right"); 

Aktuelles Beispiel des Spiels: https://jsfiddle.net/pktxmc3y/

effektiv, was ich tun möchte, ist, wenn die Kugel trifft die roter Feind auf der linken Seite, der Feind bewegt sich nach rechts und umgekehrt. Wenn ich von oben auf den Feind treffe, bewegt er sich nach unten und umgekehrt. Das Bit, das ich als schwierig empfand, ist die Identifizierung der Seite, wo die Kugel das Rechteck getroffen hat.

EDIT: Nur um die richtige Antwort auf füge ich auch Erfolg mit gehabt haben:

if(bulletLocationY - (bulletHeight/2) < enemyLocationY - (enemyHeight/2)) 

    console.log("Above"); 

if(bulletLocationY + (bulletHeight/2) > enemyLocationY + (enemyHeight/2)) 

    console.log("Below"); 


if(bulletLocationX - (bulletWidth/2)< enemyLocationX - (enemyWidth/2)) 
    console.log("Left"); 


if(bulletLocationX + (bulletWidth/2)> enemyLocationX + (enemyWidth/2)) 
    console.log("Right"); 
+0

Gegeben 2 Rechtecke, [diese vorherige Q & A] (http://stackoverflow.com/questions/34607871/how-to-create-obstacles-in-canvas/34624007#34624007) zeigt, wie der anfängliche Kollisionspunkt (falls vorhanden) der 2 Rechtecke. – markE

Antwort

3

Sie können nicht wissen, von wo die Kugel gerade von seiner aktuellen Position getroffen. Jetzt befindet sich die Kugel im Inneren des Gegners, und wenn sie zum Beispiel oben links ist, könnte sie genauso gut von links oder von oben kommen.

Sie müssen also die vorherige Position des Geschosses speichern.

Abhängig vom 'Quadranten', wo diese alte Position liegt, können Sie sich für die Bewegung entscheiden, die Sie tun sollten.

habe ich eine kleine Zeichnung zu erklären:

enter image description here

Sie, dass in der ‚horizontalen Korridor‘ (rot in meiner Zeichnung), war früher, wenn die Kugel sehen, dann wissen Sie es nach links oder rechts ist: teste jetzt einfach, ob x links oder rechts ist und du weisst.

Gleiches gilt für den "vertikalen Korridor" (blau).

Dann, wenn die Kugel war weder in diesen Korridoren, haben Sie eine Ecke Kollision und vier Fälle zu behandeln.

Pseudo-Code:

if (bullet was previously in the red horizontal corridor) { 
    if (was on the left) 
      left collision 
    else 
      right collision 
} else if (bullet was previously in the blue vertical corridor) { 
    if (up) 
      up collision 
    else 
      down collision 
} else { // corner case 
    // ... Test which of the 4 corner it was in 
    if (was upper) { 
      if (was left) 
       up and left 
      else 
       up and right 
    } else { // lower 
      if (was left) 
       down and left 
      else 
       down and right 
    } 
} 

Zum Beispiel die erste if schreibt:

if (Math.abs(oldBulletY-enemyY) < enemiHeight/2) { 
    if (oldBulletX < enemyX) { 
     // collision on the left 
    } else { 
     // collision on the right 
    } 
} 

Beachten Sie, dass dies eine Annäherung ist: in der Diagonale Treffer Fall könnte die Kugel genau so gut getroffen haben eine oder die andere Seite oder beide (Ecke). Aber das sollte ziemlich gut funktionieren.

Wenn Sie volle Präzision wünschen, müssen Sie sich für einen Segment-/Segmentschnittpunkt entscheiden: Frage wird: Welches der vier Segmente des Feindes schneidet das (oldBulletPosition, newBulletPosition) Segment. Und vergiss nicht die Eckfächer.

Wieder denke ich, dass die obige Lösung in 95% der Fälle gut genug sein sollte, besonders, weil Ihre Kugeln langsam sind.

bearbeiten: Ich habe eine einfachere Lösung gefunden, 'echte' Quadranten verwendet wird, wie in dieser Zeichnung:

enter image description here

So auf dem Quadranten abhängig (1,2,3,4), wissen Sie, die wurde mit mehr Genauigkeit getroffen. Tut mir leid, aber jetzt keine Zeit für das (langweilige) trigonometrische Zeug, lassen Sie mich wissen, wenn Sie interessiert sind (erste Lösung könnte gut genug sein).

+0

Vielen Dank für diese sehr detaillierte Erklärung, ich hatte auch Erfolg mit meinem obigen Code. – epayne

Verwandte Themen