Versucht, eine Leinwand zu bekommen, um einer anderen Leinwand zu folgen, es wird verrückt

Question

Okay. Ich habe zwei Leinwände. Die erste Leinwand (rect1) bewegt sich zufällig auf dem Spielbrett . Der zweite (Zombie) soll rect1 folgen, aber er läuft einfach überall hin. Hier ist der wichtigste Code, der meiner Meinung nach ausreichen sollte, um herauszufinden, was falsch ist.

var rect1={ 
    x:300, 
    y:150, 
    width:8, 
    velX:3, 
    velY:3 
}; 
var zombie={ 
    x: 100, 
    y: 100, 
    width: 10, 
    velX: 3, 
    velY: 3 
}; 

if (zombie.x > rect1.x){ 
     zombie.velX *= -1; 
    } 
    if (zombie.y > rect1.y){ 
     zombie.velY *= -1; 
    } 
    if (zombie.x == rect1.x){ 
     zombie.velX *= 0; 
    } 
    if (zombie.y == rect1.y){ 
     zombie.velY *= 0; 
    } 

    zombie.x+= zombie.velX; 
    zombie.y+= zombie.velY; 

Hier ist eine Geige https://jsfiddle.net/Scrubben/easvqk6m/1/ wo man sehen kann, wie der Zombie (in rot) verhält. Tut mir leid, dass ich zwei Rects habe und dass ich nicht sehr gut in das Jsfiddle kommen kann, aber Sie sollten auf die Idee kommen. Wenn du mich abklären oder mir noch mehr Code hinzufügen willst lass es mich wissen! Danke

Answer 1

Diese Aussagen:

if (zombie.x > rect1.x){ 
    zombie.velX *= -1; 
} 
if (zombie.y > rect1.y){ 
    zombie.velY *= -1; 
} 

nicht wie vorgesehen. Sie drehen Geschwindigkeiten nur, wenn die Zombie-Position kleiner als das Rechteck ist. Stattdessen möchten Sie Geschwindigkeiten umkehren, wenn die Geschwindigkeit in die falsche Richtung geht.

Anstatt also sollte es so etwas wie sein:

if (Math.sign(rect1.x-zombie.x)!==Math.sign(zombie.velX)){ 
    zombie.velX *= -1; 
} 
if (Math.sign(rect1.y-zombie.y)!==Math.sign(zombie.velY)){ 
    zombie.velY *= -1; 
} 

aktualisiert Geige: https://jsfiddle.net/easvqk6m/6/

Answer 2

Das Problem ist, dass Sie immer die Geschwindigkeit spiegeln. Stellen Sie sich folgendes vor:

// Init 
zombie.velX = 3; 
zombie.x = 300; 
rect1.velX = 3; 
rect1.x = 100; // rect1 is to the left of zombie 

// Frame 1 
if (zombie.x > rect1.x) { // 300 > 100 
    zombie.velX *= -1; // zombie.velX === -3 
} 
zombie.x += velX; // zombie.x === 297 

// Frame 2 
if (zombie.x > rect1.x) { // 297 > 100 
    zombie.velX *= -1; // zombie.velX === +3 
} 
zombie.x += velX; // zombie.x === 300 

Und diese Art von Zyklus wiederholt sich für immer. Stattdessen können Sie den absoluten Wert seiner Geschwindigkeit verwenden, um anzugeben, welche Richtung zu gehen ist.

if (zombie.x > rect1.x) { // We want to move zombie to the left 
    zombie.velX = -Math.abs(zombie.velX); 
} else { // We want to move zombie to the right 
    zombie.velX = Math.abs(zombie.velX); 
}