在画布内加载效果

Question

我正在开发一个游戏，玩家可以在空格键上击中敌人我有一个场景，当玩家击中空间时，加载条应该减少直到它达到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();
                }

    }