Question

我一直在网站上做一个简单的水母游戏，你必须通过点击它们来防止水母到达顶部，我遇到了一个我无法弄清楚的问题。你可以在游戏中产生水母（现在），他们将在游戏场上随机定位，并且它们应该叠加在一起，因为每个人都有一个单独的z-index。他们通过随机化左边距来随机化（这很好）。然而，当我点击水母删除它时，所有其他图像跳到左边，好像水母的一部分根本不被堆叠。这是控制水母产卵的当前js方法。提前谢谢你们：）

var spawnJelly = function(jellyType) {
//57 is the width of the jellyfish picture.
var jelliesSpawnPosition = Math.random()*1000 - 57;
jelliesSpawned++
var newJelly = document.createElement("img");
newJelly.setAttribute('src', "https://www.googledrive.com/host/0B-IaOP2CvHbffk56ZWFrUExfX1ZVNWZ0RmRmYU0tMHVoUHVDZzJ1NzhRV2l0c01kSENnNWc/jelly"+jellyType+".png");
document.getElementById("playingField").appendChild(newJelly);
 newJelly.addEventListener("click", deleteJelly);
 // jelliesSpawned is a global variable
 newJelly.setAttribute('style', 'left: '+jelliesSpawnPosition+'px; z-index: '+jelliesSpawned);
console.log("jellyfish created!");
};

这是deleteJelly的方法：

function deleteJelly() {
  this.parentNode.removeChild(this);
  console.log("Jellyfish removed!")
}

这是我正在制作这个水母游戏的当前网站的链接。 http://atestingsite.x10host.com/cgi-bin/jellyfishGameC.html

Answer 1

您正在使用位置相对，这意味着图像占用了物理空间，并在您删除它们时会导致页面重排。您应该将您的定位更改为绝对（并将果冻鱼容器设置为相对于Jan的相对位置）。

图片无法正确堆叠

1 个答案: