碰撞仅适用于西侧和北侧

Question

基本上我有一个需要与外星人相撞的宇宙飞船的图像。然而，外星人只检测到西侧和北侧的碰撞。我希望它在图像的所有侧面碰撞。if (ay >= spy && ay <= spy + spaceshipImage.height // North side    ||  spy >= ay && spy <= ay + alienImage.height // South side) {  if (spx + alienImage.width >= ax && spx + alienImage.height <= ax + alienImage.height // West side _+    ||    spx >= ax && spx <= ax + alienImage.width // East side _+  ) {    slives = slives - 1;    ax = Math.floor(Math.random() * (canvasWidth2 - alienImage.width));    ay = -100  }}

Answer 1

您的算法没有考虑 shaceship 图像尺寸的尺寸。至少不是所有情况。

这是一个修改了检测程序的示例：

spaceshipImage = {};

spaceshipImage.height = 10;

spaceshipImage.width = 10;

alienImage = {};

alienImage.width = 20;

alienImage.height = 20;

ay = 50;

ax = 50;

spx = 70;

spy = 60;

var canvas = document.getElementById("canvas")

var context = canvas.getContext("2d");

context.fillStyle = "#ff0000"

context.fillRect(spx, spy, spaceshipImage.width, spaceshipImage.height)

context.fillStyle = "#00ff00"

context.fillRect(ax, ay, alienImage.width, alienImage.height)

if (spx + spaceshipImage.width >= ax && spx <= ax + alienImage.width && spy + spaceshipImage.height >= ay && spy <= ay + alienImage.height) {

  console.log("hit");

}

<canvas id="canvas"></canvas>