Mini-projet : Tic-Tac-Toe

Le but de ce mini-projet est de vous faire coder un jeu de Tic-Tac-Toe (également appelé Morpion) en JavaScript.

Règles du jeu

L'utilisateur et l'ordinateur vont jouer à tour de rôle. L'utilisateur commence toujours par jouer avec le symbole "X", tandis que l'ordinateur joue avec le symbole "O".

Le premier joueur à aligner trois symboles de son choix (horizontalement, verticalement ou diagonalement) gagne la partie.

Si toutes les cases sont remplies sans qu'aucun joueur n'aligne trois symboles, la partie se termine en égalité.

Repository et fichiers

Dans le dossier bre05-js-j5, créez un dossier tic-tac-toe. Dans le dossier tic-tac-toe créez un fichier index.html, un fichier index.js et un fichier style.css.

Les contenus des fichiers :

index.html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" >
        <title>
            Mini-projet : Tic Tac Toe
        </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="game-board">
            <div id="box-0">

            </div>
            <div id="box-1">

            </div>
            <div id="box-2">

            </div>
            <div id="box-3">

            </div>
            <div id="box-4">

            </div>
            <div id="box-5">

            </div>
            <div id="box-6">

            </div>
            <div id="box-7">

            </div>
            <div id="box-8">

            </div>
        </div>
        <button id="reset">Rejouer</button>
    </body>
    <script type="application/javascript" src="index.js"></script>
</html>

style.css

html {
    font-size:24px;
    font-family: Arial, sans-serif;
}

body {
    display: grid;
    background-color: #555555;
    color: white;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(3, 30vh);
    grid-template-rows: repeat(3, 30vh);
    min-height:90vh;
}

#game-board > div {
    display: grid;
    border: 1px dotted #ccc;
    font-size: 4rem;
    align-items: center;
    justify-content: center;
}

button {
    margin-top: 1rem;
    width: 20%;
}

index.js

window.addEventListener('DOMContentLoaded', () => {

});

Consignes

🔴 Vous ne pouvez pas modifier le HTML. 🔴

Avec toutes les connaissances que vous avez acquises en JavaScript (et uniquement celles du cours) :

variables
tableaux
fonctions
boucles
conditions
objets
sélecteurs du DOM
modification du DOM
...

Vous allez devoir faire en sorte :

que l'utilisateur et l'ordinateur puisse jouer à tour de role
de faire un window.alert en cas de victoire, de défaite ou d'égalité
de pouvoir réinitialiser la grille en cliquant sur le bouton rejouer

12 January 2026