javascript canvas检测小球碰撞

<div class="cnavasinfo">
 <canvas
  id="canvas"
  width="800"
  height="500"
 ></canvas>
</div>

export default {
 data() {
  return {
   canvas: null,
   ctx: null,
   arcobj: {}
  };
 },
 mounted() {
  this.canvas = document.getelementbyid("canvas");
  this.ctx = this.canvas.getcontext("2d");
  // this.move(); // 矩形的边缘碰撞函数
  // this.movearc(); // 绘制碰撞圆形，对象形式
  this.moverect()
 },
 methods: {
  move() {
   let x = 0;
   let y = 0;
   let width = 100;
   let height = 100;
   let speedx = 2;
   let speedy = 2;
   let ctx = this.ctx;
   ctx.fillstyle = "red";
   ctx.fillrect(x, y, width, height);
   setinterval(() => {
    ctx.clearrect(x, y, this.canvas.width, this.canvas.height);
    x += speedx;
    if (x > this.canvas.width - width) {
     speedx *= -1;
    } else if (x < 0) {
     speedx *= -1;
    }
    y += speedy;
    if (y > this.canvas.height - height) {
     speedy *= -1;
    } else if (y < 0) {
     speedy *= -1;
    }
    ctx.fillrect(x, y, width, height);
   }, 10);
   // this.requestmove(x,y,width,height,ctx,speedx,speedy); // 请求帧的动画过程
  },
  requestmove(x, y, width, height, ctx, speedx, speedy) {
   ctx.clearrect(x, y, this.canvas.width, this.canvas.height);
   x += speedx;
   if (x > this.canvas.width - width) {
    speedx *= -1;
   } else if (x < 0) {
    speedx *= -1;
   }
   y += speedy;
   if (y > this.canvas.height - height) {
    speedy *= -1;
   } else if (y < 0) {
    speedy *= -1;
   }
   ctx.fillrect(x, y, width, height);
   window.requestanimationframe(
    this.requestmove(x, y, width, height, ctx, speedx, speedy)
   );
  },
  movearc(x, y, r, speedx, speedy) {
   this.x = x;
   this.y = y;
   this.r = r;
   this.speedx = speedx;
   this.speedy = speedy;
   this.moveupdata = function() {
    this.x += this.speedx;
    if (this.x > this.canvas.width - this.r) {
     this.speedx *= -1;
    } else if (this.x < 0) {
     this.speedx *= -1;
    }
    this.y += this.speedy;
    if (this.y > this.canvas.height - this.r) {
     this.speedy *= -1;
    } else if (this.y < 0) {
     this.speedy *= -1;
    }
   };
  },
  moverect(){
   // 面向对象编程
   function rect(x,y,width,height,color,speedx,speedy,ctx,canvas) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color
    this.speedx = speedx
    this.speedy = speedy
    this.ctxrect = ctx
    this.canvas = canvas
   }
   rect.prototype.draw = function() {
    this.ctxrect.beginpath();
    this.ctxrect.fillstyle = this.color
    this.ctxrect.fillrect(this.x,this.y,this.width,this.height)
    this.ctxrect.closepath();
   }
   rect.prototype.move = function() {
    this.x += this.speedx
    if(this.x > this.canvas.width - this.width){
     this.speedx *= -1
    } else if(this.x < 0){
     this.speedx *= -1
    }
    this.y += this.speedy
    if(this.y > this.canvas.height - this.height){
     this.speedy *= -1
    } else if(this.y < 0){
     this.speedy *= -1
    }
   }
   let rect1 = new rect(0,100,100,100,'red',2,2,this.ctx,this.canvas)
   let rect2 = new rect(300,100,100,100,'blue',-2,-2,this.ctx,this.canvas)
   // rect1.draw();
   // rect2.draw()
   let animate = ()=>{
     this.ctx.clearrect(0,0,this.canvas.width,this.canvas.height)
     rect1.draw()
     rect1.move()
     rect2.draw()
     rect2.move()
    let rect1min = rect1.x;
    let rect1max = rect1.x + rect1.width
    let rect2min = rect2.x
    let rect2max = rect2.x + rect2.width
    let min = math.max(rect1min,rect2min)
    let max = math.min(rect1max,rect2max)
    if(min < max){
     rect1.speedx *= -1;
     rect1.speedy *= 1;
     rect2.speedx *= -1
     rect2.speedy *= 1
    }
    window.requestanimationframe(animate)
   } 
   animate()
  }
 }
};

#canvas {
 border: 1px solid black;
}