Javascript 画布中循环任务的问题

我被赋予了以下任务，但我得到了运行代码段时可以看到的错误。我想得到一些帮助，弄清楚我到底做错了什么

基本上，我需要画一个圆圈，使它在触摸屏幕墙壁时移动并改变方向/颜色

任务：创建具有以下属性的Circle类：

• x-坐标x的初始值
• y是y坐标的初始值
• 半径-值​​宽度和高度
• 颜色-填充颜色描述方法：
• draw（）-在屏幕上标记由给定属性描述的元素
• setColor（newColor）-将填充颜色更改为newColor
• 移动（{x=0，y=0}）-按向量（x，y）移动捕获的对象-每次时间段（例如，100毫秒）更改（加\减） 价值观​​分别是x和y。当一个圆与任何一个圆碰撞时 屏幕边缘有必要实现其镜面反射 （更改屏幕上矢量对应坐标的值。） 与符号的值相反，并使用新的 向量）并生成碰撞事件collision，该事件将被捕获 在文档级别。挂起此事件将更改的处理程序 将圆倒入另一个（随机）值的颜色。 在调用stop方法之前，将发生移动
• 停止（）-停止圆的移动

如果按下键盘上的退出按钮，移动应停止

我创建了一个画布，并将框架设置为移动。我画了一个圆圈，并试图使用setInterval（）移动它，但似乎我正在失去上下文

let c=document.getElementById（“mycanvas”）；
设ctx=c.getContext（“2d”）；
设xinc=1；
设yinc=1；
班级圈子{
构造函数（XPO、YPO、半径、颜色）{
this.xpos=xpos；
this.ypos=ypos；
这个半径=半径；
这个颜色=颜色；
}
画（）{
ctx.beginPath（）；
ctx.arc（this.xpos，this.ypos，this.radius，0，Math.PI*2）；
ctx.fillStyle=“红色”；
ctx.fill（）；
}
移动（XPO、YPO）{
ctx.clearRect（0，0，c.宽度，c.高度）；
ctx.beginPath（）；
这个.draw（）；
xpos+=xinc；
ypos+=银币；
console.log（xpos、ypos）；
if（（this.xpos>c.width-this.radius）| |（this.xpos<0+this.radius））{
xinc=-xinc；
}
如果（（this.ypos>c.height-this.radius）| |（this.ypos<0+this.radius））{
银币=-银币；
}
setInterval（this.move，10）；
//这个.draw（）；
}
}
设圆圈=新圆圈（200、300、50，“红色”）；
画圆（）；
圈。移动（200300）
您正在传递
this。将
移动到
setInterval
，无上下文-只是一个函数，无需调用
this
。您可以传入
this.move.bind（this）
来创建绑定函数。也可以在构造函数中执行一次：
this.move=this.move.bind（this）

另外，在
move
中调用
beginPath
似乎没有必要。
谢谢，我已经重写了so setInterval（this.move（xpos，ypos）.bind（this），10）；现在通过console.log（xpos，ypos）我看到坐标正在变化。但是，draw（）方法不起作用，并且圆没有被重新绘制，不是
this.move（xpos，ypos）.bind（this）
，而是
this.move.bind（this）
。但是，您从不更新
this.xpos
，只修改局部变量。