Collision avec une image (forme irrégulière) - javascript, html, détection de collision, collision, oiseau flappy

Je suis en train de fabriquer un oiseau à la taille et je l’ai changéde simples rectangles à mes propres images et autres. Je n'arrive pas à comprendre comment faire pour que l'oiseau (forme irrégulière) heurte le rectangle, il meurt. Je ne sais pas comment coder pour une collision lorsqu'il s'agit d'une forme étrange. . Je dessine l'oiseau comme ça.

var img = document.getElementById("bird");
brush.drawImage(img, 20, this.y);

Ci-joint une image du jeu, de l'oiseau et du code.

Réponses:

Vous devez implémenter des collisionneurs. Ils sont prêts à être utilisés dans des moteurs de jeu tels que Unity, mais si vous souhaitez implémenter cela vous-même, tenez compte des points suivants:

1. Créez des composants colliders pour votre oiseau etdes murs. Les collidiers sont des formes simplifiées pour rendre les algorithmes de détection de collision plus faciles et plus rapides en ce qui concerne la vitesse du processeur. Par exemple, pour oiseau, cela peut être un cercle autour de lui et des rectangles pour vos murs.
2. Pendant votre événement de mise à jour du cadre, vérifiez si votrecercle englobant de l'oiseau se croise avec des rectangles de mur. Ce sont des mathématiques simples, vous pouvez trouver des formules pour "intersection rectangle de cercle" dans Google.
3. Si une collision est détectée - votre oiseau devrait s'écraser)

C'est tout!

Voici un bon livre sur le sujet: Détection de collision de jeux 2D: introduction à la géométrie en conflit dans les jeux par Thomas Schwarzl

On peut le trouver, par exemple. ici http://www.amazon.de/2D-Game-Collision-Detection-introduction/dp/1479298123/ref=sr_1_1?ie=UTF8&qid=1448932508&sr=8-1&keywords=2d+collision

Si vous pouvez gérer une collision rectangulaire, essayez de remplir la forme de votre complexe figure avec des rectangles et testez chacun d'eux. Dans votre cas, essayez d'utiliser un cercle pour l'oiseau.