Question

我试图将健康指标表示添加到我正在处理并停留在DOM操作问题上的游戏中。这个想法是，当玩家失去健康时，有一个图像会在各个阶段恶化。这是我到目前为止的一个例子。

var healthDisplay = document.getElementById('healthDisplay');
      if (heroHealth > 75) {
        healthDisplay.src = 'image1.png';
      } else if (heroHealth < 75 || heroHealth > 30){
        healthDisplay.src = 'image2.png';
      } else {
        healthDisplay.src = 'image3.png';
      };

这只是它的基础知识。我的问题是关于下一步。我要添加什么才能使脚本不断检查这些参数是真还是假？最好将它放在while循环中，还是添加一个事件监听器？

Answer 1

您希望将其置于setinterval中。

//this is assuming that heroHealth, and healthDisplay 
//are available to this function already 
//either through closure or they are global 
//variables etc.

function checkHealth () {

if (heroHealth > 75) {
        healthDisplay.src = 'image1.png';
      } else if (heroHealth < 75 && heroHealth > 30){
        healthDisplay.src = 'image2.png';
      } else {
        healthDisplay.src = 'image3.png';
      };
}

setInterval(checkHealth, 100);

setInterval以特定间隔重复调用函数。此示例设置为100毫秒。这样，当英雄的健康状况上下移动时，图像src将随着功能的激发而改变。

根据您的游戏设置方式以及健康状况的存储方式，您可以将该功能连接到更改事件：

<input type="textbox" id="heroHealthCheckBox" 
  onchange="checkHeroHealth(this.value)"/>

function checkHeroHealth(health) {
  var heroHealth = parseInt(health);
  if (heroHealth > 75) {
    healthDisplay.src = 'image1.png';
  } else if (heroHealth < 75 && heroHealth > 30){
    healthDisplay.src = 'image2.png';
  } else {
    healthDisplay.src = 'image3.png';
  }
}

我还从

更改了第二个条件

heroHealth < 75 || heroHealth > 30

到这个

heroHealth < 75 && heroHealth > 30

动态更改DOM中的图像

1 个答案: