add Puissance4 by GPT improved by us

2023-10-12 17:45:38 +02:00 · 2023-10-12 17:45:38 +02:00 · 8a9fd65e19
parent 6232d8df51
commit 8a9fd65e19
1 changed files with 150 additions and 0 deletions
--- a/4/puissance4.html
+++ b/4/puissance4.html
@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .plateau {
+            display: grid;
+            grid-template-columns: repeat(7, 7%); /* Chaque colonne occupe la même fraction de l'espace disponible */
+        }
+        .cell {
+            width: 100%;
+            padding-top: 100%; /* Pour garder les cases carrées */
+            border: 1px solid #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            border-radius: 50%; /* Pour créer des cercles */
+        }
+        .rouge {
+            background-color: red;
+            border-radius: 50%; /* Pour créer des cercles */
+        }
+        .jaune {
+            background-color: yellow;
+            border-radius: 50%; /* Pour créer des cercles */
+        }
+    </style>
+</head>
+<body>
+    <div class="plateau" id="plateau"></div>
+    <script>
+        const numrangées = 6;
+        const numcolonnes = 7;
+        const plateau = document.getElementById("plateau");
+        let coupsJoues = 0;
+        let joueurActuel = "rouge";
+        const cells = [];
+
+        function creercell(rangée, colonne) {
+            const cell = document.createElement("div");
+            cell.classList.add("cell");
+            cell.dataset.row = rangée;
+            cell.dataset.col = colonne;
+            plateau.appendChild(cell);
+            cells.push(cell);
+
+            
+        }
+
+
+        function changeJoueur() {
+            joueurActuel = joueurActuel === "rouge" ? "jaune" : "rouge";
+        }
+
+        function verifVictoire(rangée, colonne) {
+            const currentcell = cells.find(c => parseInt(c.dataset.row) === rangée && parseInt(c.dataset.col) === colonne);
+            const currentColor = currentcell.classList.contains("rouge") ? "rouge" : "jaune";
+
+            // verif alignement horizontal
+            let count = 0;
+            for (let i = colonne - 3; i <= colonne + 3; i++) {
+                const cell = cells.find(c => parseInt(c.dataset.row) === rangée && parseInt(c.dataset.col) === i);
+                if (cell && cell.classList.contains(currentColor)) {
+                    count++;
+                    if (count === 4) {
+                        return true;
+                    }
+                } else {
+                    count = 0;
+                }
+            }
+
+            // verif alignement vertical
+            count = 0;
+            for (let i = rangée - 3; i <= rangée + 3; i++) {
+                const cell = cells.find(c => parseInt(c.dataset.row) === i && parseInt(c.dataset.col) === colonne);
+                if (cell && cell.classList.contains(currentColor)) {
+                    count++;
+                    if (count === 4) {
+                        return true;
+                    }
+                } else {
+                    count = 0;
+                }
+            }
+
+            // verif alignement diagonal
+            count = 0;
+            for (let i = -3; i <= 3; i++) {
+                const cell = cells.find(c => parseInt(c.dataset.row) === rangée + i && parseInt(c.dataset.col) === colonne + i);
+                if (cell && cell.classList.contains(currentColor)) {
+                    count++;
+                    if (count === 4) {
+                        return true;
+                    }
+                } else {
+                    count = 0;
+                }
+            }
+
+            // verif alignement anti-diagonal
+            count = 0;
+            for (let i = -3; i <= 3; i++) {
+                const cell = cells.find(c => parseInt(c.dataset.row) === rangée - i && parseInt(c.dataset.col) === colonne + i);
+                if (cell && cell.classList.contains(currentColor)) {
+                    count++;
+                    if (count === 4) {
+                        return true;
+                    }
+                } else {
+                    count = 0;
+                }
+            }
+
+            return false;
+        }
+
+        for (let rangée = 0; rangée < numrangées; rangée++) {
+            for (let colonne = 0; colonne < numcolonnes; colonne++) {
+                creercell(rangée, colonne);
+            }
+        }
+
+        cells.forEach(cell => {
+            cell.addEventListener("click", function () {
+                const colonne = parseInt(cell.dataset.col);
+
+                for (let rangée = numrangées - 1; rangée >= 0; rangée--) {
+                    const currentcell = cells.find(c => parseInt(c.dataset.row) === rangée && parseInt(c.dataset.col) === colonne);
+                    if (!currentcell.classList.contains("rouge") && !currentcell.classList.contains("jaune")) {
+                        currentcell.classList.add(joueurActuel);
+                        coupsJoues++;
+                        if (verifVictoire(rangée, colonne)) {
+                            alert("Joueur " + joueurActuel + " a gagné !");
+                            location.reload();
+                        }else if (coupsJoues === numrangées * numcolonnes) {
+                            alert("Égalité ! Aucun joueur n'a gagné.");
+                            location.reload();
+                        }
+                        else {
+                            changeJoueur();
+                        }
+                        break;
+                    }
+                }
+            });
+        });
+    </script>
+</body>
+</html>