Tic Tac Toe JS

**Syrosh** · 03/05/2018, 09h48

Bonjour à tous !

Je suis actuellement entrain de m'amuser à faire un morpion en js afin de pouvoir le porter sur cordova et en faire une mini app mobile...

Bref, j'ai utilisé des button que j'ai mis dans des div au lieu d'un tableau, parce que visuellement, je trouve ça mieux :soleil:

Le problème est que je n'arrive pas à retrouver mes button.value, ce qui m'empêche de pouvoir continuer, le but la serai de récupérer la value du button et lui donner avec un truc du type "button.innerHTML = "X" ou "O" en fonction de qui à joué avant.

le code :

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
 
<html>
 
<head>
<style>
#jeu div
{
        width: 500px;
        margin: auto;
        clear: both;
}
#jeu button
{
        width: 150px;
        height: 150px;
        font-weight: bold;
        font-size: 50px;
        margin: 8px;
        float: left;
}
 
</style>
 
</head>
<body>
 
 
<div id="jeu">
 
<div>
 
<button value="0"></button>
 
<button value="1"></button>
 
<button value="2"></button>
 
</div>
<div>
 
<button value="3"></button>
 
<button value="4"></button>
 
<button value="5"></button>
 
</div>
<div>
 
<button value="6"></button>
 
<button value="7"></button>
 
<button value="8"></button>
 
</div>
 
 
 
 
 
</div>
 
 
 
 
<script>
/* TIC TAC TOE */
var caseJeu = document.querySelectorAll("#jeu button");
 
for (i=0; i < caseJeu.length ; i++)
        { 
        caseJeu[i].addEventListener("click", function ()
        {
        alert(caseJeu[i]);
        
        });
        
        
                
        }       
 
 
 
 
 
</script>
</body>

Merci d'avance à ceux qui prendrons le temps de m'aider !

**ProgElecT** · 03/05/2018, 10h09

Salut

En donnant un id différent (forcement) à chacun de tes boutons.

Code html :

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

1
2
3
4
5
6
<button id="3" value="3"></button>
 
<button id="4" value="4"></button>
 
<button id="5" value="5"></button>
<!- ............... -->

**Syrosh** · 03/05/2018, 10h28

D'accord mais dans quel but ?

Si tu pouvais être un peu plus explicite....

**NoSmoking** · 03/05/2018, 10h29

Bonjour,

Envoyé par ProgElecT

En donnant un id différent ...

il n'y en a pas forcément besoin !

Utilise le mot « magique » let dans ta boucle.

Code :

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

1
2
3
4
5
6
var caseJeu = document.querySelectorAll("#jeu button");
for (let i = 0; i < caseJeu.length; i++) {
  caseJeu[i].addEventListener("click", function() {
    alert(caseJeu[i]);
  });
}

Il faut savoir également que tu peux utiliser le this dans ta fonction qui représente l'objet auquel tu as affecté l'événement et donc avec var cela fonctionne très bien

Code :

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

1
2
3
4
5
6
var caseJeu = document.querySelectorAll("#jeu button");
for (var i = 0; i < caseJeu.length; i++) {
  caseJeu[i].addEventListener("click", function() {
    alert(this.value);
  });
}

... et encore plein d'autres solutions ...

**Syrosh** · 03/05/2018, 10h34

Aaaah oui! Merci beaucoup, je vais pouvoir avancer !

D'ailleurs, puis-je laisser le topic en non résolu? Car des problèmes, je pense que je vais en rencontrer pleins !

**danielhagnoul** · 03/05/2018, 11h21

J'ai été dérangé par un visiteur, ce qui fait que j'arrive maintenant le dernier alors que j'étais prêt à poster en réaction à la proposition de @ProgElecT.

Ajouter une multitude d'ID n'est pas nécessaire ici. Exemple :

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
<div id="jeu">
<div>
    <button name="btn0" value="0">Btn 0</button>
    <button name="btn1" value="1">Btn 1</button>
    <button name="btn2" value="2">Btn 2</button>
</div>
<div>
    <button name="btn3" value="3">Btn 3</button>
    <button name="btn4" value="4">Btn 4</button>
    <button name="btn5" value="5">Btn 5</button>
</div>
<div>
    <button name="btn6" value="6">Btn 6</button>
    <button name="btn7" value="7">Btn 7</button>
    <button name="btn8" value="8">Btn 8</button>
</div>
</div>

Code JavaScript :

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const elemBtnCases = Array.from(document.querySelectorAll('#jeu button'));
 
    for (let btnCase of elemBtnCases) {
        btnCase.addEventListener('click', ev => {
 
            let
                contenu = ev.target.textContent,
                valeur = ev.target.value,
                nom = ev.target.name;
 
            // debug, console, touche F12
            console.log('nom = ', nom);
            console.log('contenu = ', contenu);
            console.log('valeur = ', valeur);
        }, {
            capture: false,
            passive: true,
            once: false
        });
    }
 
    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});

**Syrosh** · 03/05/2018, 12h06

Merci à tous

L'algo est maintenant presque complet et fonctionnel (gestion des 8 combinaisons gagnantes et match nul si aucune). Il me reste en gros à faire un affichage gagnant/ match nul un poil plus sympa et à transférer sur Cordova et à gérer le tactile pour activer une case. Encore merci !

Code js :

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
 
/* TIC TAC TOE */
var caseJeu = document.querySelectorAll("#jeu button");
var tour = 0;
var joueurs = ['X', 'O'];
 
//8 Combinaisons gagnantes  
function chercheGagnant(caseJeu, joueurs, tour){
			if (caseJeu[0].innerHTML == joueurs[tour] &&
			caseJeu[1].innerHTML == joueurs[tour] &&
			caseJeu[2].innerHTML == joueurs[tour])
 
			{
 
			caseJeu[0].style.background = "green";
			caseJeu[1].style.background = "green";
			caseJeu[2].style.background = "green";
			return true;
			}
 
			if (caseJeu[3].innerHTML == joueurs[tour] &&
			caseJeu[4].innerHTML == joueurs[tour] &&
			caseJeu[5].innerHTML == joueurs[tour])
 
			{
 
			caseJeu[3].style.background = "green";
			caseJeu[4].style.background = "green";
			caseJeu[5].style.background = "green";
			return true;
			}
 
			if (caseJeu[6].innerHTML == joueurs[tour] &&
			caseJeu[7].innerHTML == joueurs[tour] &&
			caseJeu[8].innerHTML == joueurs[tour])
 
			{
 
			caseJeu[6].style.background = "green";
			caseJeu[7].style.background = "green";
			caseJeu[8].style.background = "green";
			return true;
			}
 
			if (caseJeu[0].innerHTML == joueurs[tour] &&
			caseJeu[4].innerHTML == joueurs[tour] &&
			caseJeu[8].innerHTML == joueurs[tour])
 
			{
 
			caseJeu[0].style.background = "green";
			caseJeu[4].style.background = "green";
			caseJeu[8].style.background = "green";
			return true;
			}
 
			if (caseJeu[2].innerHTML == joueurs[tour] &&
			caseJeu[4].innerHTML == joueurs[tour] &&
			caseJeu[6].innerHTML == joueurs[tour])
 
			{
 
			caseJeu[2].style.background = "green";
			caseJeu[4].style.background = "green";
			caseJeu[6].style.background = "green";
			return true;
			}
 
			if (caseJeu[0].innerHTML == joueurs[tour] &&
			caseJeu[3].innerHTML == joueurs[tour] &&
			caseJeu[6].innerHTML == joueurs[tour])
 
			{
 
			caseJeu[0].style.background = "green";
			caseJeu[3].style.background = "green";
			caseJeu[6].style.background = "green";
			return true;
			}
 
			if (caseJeu[1].innerHTML == joueurs[tour] &&
			caseJeu[4].innerHTML == joueurs[tour] &&
			caseJeu[7].innerHTML == joueurs[tour])
 
			{
 
			caseJeu[1].style.background = "green";
			caseJeu[4].style.background = "green";
			caseJeu[7].style.background = "green";
			return true;
			}
 
			if (caseJeu[2].innerHTML == joueurs[tour] &&
			caseJeu[5].innerHTML == joueurs[tour] &&
			caseJeu[8].innerHTML == joueurs[tour])
 
			{
 
			caseJeu[2].style.background = "green";
			caseJeu[5].style.background = "green";
			caseJeu[8].style.background = "green";
			return true;
			}
 
}
 
 
function matchNul(caseJeu){
 
	for (var i=0; i < caseJeu.length; i++)
	{
		if (caseJeu[i].innerHTML.length == 0)
 
		return false;
 
	}
 
	return true;
 
}
 
for (let i=0; i < caseJeu.length ; i++)
	{ 
 
 
		tour = 0;
		caseJeu[i].addEventListener("click", function ()
	{
 
 
	//Vérifie si il y à déjà un joueur placé
	if (this.innerHTML.length !== 0)
		{
 
		alert("case occupée!");
 
		}
	//Sinon rempli avec le joueur en fonction du tour
	else {
 
 
		this.innerHTML = joueurs[tour];
		gameOver = chercheGagnant(caseJeu, joueurs, tour);
 
		//Si combinaison ok - affiche vert + refresh 3s
		if (gameOver) {
 
		alert( "le joueur "+ joueurs[tour] + " a gagné!");
		setTimeout(function(){ location.reload(); }, 3000);
 
		}
 
		//Si match nul - affiche rouge + refresh 3s
		else if (matchNul(caseJeu)){
 
		for (i=0; i< caseJeu.length; i++){
		caseJeu[i].style.background = "red";
		}
		alert("match nul!");
		setTimeout(function(){ location.reload(); }, 3000);
 
		}
 
 
		tour++;
		tour = tour % 2;
 
		}
 
	});	
}

a noter que je n'ai absolument rien changé sur mon html/css...

**NoSmoking** · 03/05/2018, 18h47

Envoyé par Syrosh

D'ailleurs, puis-je laisser le topic en non résolu?

Il est préférable de clore cette discussion pour respecter le principe une question = discussion.

Notre but étant de maintenir une base de connaissances facile à exploiter par tous les visiteurs, avoir plusieurs questions dans le même fil nuit à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre.

Tic Tac Toe JS

JavaScript

Discussions similaires

Partager

Partager