Javascript 画布内的加载效果

我正在开发一个游戏，玩家可以在击中空格键时射杀敌人。我有一个场景，当玩家击中空格键时，一个加载键应该减少到击中0，然后重新生成，直到击中100。当它重新生成时，玩家可以再次射击，但我在这个场景中遇到了一个问题

守则：

var charge=100
var player = {
        x: 225,
        y: 430,
        width: 50,
        height: 50,
        image: "",
        speed: 6,
        life: 3,
        middpoint: 25,
        playercanShoot: true,
        draw: function () {
            canvas.drawImage(this.image, this.x, this.y, this.width, this.height);
        },
        shoot: function () {
            Bullets.push(playerBullets({ speed: 20, x: this.x + this.middpoint, y: this.y }));
            var x = setInterval(function () {
                charge = charge - 20;
            }, 500);
            if (charge == 0){
                clearInterval(x); // when the charge is 0 
               var y=setInterval(function(){
                charge=charge+20;
               },500);
            }
            if(charge==100)
             {
               this.playercanShoot=true;
             }
        }
    };
   function update() {
       if (keydown.space && player.playercanShoot){
                player.shoot();
                }

    }

---

请解释在这种情况下，您到底遇到了什么问题。费用在奇怪地减少和增加，我无法理解问题所在，我猜这是在我的设置间隔函数中。请解释一下奇怪地减少和增加的确切含义。