Je construisais un jeu en JavaScript à l'aide de toile nécessitant une détection de collision, dans ce cas si le joueur Sprite frappe une boîte, le joueur ne doit pas être autorisé à travers la case.
J'ai un tableau global appelé et ils sont dessinés sur la toile comme ceci: j'ai aussi Un objet de joueur, qui a une méthode de mise à jour et une méthode de tirage. Mise à jour Définit la position du lecteur basée sur l'entrée du clavier, etc., et que le dessin est utilisé par la boucle de jeu principale pour dessiner le joueur sur la toile. Le joueur est en train d'être dessiné comme ceci: maintenant, le lecteur a certaines propriétés étant mais c'est loin d'être parfait ou jouable. Est-ce que quelqu'un connaît une méthode simple ou une fonction de pouvoir être capable Pour retourner vrai ou faux sur la base de si deux objets en collision? Blocklist qui contient toutes les cases étant dessinées sur la toile. Il ressemble à ceci: lecteur.xpos , joueur.ypos , joueur.width , joueur.height . Les mêmes propriétés existent pour les blocs. J'ai donc tout ce que j'ai besoin d'implifier la détection de collision, je n'ai aucune idée de la façon de le faire. J'ai essayé de faire des choses comme:
3 Réponses :
J'utilise la fonction suivante pour la détection de collision entre deux rectangles: Ceci détermine si deux carrés, centré sur spécifiquement, (x1, y1) et et et et (x2, Y2) , avec des longueurs latérales 2 * Taille1 et 2 * Taille2 , respectivement, se chevauchent. Il devrait être assez facile de modifier les définitions de gauche1 , droite1 , etc. Pour traiter des rectangles généraux plutôt que de simplement des carrés et d'utiliser un format de données différent. gauche1 est le côté gauche du premier carré, droit1 le côté droit, etc. Notez que, dans mon système de coordonnées, l'axe de la coordonnée, est inversé ( top1 < inférieur1 ).
Vous voulez juste savoir si deux rectangles se chevauchent?
Voici une fonction balayeuse pour vous: p> si votre programme peut être certain que les numéros seront toujours être fini, vous pouvez utiliser une version plus simple: p> // returns true if there is any overlap
// params: x,y,w,h of two rectangles
function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
w2 += x2;
w1 += x1;
if (x2 > w1 || x1 > w2) return false;
h2 += y2;
h1 += y1;
if (y2 > h1 || y1 > h2) return false;
return true;
}
À mon avis, je ne suis pas un fan de fonctions nécessitant de nombreux paramètres.
Voici comment je le ferais: P>
function collisionCheckRectRect(rectOne, rectTwo){
var x1=rectOne.x, y1 = rectOne.y, height1 = rectOne.height, width1 = rectOne.width;
var x2=rectTwo.x, y2 = rectTwo.y, height2 = rectTwo.height, width2 = rectTwo.width;
return x1 < x2+width2 && x2 < x1+width1 && y1 < y2+height2 && y2 < y1+height1;
}