javascript - 使用setInterval在javascript中减少健康栏的填充矩形时遇到问题，适用于递增

Question

我正在尝试构建一个像电子宠物蛋这样的迷你网页游戏，但是我在脚本的健康栏状态方面遇到了问题。例如，当我setInterval设置减少清洁度、饥饿感和幸福感条时，我可以看到变化，console.log但是当我查看html. 但是，当我有 setInterval 函数甚至按钮单击事件侦听器来增加时，它工作得很好。当我试图将状态设置为下降时，两者都不起作用。我不确定为什么会这样，但我仍在积极寻找答案。

window.onload = function() {
  document
    .getElementById("clean-button")
    .addEventListener("click", clickedCleanButton);
  document
    .getElementById("feed-button")
    .addEventListener("click", clickedFeedButton);
  document
    .getElementById("play-button")
    .addEventListener("click", clickedPlayButton);

  let sprite_info = {
    name: "giratina",
    happiness: 800,
    hunger: 800,
    cleaniness: 800,
    age: 0
  };

  //hunger bar function, will decrease every 10000ms
  /* work on decreasing bars per 10,000ms*/
  setInterval(function() {
    UpdateSpriteInfo();
    sprite_info["cleaniness"] -= 50;
    //sprite_info['hunger'] -= 50;
    //sprite_info['happiness'] -= 50;
    console.log(sprite_info["cleaniness"]);
  }, 10000);

  function clickedCleanButton() {
    sprite_info["cleaniness"] += 50;
    console.log(sprite_info["cleaniness"]);
    UpdateSpriteInfo();
  }

  function clickedFeedButton() {
    sprite_info["hunger"] += 50;
    console.log(sprite_info["hunger"]);
    UpdateSpriteInfo();
  }

  function clickedPlayButton() {
    sprite_info["happiness"] += 50;
    console.log(sprite_info["happiness"]);
    UpdateSpriteInfo();
  }

  function UpdateSpriteInfo() {
    //health display that grows by 50 with button click
    canvas_health = document.getElementById("health_display");
    health_bar = canvas_health.getContext("2d");
    health_bar.fillStyle = "green";
    health_bar.fillRect(0, 0, sprite_info["cleaniness"], 50);

    //hunger display
    canvas_hunger = document.getElementById("hunger_display");
    hunger_bar = canvas_hunger.getContext("2d");
    hunger_bar.fillStyle = "lightblue";
    hunger_bar.fillRect(0, 0, sprite_info["hunger"], 50);

    //happiness display
    canvas_happiness = document.getElementById("happiness_display");
    happiness_bar = canvas_happiness.getContext("2d");
    happiness_bar.fillStyle = "pink";
    happiness_bar.fillRect(0, 0, sprite_info["happiness"], 50);
  }
};

标签： javascriptsetintervaladdeventlistenerfillbuttonclick