添加物品弹窗后宝箱开启动画失效的问题求助

大家好，我正在用JavaScript开发一款2D迷宫游戏，其中包含宝箱开启动画的功能。原本动画运行得很顺畅，但自从我加入了显示获得物品的弹窗后，问题就出现了。

问题详情 #

• 预期行为：宝箱完整播放开启动画后再消失
• 实际行为：宝箱直接瞬间消失，完全没有播放动画的过程

我简化后的逻辑流程是这样的：

• AnimationChest() 通过 requestAnimationFrame 逐帧更新动画状态
• 玩家点击打开宝箱时，openChest() 会播放音效、设置 chestAnim.active = true，接着调用 addItemToInventory()
• addItemToInventory() 触发 showChestPopup()，显示一个带物品信息的弹窗遮罩层

我怀疑是不是弹窗逻辑或者遮罩层干扰了动画的执行？我试过问ChatGPT、逐块测试代码甚至重写整个逻辑，但都没找到问题所在。

下面是可复现问题的完整代码示例，点击画布就能触发宝箱打开操作——加入弹窗逻辑后，宝箱动画直接失效了：

<canvas id="gameCanvas" width="300" height="300"></canvas>
<div id="overlay"></div>
<audio id="chestaudio" src="https://freesound.org/data/previews/276/276020_4486188-lq.mp3"></audio>

<style>
#gameCanvas { border: 1px solid black; }
#overlay { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  background: rgba(0, 0, 0, 0.8); 
  display: none; 
  align-items: center; 
  justify-content: center; 
  color: white; 
  flex-direction: column; 
}
#ChestContent img { width: 64px; }
</style>

<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const currentPlayer = { x: 0, y: 0, item: [] };
const maze = [ ['C'] ];
const openedChest = new Set();
const allItems = [{ 
  name: "Sword", 
  img: "https://via.placeholder.com/64?text=Sword", 
  description: "A sharp blade" 
}];

const chestAnim = { 
  active: false, 
  currentFrame: 0, 
  totalFrame: 4, 
  totalTime: 0, 
  frameSpeed: 200 
};

function openChest() {
  const pos = `${currentPlayer.x},${currentPlayer.y}`;
  if (maze[currentPlayer.y][currentPlayer.x] === 'C' && !openedChest.has(pos)) {
    openedChest.add(pos);
    chestAnim.active = true;
    document.getElementById("chestaudio").play();
    const item = allItems[Math.floor(Math.random() * allItems.length)];
    addItemToInventory(item); // 触发弹窗逻辑
  }
}

function addItemToInventory(item) {
  currentPlayer.item.push(item);
  showChestPopup(item);
}

function showChestPopup(item) {
  const overlay = document.getElementById("overlay");
  overlay.innerHTML = "";
  overlay.style.display = "flex";
  const content = document.createElement("div");
  content.id = "ChestContent";
  content.innerHTML = `
    <img src="${item.img}" alt="${item.name}">
    <h3>${item.name}</h3>
    <p>${item.description}</p>
    <small>(Click anywhere to close)</small>
  `;
  overlay.appendChild(content);
  overlay.onclick = () => {
    overlay.style.display = "none";
    overlay.innerHTML = "";
  };
  setTimeout(() => {
    overlay.style.display = "none";
    overlay.innerHTML = "";
  }, 5000);
}

function drawMaze() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (!openedChest.has(`${currentPlayer.x},${currentPlayer.y}`)) {
    // 模拟动画帧绘制宝箱
    ctx.fillStyle = ["#964B00", "#A0522D", "#8B4513", "#CD853F"][chestAnim.currentFrame];
    ctx.fillRect(100, 100, 50, 50);
  }
}

function AnimationChest(delta) {
  chestAnim.totalTime += delta;
  if (chestAnim.totalTime >= chestAnim.frameSpeed) {
    chestAnim.totalTime = 0;
    chestAnim.currentFrame = chestAnim.active ? 
      Math.min(chestAnim.currentFrame + 1, chestAnim.totalFrame - 1) : 
      Math.max(chestAnim.currentFrame - 1, 0);
  }
}

let lastTime = performance.now();
function AnimationLoop(time) {
  const delta = time - lastTime;
  lastTime = time;
  AnimationChest(delta);
  drawMaze();
  requestAnimationFrame(AnimationLoop);
}

canvas.addEventListener("click", openChest);
requestAnimationFrame(AnimationLoop);
</script>

有没有大佬能帮我定位一下问题？感谢大家的帮助！

内容来源于stack exchange