morpion verification ligne + colonne

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):

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


La fonction de vérification pour la première ligne (seulement pour 3 croix) :

function f_verif(){

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

Et enfin mon html (toujours pour la première ligne):

<tr>
<td width="100" height="100"><img id="L1C1" src="vide.jpg" onclick="f_L1C1(); f_verif();" /></td>
<td width="100" height="100"><img id="L1C2" src="vide.jpg" onclick="f_L1C2(); f_verif();" /></td>
<td width="100" height="100"><img id="L1C3" src="vide.jpg" onclick="f_L1C3(); f_verif();" /></td>
</tr>


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

Quote:

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.

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

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 :

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.


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

<body>

<table border="1" width="300" height="300">

<tr>
<td width="100" height="100"><img id="L1C1" src="vide.jpg" onclick="f_L1C1(); f_verif();" /></td>
<td width="100" height="100"><img id="L1C2" src="vide.jpg" onclick="f_L1C2(); f_verif();" /></td>
<td width="100" height="100"><img id="L1C3" src="vide.jpg" onclick="f_L1C3(); f_verif();" /></td>
</tr>

<tr>
<td width="100" height="100"><img id="L2C1" src="vide.jpg" onclick="f_L2C1(); f_verif();" /></td>
<td width="100" height="100"><img id="L2C2" src="vide.jpg" onclick="f_L2C2(); f_verif();" /></td>
<td width="100" height="100"><img id="L2C3" src="vide.jpg" onclick="f_L2C3(); f_verif();" /></td>
</tr>

<tr>
<td width="100" height="100"><img id="L3C1" src="vide.jpg" onclick="f_L3C1(); f_verif();" /></td>
<td width="100" height="100"><img id="L3C2" src="vide.jpg" onclick="f_L3C2(); f_verif();" /></td>
<td width="100" height="100"><img id="L3C3" src="vide.jpg" onclick="f_L3C3(); f_verif();" /></td>
</tr>

</table>




En espérant que cela t'aide à mieux comprendre mon code :)

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

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


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

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 <body onload="unefonction()"> mais je ne sais pas si c'est plus correct.
taillecrayon

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