v1 connect4

2025-01-29 16:41:46 +01:00 · 2025-01-29 16:41:46 +01:00 · 29674188f9
commit 29674188f9
3 changed files with 166 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+     <div id="table-container">Activez JavaScript pour jouer.</div>
+  </body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,130 @@
+
+let board = Array(6).fill().map(() => Array(7).fill(0));
+console.log(board);
+
+let turn = 0;
+
+function reset() {
+    turn = 0;
+    board = Array(6).fill().map(() => Array(7).fill(0));
+}
+
+function set(column) {
+    if (column >= 0 && column < 7) {
+        for (let i=5; i>=0; i+=-1) {
+            if (board[i][column] == 0) {
+                board[i][column] = turn+1;
+                console.log(`Player ${turn+1} placed at (${i}, ${column})`);
+                turn ^= 1;
+                return i;
+            }
+        }
+        console.log(`Player ${turn+1} could not place, column ${column} full`);
+        return false;
+    }
+}
+
+function render() {
+    const tableContainer = document.querySelector("#table-container");
+    tableContainer.innerHTML = '';
+    if (turn == -1 || turn == -2) {
+        const winText = document.createTextNode(`player ${-1*turn} won. Click on the board to reset the game.`);
+        tableContainer.appendChild(winText);
+    }
+    const table = document.createElement("table");
+    for (let i = 0; i < 6; i++) {
+        const row = document.createElement("tr");
+        for (let j = 0; j < 7; j++) {
+            const cell = document.createElement("td");
+            if (board[i][j] === 1) {
+                cell.classList.add("player1");
+            } else if (board[i][j] === 2) {
+                cell.classList.add("player2");
+            }
+            row.appendChild(cell);
+        }
+        table.appendChild(row);
+    }
+    tableContainer.appendChild(table);
+}
+
+function playerMove(e) {
+    if (turn == -1 || turn == -2) {
+        reset()
+    } else {
+        column = e.target.cellIndex
+        console.log(column)
+        set(column)
+        checkWin()
+    }
+    render()
+}
+
+function checkColumns() {
+    for (let i = 0; i < 6; i++) {
+        ctr = 0;
+        for (let j = 0; j < 6; j++) {
+            if (board[i][j] != 0 && (board[i][j] === board[i][j+1])) {
+                ctr +=1
+                console.log(`ctr ${ctr}`)
+            }
+            if (ctr == 3) {
+                console.log(`player ${board[i][j]} won`);
+                turn = -1*board[i][j];
+                return true;
+            }
+        }
+    }
+}
+
+function checkRows() {
+        for (let i = 0; i < 7; i++) {
+        ctr = 0;
+        for (let j = 0; j < 5; j++) {
+            if (board[j][i] != 0 && (board[j][i] === board[j+1][i])) {
+                ctr +=1
+            }
+            if (ctr == 3) {
+                console.log(`player ${board[j][i]} won`);
+                turn = -1*board[j][i];
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+function checkDescendingDiagonals() {
+    for (let i = 0; i < 3; i++) {
+        for (let j = 0; j < 4; j++) {
+            let player = board[i][j];
+            if (player !== 0 && player === board[i+1][j+1] && player === board[i+2][j+2] && player === board[i+3][j+3]) {
+                console.log(`Player ${player} won`);
+                turn = -1 * player;
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+function checkAscendingDiagonals() {
+    for (let i = 0; i < 3; i++) {
+        for (let j = 3; j < 7; j++) {
+            let player = board[i][j];
+            if (player !== 0 && player === board[i+1][j-1] && player === board[i+2][j-2] && player === board[i+3][j-3]) {
+                console.log(`Player ${player} won`);
+                turn = -1 * player;
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+function checkWin() {
+    return checkColumns() || checkRows() || checkAscendingDiagonals() || checkDescendingDiagonals();
+}
+
+render();
+document.querySelector("#table-container").addEventListener("click", (e) => playerMove(e))
--- a/style.css
+++ b/style.css
@ -0,0 +1,23 @@
+
+#table-container {
+    text-align: center;
+}
+
+table {
+    background-color: blue
+}
+
+td {
+    background-color:white;
+    width:5em;
+    height:5em;
+    border-radius: 100%;
+    border: solid 0.2em blue
+}
+.player1 {
+    background-color: red;
+}
+
+.player2 {
+    background-color: yellow;
+}