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