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;
 }