javascript - 画布内的加载效果

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();
                }

    }