26-02-2009, 03:14 PM
bah ce n'est pas une question de programmation (on ne peut pas dire que je sois très doué) c'est plutôt une question de géométrie
Je définis que deux carrés sont en collision si et seulement si ils ont au moins un pixel en commun
or comme nous sommes avec des carrés, il suffit que un sommet du premier carré soit "dans" la surface du deuxième carré pour que cela marche (la figure que tu as réalisé est extrêmement claire et permet de le voir tout de suite)
le "-1"
je ne trouve pas les mots pour expliquer le -1. Il suffit de voir avec les 5 doigts d'une main : si je dis que le pouce est en position "0", le petit doigt est en position "4" soit 0+5-1,y a qu'à compter (bon évidemment faut prendre une main avec 5 doigts, si y en a moins ou plus, faut adapter l'exemple ^^)
carré / rectangle
je parle de carré mais en fait nous sommes sur des rectangles : une largeur et une hauteur (bon j'aurais pu mettre largeur et longueur pour les puristes, mais c'est plus simple dans notre caslargeur = horizontal, hauteur = vertical)
à partir de là j'identifie les quatre sommets :
en html on positionne le carré par rapport à son coin supérieur gauche (0,0) est tout en haut à gauche
donc le coin supérieur gauche est en (x,y) ( 88,160 pour c1 dans mon exemple)
le coin inférieur gauche lui est en (x,y+hauteur-1)
==> x parce que toujours à gauche, on n'a pas bougé
==> y+hauteur-1 parce que on démarre en y et on fini plus bas d'une hauteur ( pour c1 ca donne donc 88 et 160+100-1 = 259)
même principe pour le coin supérieur droit (x +largeur -1, y)
==> x + largeur -1 parce qu'on s'est déplacé de la largeur du carré sur la droite
==> y parce que toujours en haut on n'a pas bougé
enfin le coin en bas à droite (x+largeur-1, y+hauteur-1)
bah tu devrais comprendre pourquoi... suffit de prendre une feuille à carreau, un crayon et de s'y mettre.
donc on sait calculer les sommets d'un carré.
maintenant les conditions pour une collision sont simples :
je teste chacun des sommets d'un carré pour savoir si le sommet est dans l'autre carré, c'est la fonction "Collision"
Pour ce faire, je lance quatre fois la fonction sommetDansCarre (pour les quatre sommets du carré)
la fonction sommetDansCarre est assez simple prise unitairement.
Je donne les coordonnées d'un point (x y) et je teste si ce point est dans le carré (carrePivot)
pour savoir si un point x,y est dans un carré :
x doit être plus à droite que le côté gauche du carré
x doit être plus à gauche que le côté droit du carré
y doit être plus bas que le côté haut du carré
y doit être plus haut que le côté bas du carré
on a des >= et <= plutôt que < et > car j'estime qu'il y a collision si le point est sur la tranche, le côté, du carré et pas seulement à l'intérieur du carré
jj'espère ne pas avoir été trop confus dans l'explication.
Maintenant la subtilité javascript qui m'a fait planté plusieurs fois...
Carre2.style.top ne renvoie pas un nombre (160 par exemple) mais une chaine avec l'unité "px" qui suit ( "160px" par exemple)
du coup, toutes les opérations mathématiques plantaient
"abc" < "efg" ca ne veut rien dire
"100px"+"60px" ca fait "100px60px" et non "160px"
d'où le parseInt dont l'objectif est de revenir à des nombres pour faire mes additions
Je définis que deux carrés sont en collision si et seulement si ils ont au moins un pixel en commun
or comme nous sommes avec des carrés, il suffit que un sommet du premier carré soit "dans" la surface du deuxième carré pour que cela marche (la figure que tu as réalisé est extrêmement claire et permet de le voir tout de suite)
le "-1"
je ne trouve pas les mots pour expliquer le -1. Il suffit de voir avec les 5 doigts d'une main : si je dis que le pouce est en position "0", le petit doigt est en position "4" soit 0+5-1,y a qu'à compter (bon évidemment faut prendre une main avec 5 doigts, si y en a moins ou plus, faut adapter l'exemple ^^)
carré / rectangle
je parle de carré mais en fait nous sommes sur des rectangles : une largeur et une hauteur (bon j'aurais pu mettre largeur et longueur pour les puristes, mais c'est plus simple dans notre caslargeur = horizontal, hauteur = vertical)
à partir de là j'identifie les quatre sommets :
en html on positionne le carré par rapport à son coin supérieur gauche (0,0) est tout en haut à gauche
donc le coin supérieur gauche est en (x,y) ( 88,160 pour c1 dans mon exemple)
le coin inférieur gauche lui est en (x,y+hauteur-1)
==> x parce que toujours à gauche, on n'a pas bougé
==> y+hauteur-1 parce que on démarre en y et on fini plus bas d'une hauteur ( pour c1 ca donne donc 88 et 160+100-1 = 259)
même principe pour le coin supérieur droit (x +largeur -1, y)
==> x + largeur -1 parce qu'on s'est déplacé de la largeur du carré sur la droite
==> y parce que toujours en haut on n'a pas bougé
enfin le coin en bas à droite (x+largeur-1, y+hauteur-1)
bah tu devrais comprendre pourquoi... suffit de prendre une feuille à carreau, un crayon et de s'y mettre.
donc on sait calculer les sommets d'un carré.
maintenant les conditions pour une collision sont simples :
je teste chacun des sommets d'un carré pour savoir si le sommet est dans l'autre carré, c'est la fonction "Collision"
Pour ce faire, je lance quatre fois la fonction sommetDansCarre (pour les quatre sommets du carré)
la fonction sommetDansCarre est assez simple prise unitairement.
Je donne les coordonnées d'un point (x y) et je teste si ce point est dans le carré (carrePivot)
pour savoir si un point x,y est dans un carré :
x doit être plus à droite que le côté gauche du carré
x doit être plus à gauche que le côté droit du carré
y doit être plus bas que le côté haut du carré
y doit être plus haut que le côté bas du carré
on a des >= et <= plutôt que < et > car j'estime qu'il y a collision si le point est sur la tranche, le côté, du carré et pas seulement à l'intérieur du carré
jj'espère ne pas avoir été trop confus dans l'explication.
Maintenant la subtilité javascript qui m'a fait planté plusieurs fois...
Carre2.style.top ne renvoie pas un nombre (160 par exemple) mais une chaine avec l'unité "px" qui suit ( "160px" par exemple)
du coup, toutes les opérations mathématiques plantaient
"abc" < "efg" ca ne veut rien dire
"100px"+"60px" ca fait "100px60px" et non "160px"
d'où le parseInt dont l'objectif est de revenir à des nombres pour faire mes additions