Morpion verification ligne + colonne [Résolu]

Messages postés
10
Date d'inscription
vendredi 22 février 2008
Statut
Membre
Dernière intervention
30 décembre 2009
- - Dernière réponse : Pills87
Messages postés
10
Date d'inscription
vendredi 22 février 2008
Statut
Membre
Dernière intervention
30 décembre 2009
- 30 déc. 2009 à 11:26
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]<tr>
<td width="100" height="100"></td>
<td width="100" height="100"></td>
<td width="100" height="100"></td>
</tr>/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
Afficher la suite 

13 réponses

Meilleure réponse
Messages postés
10
Date d'inscription
vendredi 22 février 2008
Statut
Membre
Dernière intervention
30 décembre 2009
3
Merci
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

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 197 internautes nous ont dit merci ce mois-ci

Commenter la réponse de Pills87
Messages postés
6
Date d'inscription
lundi 28 décembre 2009
Statut
Membre
Dernière intervention
30 décembre 2009
0
Merci
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.
Commenter la réponse de NutMotion
Messages postés
10
Date d'inscription
vendredi 22 février 2008
Statut
Membre
Dernière intervention
30 décembre 2009
0
Merci
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...
Commenter la réponse de Pills87
Messages postés
6
Date d'inscription
lundi 28 décembre 2009
Statut
Membre
Dernière intervention
30 décembre 2009
0
Merci
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"); 
}
Commenter la réponse de NutMotion
Messages postés
10
Date d'inscription
vendredi 22 février 2008
Statut
Membre
Dernière intervention
30 décembre 2009
0
Merci
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]<script type="text/javascript" language="javascript">

//on declare les variables dont on va avoir besoin
var joueur1 = 0;
var joueur2 = 0;
var a_qui_le_tour = new Boolean(false);
var hasard = Math.random(); // variable aleatoire, valeur comprise entre 0 et 1


//test pour savoir qui commence, en fonction du resultat de "hasard"
if(hasard>0.5){
a_qui_le_tour = false;
alert("joueur1 commence");
} else {
a_qui_le_tour = true;
alert("joueur2 commence");
}


//fonctions ligne par ligne, colonne par colonne
//si a_qui_le_tour retourne la valeur false alors croix.jpg est utilisé et a_qui_le_tour prend la valeur true pour le prochain tour
//si a_qui_le_tour retourne la valeur true alors rond.jpg est utilisé et a_qui_le_tour prend la valeur false pour le prochain tour
//le but d'attribuer de nouvelles valeurs a a_qui_le_tour en fin de boucle est de pouvoir changer de symbole (croix ou rond) au prochain tour

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;
}
}

function f_L2C1(){
if(a_qui_le_tour==false){
document.getElementById("L2C1").src = "croix.jpg";
a_qui_le_tour = true;
}else if(a_qui_le_tour==true){
document.getElementById("L2C1").src = "rond.jpg";
a_qui_le_tour = false;
}
}

function f_L2C2(){
if(a_qui_le_tour==false){
document.getElementById("L2C2").src = "croix.jpg";
a_qui_le_tour = true;
}else if(a_qui_le_tour==true){
document.getElementById("L2C2").src = "rond.jpg";
a_qui_le_tour = false;
}
}

function f_L2C3(){
if(a_qui_le_tour==false){
document.getElementById("L2C3").src = "croix.jpg";
a_qui_le_tour = true;
}else if(a_qui_le_tour==true){
document.getElementById("L2C3").src = "rond.jpg";
a_qui_le_tour = false;
}
}

function f_L3C1(){
if(a_qui_le_tour==false){
document.getElementById("L3C1").src = "croix.jpg";
a_qui_le_tour = true;
}else if(a_qui_le_tour==true){
document.getElementById("L3C1").src = "rond.jpg";
a_qui_le_tour = false;
}
}

function f_L3C2(){
if(a_qui_le_tour==false){
document.getElementById("L3C2").src = "croix.jpg";
a_qui_le_tour = true;
}else if(a_qui_le_tour==true){
document.getElementById("L3C2").src = "rond.jpg";
a_qui_le_tour = false;
}
}

function f_L3C3(){
if(a_qui_le_tour==false){
document.getElementById("L3C3").src = "croix.jpg";
a_qui_le_tour = true;
}else if(a_qui_le_tour==true){
document.getElementById("L3C3").src = "rond.jpg";
a_qui_le_tour = false;
}
}

//fonctions pour verifier si la partie est gagnee ou non



function f_verif(){

//pour les croix

if((document.getElementById("L1C1").src "croix.jpg") && (document.getElementById("L1C2").src "croix.jpg") && (document.getElementById("L1C3").src == "croix.jpg")){
alert("gagne");
}

if((document.getElementById("L2C1").src "croix.jpg") && (document.getElementById("L2C2").src "croix.jpg") && (document.getElementById("L2C3").src == "croix.jpg")){
alert("gagne");
}

if((document.getElementById("L3C1").src "croix.jpg") && (document.getElementById("L3C2").src "croix.jpg") && (document.getElementById("L3C3").src == "croix.jpg")){
alert("gagne");
}

if((document.getElementById("L1C1").src "croix.jpg") && (document.getElementById("L2C1").src "croix.jpg") && (document.getElementById("L3C1").src == "croix.jpg")){
alert("gagne");
}

if((document.getElementById("L1C2").src "croix.jpg") && (document.getElementById("L2C2").src "croix.jpg") && (document.getElementById("L3C2").src == "croix.jpg")){
alert("gagne");
}

if((document.getElementById("L1C3").src "croix.jpg") && (document.getElementById("L2C3").src "croix.jpg") && (document.getElementById("L3C3").src == "croix.jpg")){
alert("gagne");
}

if((document.getElementById("L1C1").src "croix.jpg") && (document.getElementById("L2C2").src "croix.jpg") && (document.getElementById("L3C3").src == "croix.jpg")){
alert("gagne");
}

if((document.getElementById("L1C3").src "croix.jpg") && (document.getElementById("L2C2").src "croix.jpg") && (document.getElementById("L3C1").src == "croix.jpg")){
alert("gagne");
}

//pour les ronds
if((document.getElementById("L1C1").src "rond.jpg") && (document.getElementById("L1C2").src "rond.jpg") && (document.getElementById("L1C3").src == "rond.jpg")){
alert("gagne");
}

if((document.getElementById("L2C1").src "rond.jpg") && (document.getElementById("L2C2").src "rond.jpg") && (document.getElementById("L2C3").src == "rond.jpg")){
alert("gagne");
}

if((document.getElementById("L3C1").src "rond.jpg") && (document.getElementById("L3C2").src "rond.jpg") && (document.getElementById("L3C3").src == "rond.jpg")){
alert("gagne");
}

if((document.getElementById("L1C1").src "rond.jpg") && (document.getElementById("L2C1").src "rond.jpg") && (document.getElementById("L3C1").src == "rond.jpg")){
alert("gagne");
}

if((document.getElementById("L1C2").src "rond.jpg") && (document.getElementById("L2C2").src "rond.jpg") && (document.getElementById("L3C2").src == "rond.jpg")){
alert("gagne");
}

if((document.getElementById("L1C3").src "rond.jpg") && (document.getElementById("L2C3").src "rond.jpg") && (document.getElementById("L3C3").src == "rond.jpg")){
alert("gagne");
}

if((document.getElementById("L1C1").src "rond.jpg") && (document.getElementById("L2C2").src "rond.jpg") && (document.getElementById("L3C3").src == "rond.jpg")){
alert("gagne");
}

if((document.getElementById("L1C3").src "rond.jpg") && (document.getElementById("L2C2").src "rond.jpg") && (document.getElementById("L3C1").src == "rond.jpg")){
alert("gagne");
}
*/

}
</script>

</head>



,
,
,

----

,
,
,

----

,
,



/b


En espérant que cela t'aide à mieux comprendre mon code :)
Commenter la réponse de Pills87
Messages postés
109
Date d'inscription
vendredi 30 janvier 2004
Statut
Membre
Dernière intervention
23 novembre 2010
0
Merci
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
Commenter la réponse de taillecrayon
Messages postés
10
Date d'inscription
vendredi 22 février 2008
Statut
Membre
Dernière intervention
30 décembre 2009
0
Merci
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
Commenter la réponse de Pills87
Messages postés
109
Date d'inscription
vendredi 30 janvier 2004
Statut
Membre
Dernière intervention
23 novembre 2010
0
Merci
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
Commenter la réponse de taillecrayon
Messages postés
10
Date d'inscription
vendredi 22 février 2008
Statut
Membre
Dernière intervention
30 décembre 2009
0
Merci
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é.
Commenter la réponse de Pills87
Messages postés
6
Date d'inscription
lundi 28 décembre 2009
Statut
Membre
Dernière intervention
30 décembre 2009
0
Merci
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
Commenter la réponse de NutMotion
Messages postés
10
Date d'inscription
vendredi 22 février 2008
Statut
Membre
Dernière intervention
30 décembre 2009
0
Merci
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 ;)
Commenter la réponse de Pills87
Messages postés
6
Date d'inscription
lundi 28 décembre 2009
Statut
Membre
Dernière intervention
30 décembre 2009
0
Merci
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
Commenter la réponse de NutMotion
Messages postés
10
Date d'inscription
vendredi 22 février 2008
Statut
Membre
Dernière intervention
30 décembre 2009
0
Merci
Bonne idée !

Merci ! A bientôt
Commenter la réponse de Pills87