JavaScript 冲突检测与 CSS 动画

Question

我有以下"游戏"：

斯菲德尔

function update() {
  coyote.applyForce(gravity);
  coyote.edges();
  coyote.update();
  cactus.update();
  if (coyote.intersects(cactus)){
    alert("colision");
  }
}

问题是当土狼跳跃时，div 会增加其大小，并且也有一些空白点会导致碰撞。

有什么方法可以改进碰撞检测吗？我试图实现内部命中框，但我不知道该怎么做。

Answer 1

花了一段时间才明白你在哪里做什么。

但是，如果您为播放器采用静态宽度和高度。它应该可以解决您的问题。

constructor(){
    this.coyote = new Entity();
    this.coyote.pos.set(0,222);
    this.coyote.vel.set(0,0);
    this.coyote.acc.set(0,0);
    this.coyote.width = 78;
    this.coyote.height = 128;
    this.isGrounded = true;
    this.state = States.RUNNING;
}
intersects(other) {
    let div = document.getElementById("player");
    let left = this.coyote.pos.x;
    let right = this.coyote.width;
    let top = this.coyote.pos.y;
    let bottom = this.coyote.height;
    let oLeft = other.left;
    let oRight = other.right;
    let oTop = other.top;
    let oBottom = other.bottom;
    return !(left > oRight || right < oLeft || top > oBottom || bottom < oTop);
}

这应该适合您。

技巧：
1. 将画布用作入门。
2. 最重要的是可读代码。
3. 评论和总结