当物体碰撞时，玩家和“激光”消失

Question

我正在制作一个游戏，我有一个玩家可以射击击落屏幕上的敌人。问题是敌人的物体在碰撞之前消失了，玩家也会在碰撞发生之前消失。相反，当物体与敌人物体在同一个物体上并且不是预期的物体时，物体会消失。

var left_key = 37;
var up_key = 38;
var right_key = 39;
var down_key = 40;
var space_key = 32;
var player_movment = 4;

var lastLoopRun = 0;

var controller = new Object();
var enemies = new Array();

function createSprite(element, x, y, w, h) {
  var result = new Object();
  result.element = element;
  result.x = x;
  result.y = y;
  result.w = w;
  result.h = h;
  return result;
}

function toggleKey(keyCode, isPressed) {
  if (keyCode == left_key) {
    controller.left = isPressed;
  }
  if (keyCode == right_key) {
    controller.right = isPressed;
  }
  if (keyCode == up_key) {
    controller.up = isPressed;
  }
  if (keyCode == down_key) {
    controller.down = isPressed;
  }
  if (keyCode == space_key) {
    controller.space = isPressed;
  }
}

function intersects(a, b) {
  return a.x < b.x + b.w && a.x + a.w > b.x && b.y + b.h && a.y + a.h > b.y;
}

function ensureBounds(sprite, ignoreY) {
  if (sprite.x < 20) {
    sprite.x = 20;
  }
  if (!ignoreY && sprite.y < 20) {
    sprite.y = 20;
  }
  if (sprite.x + sprite.w > 480) {
    sprite.x = 480 - sprite.w;
  }
  if (!ignoreY && sprite.y + sprite.h > 480) {
    sprite.y = 480 - sprite.h;
  }
}

function setPosition(sprite) {
  var e = document.getElementById(sprite.element);
  e.style.left = sprite.x + "px";
  e.style.top = sprite.y + "px";
}

function handleControls() {
  if (controller.up) {
    player.y -= player_movment;
  }
  if (controller.down) {
    player.y += player_movment;
  }
  if (controller.left) {
    player.x -= player_movment;
  }
  if (controller.right) {
    player.x += player_movment;
  }
  if (controller.space && laser.y <= -120) {
    laser.x = player.x + 9;
    laser.y = player.y - laser.h;
  }
  ensureBounds(player);
}

function showSprites() {
  setPosition(player);
  setPosition(laser);
  for (var i = 0; i < enemies.length; i++) {
    setPosition(enemies[i]);
  }
}

function checkCollisions() {
  for (var i = 0; i < enemies.length; i++) {
    if (intersects(laser, enemies[i])) {
      var element = document.getElementById(enemies[i].element);
      element.style.visibility = "hidden";
      element.parentNode.removeChild(element);
      enemies.splice(i, 1);
      i--;
      laser.y = -laser.h;
    } else if (intersects(player, enemies[i])) {
      var element = document.getElementById(player.element);
      element.style.visibility = "hidden";
    } else if (enemies[i].y + enemies[i].h >= 500) {
      var element = document.getElementById(enemies[i].element);
      element.style.visibility = "hidden";
      element.parentNode.removeChild(element);
      enemies.splice(i, 1);
      i--;
    }
  }
}

function updatePositions() {
  for (var i = 0; i < enemies.length; i++) {
    enemies[i].y += 4;
    enemies[i].x += getRandom(7) - 3;
    ensureBounds(enemies[i], true);
  }
  laser.y -= 12;
}

function addEnemy() {
  if (getRandom(50) == 0) {
    var elementName = "enemy" + getRandom(10000000);
    var enemy = createSprite(elementName, getRandom(450), -40, 45, 45);

    var element = document.createElement("div");
    element.id = enemy.element;
    element.className = "enemy";
    document.children[0].appendChild(element);

    enemies[enemies.length] = enemy;
  }
}

function getRandom(maxSize) {
  return parseInt(Math.random() * maxSize);
}

function loop() {
  if (new Date().getTime() - lastLoopRun > 50) {
    updatePositions();
    handleControls();
    showSprites();
    checkCollisions();

    addEnemy();

    lastLoopRun = new Date().getTime();
  }
  setTimeout("loop();", 2); //6:10 episode 2 <-- forklaring:
}

document.onkeydown = function(evt) {
  toggleKey(evt.keyCode, true);
};

document.onkeyup = function(evt) {
  toggleKey(evt.keyCode, false);
};

var player = createSprite("player", 250, 460, 20, 20)
var laser = createSprite("laser", 0, -120, 2, 50);

loop();

#player {
  background: red;
  width: 20px;
  height: 20px;
  position: absolute;
}

#background {
  background: black;
  width: 500px;
  height: 500px;
  position: absolute;
  left: 0px;
  top: 0px;
}

#laser {
  background: green;
  width: 2px;
  height: 50px;
  position: absolute;
}

.enemy {
  background: blue;
  width: 35px;
  height: 35px;
  position: absolute;
}

<div id="background"></div>
<div id="player">
  <img src="xwing.png" height="20px" width="20px">
</div>
<div id="laser"></div>

Answer 1

碰撞检测的代码不正确。试试这个：

function intersects(a, b) {
  return a.x > b.x - a.w && a.x < b.x + b.w && a.y > b.y - a.h && a.y < b.y + b.h;
}