はjavascriptの衝突検出

Question

私は、次の「ゲーム」があります。

jsfiddle

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.コメントと要約