Code javascript puissance 4 aide

**Canonen10lecon** · 26/12/2012, 17h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 26/12/2012, 17h18

on peut voir le html associé ?

**Canonen10lecon** · 26/12/2012, 17h24

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SylvainPV** · 27/12/2012, 00h45

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

**Canonen10lecon** · 27/12/2012, 12h56

Merci énormément pour vos conseils

Javascript pour le puissance 4 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

**SylvainPV** · 27/12/2012, 18h16

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

Code javascript puissance 4 aide

JavaScript

Vue hybride

Discussions similaires

Partager

Partager