morpion verification ligne + colonne Résolu

Question

Bonsoir, Débutant en javascript, je suis en train de réaliser un jeu de morpion humain vs humain. Pour l'instant j'ai réussi à faire en sorte que à chaque clic apparaisse un coup une croix, un coup un rond. Mon problème est que je n'arrive pas à vérifier mes lignes et colonnes pour détecter une éventuelle victoire. Voici les fonctions (pour la première ligne seulement): [b]function f_L1C1(){ if(a_qui_le_tour==false){ document.getElementById("L1C1").src = "croix.jpg"; a_qui_le_tour = true; }else if(a_qui_le_tour==true){ document.getElementById("L1C1").src = "rond.jpg"; a_qui_le_tour = false; } } function f_L1C2(){ if(a_qui_le_tour==false){ document.getElementById("L1C2").src = "croix.jpg"; a_qui_le_tour = true; }else if(a_qui_le_tour==true){ document.getElementById("L1C2").src = "rond.jpg"; a_qui_le_tour = false; } } function f_L1C3(){ if(a_qui_le_tour==false){ document.getElementById("L1C3").src = "croix.jpg"; a_qui_le_tour = true; }else if(a_qui_le_tour==true){ document.getElementById("L1C3").src = "rond.jpg"; a_qui_le_tour = false; } } /b La fonction de vérification pour la première ligne (seulement pour 3 croix) : [b]function f_verif(){ if((document.getElementById("L1C1").src "croix.jpg") && (document.getElementById("L1C2").src "croix.jpg") && (document.getElementById("L1C3").src = "croix.jpg")){ alert("gagne"); }/b Et enfin mon html (toujours pour la première ligne): [b] /b Mon problème se situe au niveau de la fonction f_verif(). Je ne sais pas comment détecter l'utilisation soit de croix.jpg soit de rond.jpg. Je sais pas si je suis très clair ... Si quelqu'un à 5min à m'accorder afin de m'éclairer je lui en serais très reconnaissant. Merci d'avance

Pills87 · Accepted Answer

Bon j'ai enfin réussi ! 

Donc c'était bien la syntaxe de la fonction f_verif()

Il fallait avoir 
if(document.getElementById("L1C1").src=="croix.jpg" && document.getElementById("L1C2").src=="croix.jpg" && document.getElementById("L1C3").src=="croix.jpg"){ 
alert("gagne"); 
}

A la place de 
if((document.getElementById("L1C1").src "croix.jpg") && (document.getElementById("L1C2").src "croix.jpg") && (document.getElementById("L1C3").src == "croix.jpg")){
alert("gagne");
} 


Très subtile le coup des parenthèses...

En tout cas, merci à vous pour votre aide. Elle m'a permis de rechercher là ou il faut ! 

A bientôt

NutMotion · Answer

Quote:Mon problème se situe au niveau de la fonction f_verif(). 
Je ne sais pas comment détecter l'utilisation soit de croix.jpg soit de rond.jpg.

(...)

function f_verif(){ 

if((document.getElementById("L1C1").src "croix.jpg") && (document.getElementById("L1C2").src "croix.jpg") && (document.getElementById("L1C3").src = "croix.jpg")){ 
alert("gagne"); 
} 


Bonjour,

La logique du code ci dessus me semble cohérente. Peut être est ce juste une erreur de syntaxe ? tu n'as mis qu'un signe égal pour tes tests :
(document.getElementById("L1C1").src = "croix.jpg")
au lieu de 
(document.getElementById("L1C1").src == "croix.jpg")

?

Il nous faut faire un long voyage pour revenir à nous-mêmes.

Pills87 · Answer

Bonsoir NutMotion, 

Merci pour ton aide mais malheureusement cela ne semble pas résoudre mon problème 

Enfaite avec le signe rien ne se passe. A l'inverse, lorsque je mets juste un il suffit que je clique sur une des 3 cases de la première ligne pour que toute la ligne soit compté comme étant valide. Et en plus les deux autres croix que je n'est pas ajouté le sont qd mm, automatiquement...

NutMotion · Answer

re.

Je t'avoue que je ne comprends pas le fonctionnement des 3 premières fonctions que tu as présentées.

Cependant, pour en revenir à ta fonction de test "f_verif", es-tu sûr d'avoir bien corrigé les 3 tests? Ce qui doit te donner le code suivant :

function f_verif(){ 

if((document.getElementById("L1C1").src "croix.jpg") && (document.getElementById("L1C2").src "croix.jpg") && (document.getElementById("L1C3").src == "croix.jpg")){ 
alert("gagne"); 
}

Pills87 · Answer

re, Oui j'ai bien corrigé les trois tests avec ta solution. Enfaite les trois première fonctions servent à ce que lorsqu'un joueur clique dans une case un symbole apparaisse. Un coup une croix, l'autre coup un rond. Tiens, je te met le code en entier avec des commentaires pour que tu puisses mieux comprendre. [b] , , , ---- , , , ---- , , /b En espérant que cela t'aide à mieux comprendre mon code :)

taillecrayon · Answer

Salut, je ne pense pas que tu doives mettre: if(a_qui_le_tour==true) après tes "else " qui disent la même chose.Et le test pour savoir qui commence ça fonctionne? car c'est pas dans une fonction. 

taillecrayon

Pills87 · Answer

Salut taillecrayon ,

Alors effectivement, mes else if(a_qui_le_tour==true) étaient de trop et ne servaient à rien. Merci, ca allège mon code 

En ce qui concerne le test pour savoir qui doit jouer ... 

var hasard = Math.random(); 

if(hasard>0.5){
a_qui_le_tour = false;
alert("joueur1 commence");
} else {
a_qui_le_tour = true;
alert("joueur2 commence");
}


... Oui il fonctionne très bien (apparemment). Enfaite, vu qu'il n'est pas dans une fonction il est lancé dans lors que l'on ouvre la page html. Enfin je ne m'y connais pas assez en JS pour affirmer quoi que ce soit, s'il existe une autre technique je suis preneur

taillecrayon · Answer

Et ça marche toujours pas? car ces else if... me semblaient incorrects, je ne vois rien d'autre sauf quelques == qui manquent encore mais que tu as peut-être déjà modifié.
Pour le test tu peux le mettre dans unefonction()
et  mais je ne sais pas si c'est plus correct. 
taillecrayon

Pills87 · Answer

Non, ca ne marche toujours pas...Par contre je n'ai pas modifié de = encore. 

Je ne vois pas trop ou je pourrait remplacer par ? 

J'ai également ajouté une fonction f_aleatoire() pour mon test que j'ai appelé par un onload ds mon body comme conseillé.

NutMotion · Answer

Quote:
Il fallait avoir 
Code ActionScript :
if(document.getElementById("L1C1").src=  ="croix.jpg" && document.getElementById("L1C2").src=="croix.jpg" && document.getElementById("L1C3").src=="croix.jpg"){ 
alert("gagne"); 
}


A la place de 
Code ActionScript :
if((document.getElementById("L1C1").src "croix.jpg") && (document.getElementById("L1C2").src "croix.jpg") && (document.getElementById("L1C3").src == "croix.jpg")){
alert("gagne");
} 


Hello, concernant cette modification sur les parenthèses, je suis quasiment sûr que ca n'a pas d'incidence. Les 2 codes ci dessus fonctionnent à l'identique.

En revanche, je suis surpris que la comparaison (document.getElementById("L1C1").src == "croix.jpg") marche de ton côté. J'ai testé le code également de mon côté, et je me suis rendu compte d'un dernier problème : en javascript, l'attribut src d'une image te renvoie  le chemin complet de l'image . 

Tu peux le constater par exemple en ajoutant l'instruction 

alert(document.getElementById("L1C1").src);

Sur mon poste par exemple, au chargement de la page, cette instruction renvoie
 
 file:///home/manu/My%20Documents/Informatique/Prog/dIVERS/vide.jpg 

ce qui correspond au chemin complet de cette image sur mon PC.

Si tu lances la page depuis un serveur, tu auras la même chose. Par exemple, avec Tomcat en local, j'obtiens :

http://127.0.0.1:8080/test1/vide.jpg

Donc quand tu testes si document.getElementById("L1C1").src vaut "vide.jpg" , ca ne marche pas.

Pour contourner ce problème, tu peux manipuler la chaine contenue dans src, en te basant par exemple sur la position du dernier / du chemin. Tu écriras alors 

document.getElementById("L1C1").src.substr(document.getElementById("L1C1").src.lastIndexOf("/")+1)   == "croix.jpg"

au lieu de 

document.getElementById("L1C1").src == "croix.jpg"

Ce qui donne pour la première ligne : 

if((document.getElementById("L1C1").src.substr(document.getElementById("L1C1").src.lastIndexOf("/")+1) == "croix.jpg")
&& (document.getElementById("L1C2").src.substr(document.getElementById("L1C2").src.lastIndexOf("/")+1) == "croix.jpg")
&& (document.getElementById("L1C3").src.substr(document.getElementById("L1C3").src.lastIndexOf("/")+1) == "croix.jpg"))
{
    alert("gagne");
}



~~
When you find yourself stuck on a problem, just ask yourself:"What would Google do in that situation?" xD

Pills87 · Answer

Salut NutMotion ! 

Effectivement, après vérification src renvoie le chemin complet. J'ai testé en faisant un alert(document.getElementById("L1C1").src), comme tu disais.

Enfaite, sur la version de mon code que j'ai uploadé sur mon ftp je n'ai pas laissé ...src = "croix.jpg" mais l'intégralité du chemin de l'image. 

Je ne pensais pas que l'erreur venait de là 

En gros j'ai donc :

if(document.getElementById("L1C1").src=="http://monftp/morpion/img/croix.jpg" && document.getElementById("L1C2").src=="http://monftp/morpion/img/croix.jpg" && document.getElementById("L1C3").src=="http://monftp/morpion/img/croix.jpg"){ 
alert("gagne"); 
}


Je ne connaissais pas cette méthode : substr . Je vais aller me documenter dessus parce que mettre l'url directement est un peu trop "bourrin" je trouve 

Allez, j'ai pas fini encore, reste à faire en sorte de pouvoir cliquer qu'une fois sur une case et la fonction comptage de points ! 

Merci  ;)

NutMotion · Answer

Effectivement, le chemin en dur dans le code c'est un peu bourrin:p. Sinon crée une variable globale pour stocker le chemin complet de chaque image.

genre en haut de ton code 

var PATH_IMG_ROND="http://monftp/morpion/img/rond.jpg";
var PATH_IMG_CROIX="http://monftp/morpion/img/croix.jpg";

etc...

ce qui donne la syntaxe suivante pour les tests:

document.getElementById("L1C1").src==PATH_IMG_ROND

Ca devrait fonctionner aussi. Allez bonne prog alors;)


~~
When you find yourself stuck on a problem, just ask yourself:"What would Google do in that situation?" xD

Pills87 · Answer

Bonne idée !  

Merci ! A bientôt

Morpion verification ligne + colonne

13 réponses

Votre réponse

Discussions similaires