[défi n°9] Si ça vous gratte...

**javatwister** · 17/06/2005, 07h10

Je vous propose un morpion!

carte blanche sur le design mais le plus simple sera le mieux;

l'ordinateur ne doit pas commettre d'erreur;

l'ordinateur et le visiteur commencent à tour de rôle : une nouvelle partie démarre dès que la précédente est finie, tant que la page n'est pas rechargée; on peut donc compter les points sur X parties;

voilà voilà... ce serait bien

**denisC** · 17/06/2005, 08h53

Avec ou sasn IA? Parcequ'avec une IA qui vaille le coup, c'est plus cher

Ceci dit, les cas au morpions sont suffisamment peux nombreux (2 + 2^2 + 2^3 + 2^4 + 2^5 + 2^6 + 2^7 = 254 divisible par 4 pour raisons de symétrie... soit en gros moins d'un centaine de cas) pour pouvoir en faire un imbattable. Mais c'est plus cher

**denisC** · 17/06/2005, 09h44

Voila une version basique du morpion. Il est moche (si quelqu'un veux faire la feuille de style, il est bienvenu) et débile (jouer au hasard, c'est limité comme stratégie...) mais il marche.

Pour l'IA, il suffit de réécrire la fonction ordinateurJoue() pour qu'il fasse quelque chose d'un peu mieux.

Le code n'est pas factorisé à 100% mais il est assez propre. Les noms des fonctions sont normalement suffisamment explicites.

J'ai pas de serveur web à dispo, si quelqu'un veux bien le mettre en ligne pour voir ce que ça donne

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
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
 
<html>
<head>
    <title>Morpion par denisC</title>
<script type="text/javascript">
    var jeu = new Array(0,0,0,0,0,0,0,0,0);
    var fini = 0;
 
    var gagneJoueur = 0;
    var gagneOrdinateur = 0;
 
    function clickCase(idCase) {
        // DEBUG : alert("clickCase!! : " + idCase);
        // DEBUG : alert("fini : " + fini + "\n jeu : " + jeu);
        if (fini!=1&&jeu[idCase]==0) {
            jeu[idCase]=1;
            placePion(idCase,1);
            if (gagne(1)) {
                partieFini(1);
            } else if (jeuFini()) {
                partieFini(0);
            } else {
                ordinateurJoue();
            }
        }
    }
 
    function gagne(joueur) {
        var joueurBool = 0;
        if (jeu[4] == joueur) {
            if (jeu[0] == joueur && jeu[8] == joueur) {
                //premiere diagonale
                joueurBool = 1;
            } else if (jeu[2] == joueur && jeu[6] == joueur) {
                //deuxieme diagonale
                joueurBool = 1;
            } else if (jeu[3] == joueur && jeu[5] == joueur) {
                //deuxieme ligne
                joueurBool = 1;
            } else if (jeu[1] == joueur && jeu[7] == joueur) {
                //deuxieme colonne
                joueurBool = 1;
            }
        } else if (jeu[0]==joueur) {
            if (jeu[1] == joueur && jeu[2] == joueur) {
                //premiere ligne
                joueurBool = 1;
            } else if (jeu[3] == joueur && jeu[6] == joueur) {
                //premiere colonne
                joueurBool = 1;
            }
        } else if (jeu[8]==joueur) {
            if (jeu[6] == joueur && jeu[7] == joueur) {
                //troisieme ligne
                joueurBool = 1;
            } else if (jeu[2] == joueur && jeu[5] == joueur) {
                //troisieme colonne
                joueurBool = 1;
            }
        }
        return joueurBool;
    }
 
    function jeuFini() {
        var finiBool = 1;
        for (var i=0; i<9; i++) {
            finiBool = finiBool && (jeu[i]!=0);
        }
        return finiBool;
    }
 
    function ordinateurJoue() {
        var place = Math.round(9*Math.random());
        while (jeu[place]!=0) {
            place = Math.round(9*Math.random());
        }
        jeu[place]=2;
        placePion(place,2);
        if (gagne(2)) {
            partieFini(2);
        } else if (jeuFini()) {
            partieFini(0);
        }
    }
 
    function placePion(idCase,joueur) {
        if (joueur==1) {
            document.getElementById('case'+idCase).firstChild.data = 'X';
        } else {
            document.getElementById('case'+idCase).firstChild.data = 'O';
        }
    }
 
    function partieFini(joueur) {
        fini = 1;
        if (joueur==1) {
            document.getElementById('message').firstChild.data = 'Vous avez Gagné';
            gagneJoueur++;
        } else if (joueur==2) {
            document.getElementById('message').firstChild.data = 'Vous avez Perdu';
            gagneOrdinateur++;
        } else {
            document.getElementById('message').firstChild.data = 'La partie est terminée : égalité';
        }
        document.getElementById('scoreJoueur').firstChild.data = gagneJoueur;
        document.getElementById('scoreOrdinateur').firstChild.data = gagneOrdinateur;
        document.getElementById('rejouer').style.display='block';
    }
 
    function rejouer() {
        for (var i=0; i<9; i++) {
            document.getElementById('case'+i).innerHTML = "&nbsp;";
            jeu[i]=0;
        }
        document.getElementById('message').firstChild.data = 'Partie en cours.....';
        document.getElementById('rejouer').style.display='none';
        fini = 0;
    }
</script>
<style  type="text/css">
    td {
        width: 100px;
        height: 100px;
    }
</style>
</head>
<body>
    <table border='1'>
        <tr>
            <td onclick='clickCase(0);' id='case0'>&nbsp;</td>
            <td onclick='clickCase(1);' id='case1'>&nbsp;</td>
            <td onclick='clickCase(2);' id='case2'>&nbsp;</td>
        </tr>
        <tr>
            <td onclick='clickCase(3);' id='case3'>&nbsp;</td>
            <td onclick='clickCase(4);' id='case4'>&nbsp;</td>
            <td onclick='clickCase(5);' id='case5'>&nbsp;</td>
        </tr>
        <tr>
            <td onclick='clickCase(6);' id='case6'>&nbsp;</td>
            <td onclick='clickCase(7);' id='case7'>&nbsp;</td>
            <td onclick='clickCase(8);' id='case8'>&nbsp;</td>
        </tr>
    </table>
    <div id='message'>Partie en cours.....</div>
    <div>
        Votre Score : <span id='scoreJoueur'>0</span> <br />
        Le Score de l'ordinateur :  <span id='scoreOrdinateur'>0</span>
    </div>
    <div id='rejouer' style='display:none;'>
        <a href='javascript:void(0);' onclick='rejouer();'>Recommencer une partie</a>
    </div>
</body>
</html>

**javatwister** · 17/06/2005, 10h30

salut

attention, il faut que l'ordi soit "virtuellement" imbattable; finalement, c'est une sorte de moniteur pour apprendre à gagner au morpion;
j'ai pas le temps de tester ton code

à plus tard!

**denisC** · 17/06/2005, 11h04

Bon, ben il faut que j'affine un peu mon IA. En jouant au hasard, il est pas vraiment imbattable

**javatwister** · 17/06/2005, 12h43

ouais...

bon, prenez votre temps hein! comme d'habitude, je me réveille à l'approche du week-end et je sais que pas mal de membres sont HS jusqu'à lundi!
Pour une fois, comme le projet est plus complexe que les précédents, chacun peut tenter le coup, ce ne sera pas une course

**fred777888999** · 17/06/2005, 14h05

Ptet que je vais pondre 1 ou 2 lignes ce WE, mais qu'est-ce que tu entends par morpion ? Un 3x3 ou un damier plus grand ? Un truc ou tu joue n'importe ou ou un 'puissance 4' ? un damier 3d 4x4x4 ou plus ?

**Celelibi** · 17/06/2005, 19h12

fred777888999 à mon avis il parle du morpion classique, celui que tu fais (ou a fait) en cours en gravant la grille au compas sur la table pour jouer plusieurs fois avec ton voisin.

Je viens de finir ma dernière épreuve du BAC, je vais pouvoir vous coder ça.
rem : j'avais fait une AI pour un morpion sur ma casio.

Mais je ne suis pas sûr qu'une AI soit une bonne idée de challenge car il y a ceux qui ont fait des études d'informatique avec des cours d'algo qui vont être avantagés. Je suis sûr que beaucoup doivent connaitre l'algo alpha béta, ou A*. (perso je connais aucun des deux donc c'est réglé.)

ps : mon prochain message sera sûrement accompagné de mon code. ^^
Tant qu'on a pas de limite de lignes ça ira.

**javatwister** · 17/06/2005, 23h34

allez, voilà mon essai:
http://javatwist.imingo.net/morpion.htm

je debuggerai ce week-end pour les finitions, hein;

**Sub0** · 18/06/2005, 00h29

Joli boulot déjà!

A tout hasard, ça serait compliqué d'obtenir une grille plus grande, 4x4 par exemple ?
J'aimerai bien arriver à en faire un Puissance 4 en me basant sur cette IA ...
Trop compliqué à ton avis ? Ça pourrait faire le défi n°10 éventuellement...

**zebuman** · 18/06/2005, 05h28

salut
voici une proposition mais c'est pompé sur l'applet java tictactoe

Morpion

**javatwister** · 18/06/2005, 15h15

pas mal... ça ressemble assez au mien d'un point de vue stratégique;

par contre le code est plutôt concis

**zebuman** · 18/06/2005, 15h30

Pour moi le défi a été de comprendre le code de l'applet

Avec les opérateurs bit à bit les positions sont représentées par un entier entre 0 et 2^9
En revanche je ne sais pas si l'idée peut être reprise pour un puissance 4, qui a plus de 32 cases...

**javatwister** · 18/06/2005, 16h15

puissance 4, puissance 4... comme vous y allez!

pour moi, ça n'a pas grand chose à voir;
si j'avais à faire ça je remettrais la page à zéro et je réfléchirais dans une autre direction; à la limite, ça me semble plus facile

**Sub0** · 18/06/2005, 16h46

ok, c'est ce que je voulais savoir : L'algo utilisé pour l'IA du morpion est difficilement utilisable pour une grille de taille différente... Il est probablement plus facile de faire l'inverse, c'est-à-dire, obtenir à partir d'une IA de P4, une IA pour le morpion... A part le fait qu'il n'est pas possible de poser le jeton sur n'importe quelle case, le principe reste le même -> Aligner un certain nombre de jetons (je pense que ce nombre devrait être une variable pour que le jeu soit un peu plus intéressant...), à+

**javatwister** · 18/06/2005, 16h55

bon, déjà je vais essayer de passer en dessous de 200 lignes pour un morpion complet, je serai déjà content

**Celelibi** · 18/06/2005, 17h26

sub0 en fait tu peux très bien adapter certains algo d'AI au puissance 4.
1) génération de l'ensemble des parties jouables
2) sélection du prochain coup à jouer dans l'ensemble des coups possibles tel que la probabilité de gagner soit la plus grande

Cet algo peut s'appliquer à n'importe quel jeu. même à un jeu d'échec

Par contre je vois mal JavaScript en train de générer un tableau de l'ensemble des parties jouables aux échec.

**Sub0** · 18/06/2005, 17h41

Oui, je pense bien Celelibi, tu as raison. En fait, je supposais qu'il suffisait de modifier un paramètre, une variable de valeur égale à 3 pour pouvoir choisir les dimensions de la grille et en même temps du nombre de jetons à aligner... Voilà où je voulais en venir. Dans ce cas, il aurait été simple de modifier cet algo du morpion pour obtenir un autre jeu, le P4. Je pense que le fait de pouvoir choisir ce nombre est intéressant, même pour le jeu du morpion... Maintenant, c'est une simple idée, votre code actuel n'est pas remis en question, il est très bien.

**Celelibi** · 18/06/2005, 18h57

JT : ton AI je viens de lui mettre 5 - 0 en 10 parties.

Son jeu est trop prévisible, et quand on a gagné une fois il est très simple de reproduire la même partie plusieurs fois.

Au passage, tu as un problème avec ton setInterval : quand on gagne il n'est pas clearé. ^^

Sub0 tout dépend de l'algorithme utilisé. Si tu regarde celui de JT (le seul que j'ai regardé actuellement) il utilise certaines règles qui ne peuvent s'appliquer qu'à une grille 3*3.