2017-10-21 2 views
-1

je le « jeu » suivante:javascript détection de collision avec animation css

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.

+2

Oui. Calculer l'intersection. Utilisez un canevas de cette taille pour rendre les zones particulières des deux éléments et extraire les données de pixels brutes pour chacun des deux éléments. Maintenant, rechercher les données, pixel par pixel (4 octets), pour un point où les deux tableaux contiennent une valeur (autre que 0) – Thomas

Répondre

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

+0

Dans ce travail, je ne suis pas autorisé à utiliser la toile, il serait tellement facile haha, aussi oui le le code original est segmenté en plusieurs fichiers js mais jsfiddle ne l'a pas permis (autant que je sache) –

+0

Oh cool hooped je vous ai aidé ^. ^ – RensvWalstijn