Javascript 将单独的画布动画运行到游戏循环动画

我在这个游戏中遇到了一个逻辑结：（。我只想在每次循环1秒钟后从屏幕上移除爆炸。正如你在下面看到的，它们以游戏循环的帧速率运行。这是我制作爆炸动画的唯一方法-通过设置精灵以游戏循环的速度（帧速率）移动

我不明白如何将一个单独的动画以不同的速度连接到同一个画布上下文，该画布上下文基本上每一帧都被清除。我甚至不知道如何停止爆炸精灵循环

我尝试在爆炸类中创建一个单独的方法

drawerexplosion（）

，并在爆炸构造函数中使用

setInterval

，但它从不喜欢我连接它的上下文，并抛出此错误：

 Cannot read property 'drawImage' of undefined (i.e. the context is undefined)

如果有人能在1秒后停止每个爆炸循环，我就会明白我偏离了方向

守则的大纲如下：

class Entity
class Ball extends Entity
class Explosion extends Entity
class Enemy extends Entity
class Paddle extends Entity
class InputsManager
class mouseMoveHandler
class Game

const canvas = document.querySelector('canvas')
const game = new Game(canvas)
game.start()

文件
身体{
背景色：rgb（214238149）；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：0；
填充：0；
}
帆布{
背景：url（“https://picsum.photos/200");
宽度：100%；
背景尺寸：封面；
}
类实体{
构造函数（x，y）{
这个死=假；
this.collision='none'
这个。x=x
这个。y=y
}
update（）{console.warn（`${this.constructor.name}需要一个update（）函数`）}
draw（）{console.warn（`${this.constructor.name}需要一个draw（）函数`）}
isDead（）{console.warn（`${this.constructor.name}需要一个isDead（）函数`）}
静态测试冲突（a，b）{
如果（a.collision=='none'）{
console.warn（`${a.constructor.name}需要冲突类型`）
返回未定义
}
如果（b.collision=='none'）{
D
console.warn（`${b.constructor.name}需要冲突类型`）
返回未定义
}
如果（a.collision=='circle'&&b.collision=='circle'）{
返回数学sqrt（（a.x-b.x）**2+（a.y-b.y）**2）=rect.x-rect.width/4
const ballIsLeftOfRectRightSide=circle.x-circle.radius=this.x-this.width/2
常量ballIsLeftOfRectRightSide=球.x+球.9）{
//clearInterval（this.timerId）
//   };
// }
/**@param{CanvasRenderingContext2D}上下文*/
绘制（上下文、帧编号）{
console.log（帧号）
//ctx.clearRect（0，0，500，500）
this.spriteFrameNumber+=1；//更改我们查看的精灵
this.spriteFrameNumber=this.spriteFrameNumber%this.totalNumberOfFrames；//将其从0更改为1到2…最多更改为9，然后再次更改为0，然后更改为1。。。
context.drawImage（this.imgExplosion，
this.spriteFrameNumber*this.widthofssingleimage，0，//x和y-在精灵中的位置
this.widthofssingleimage，this.heightOfSprite，//宽度和高度
这个.x-25，这个.y-25，//x和y-在屏幕上的什么位置
this.widthofssingleimage，this.heightOfSprite//宽度和高度
);
}
更新（）{
}
isDead（球，isDead）{
如果（isDead=='true'）{
clearTimeout（this.timerId）；
返回真值
}
返回错误
}
} 
类扩展实体{
构造函数（x，y）{
超级（x，y）
this.collision='rect'
这个高度=50；
这个宽度=50；
这个.speedVar=4；
this.speed=this.speedVar；
this.color='#EC3AC8'；
this.color2='#000000'；
这个。y=y；
this.imgEnemy=新图像（）；
this.imgEnemy.src=”https://i.ibb.co/kgXsr66/question.png";
this.runCount=1；
this.timerId=setInterval（this.movePosish.bind（this），1000）；
}
movePosish（）{
//console.log（this.runCount）
//x 10->240
//y 10->300
开关（this.runCount）{
案例0：
这个.x=20；这个.y=200；
打破
案例1：
这个.x=200；这个.y=300；
打破
案例2：
这个.x=30；这个.y=20；
打破
案例3：
这个.x=230；这个.y=150；
打破
案例4：
这个.x=200；这个.y=20；
打破
案例5：
这个.x=30；这个.y=90；
打破
案例6：
这个.x=240；这个.y=20；
打破
案例7：
这个.x=30；这个.y=150；
打破
案例8：
这个.x=180；这个.y=170；
打破
案例9：
这个.x=30；这个.y=50；
打破
案例10：
这个.x=130；这个.y=170；
打破
}
//如果是第10个图像，请删除图像并清除计时器
此参数为.runCount+=1；
如果（this.runCount>10）{
//clearInterval（this.timerId）
this.runCount=0；
console.log（'ya错过了10个em'）
};
}
更新（）{
////向左/向右移动
//这个.x+=这个.speed；
//if（this.x>canvas.width-this.width）{
//this.speed-=this.speedVar；
// }
//if（this.x==0）{
//this.speed+=this.speedVar；
// }
}
/**@param{CanvasRenderingContext2D}上下文*/
绘制（上下文）{
//context.beginPath（）；
//rect（this.x，this.y，this.width，this.height）；
//context.fillSty