Collision only working west and north sides

Question

Basically I have an Image of a spaceship which needs to collide with an alien.
However, the aliens only detect collision on the west and north side only.
I want it to collide on all sides of the image.

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

Your algorithm doesn't take the dimensions of the shaceship image's dimensions into account. At least not for all cases.

Here's an example with a modified detection routine:

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>