JavaScript的碰撞檢測與CSS動畫

Question

我有以下的「遊戲」：

jsfiddle

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

的問題是，當狼跳躍，股利增加它的大小和存在導致一些空白點也會碰撞。

有什麼辦法可以改善碰撞檢測嗎？我試圖實現內部hitbox，但我沒有弄清楚如何。

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.意見和總結