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

您的算法没有考虑到共享图像的尺寸。至少并非所有情况都如此。

下面是修改了检测例程的示例：

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>

碰撞仅在西侧和北侧起作用

1 个答案: