Canvas进阶-5、碰撞检测

原创

已于 2025-04-11 09:56:14 修改 · 839 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2025-02-20 09:30:08 首次发布

什么是碰撞检测？

碰撞检测，是物体与物体之间的关系。用来检测物体与物体之间是否发生了碰撞，例如：射击游戏，就是检测子弹与敌人的碰撞。

碰撞检测，主要归纳为以下两种实现方式：

外接矩形判定法

外接圆判定法

外接矩形判定法

当我们需要被检测的物体为矩形，或者形态接近于矩形，我们就可以把这个物体抽象为矩形，然后判断两个矩形是否发生了碰撞。实现该方法，我们需要做到两步：1. 找出物体的外接矩形 2. 对外接矩形进行碰撞检测。

请添加图片描述

📢 有些物体虽然看起来没有发生碰撞，但是在外接矩形检测法的规则下，它们就会被认定为发生了碰撞

在我们实际开发中，如果想要判定两个不规则的图形是否生了碰撞，是非常困难的！但是，我们使用“外接矩形法”去判断，将会特别简单，但是，“外接矩形法”有个明显的缺点，就是误差较大。即使是这样，它简单的判定方式可以减少我们的开发难度，依然备受欢迎，毕竟有得必有失，没有什么完美的算法，只能取最合适的算法

请添加图片描述

 init1() {
   
   
      class Ball {
   
   
        constructor(x, y, radius, color) {
   
   
          this.x = x
          this.y = y
          this.radius = radius
          this.color = color
          this.vx = Math.random() * 3 - 1 // 添加随机速度
          this.vy = Math.random() * 3 - 1
          this.opacity = 1
          this.lifeTime = 400 // 添加生命周期属性（毫秒）
          this.birthTime = Date.now() // 记录小球创建的时间
        }
        fill(context) {
   
   
          context.save()
          context.globalAlpha = this.opacity
          context.beginPath()
          context.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
          context.fillStyle = this.color
          context.fill()
          context.closePath()
          context.restore()
        }
      }
      // 获取鼠标移动位置
      const mouseMove = element => {
   
   
        let mouse = {
   
    x: 0, y: 0 }
        element.addEventListener('mousemove', e => {
   
   
          let x