javascript - 更改 Z-index 问题

Question

我正在 HTML 上制作一个旧的 RPG 游戏，我想在 Javascript 上制作一个函数这使得玩家的 div 低于障碍物，当顶部高于障碍物时，玩家的 z-index 高于障碍物:

var top = parseInt($("#player").css("top"));
var hei = $("#player").height();
var total = top + hei;
var obTop = parseInt($("#obstacle").css("top"));
var obHei = $("#obstacle").height();
var obTotal = obHei + obTop;
if (total < obTotal) {
    player.style.zIndex = 1;
    $("#obstacle").css('z-index', 2);
} else {
    player.style.zIndex = 2;
    $("#obstacle").css('z-index', 1);
}

当顶部的玩家高于障碍物时(火)

---

当顶部较低

Answer 1

您需要比较相关对象的 Y 位置。在这种情况下，当火 y 低于玩家 y 时，您希望玩家的 Z 指数高于火。反之亦然，当火 y 高于玩家 y 时，您希望火的 Z 指数高于火。你可以像这样做这样的事情:

//Define player y and fire y 
player.style.zIndex = 1;
$("obstacle").css("z-index", 1);
if (playery > firey){
    player.style.zIndex = 2;
} else {
    $("obstacle").css("z-index", 2);
}

这还没有经过测试，因为没有给出可运行的示例。