JeuWeb Créez votre jeu par navigateur !

**orditeck** · 26-02-2009, 04:34 AM

Ç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>

**Ter Rowan** · (Modification du message : 26-02-2009, 09:26 AM par Ter Rowan.)

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>

Argorate · 26-02-2009, 12:54 PM

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? Smile

Bonne chance Wink

**orditeck** · (Modification du message : 26-02-2009, 03:13 PM par orditeck.)

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 Big Grin

(En fait non, il fallait juste que je mette le code au bon endroit Tongue

)

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 !

**Ter Rowan** · 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

Argorate · 26-02-2009, 03:26 PM

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?

**orditeck** · (Modification du message : 28-02-2009, 05:34 PM par orditeck.)

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 Wink

Argorate · (Modification du message : 26-02-2009, 05:30 PM par Argorate.)

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...

**orditeck** · (Modification du message : 26-02-2009, 06:51 PM par orditeck.)

(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 Smile

), 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 Smile

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 Confused

iffle:

Je vais donner la solution ici quand j'aurai résolu le problème, seul ou avec de l'aide !

**Ter Rowan** · 27-02-2009, 04:07 PM

à 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 ?

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	Calculer la meilleure map de collision à partir d'une collection d'obstacles ?	Argorate	10	3 765	11-01-2017, 06:39 PM Dernier message: Xenos