Jeu du morpion

**best01** · 06/09/2018, 13h12

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 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
<!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 :

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
/* 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);
}

**mathieu** · 06/09/2018, 13h42

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 :

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

**best01** · 06/09/2018, 14h47

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

pourquoi :

Code :

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

1
2
    var tableau = [];
    const limiteBoucle = 10;

est déclarer en dehors de la fonction.

Pourriez vous m'expliquez la condition suivante

Code :

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

1
2
3
4
        if (-1 === tableau.indexOf(caseAdversaire)) {
        	document.getElementById(caseAdversaire).innerHTML = 'O';
        	bool = false;
        }

Merci

**mathieu** · 06/09/2018, 15h25

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

**best01** · 06/09/2018, 16h24

Code :

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

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 ?

Invité · 06/09/2018, 16h40

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...

Jeu du morpion

JavaScript

Discussions similaires

Partager

Partager