Kaboom框架拖拽场景碰撞检测失效问题及解决方法

1. 修复后的完整代码 #

以下是修正后的代码，可实现拖拽场景下的碰撞检测与精灵销毁逻辑：

import kaboom from "kaboom"

kaboom()

loadSprite("crewmate", "/sprites/crewmate.png")
loadSprite("imposter", "/sprites/imposter.png")
loadSprite("bean", "/sprites/bean.png")

let drag_obj = null

// 修正后的拖拽组件
function drag() {
  return {
    id: "drag",
    require: ["pos", "area"],
    offset: vec2(0, 0), // 组件内存储鼠标偏移量
    add() {
      this.onClick(() => {
        if (drag_obj) return
        drag_obj = this
        // 计算鼠标点击点与精灵中心的偏移
        this.offset = mousePos().sub(this.pos)
        readd(this)
      })
    },
    update() {
      if (drag_obj === this) {
        cursor("move")
        // 使用偏移量确保拖拽时精灵跟随鼠标位置正确
        this.pos = mousePos().sub(this.offset)
      }
    },
  }
}

onMouseRelease(() => { drag_obj = null })

function spawnAstro() {
  const seed = rand(0, 100)
  if (seed < 80){
    add([
      sprite("crewmate"),
      pos(rand(width()+10), rand(height())),
      area(),
      origin("center"),
      drag(),
      "crewimg"
    ]);
  } else if (seed < 95) {
    add([
      sprite("imposter"),
      pos(rand(width()+10), rand(height())),
      area(),
      origin("center"),
      drag(),
      "impostimg"
    ]);
  } else {
    add([
      sprite("bean"),
      pos(rand(width()+10), rand(height())),
      area(),
      origin("center"),
      drag(),
      "beanimg"
    ]);
  }

  wait(rand(2.5, 3), ()=>{spawnAstro()});
}
spawnAstro();

// 容器定义及修正后的碰撞逻辑
const crew = add([
  rect(250, 250),
  pos(10,10),
  color(57, 204, 204),
  area()
])
crew.onCollide("crewimg", (c) => {
    destroy(c)
})

const impost = add([
  rect(250, 250),
  pos(10,270),
  color(204, 57, 57),
  area()
])
impost.onCollide("impostimg", (i) => {
    destroy(i)
})

const bean = add([
  rect(250, 250),
  pos(10,530),
  color(217, 43, 171),
  area()
])
// 修正参数名错误：b → by
bean.onCollide("beanimg", (by) => {
    destroy(by)
})

2. 原代码失效原因分析 #

核心问题1：碰撞处理函数参数错误 #

豆精灵容器的碰撞逻辑中，使用了未定义的变量b（正确参数名为by），导致代码执行时抛出ReferenceError，直接阻止了销毁精灵的逻辑运行。

核心问题2：拖拽未处理鼠标偏移 #

原拖拽组件中，点击精灵后直接将精灵位置设置为鼠标位置（this.pos = mousePos()），未计算鼠标点击点与精灵中心的偏移量。这会导致精灵点击时瞬间跳转到鼠标位置，不仅体验糟糕，还可能让碰撞检测无法正确识别精灵进入容器的动作（比如瞬间从容器外跳到内部，碰撞事件未触发）。

次要问题：全局变量泄漏 #

原代码中offset变量未用let/const声明，成为全局变量，可能在多次拖拽操作中产生不可预期的行为。

3. 关键修复点说明 #

• 修正参数名错误：将bean.onCollide中的destroy(b)改为destroy(by)，确保销毁逻辑正常执行。
• 添加鼠标偏移计算：在拖拽组件中新增offset属性，点击时计算鼠标与精灵的相对位置，拖拽时用鼠标位置减去偏移量，保证精灵跟随鼠标的动作自然流畅。
• 优化变量作用域：将offset定义为拖拽组件的内部属性，避免全局变量带来的潜在问题。

内容的提问来源于stack exchange，提问作者ApplesAndCode464