🧾 Synthèse du Projet Puissance 4

Résumé du projet

Le but de ce projet était de recréer le célèbre jeu Puissance 4 sous forme de site web en utilisant les langages HTML, CSS et JavaScript. Le travail a été fait en équipe de 3 élèves, chacun ayant un rôle précis. Le projet s’est déroulé sur plusieurs séances et nous a permis de mettre en pratique nos connaissances en développement web.

Répartition des tâches

• Yanis : création de l’interface avec HTML et mise en forme du site avec CSS.
• Tom : développement de la logique du jeu en JavaScript.
• Jorys : aide au code JavaScript et gestion des fonctions (victoire, grille, tours de jeu).

Ce qui a été réussi

• La grille du jeu fonctionne correctement.
• Le système de tours des joueurs est opérationnel.
• La détection de victoire (horizontal, vertical, diagonal) est bien codée.
• Le site possède plusieurs pages reliées par une barre de navigation.
• Le design est propre et clair grâce au CSS.

Problèmes rencontrés

• Au début, difficulté à faire apparaître les pions au bon endroit dans la grille.
• Bug dans la vérification des diagonales (corrigé après plusieurs tests).
• Certains éléments CSS ne s’affichaient pas correctement sur mobile.
• Manque de communication au début, mais vite corrigé en répartissant mieux les tâches.

Déroulement du projet

Le projet s’est bien passé dans l’ensemble. Chacun a travaillé sur sa partie en autonomie tout en se consultant régulièrement. La gestion des fichiers HTML, CSS et JS a demandé de l'organisation. Le travail d’équipe a été essentiel pour surmonter les difficultés. Nous avons appris à mieux structurer notre code, à organiser un site complet et à collaborer efficacement.

Exemple de code important

Voici un extrait du code JavaScript qui détecte si un joueur a gagné :

function verifier_victoire(l, c) {
    const joueur = grille[l][c];

    function compter_direction(dl, dc) {
        let compteur = 0;
        let i = l + dl;
        let j = c + dc;

        while (i >= 0 && i < NOMBRE_LIGNES && j >= 0 && j < NOMBRE_COLONNES && grille[i][j] === joueur) {
            compteur++;
            i += dl;
            j += dc;
        }
        return compteur;
    }

    const directions = [
        [0, 1],
        [1, 0],
        [1, 1],
        [1, -1]
    ];

    for (let [dl, dc] of directions) {
        const total = 1 + compter_direction(dl, dc) + compter_direction(-dl, -dc);
        if (total >= 4) {
            return true;
        }
    }

    return false;
}
        

La fonction verifier_victoire(l, c) sert à savoir si un joueur a gagné juste apres avoir posé son pion à la ligne l et la colonne c de la grille.

- const joueur = grille[l][c]; permet de recuperer quel joueur a posé son pion ici.

- Ensuite, il y a une fonction interne compter_direction(dl, dc) qui compte combien de pions du meme joueur sont alignés dans une direction.
Les paramètres dl et dc sont des déplacements sur les lignes et colonnes (par exemple 0,1 pour aller à droite, ou 1,0 pour aller en bas).
Elle commence à la case à coté de la position donnée et compte tant que c’est dans la grille et que c’est le meme joueur.

- Le tableau directions contient les 4 directions à verifier : horizontal (droite), vertical (bas), et les deux diagonales.
Pour chaque direction, on compte le nombre de pions alignés dans le sens donné et dans le sens inverse, plus le pion posé lui-meme.
Si la somme est au moins 4, la fonction retourne true, sinon elle continue.

- Si aucune direction n’a 4 pions alignés, la fonction retourne false pour dire que la partie continue.

Ce code est important car il permet au jeu de detecter une victoire rapidement, en verifiant les alignements sans sortir de la grille.
C’est aussi un bon exemple de code clair et organisé, avec une fonction dans une fonction.
C’est une partie clé du projet pour que le jeu marche bien.