From 29674188f9a7c49f6b54bb2b7293bd8df1a03587 Mon Sep 17 00:00:00 2001 From: Sam Hadow Date: Wed, 29 Jan 2025 16:41:46 +0100 Subject: [PATCH] v1 connect4 --- index.html | 13 ++++++ script.js | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 23 ++++++++++ 3 files changed, 166 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..d6abc71 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + + + + +
Activez JavaScript pour jouer.
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a97f196 --- /dev/null +++ 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)) diff --git a/style.css b/style.css new file mode 100644 index 0000000..ba0a47e --- /dev/null +++ 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; +}