Javascript 如何在pointerdown&；上递增和递减进度条值；指针？

目前，我正在尝试为一个游戏编写代码，在pointerdown上，一个进度标记会随着时间慢慢耗尽，在pointerup上，进度条会从它停止的值慢慢重新填充

这是我目前的工作逻辑：

HTML:

Javascript:

// Javascript
var air = document.querySelector('#air').value;

function drowning(){
  if (air <= 0){
    console.log("You have drowned");
  } else {
    air--;
  }
};

addEventListener('pointerdown', function() {
  var losingair = setInterval(drowning, 250);            
});

addEventListener('pointerup', function() {
  clearInterval(drowning);
  setInterval(gainingair, 200);
  function gainingair() {
    if (air = 100) {
      clearInterval(gainingair); 
    }
    else {
      air++; 
    }
  }
});   

//Javascript
var air=document.querySelector（“#air”）.value；
函数溺水（）{
如果（air而不是将
document.querySelector（'#air'）.value
分配给
air
变量，则只分配
document.querySelector（'#air'）
部分，并使用
air.value
访问该值

此外，您以错误的方式清除间隔。
setInterval（）
返回的值用作clearInterval（）方法的参数

这是工作代码


var air=document.querySelector（“#air”）；
var损失间隔，增益间隔
函数溺水（）{
如果（air.value感谢Prakar，只需删除
dispatchEvent（新的CustomEvent（'pointerdown'））
就产生了预期的效果和抖动。@Cameron Whiting
dispatchEvent
部分只是为了测试功能。我应该在回答中说明这一点。
// Javascript
var air = document.querySelector('#air').value;

function drowning(){
  if (air <= 0){
    console.log("You have drowned");
  } else {
    air--;
  }
};

addEventListener('pointerdown', function() {
  var losingair = setInterval(drowning, 250);            
});

addEventListener('pointerup', function() {
  clearInterval(drowning);
  setInterval(gainingair, 200);
  function gainingair() {
    if (air = 100) {
      clearInterval(gainingair); 
    }
    else {
      air++; 
    }
  }
});