+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Collision de deux éléments de 5x5 (/showthread.php?tid=3728)
RE: [JS] Collision de deux éléments de 5x5 - orditeck - 26-02-2009
Ça fonctionne, mais seulement quand ils se touchent en bas.
Je te redonne ton exemple, mais qui se touche en haut (donc non fonctionnel) :
Code PHP :
<?php
<html>
<body>
<div id='c1' style="position : absolute; left: 88px; top: 160px; background:#f00; width:100px; height:100px" >c1</div>
<div id='c2' style="position : absolute; left: 84px; top: 150px; background:#0f0; width:100px; height:100px;">c2</div>
<div id='c3' style="position : absolute; left: 308px; top: 160px; background:#88f; width:100px; height:100px;">c3</div>
<script>
function sommetDansCarre (x, y, carrePivot)
{
if ( ( parseInt(x) >= parseInt(carrePivot.style.left) ) &&
( parseInt(x) <= parseInt(carrePivot.style.left) + parseInt(carrePivot.style.width) -1) &&
( parseInt(y) >= parseInt(carrePivot.style.top) ) &&
( parseInt(y) <= parseInt(carrePivot.style.top) + parseInt(carrePivot.style.height) -1) )
{
return true;
}
else
{
return false;
}
}
function Collision (Carre2, Carre1)
{
if (sommetDansCarre ( Carre2.style.left, Carre2.style.top, Carre1) ||
sommetDansCarre (Carre2.style.left + Carre2.style.width-1, Carre2.style.top, Carre1) ||
sommetDansCarre (Carre2.style.left, Carre2.style.top + Carre2.style.height-1, Carre1) ||
sommetDansCarre (Carre2.style.left + Carre2.style.width-1, Carre2.style.top + Carre2.style.height-1, Carre1) )
alert("collision entre "+Carre2.innerHTML+" et "+Carre1.innerHTML);
else
alert(" pas de collision entre "+Carre2.innerHTML+" et "+Carre1.innerHTML);
}
Collision( document.getElementById('c2'), document.getElementById('c1') );
Collision( document.getElementById('c1'), document.getElementById('c3') );
Collision( document.getElementById('c3'), document.getElementById('c2') );
</script>
</body>
</html>
RE: [JS] Collision de deux éléments de 5x5 - Ter Rowan - 26-02-2009
y avait encore un problème de parseint dans collision, j'additionnais toujours des chaines
Code PHP :
<?php
<html>
<body>
<div id='c1' style="position : absolute; left: 88px; top: 160px; background:#f00; width:100px; height:100px" >c1</div>
<div id='c2' style="position : absolute; left: 84px; top: 150px; background:#0f0; width:100px; height:100px;">c2</div>
<div id='c3' style="position : absolute; left: 308px; top: 160px; background:#88f; width:100px; height:100px;">c3</div>
<script>
function sommetDansCarre (x, y, carrePivot)
{
if ( ( x >= parseInt(carrePivot.style.left) ) &&
( x <= parseInt(carrePivot.style.left) + parseInt(carrePivot.style.width) -1) &&
( y >= parseInt(carrePivot.style.top) ) &&
( y <= parseInt(carrePivot.style.top) + parseInt(carrePivot.style.height) -1) )
{
return true;
}
else
{
return false;
}
}
function Collision (Carre2, Carre1)
{
gauche = parseInt(Carre2.style.left);
haut = parseInt(Carre2.style.top);
droite = gauche + parseInt(Carre2.style.width) - 1 ;
bas = haut + parseInt (Carre2.style.height) -1;
if (sommetDansCarre ( gauche, haut, Carre1) || sommetDansCarre ( droite , haut , Carre1) ||
sommetDansCarre ( gauche, bas, Carre1 ) || sommetDansCarre (droite, bas, Carre1) )
alert("collision entre "+Carre2.innerHTML+" et "+Carre1.innerHTML);
else
alert(" pas de collision entre "+Carre2.innerHTML+" et "+Carre1.innerHTML);
}
Collision( document.getElementById('c2'), document.getElementById('c1') );
Collision( document.getElementById('c1'), document.getElementById('c2') );
Collision( document.getElementById('c3'), document.getElementById('c1') );
Collision( document.getElementById('c1'), document.getElementById('c3') );
Collision( document.getElementById('c3'), document.getElementById('c2') );
Collision( document.getElementById('c2'), document.getElementById('c3') );
</script>
</body>
</html>
moralité, outre qu'il faudrait que je vérifie un peu plus ce que je poste ici ^^, le '+' c'est troublant en js
RE: [JS] Collision de deux éléments de 5x5 - Argorate - 26-02-2009
Au faite, dans le snake on est censé pouvoir passer sur les bords des écrans et ressortir de l'autre coté, je suppose que tu es au courant, donc c'est intentionnel ou tu le rajoutera après?
Bonne chance
RE: [JS] Collision de deux éléments de 5x5 - orditeck - 26-02-2009
Merci encore mille fois Ter Rowan, je test ça dans 1 heure et demi environ et je te dis si ça fonctionne. Je vais être dans mon cour donc je vais pouvoir tenter de me faire expliquer le code par mon professeur, mais étant donné qu'il enseigne à de bas niveaux (premières années), je ne suis pas certain qu'il comprenne lui-même........ On verra bien !
Sinon je vais essayer de comprendre tout seul, mais j'avouerais qu'une explication de ce que tu as déduit pour arriver à ce bout de code me serait très utile. Je ne comprend même pas pourquoi tu fais >= etc... Durant les 2 dernières années, je me suis bien rendu compte que ma force n'était pas la programmation, mais le graphisme. Maintenant c'est encore plus évident, mais j'aimerais bien essayer de reprendre un peu de la bête en comprenant au moins la logique de ce code !
(26-02-2009, 12:54 PM)Argorate a écrit : Au faite, dans le snake on est censé pouvoir passer sur les bords des écrans et ressortir de l'autre coté, je suppose que tu es au courant, donc c'est intentionnel ou tu le rajoutera après?
Bonne chance
Je ne comprend pas bien ce que tu veux dire.
http://ecole.orditeck.com/snake/jeu.html
Évidemment, ce n'est pas encore un " vrai " snake.
Tu dis qu'on devrait voir le point sortir de la zone du jeu avant de dire qu'il a perdu ? Je me suis presque battu avec le code pour pas que ça le fasse
(En fait non, il fallait juste que je mette le code au bon endroit 
)Edit: Je viens de comprendre à quoi sert >= ici. Je me suis fais quelques exemples et je comprend le fonctionnement mais je ne saurais l'expliquer !
RE: [JS] Collision de deux éléments de 5x5 - Ter Rowan - 26-02-2009
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
RE: [JS] Collision de deux éléments de 5x5 - Argorate - 26-02-2009
Non, je me suis mal exprimé, je voulais dire, lorsque le point blanc atteint le bord du cadre (peut importe lequel des 4 bord), il devrait réapparaitre en face. le haut et le bas ainsi que la droite et la gauche devrait être relier.
Tu vois?
RE: [JS] Collision de deux éléments de 5x5 - orditeck - 26-02-2009
Merci pour l'explication. Je comprend mieux maintenant.
J'ai regardé le code, et ça devrait fonctionner... mais ! Les explications sont clairs, mais je n'arrive pas à modifier le code. J'imagine que vous allez trouver le problème, si tel est le cas, est-il possible de me l'expliquer ?
http://ecole.orditeck.com/snake/jeu.html
Quand je passe directement dessus, il ne fait toujours rien.
J'aimerais surtout qu'on m'explique le comment du pourquoi.
@Oxman: pas de message de constructif alors simplement pas de message svp
RE: [JS] Collision de deux éléments de 5x5 - Argorate - 26-02-2009
J'ai tester tout a l'heure, je l'ai refait maintenant:
Le seul moment ou il me dit alert("Collision !"); c'est lorsque je touche la "pomme" en arrivant par le bas et en étant parfaitement aligné, ou en passant dessus en arrivant par le haut et en étant toujours parfaitement aligné...
En revanche si je passe dessus par la droite ou la gauche, rien ne se passe...
RE: [JS] Collision de deux éléments de 5x5 - orditeck - 26-02-2009
(26-02-2009, 05:29 PM)Argorate a écrit : J'ai tester tout a l'heure, je l'ai refait maintenant:
Le seul moment ou il me dit alert("Collision !"); c'est lorsque je touche la "pomme" en arrivant par le bas et en étant parfaitement aligné, ou en passant dessus en arrivant par le haut et en étant toujours parfaitement aligné...
En revanche si je passe dessus par la droite ou la gauche, rien ne se passe...
En effet, c'est bien ce que ça fait...
@Ter Rowan: Si tu veux toujours continuer de m'aider (ce que j'apprécie
), fais-le pas PM s'il te plait.@Anthor: C'est difficile en JavaScript de gérer les collisions étant donné que le langage semble plutôt limité. Je ne crois pas que ça aurait été aussi difficile en PHP, par exemple. Je n'ai aucun problème avec le JavaScript, ce avec quoi j'ai un problème, c'est les mathétiques. Je n'ai pas cette faculté de logique facile, et c'est tout.
@Oxman: tu te calmes
J'ai demandé une explication du concept à mon prof, et il n'a pas réussi à me la donner. Ne me donnez pas le code, ça ne me dérange pas. Seulement la manière de le concevoir ou encore un pseudo code sera parfait. Je ne crois que le but de Ter Rowan soit de me donner le code tout fait, mais pour le tester il doit faire le code, de toute façon. 'fin, si ça fait ton affaire Oxman tu vas voir sur un autre post hein
iffle:Je vais donner la solution ici quand j'aurai résolu le problème, seul ou avec de l'aide !
RE: [Javascript] Collision de deux éléments de 5x5 - Ter Rowan - 27-02-2009
à noter, en regardant le dernier test, je me suis aperçu que le programme marchait
il y a bien collision, mais en dessous du truc à dévorer, seul un gars aussi maladroit que moi pouvait arriver à détecter ce truc (bon en fait firebug a aussi aidé un peu)
la question est maintenant d'ordre CSS et là... ben faut pas compter sur moi ^^
sinon pour le reste, inutile de se prendre plus la tête que cela et quant au sujet php vs javascript, tu as raison Anthor, y a pas de différence en terme de difficulté pour ce sujet, la phrase d'Orditeck était peut être sémantiquement malheureuse, personnellement je l'ai interprétée comme "c'est plus facile pour moi de comprendre en php qu'en javascript"
maitenant on s'en fiche un peu, la sémantique n'a pas tant d'intérêt que cela dans le cas présent, non ?