Code javascript puissance 4 aide

Version imprimable

Bonjour tout le monde ,et bonne fête à tous !

J''essaye durant ces temps de fête de codé un puissance 4 en javascript et j'aurais besoin d'un peu d'aide étant débutant.

J'essaye de faire une fonction avec une boucle pour changer une case de mon interface (qui est sous forme de tableau ) par une case avec une couleur à l'intérieur à chaque clic , j'ai pour cela fait un tableau avec une boucle for.Mais lorsque je clic sur le bouton il me change toutes les case du tableau et non case par case à chaque clic. Quescequi manque à ma fonction pour qu'elle traite case par case ?

Ps: Je ne veux pas utiliser de Jquery , et j'ai mis une ID aux cases vides dans mon tableau

Merci d'avance
Code:

1 2 3 4 5 6 7 8 9 var tab = new Array("J1", "J2", "J3", "J4", "J5", "J6", "J7"); function caseTest() { //for(i=0;i>=tab.length; i++) { document.images[tab[i]].src="Design/design_carre_Rouge.png"; }

26/12/2012, 17h18
SpaceFrog

on peut voir le html associé ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
        <head>
                <title></title>
                <link rel="stylesheet" type="text/css" href="puissance4.css" />
        </head>
 
        <body>
 
                <fieldset id="fieldset_joueur1">
                        <label id="lbl1">Pseudo : </label>
                        <input type="text" id="pseudo1" /> <br/>
                        <label id="couleur1"> Choisissez votre couleur :</label> <br/>
                        <label for="rdb_jaune"><img src="Design/Jeton_Jaune.png"/></label>
                        <input type="radio" id="rdb_jaune" />
                        <label for="rdb_rouge"><img src="Design/Jeton_Rouge.png"></label>
                        <input type="radio" id="rdb_rouge"/></br>
                        <input type="button" id="ok_joueur1" value="Je valide ;)"/>
                </fieldset>
 
                <fieldset id="fieldset_joueur2">
                        <label id="lbl2">Pseudo : </label>
                        <input type="text" id="pseudo2"/>
                        <label id="couleur2"> Choisissez votre couleur :</label> <br/>
                        <label for="rdb_jaune2"><img src="Design/Jeton_Jaune.png"/></label>
                        <input type="radio" id="rdb_jaune2" />
                        <label for="rdb_rouge2"><img src="Design/Jeton_Rouge.png"></label>
                        <input type="radio" id="rdb_rouge2"/></br>
                        <input type="button" id="ok_joueur2" value="Je valide ;)"/>
                </fieldset>
                        <span id="joueur1"> </span>
                        <span id="joueur2"> </span>
 
                        <table height=300 width=350  border=0 id="tablelol">
                        <tr>
                                <td><img src="Design/design_carre.png"id="J1"/></td>
                                <td><img src="Design/design_carre.png"id="J2"/></td>
                                <td><img src="Design/design_carre.png"id="J3"/></td>
                                <td><img src="Design/design_carre.png"id="J4"/></td>
                                <td><img src="Design/design_carre.png"id="J5"/></td>
                                <td><img src="Design/design_carre.png"id="J6"/></td>
                                <td><img src="Design/design_carre.png"id="J7"/></td>
                        </tr>
                        <tr>
                                <td><img src="Design/design_carre.png"id="J8"/></td>
                                <td><img src="Design/design_carre.png"id="J9"/></td>
                                <td><img src="Design/design_carre.png"id="J10"/></td>
                                <td><img src="Design/design_carre.png"id="J11"/></td>
                                <td><img src="Design/design_carre.png"id="J12"/></td>
                                <td><img src="Design/design_carre.png"id="J13"/></td>
                                <td><img src="Design/design_carre.png"id="J14"/></td>
                        </tr>
                        <tr>
                                <td><img src="Design/design_carre.png"id="J15"/></td>
                                <td><img src="Design/design_carre.png"id="J16"/></td>
                                <td><img src="Design/design_carre.png"id="J17"/></td>
                                <td><img src="Design/design_carre.png"id="J18"/></td>
                                <td><img src="Design/design_carre.png"id="J19"/></td>
                                <td><img src="Design/design_carre.png"id="J20"/></td>
                                <td><img src="Design/design_carre.png"id="J21"/></td>
                        </tr>
                        <tr>
                                <td><img src="Design/design_carre.png"id="J22"/></td>
                                <td><img src="Design/design_carre.png"id="J23"/></td>
                                <td><img src="Design/design_carre.png"id="J24"/></td>
                                <td><img src="Design/design_carre.png"id="J25"/></td>
                                <td><img src="Design/design_carre.png"id="J26"/></td>
                                <td><img src="Design/design_carre.png"id="J27"/></td>
                                <td><img src="Design/design_carre.png"id="J28"/></td>
                        </tr>
                        <tr>
                                <td><img src="Design/design_carre.png"id="J29"/></td>
                                <td><img src="Design/design_carre.png"id="J30"/></td>
                                <td><img src="Design/design_carre.png"id="J31"/></td>
                                <td><img src="Design/design_carre.png"id="J32"/></td>
                                <td><img src="Design/design_carre.png"id="J33"/></td>
                                <td><img src="Design/design_carre.png"id="J34"/></td>
                                <td><img src="Design/design_carre.png"id="J35"/></td>
                        </tr>
                        <tr>
                                <td><img src="Design/design_carre.png"id="J36"/></td>
                                <td><img src="Design/design_carre.png"id="J37"/></td>
                                <td><img src="Design/design_carre.png"id="J38"/></td>
                                <td><img src="Design/design_carre.png"id="J39"/></td>
                                <td><img src="Design/design_carre.png"id="J40"/></td>
                                <td><img src="Design/design_carre.png"id="J41"/></td>
                                <td><img src="Design/design_carre.png"id="J42"/></td>
                        </tr>
                </table>
 
                <script type="text/javascript" src ="puissance4.js"></script>
        </body>
 
</html>

27/12/2012, 00h45
SylvainPV

Bonjour,

Donne-nous tout ton code Javascript, là on ne voit même pas où tu appelles ta fonction caseTest.

Si tu fais une boucle, ça me parait logique qu'il applique le même traitement sur tous les éléments de la boucle. Si tu veux le faire sur une case en particulier, pourquoi aurais-tu besoin d'une boucle ?

Aussi, dans ton code tu sembles vouloir utiliser document.images avec des ID comme index. Ca ne peut pas marcher ! Utilise plutôt document.getElementById

Merci énormément pour vos conseils

Javascript pour le puissance 4 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
var pseudo1 = document.getElementById ('txtJ1')
var btnJ1 = document.getElementById ('btnJ1')
var lbl1 = document.getElementById ('lbl1')
var joueur1 = document.getElementById ('joueur_n1')
var fieldset1 = document.getElementById ('joueur1')
var pseudo2 = document.getElementById ('txtJ2')
var btnJ2 = document.getElementById ('btnJ2')
var lbl2 = document.getElementById ('lbl2')
var joueur2 = document.getElementById ('joueur_n2')
var fieldset2 = document.getElementById ('joueur2').style.visibility = "hidden";
var tableau = document.getElementById ('tableau').style.visibility = "hidden";
pseudo1.focus()// permet que la souris soit deja dans la textbox
 
 
function btn_valider1 ()
{
 
        var pseudo_n1;
        pseudo_n1 = pseudo1.value; // mon pseudo prend la valeur de ma textbox
        if (pseudo1.value =="")
        {
                alert("Oups ! Il faut entrer un pseudo pour jouer !");
                return false;
        }
        else
        {       
                alert("Bonjour "+ pseudo_n1 + " et bonne chance !");// j'emet une alert avec un message
                pseudo1.style.visibility = "hidden" // je fais disparaitre ma textbox
                joueur1.innerHTML = pseudo1.value;// je donne une valeur �� mon span
                var fieldset2 = document.getElementById ('joueur2').style.visibility = "visible";
                btnJ1.style.visibility = "hidden";
                pseudo2.focus()
        }
}
 
function btn_valider2 ()
{
        var pseudo_n2;
        pseudo_n2 = pseudo2.value; // mon pseudo prend la valeur de ma textbox
        if (pseudo2.value =="")
        {
                alert("Oups ! Il faut enter un pseudo pour jouer !");
                return false;
        }
        else
        {
                alert("Bonjour "+ pseudo_n2 + " et bonne chance !");// j'emet une alert avec un message
                pseudo2.style.visibility = "hidden" // je fais disparaitre ma textbox
                joueur2.innerHTML = pseudo2.value;// je donne une valeur �� mon span
                btnJ2.style.visibility = "hidden";
                var btn_commencer = document.getElementById ('btnCommencer').disabled = false;
 
        }
}
 
function commencer (pseudo_n1)
{
        pseudo_n1 = pseudo1.value;
        var tableau = document.getElementById ('tableau').style.visibility = "visible";
 
        alert(pseudo_n1 + ", tu commences ! =D ");
}
 
 
//var fieldset2 = document.getElementById("fieldset_joueur2");
 
 
var tab = new Array("J1", "J2", "J3", "J4", "J5", "J6", "J7");
 
//affichePseudo2()
//{
//      fieldset2.style.display = "none";
//}
 
function Hide()
{
        for(i=0;i>=tab.length; i++)
        {
                //document.write(tab[i])
                document.images[tab[i]].src="Design/design_carre_Rouge.png";
 
 
                //{
                        //document.
                //}
 
        //document.images["J1"].src="Design/Jeton_Rouge.png";
        //case1.style.visibility = "hidden" // rend le tableau invisible
//}
 
//function AfficeTab()
//{
        //case1.style.visibility = "visible"; // rend le tableau visible
//}
 
//function afficheNom()
//{
        //joueur1.innerHTML = txt1.value; //Affiche le texte de la textbox txt1 dans le label joueur1
        //joueur2.innerHTML = txt2.value; //Affiche le texte de la textbox txt2 dans le label joueur2
//}
 
//ok_joueur1.onclick = Hide
//ok_joueur2.onclick = AfficeTab
 
 
 
btnJ1.onclick = btn_valider1;// une fois que je click sur le bouton, je met en route ma fonction btn_valider1
btnJ2.onclick = btn_valider2;
btnCommencer.onclick = commencer;

27/12/2012, 18h16
SylvainPV

Je ne vois toujours pas où est appelé caseTest. Le tout est d'isoler le code concerné par le problème, sans en oublier des parties importantes.

Là il y a des choses en commentaires à gauche à droite sans qu'on ne sache vraiment pourquoi (d'ailleurs ta fonction Hide n'est plus fermée avec tous ces commentaires).

Un petit conseil, utilise un bon IDE comme WebStorm ou Aptana pour mettre en avant toutes les erreurs de syntaxe que tu pourrais laisser. Ca corrigera déjà une bonne partie des problèmes.

Si tu bloques sur un aspect particulier, j'ai moi-même réalisé un puissance 4 en JS et le code source est en clair : http://syllab.fr/projets/games/p4/ ; ça te permettra de comparer nos implémentations

Merci pour vos réponses !

Je viens de créer une fonction pour rajouter des pions dans la grille , mais lorsque je clic sur le tableau il me décale de 3 rangs les pions , je ne comprends pas pourquoi. quelqu'un peut m'aider svp ?

Pour le javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var vals = new Array();
var gameActive = 1
 
 
 
 
for (var c1 = 0; c1 <= 6; c1++) 
 
{
vals[c1] = 0
}
 
 
var redSpot = new Image()
var blackSpot = new Image()
var emptySpot = new Image()
var emptyChecker = new Image()
var redChecker = new Image()
var blackChecker = new Image()
 
redSpot.src = "Design/design_carre_Rouge.png"
blackSpot.src = "Design/design_carre_jaune.png"
emptyChecker.src = "Design/design_carre.png"
 
 
var whosTurn = "red"
var whosTurnSpot = new Image()
var whosTurnChecker = new Image()
whosTurnSpot.src = redSpot.src
whosTurnChecker.src = redChecker.src
 
 
function placeTop(picToPlace) {// fonction qui affiche le pion sur le rang surpérieur
 
 
 {
document.images[picToPlace].src = whosTurnChecker.src
   }
}
 
function unPlaceTop(picToUnplace) {
 {
document.images[picToUnplace].src = emptyChecker.src
   }
}
 
 
 
var placeLoc
 
function dropIt(whichRow) { //Fonction qui place les pions dans la grille
 {
//alert("func dropIt")
placeLoc = (7 - vals[whichRow]) * 7 - 7 + whichRow
if (vals[whichRow] < 6) {
document.images[placeLoc].src = whosTurnSpot.src
vals[whichRow] = vals[whichRow] + 1
 
      }
   }
}

Pour le HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
        <head>
                <title></title>
                <link rel="stylesheet" type="text/css" href="puissance4.css" />
        </head>
 
        <body>
 
                <fieldset id="fieldset_joueur1">
                        <label id="lbl1">Pseudo : </label>
                        <input type="text" id="pseudo1" /> <br/>
                        <label id="couleur1"> Choisissez votre couleur :</label> <br/>
                        <label for="rdb_jaune"><img src="Design/Jeton_Jaune.png"/></label>
                        <input type="radio" id="rdb_jaune" />
                        <label for="rdb_rouge"><img src="Design/Jeton_Rouge.png"></label>
                        <input type="radio" id="rdb_rouge"/></br>
                        <input type="button" id="ok_joueur1" value="Je valide ;)"/>
                </fieldset>
 
                <fieldset id="fieldset_joueur2">
                        <label id="lbl2">Pseudo : </label>
                        <input type="text" id="pseudo2"/>
                        <label id="couleur2"> Choisissez votre couleur :</label> <br/>
                        <label for="rdb_jaune2"><img src="Design/Jeton_Jaune.png"/></label>
                        <input type="radio" id="rdb_jaune2" />
                        <label for="rdb_rouge2"><img src="Design/Jeton_Rouge.png"></label>
                        <input type="radio" id="rdb_rouge2"/></br>
                        <input type="button" id="ok_joueur2" value="Je valide ;)"/>
                </fieldset>
                        <span id="joueur1"> </span>
                        <span id="joueur2"> </span>
 
 
 
                        <table height=300 width=350  border=0 >
                        <tr>
                                <td><a href="javascript:void dropIt(0)"><img src="Design/design_carre.png"/></a></td>
                                <td><a href="javascript:void dropIt(1)"><img src="Design/design_carre.png"id="J2"/></a></td>
                                <td><a href="javascript:void dropIt(2)"><img src="Design/design_carre.png"id="J3"/></a></td>
                                <td><a href="javascript:void dropIt(3)"><img src="Design/design_carre.png"id="J4"/></a></td>
                                <td><a href="javascript:void dropIt(4)"><img src="Design/design_carre.png"id="J5"/></a></td>
                                <td><a href="javascript:void dropIt(5)"><img src="Design/design_carre.png"id="J6"/></a></td>
                                <td><a href="javascript:void dropIt(6)"><img src="Design/design_carre.png"id="J7"/></a></td>
                        </tr>
                        <tr>
                                <td><a href="javascript:void dropIt(0)"><img src="Design/design_carre.png"id="J8"/></a></td>
                                <td><a href="javascript:void dropIt(1)"><img src="Design/design_carre.png"id="J9"/></a></td>
                                <td><a href="javascript:void dropIt(2)"><img src="Design/design_carre.png"id="J10"/></a></td>
                                <td><a href="javascript:void dropIt(3)"><img src="Design/design_carre.png"id="J11"/></a></td>
                                <td><a href="javascript:void dropIt(4)"><img src="Design/design_carre.png"id="J12"/></a></td>
                                <td><a href="javascript:void dropIt(5)"><img src="Design/design_carre.png"id="J13"/></a></td>
                                <td><a href="javascript:void dropIt(6)"><img src="Design/design_carre.png"id="J14"/></a></td>
                        </tr>
                        <tr>
                                <td><a href="javascript:void dropIt(0)"><img src="Design/design_carre.png"id="J15"/></a></td>
                                <td><a href="javascript:void dropIt(1)"><img src="Design/design_carre.png"id="J16"/></a></td>
                                <td><a href="javascript:void dropIt(2)"><img src="Design/design_carre.png"id="J17"/></a></td>
                                <td><a href="javascript:void dropIt(3)"><img src="Design/design_carre.png"id="J18"/></a></td>
                                <td><a href="javascript:void dropIt(4)"><img src="Design/design_carre.png"id="J19"/></a></td>
                                <td><a href="javascript:void dropIt(5)"><img src="Design/design_carre.png"id="J20"/></a></td>
                                <td><a href="javascript:void dropIt(6)"><img src="Design/design_carre.png"id="J21"/></a></td>
                        </tr>
                        <tr>
                                <td><a href="javascript:void dropIt(0)"><img src="Design/design_carre.png"id="J22"/></a></td>
                                <td><a href="javascript:void dropIt(1)"><img src="Design/design_carre.png"id="J23"/></a></td>
                                <td><a href="javascript:void dropIt(2)"><img src="Design/design_carre.png"id="J24"/></a></td>
                                <td><a href="javascript:void dropIt(3)"><img src="Design/design_carre.png"id="J25"/></a></td>
                                <td><a href="javascript:void dropIt(4)"><img src="Design/design_carre.png"id="J26"/></a></td>
                                <td><a href="javascript:void dropIt(5)"><img src="Design/design_carre.png"id="J27"/></a></td>
                                <td><a href="javascript:void dropIt(6)"><img src="Design/design_carre.png"id="J28"/></a></td>
                        </tr>
                        <tr>
                                <td><a href="javascript:void dropIt(0)"><img src="Design/design_carre.png"id="J29"/></a></td>
                                <td><a href="javascript:void dropIt(1)"><img src="Design/design_carre.png"id="J30"/></a></td>
                                <td><a href="javascript:void dropIt(2)"><img src="Design/design_carre.png"id="J31"/></a></td>
                                <td><a href="javascript:void dropIt(3)"><img src="Design/design_carre.png"id="J32"/></a></td>
                                <td><a href="javascript:void dropIt(4)"><img src="Design/design_carre.png"id="J33"/></a></td>
                                <td><a href="javascript:void dropIt(5)"><img src="Design/design_carre.png"id="J34"/></a></td>
                                <td><a href="javascript:void dropIt(6)"><img src="Design/design_carre.png"id="J35"/></a></td>
                        </tr>
                        <tr>
                                <td><a href="javascript:void dropIt(0)"><img src="Design/design_carre.png"id="J36"/></a></td>
                                <td><a href="javascript:void dropIt(1)"><img src="Design/design_carre.png"id="J37"/></a></td>
                                <td><a href="javascript:void dropIt(2)"><img src="Design/design_carre.png"id="J38"/></a></td>
                                <td><a href="javascript:void dropIt(3)"><img src="Design/design_carre.png"id="J39"/></a></td>
                                <td><a href="javascript:void dropIt(4)"><img src="Design/design_carre.png"id="J40"/></a></td>
                                <td><a href="javascript:void dropIt(5)"><img src="Design/design_carre.png"id="J41"/></a></td>
                                <td><a href="javascript:void dropIt(6)"><img src="Design/design_carre.png"id="J42"/></a></td>
                        </tr>
                </table>
 
 
                <script type="text/javascript" src ="puissance44.js"></script>
        </body>
 
</html>

Je t'ai déjà dit plus haut de ne plus utiliser document.images mais de sélectionner tes images via un ID ou une classe. Tu aurais déjà plus de certitudes de sélectionner le bon élément.

Aussi au lieu de :
Code:

1 2 <td><a href="javascript:void dropIt(6)"><img src="Design/design_carre.png"id="J35"/></a></td>
ceci est déjà mieux :
Code:

1 2 <td><img onclick="dropIt(6)" src="Design/design_carre.png" id="J35"/></td>
ou encore mieux, entièrement en JS:
Code:

1 2 3 4 5 Array.prototype.forEach.call(document.querySelectorAll("#tatable td"), function(td){ for (var col=0,e=td; e = e.previousSibling; ++col); //trouve l'index de l'élément td dans tr = colonne td.addEventListener("click", function(){ dropIt(col); }); });
Code non testé, mais la logique y est

29/12/2012, 17h53
Knout
Citation:
Envoyé par SylvainPV

ceci est déjà mieux :

Code:

1 2 <td><img onclick="dropIt(6)" src="Design/design_carre.png" id="J35"/></td>
Parait-il qu'utiliser le onClick comme propriété directement dans le HTML est une hérésie. Je suis pas de cet avis, mais si ça doit devenir une habitude y faudrait me renseigner.
29/12/2012, 23h00
SylvainPV

Citation:

Envoyé par Knout

Parait-il qu'utiliser le onClick comme propriété directement dans le HTML est une hérésie. Je suis pas de cet avis, mais si ça doit devenir une habitude y faudrait me renseigner.

Une hérésie, le mot est peut-être un peu fort, mais oui il est conseillé de binder les évènements en Javascript, avec addEventListener par exemple.

En tout cas ça ne peut pas être pire que
<a href="javascript:void dropIt(6)">