TicTacToe.py

@@ -155,6 +155,7 @@ class AI:
         else:
             #minimax algo choice
             print("AI is thinking...")
+            time.sleep(1)
             eval, move = self.minimax(main_matrix, False)
 
         print(f"AI has chosen the pos {move} with an eval of {eval}")

script.js

@@ -59,79 +59,69 @@ class AI {
         const random_index = Math.floor(Math.random() * available_moves.length);
         return available_moves[random_index];
     }
+    minimax(matrix, maximizing) {
+        const caseStatus = matrix.winner();
 
-    minimax(matrix, depth, maximizingPlayer) {
+        if (caseStatus === 1) return { value: 1, move: null };
-        const winner = this.check_winner(matrix);
+        if (caseStatus === 2) return { value: -1, move: null };
+        if (matrix.isFull()) return { value: 0, move: null };
 
-        if (winner === this.player) {
+        let bestValue;
-            return 1;
+        let bestMove = null;
-        } else if (winner === 3 - this.player) {
+        const emptyCases = matrix.getEmptyCases();
-            return -1;
-        }
-    
-        if (matrix.is_full()) {
-            return 0;
-        }
-    
-        // Supprimer la vérification de la profondeur
-        // if (depth >= this.level) {
-        //     return 0;
-        // }
 
-        const opponent = 3 - this.player;
+        if (maximizing) {
-        const currentPlayer = maximizingPlayer ? this.player : opponent;
+            bestValue = -Infinity;
 
-        let bestScore = maximizingPlayer ? -Infinity : Infinity;
+            for (const [row, col] of emptyCases) {
+                const tempMatrix = matrix.clone();
+                tempMatrix.markCase(row, col, 1);
 
-        for (let row = 0; row < 3; row++) {
+                const { value } = this.minimax(tempMatrix, false);
-            for (let col = 0; col < 3; col++) {
-                if (matrix.cases[row][col] === 0) {
-                    matrix.mark(row, col, currentPlayer);
-                    const score = this.minimax(matrix, depth + 1, !maximizingPlayer);
-                    matrix.cases[row][col] = 0;
-                    matrix.marked_case--;
 
-                    bestScore = maximizingPlayer ? Math.max(bestScore, score) : Math.min(bestScore, score);
+                if (value > bestValue) {
-                }
+                    bestValue = value;
+                    bestMove = [row, col];
                 }
             }
+        } else {
+            bestValue = Infinity;
 
-        return bestScore;
+            for (const [row, col] of emptyCases) {
-    }
+                const tempMatrix = matrix.clone();
+                tempMatrix.markCase(row, col, this.player);
 
+                const { value } = this.minimax(tempMatrix, true);
 
-    check_winner(matrix) {
+                if (value < bestValue) {
-        for (let player = 1; player <= 2; player++) {
+                    bestValue = value;
-            if (matrix.check_win(player)) {
+                    bestMove = [row, col];
-                return player;
                 }
             }
-        return 0;
         }
 
-    move(matrix) {
+        return { value: bestValue, move: bestMove };
-        let bestScore = -Infinity;
-        let bestMove = null;
-    
-        for (let row = 0; row < 3; row++) {
-            for (let col = 0; col < 3; col++) {
-                if (matrix.cases[row][col] === 0) {
-                    matrix.mark(row, col, this.player);
-                    const score = this.minimax(matrix, 1, false);
-                    matrix.cases[row][col] = 0;
-                    matrix.marked_case--;
-    
-                    if (score > bestScore) {
-                        bestScore = score;
-                        bestMove = [row, col];
-                    }
     }
+
+    evaluate(mainMatrix) {
+        if (this.level === 0) {
+            const emptyCases = mainMatrix.getEmptyCases();
+            const randomIndex = Math.floor(Math.random() * emptyCases.length);
+            return emptyCases[randomIndex];
+        } else {
+            const { move } = this.minimax(mainMatrix, false);
+            return move;
         }
     }
 
-        return bestMove;
-    }
 
+    move(matrix) {
+        if (this.level === 0) {
+            return this.random_move(matrix);
+        } else {
+            return this.evaluate(matrix);
+        }
+    }
 }
 
 class Game {
@@ -145,42 +135,32 @@ class Game {
     }
 
     updateBoard() {
-        const cells = document.querySelectorAll('.cell');
+        const gameBoard = document.getElementById('game-board');
+        gameBoard.innerHTML = '';
 
         this.matrix.cases.forEach((row, rowIndex) => {
+            const rowElement = document.createElement('div');
+            rowElement.classList.add('row');
+
             row.forEach((cell, cellIndex) => {
-                const cellElement = cells[rowIndex * 3 + cellIndex];
+                const cellElement = document.createElement('div');
-                cellElement.classList.remove('x', 'o');
+                cellElement.classList.add('cell');
-                if (cell === 1) {
+                cellElement.dataset.mark = cell;
-                    cellElement.classList.add('x');
+                cellElement.addEventListener('click', () => this.handleCellClick(rowIndex, cellIndex));
-                } else if (cell === 2) {
+                rowElement.appendChild(cellElement);
-                    cellElement.classList.add('o');
-                }
-            });
             });
-    }
 
-    displayMessage(messageId) {
+            gameBoard.appendChild(rowElement);
-        const messages = ['p1win', 'p2win', 'aiwin', 'draw'];
-        messages.forEach((id) => {
-            const element = document.getElementById(id);
-            if (id === messageId) {
-                element.style.display = 'block';
-            } else {
-                element.style.display = 'none';
-            }
         });
     }
 
-    
-
     handleCellClick(row, col) {
         if (this.running && this.matrix.mark(row, col, this.player)) {
             if (this.matrix.check_win(this.player)) {
-                this.displayMessage(this.player === 1 ? 'p1win' : 'p2win');
+                alert(`Le joueur ${this.player} a gagné !`);
                 this.running = false;
             } else if (this.matrix.is_full()) {
-                this.displayMessage('draw');
+                alert("Match nul !");
                 this.running = false;
             } else {
                 this.player = 3 - this.player;
@@ -189,10 +169,10 @@ class Game {
                     if (ai_row !== null && ai_col !== null) {
                         this.matrix.mark(ai_row, ai_col, this.ai.player);
                         if (this.matrix.check_win(this.ai.player)) {
-                            this.displayMessage('aiwin');
+                            alert(`L'IA a gagné !`);
                             this.running = false;
                         } else if (this.matrix.is_full()) {
-                            this.displayMessage('draw');
+                            alert("Match nul !");
                             this.running = false;
                         }
                     }
@@ -203,17 +183,6 @@ class Game {
         }
     }
 
-    
-    setupEventListeners() {
-        const cells = document.querySelectorAll('[data-cell]');
-        cells.forEach((cell, index) => {
-            const row = Math.floor(index / 3);
-            const col = index % 3;
-            cell.addEventListener('click', () => this.handleCellClick(row, col));
-        });
-    }
-    
-
     start() {
         this.running = true;
         this.matrix = new Matrix();
@@ -223,32 +192,9 @@ class Game {
             this.player = 3 - this.player;
         }
         this.updateBoard();
-        const messages = ['p1win', 'p2win', 'aiwin', 'draw'];
-        messages.forEach((id) => {
-            document.getElementById(id).style.display = 'none';
-        });
     }
-    
 }
 
-const cellElements = document.querySelectorAll('[data-cell]');
-cellElements.forEach((cell, index) => {
-    cell.addEventListener('click', () => {
-        const row = Math.floor(index / 3);
-        const col = index % 3;
-        game.handleCellClick(row, col);
-    });
-});
-
-
 const game = new Game();
 game.start();
 
-const resetButton = document.getElementById('reset');
-resetButton.addEventListener('click', () => game.start());
-
-const aiButton = document.getElementById('ai');
-aiButton.addEventListener('click', () => {
-    game.gamemode = game.gamemode === 'ai' ? 'player' : 'ai';
-    game.start();
-});

script1.js

@@ -0,0 +1,225 @@
+class Matrix {
+    constructor() {
+        this.cases = Array(3).fill(null).map(() => Array(3).fill(0));
+        this.marked_case = 0;
+    }
+
+    is_full() {
+        return this.marked_case === 9;
+    }
+
+    mark(row, col, player) {
+        if (this.cases[row][col] === 0) {
+            this.cases[row][col] = player;
+            this.marked_case++;
+            return true;
+        }
+        return false;
+    }
+
+    check_win(player) {
+        const win_combinations = [
+            [[0, 0], [0, 1], [0, 2]],
+            [[1, 0], [1, 1], [1, 2]],
+            [[2, 0], [2, 1], [2, 2]],
+            [[0, 0], [1, 0], [2, 0]],
+            [[0, 1], [1, 1], [2, 1]],
+            [[0, 2], [1, 2], [2, 2]],
+            [[0, 0], [1, 1], [2, 2]],
+            [[0, 2], [1, 1], [2, 0]],
+        ];
+
+        return win_combinations.some(combination =>
+            combination.every(([row, col]) => this.cases[row][col] === player)
+        );
+    }
+}
+
+class AI {
+    constructor(level = 5, player = 2) {
+        this.level = level;
+        this.player = player;
+    }
+
+    random_move(matrix) {
+        const available_moves = [];
+
+        matrix.cases.forEach((row, i) => {
+            row.forEach((cell, j) => {
+                if (cell === 0) {
+                    available_moves.push([i, j]);
+                }
+            });
+        });
+
+        if (available_moves.length === 0) {
+            return null;
+        }
+
+        const random_index = Math.floor(Math.random() * available_moves.length);
+        return available_moves[random_index];
+    }
+
+    minimax(matrix, depth, maximizingPlayer) {
+        const winner = this.check_winner(matrix);
+    
+        if (winner !== 0) {
+            return winner === this.player ? 10 - depth : depth - 10;
+        }
+    
+        if (matrix.is_full()) {
+            return 0;
+        }
+    
+        if (depth >= this.level) {
+            return 0;
+        }
+    
+        const opponent = 3 - this.player;
+        const currentPlayer = maximizingPlayer ? this.player : opponent;
+    
+        let bestScore = maximizingPlayer ? -Infinity : Infinity;
+    
+        for (let row = 0; row < 3; row++) {
+            for (let col = 0; col < 3; col++) {
+                if (matrix.cases[row][col] === 0) {
+                    matrix.mark(row, col, currentPlayer);
+                    const score = this.minimax(matrix, depth + 1, !maximizingPlayer);
+                    matrix.cases[row][col] = 0;
+                    matrix.marked_case--;
+    
+                    bestScore = maximizingPlayer ? Math.max(bestScore, score) : Math.min(bestScore, score);
+                }
+            }
+        }
+    
+        return bestScore;
+    }
+    
+    check_winner(matrix) {
+        for (let player = 1; player <= 2; player++) {
+            if (matrix.check_win(player)) {
+                return player;
+            }
+        }
+        return 0;
+    }
+    
+    move(matrix) {
+        let bestScore = -Infinity;
+        let bestMove = null;
+    
+        for (let row = 0; row < 3; row++) {
+            for (let col = 0; col < 3; col++) {
+                if (matrix.cases[row][col] === 0) {
+                    matrix.mark(row, col, this.player);
+                    const score = this.minimax(matrix, 1, false);
+                    matrix.cases[row][col] = 0;
+                    matrix.marked_case--;
+    
+                    if (score > bestScore) {
+                        bestScore = score;
+                        bestMove = [row, col];
+                    }
+                }
+            }
+        }
+    
+        return bestMove;
+    }
+    
+}
+
+class Game {
+    constructor() {
+        this.matrix = new Matrix();
+        this.ai = new AI();
+        this.player = 1;
+        this.gamemode = 'ai';
+        this.running = true;
+        this.ai_starts = false;
+    }
+
+    updateBoard() {
+        const cells = document.querySelectorAll('.cell');
+    
+        this.matrix.cases.forEach((row, rowIndex) => {
+            row.forEach((cell, cellIndex) => {
+                const cellElement = cells[rowIndex * 3 + cellIndex];
+                cellElement.classList.remove('x', 'o');
+                if (cell === 1) {
+                    cellElement.classList.add('x');
+                } else if (cell === 2) {
+                    cellElement.classList.add('o');
+                }
+            });
+        });
+    }
+    
+    
+    
+
+    handleCellClick(row, col) {
+        if (this.running && this.matrix.mark(row, col, this.player)) {
+            if (this.matrix.check_win(this.player)) {
+                alert(`Le joueur ${this.player} a gagné !`);
+                this.running = false;
+            } else if (this.matrix.is_full()) {
+                alert("Match nul !");
+                this.running = false;
+            } else {
+                this.player = 3 - this.player;
+                if (this.gamemode === 'ai' && this.player === this.ai.player) {
+                    const [ai_row, ai_col] = this.ai.move(this.matrix);
+                    if (ai_row !== null && ai_col !== null) {
+                        this.matrix.mark(ai_row, ai_col, this.ai.player);
+                        if (this.matrix.check_win(this.ai.player)) {
+                            alert(`L'IA a gagné !`);
+                            this.running = false;
+                        } else if (this.matrix.is_full()) {
+                            alert("Match nul !");
+                            this.running = false;
+                        }
+                    }
+                    this.player = 3 - this.player;
+                }
+            }
+            this.updateBoard();
+        }
+    }
+    
+    setupEventListeners() {
+        const cells = document.querySelectorAll('[data-cell]');
+        cells.forEach((cell, index) => {
+            const row = Math.floor(index / 3);
+            const col = index % 3;
+            cell.addEventListener('click', () => this.handleCellClick(row, col));
+        });
+    }
+    
+
+    start() {
+        this.running = true;
+        this.matrix = new Matrix();
+        if (this.gamemode === 'ai' && this.ai_starts) {
+            const [ai_row, ai_col] = this.ai.move(this.matrix);
+            this.matrix.mark(ai_row, ai_col, this.ai.player);
+            this.player = 3 - this.player;
+        }
+        this.updateBoard();
+        this.setupEventListeners();
+    }
+    
+}
+
+const game = new Game();
+game.start();
+
+const resetButton = document.getElementById('reset');
+resetButton.addEventListener('click', () => game.start());
+
+const aiButton = document.getElementById('ai');
+aiButton.addEventListener('click', () => {
+    game.gamemode = game.gamemode === 'ai' ? 'player' : 'ai';
+    game.start();
+});

style.css

@@ -1,158 +1,48 @@
 body {
+    font-family: Arial, sans-serif;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
-    height: 100vh;
+    background-color: #f0f0f0;
-    margin: 0;
+}
-    background-color: #1E2125;
+
-    font-family: "Arial", sans-serif;
+h1 {
+    margin-bottom: 1rem;
 }
 
-.container {
+#game-board {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    width: 300px;
+    height: 300px;
+    background-color: white;
+    border: 1px solid black;
 }
 
-.grid {
+.row {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(3, 100px);
+    flex-direction: row;
-    grid-template-rows: repeat(3, 100px);
+    height: 33.33%;
-    gap: 15px;
-    margin-bottom: 25px;
 }
 
 .cell {
-    width: 100px;
-    height: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #2C3036;
+    width: 33.33%;
-    color: #FFFFFF;
+    height: 100%;
-    font-size: 24px;
+    border: 1px solid black;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-button {
-    padding: 10px 20px;
-    background-color: #1E2125;
-    color: #FFFFFF;
-    border: 2px solid #FFFFFF;
-    font-size: 16px;
     cursor: pointer;
-    margin: 5px;
 }
 
-button:hover {
+.cell[data-mark="1"]::before {
-    background-color: #2C3036;
-}
-.cell.x::after {
     content: "X";
-    color: #4fb2d3;
+    font-size: 2rem;
+    color: #2196F3;
 }
 
-.cell.o::after {
+.cell[data-mark="2"]::before {
     content: "O";
-    color: #b40e0e;
+    font-size: 2rem;
-}
+    color: #F44336;
-h1{
-    color: #FFFFFF;
-    font-size: 24px;
-    font-weight: bold;
-    margin: 0;
-    margin-bottom: 25px;
-}
-
-.winnerMessage {
-    color: #FFFFFF;
-    font-size: 18px;
-    font-weight: bold;
-    margin: 0;
-    margin-bottom: 15px;
-}
-
-#aiwin {
-    color: #b40e0e;
-    display: none;
-}
-
-#p1win {
-    color: #4fb2d3;
-    display: none;
-}
-
-#p2win {
-    color: #b40e0e;
-    display: none;
-}
-
-#draw {
-    color: #FFFFFF;
-    display: none;
-}
-
-.close-button {
-    position: fixed;
-    top: 30px;
-    left: 40px;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-}
-
-.close-button::before,
-.close-button::after {
-    content: '';
-    position: absolute;
-    height: 30px;
-    width: 2px;
-    background-color: #FFFFFF;
-    transition: transform 0.3s;
-}
-
-.close-button::before {
-    transform-origin: center center;
-    transform: rotate(45deg);
-}
-
-.close-button::after {
-    transform-origin: center center;
-    transform: rotate(-45deg);
-}
-
-.close-button:hover::before {
-    transform: rotate(135deg);
-}
-
-.close-button:hover::after {
-    transform: rotate(-135deg);
-}
-
-
-.github-button {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: #1E2125;
-    color: #FFFFFF;
-    border: 2px solid #FFFFFF;
-    font-size: 16px;
-    cursor: pointer;
-    margin: 20px 5px;
-    text-decoration: none;
-}
-
-.github-button:hover {
-    background-color: #2C3036;
-}
-
-.footer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    position: fixed;
-    bottom: 0;
-    left: 0;
 }

style1.css

@@ -0,0 +1,57 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #1E2125;
+    font-family: "Arial", sans-serif;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(3, 100px);
+    grid-template-rows: repeat(3, 100px);
+    gap: 15px;
+    margin-bottom: 25px;
+}
+
+.cell {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #2C3036;
+    color: #FFFFFF;
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: #1E2125;
+    color: #FFFFFF;
+    border: 2px solid #FFFFFF;
+    font-size: 16px;
+    cursor: pointer;
+    margin: 5px;
+}
+
+button:hover {
+    background-color: #2C3036;
+}
+.cell.x::after {
+    content: "X";
+}
+
+.cell.o::after {
+    content: "O";
+}

tictactoe.html

@@ -4,12 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tic Tac Toe - IA</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style1.css">
 </head>
 <body>
-    <div class="close-button" onclick="location.href='homepage.html';"></div>
     <div class="container">
-        <h1>Tic Tac Toe - AI</h1>
         <div class="grid">
             <div class="cell" data-cell></div>
             <div class="cell" data-cell></div>
@@ -21,17 +19,9 @@
             <div class="cell" data-cell></div>
             <div class="cell" data-cell></div>
         </div>
-        <div class="winnerMessage" id="p1win">Player 1 won</div>
+        <button id="reset">Recommencer</button>
-        <div class="winnerMessage" id="p2win">Player 2 won</div>
+        <button id="ai">Activer/désactiver IA</button>
-        <div class="winnerMessage" id="aiwin">IA won</div>
-        <div class="winnerMessage" id="draw">There is equality</div>
-        <button id="reset">Reset</button>
-        <button id="ai">Enable/Disable IA</button>
     </div>
-    <div class="footer">
+    <script src="script1.js"></script>
-        <a href="https://codefirst.iut.uca.fr/git/leo.tuaillon/AI_TicTacToe" target="_blank" class="github-button">Voir le code source Git</a>
-    </div>
-    <script src="script.js"></script>
-
 </body>
 </html>

tictactoeAI.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jeu de Morpion</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Jeu de Morpion</h1>
+    <div id="game-board"></div>
+    <script src="script.js"></script>
+</body>
+</html>