キャンバスに別のキャンバスを描こうとすると、狂ってしまう

Question

いいえ。私は2つのキャンバスを持っています。最初のキャンバス（rect1）は、ゲームボード上でランダムに移動する予定です。 2番目の（ゾンビ）は、rect1に従うことになっていますが、ちょうどその場所の上を走っています。ここで私が間違っているものを見つけ出すのに十分なはずだと思う最も重要なコードです。

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; 

ここでは、（赤）ゾンビがどのように動作するかを見ることができますフィドルhttps://jsfiddle.net/Scrubben/easvqk6m/1/です。 2つのrectを持っていて申し訳ありません。jsfiddleでよくコメントしていないのですが、あなたはそのアイデアを得るべきです。あなたが私に明確にするか、私にもう少しコードを追加したいなら、私に教えてください！ありがとう

Answer 1

これらの記述：意図したとおりに

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

は動作しません。ゾンビの位置が長方形よりも小さい場合にのみ速度を反転します。代わりに、速度が間違った方向に向いている場合、速度を反転させたいと思っています。

ので、代わりにそれがあるべきようなもの：

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; 
} 

更新フィドル：https://jsfiddle.net/easvqk6m/6/

Answer 2

問題は、常に速度を反転していることです。これを想像してみてください：

// 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 

そしてこの種のサイクルは永遠に繰り返されます。代わりに、速度の絶対値を使用して、どの方向に行くかを指定することができます。

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); 
}