Jeu du morpion

Version imprimable

Jeu du morpion

Bonjour à tous, je viens vers vous pour avoir une aide sur un scripts Js sur le jeu du morpion.

Le joueur coche une case et la machine en coche une autres. Je souhaiterai que la machine ne coche que les case de libre et actuellement la machine coche
n'importe quelle case en fonction d'un random. Je vous montre le code :

- 1 fichier html
- 1 fichier Javascript

Le tours Machine est gérer dans la fonction adversaire ! Merci pour l'aide

Fichier 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
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Le jeu du morpion</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css" >
        <script language="javascript" src="Js/fonction.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <header>
                <h1>Le jeu du morpion</h1>
            </header>
 
            <div class="main">
                <table>
                    <tr>
                        <td id="case0" onclick="joueur(id)"></td>
                        <td id="case1" onclick="joueur(id)"></td>
                        <td id="case2" onclick="joueur(id)"></td>
                    </tr>
 
                    <tr>
                        <td id="case3" onclick="joueur(id)"></td>
                        <td id="case4" onclick="joueur(id)"></td>
                        <td id="case5" onclick="joueur(id)"></td>
                    </tr>
 
                    <tr>
                        <td id="case6" onclick="joueur(id)"></td>
                        <td id="case7" onclick="joueur(id)"></td>
                        <td id="case8" onclick="joueur(id)"></td>
                    </tr>
                </table>
 
            </div> 
        </div> 
    </body>
</html>

Fichier 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
/* Fonction Joueur*/
function joueur(id) {
    switch (id) {
        case 'case0':
            document.getElementById(id).innerHTML='X';
            break;
        case 'case1':
            document.getElementById(id).innerHTML='X';
            break;
        case 'case2':
            document.getElementById(id).innerHTML='X';
            break;  
        case 'case3':
            document.getElementById(id).innerHTML='X';
            break;
        case 'case4':
            document.getElementById(id).innerHTML='X';
            break;
        case 'case5':
            document.getElementById(id).innerHTML='X';
            break;
        case 'case6':
            document.getElementById(id).innerHTML='X';
            break;
        case 'case7':
            document.getElementById(id).innerHTML='X';
            break;
        case 'case8':
            document.getElementById(id).innerHTML='X';
            break;
 
        default:
            console.log('Mauvais choix');
    } /*fin switch*/
 
	adversaire(id); 
}
 
 
/* Fonction selection de case Adversaire*/
function adversaire(id) {
    var bool = true;
    var tableau = [];
    tableau.push(id);
 
    while (bool == true) {
        var nb = Math.floor(Math.random() * 9);
        var caseAdversaire = 'case'+nb;
 
        for(var indice in tableau) {
            if (caseAdversaire != tableau[indice]) {
                document.getElementById(caseAdversaire).innerHTML='O';
                bool = false;	
            }
        }
    }
    tableau.push(caseAdversaire);
}

si par exemple vous tirez au hasard "case8" ensuite dans la boucle vous testez si une des cases du tableau ne contient pas "case8" ce qui est toujours vrai

donc la recherche d'une case libre devrait plutôt se faire comme cela :

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
 
var tableau = [];
 
const limiteBoucle = 10;
 
 
function adversaire(id) {
 
    var bool = true;
    var compteur = 0;
 
    tableau.push(id);
 
    while (bool == true && compteur < limiteBoucle) {
 
    	compteur++;
 
        var nb = Math.floor(Math.random() * 9);
 
        var caseAdversaire = 'case'+nb;
 
        if (-1 === tableau.indexOf(caseAdversaire)) {
        	document.getElementById(caseAdversaire).innerHTML = 'O';
        	bool = false;
        }
 
    }
 
    if (limiteBoucle === compteur) {
    	console.log("fin de la partie");
    } else {
    	tableau.push(caseAdversaire);
    }
 
}

06/09/2018, 14h47
best01

merci
Merci de votre réponse, mon problème semble résolu.
Par contre pourriez vous m'expliquez 2-3 petite chose...

pourquoi :
Code:

1 2 var tableau = []; const limiteBoucle = 10;
est déclarer en dehors de la fonction.

Pourriez vous m'expliquez la condition suivante
Code:

1 2 3 4 if (-1 === tableau.indexOf(caseAdversaire)) { document.getElementById(caseAdversaire).innerHTML = 'O'; bool = false; }
Merci
06/09/2018, 15h25
mathieu

le tableau est défini en dehors de la fonction sinon le contenu est effacé à chaque coup.
pour "indexof" regardez là :
https://developer.mozilla.org/fr/doc.../Array/indexOf
06/09/2018, 16h24
best01

merci

Code:

tableau.indexOf(caseAdversaire) === -1

Si j'ai bien compris on controle que la valeur de caseAdversaire est dans le tableau, si la valeur n'est pas dans le tableau indexOf renvoi -1 et donc getElementById ce fait...

En ce qui concerne le compteur et t'il obligatoire ?
06/09/2018, 16h40
Invité

Bonjour,

J'ai trouvé ça sur le web : https://github.com/Semrom/Tic-Tac-Toe

Ce qui donne ça : https://codepen.io/jreaux62/pen/LyWaqE

Peut-être que tu peux t'en inspirer...