javascript détection de collision avec animation css

Question

je le « jeu » suivante:

jsfiddle

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

le problème est que lorsque les sauts coyote, le div augmenter sa taille et il y a des points blancs qui causent collision aussi.

Y a-t-il un moyen d'améliorer la détection de collision? J'ai essayé de mettre en place une hitbox intérieure mais je n'ai pas compris comment.

Answer 1

Il a fallu du temps pour comprendre ce que vous faisiez. Mais si vous prenez une largeur et une hauteur statiques pour votre lecteur. Cela devrait résoudre votre problème.

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); 
} 

Cela devrait fonctionner pour vous. Conseils:
1. utiliser comme starter une toile.
2. le plus important est le code lisible.
3. commentaires et résumés