sam.hadow/connect4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2 games at the same time

Browse Source
This commit is contained in:
Sam Hadow 2025-01-29 18:44:45 +01:00
parent 18ac780202
commit 41ddcb3144
3 changed files with 155 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -9,5 +9,7 @@
</head> </head>
<body> <body>
<div id="table-container">Activez JavaScript pour jouer.</div> <div id="table-container">Activez JavaScript pour jouer.</div>
<br/>
<div id="table-container2"></div>
</body> </body>
</html> </html>

117
script.js
View File

@ -1,35 +1,36 @@
class Connect4Game {
let board = Array(6).fill().map(() => Array(7).fill(0)); constructor(container) {
console.log(board); this.tableContainer = document.querySelector(container);
this.reset();
let turn = 0; this.tableContainer.addEventListener("click", (e) => this.playerMove(e));
function reset() {
turn = 0;
board = Array(6).fill().map(() => Array(7).fill(0));
} }
function set(column) { reset() {
this.turn = 0;
this.board = Array(6).fill().map(() => Array(7).fill(0));
this.render();
}
set(column) {
if (column >= 0 && column < 7) { if (column >= 0 && column < 7) {
for (let i=5; i>=0; i+=-1) { for (let i = 5; i >= 0; i--) {
if (board[i][column] == 0) { if (this.board[i][column] === 0) {
board[i][column] = turn+1; this.board[i][column] = this.turn + 1;
console.log(`Player ${turn+1} placed at (${i}, ${column})`); console.log(`Player ${this.turn + 1} placed at (${i}, ${column})`);
turn ^= 1; this.turn ^= 1;
return i; return i;
} }
} }
console.log(`Player ${turn+1} could not place, column ${column} full`); console.log(`Player ${this.turn + 1} could not place, column ${column} full`);
return false; return false;
} }
} }
function render(win) { render(win = null) {
const tableContainer = document.querySelector("#table-container"); this.tableContainer.innerHTML = '';
tableContainer.innerHTML = '';
if (win) { if (win) {
const winText = document.createTextNode(`player ${win[0][0]} won. Click on the board to reset the game.`); const winText = document.createTextNode(`Player ${win[0][0]} won. Click on the board to reset the game.`);
tableContainer.appendChild(winText); this.tableContainer.appendChild(winText);
} }
const table = document.createElement("table"); const table = document.createElement("table");
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
@ -40,48 +41,46 @@ function render(win) {
const player = win.find(([_, x, y]) => x === i && y === j)[0]; const player = win.find(([_, x, y]) => x === i && y === j)[0];
cell.classList.add(`winning${player}`); cell.classList.add(`winning${player}`);
} }
if (board[i][j] === 1) { if (this.board[i][j] === 1) {
cell.classList.add("player1"); cell.classList.add("player1");
} else if (board[i][j] === 2) { } else if (this.board[i][j] === 2) {
cell.classList.add("player2"); cell.classList.add("player2");
} }
row.appendChild(cell); row.appendChild(cell);
} }
table.appendChild(row); table.appendChild(row);
} }
tableContainer.appendChild(table); this.tableContainer.appendChild(table);
} }
function playerMove(e) { playerMove(e) {
if (turn == -1 || turn == -2) { if (this.turn === -1 || this.turn === -2) {
reset() this.reset();
render()
} else { } else {
column = e.target.cellIndex const column = e.target.cellIndex;
console.log(column) this.set(column);
set(column) const result = this.checkWin();
result = checkWin();
if (result) { if (result) {
turn = (result[0][0])*-1 this.turn = (result[0][0]) * -1;
} }
render(result) this.render(result);
} }
} }
function checkColumns() { checkColumns() {
for (let j = 0; j < 7; j++) { for (let j = 0; j < 7; j++) {
let ctr = 0; let ctr = 0;
let winningCells = []; let winningCells = [];
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
if (board[i][j] != 0 && (board[i][j] === board[i+1]?.[j])) { if (this.board[i][j] !== 0 && this.board[i][j] === this.board[i + 1]?.[j]) {
ctr++; ctr++;
winningCells.push([board[i][j], i, j]); winningCells.push([this.board[i][j], i, j]);
} else { } else {
ctr = 0; ctr = 0;
winningCells = []; winningCells = [];
} }
if (ctr === 3) { if (ctr === 3) {
winningCells.push([board[i+1][j], i+1, j]); winningCells.push([this.board[i + 1][j], i + 1, j]);
return winningCells; return winningCells;
} }
} }
@ -89,20 +88,20 @@ function checkColumns() {
return null; return null;
} }
function checkRows() { checkRows() {
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
let ctr = 0; let ctr = 0;
let winningCells = []; let winningCells = [];
for (let j = 0; j < 7; j++) { for (let j = 0; j < 7; j++) {
if (board[i][j] != 0 && (board[i][j] === board[i][j+1])) { if (this.board[i][j] !== 0 && this.board[i][j] === this.board[i][j + 1]) {
ctr++; ctr++;
winningCells.push([board[i][j], i, j]); winningCells.push([this.board[i][j], i, j]);
} else { } else {
ctr = 0; ctr = 0;
winningCells = []; winningCells = [];
} }
if (ctr === 3) { if (ctr === 3) {
winningCells.push([board[i][j+1], i, j+1]); winningCells.push([this.board[i][j + 1], i, j + 1]);
return winningCells; return winningCells;
} }
} }
@ -110,11 +109,14 @@ function checkRows() {
return null; return null;
} }
function checkDescendingDiagonals() { checkDescendingDiagonals() {
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
for (let j = 0; j < 4; j++) { for (let j = 0; j < 4; j++) {
let player = board[i][j]; let player = this.board[i][j];
if (player !== 0 && player === board[i+1][j+1] && player === board[i+2][j+2] && player === board[i+3][j+3]) { if (player !== 0 &&
player === this.board[i + 1][j + 1] &&
player === this.board[i + 2][j + 2] &&
player === this.board[i + 3][j + 3]) {
return [ return [
[player, i, j], [player, i, j],
[player, i + 1, j + 1], [player, i + 1, j + 1],
@ -127,11 +129,14 @@ function checkDescendingDiagonals() {
return null; return null;
} }
function checkAscendingDiagonals() { checkAscendingDiagonals() {
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
for (let j = 3; j < 7; j++) { for (let j = 3; j < 7; j++) {
let player = board[i][j]; let player = this.board[i][j];
if (player !== 0 && player === board[i+1][j-1] && player === board[i+2][j-2] && player === board[i+3][j-3]) { if (player !== 0 &&
player === this.board[i + 1][j - 1] &&
player === this.board[i + 2][j - 2] &&
player === this.board[i + 3][j - 3]) {
return [ return [
[player, i, j], [player, i, j],
[player, i + 1, j - 1], [player, i + 1, j - 1],
@ -144,31 +149,33 @@ function checkAscendingDiagonals() {
return null; return null;
} }
function checkWin() { checkWin() {
let winArray = []; let winArray = [];
let columnWin = checkColumns(); let columnWin = this.checkColumns();
if (columnWin) { if (columnWin) {
winArray = winArray.concat(columnWin); winArray = winArray.concat(columnWin);
} }
let rowWin = checkRows(); let rowWin = this.checkRows();
if (rowWin) { if (rowWin) {
winArray = winArray.concat(rowWin); winArray = winArray.concat(rowWin);
} }
let descendingDiagonalWin = checkDescendingDiagonals(); let descendingDiagonalWin = this.checkDescendingDiagonals();
if (descendingDiagonalWin) { if (descendingDiagonalWin) {
winArray = winArray.concat(descendingDiagonalWin); winArray = winArray.concat(descendingDiagonalWin);
} }
let ascendingDiagonalWin = checkAscendingDiagonals(); let ascendingDiagonalWin = this.checkAscendingDiagonals();
if (ascendingDiagonalWin) { if (ascendingDiagonalWin) {
winArray = winArray.concat(ascendingDiagonalWin); winArray = winArray.concat(ascendingDiagonalWin);
} }
return winArray.length > 0 ? winArray : null; return winArray.length > 0 ? winArray : null;
} }
}
render(null);
document.querySelector("#table-container").addEventListener("click", (e) => playerMove(e)) const game = new Connect4Game("#table-container");
const game2 = new Connect4Game("#table-container2");

4
style.css
View File

@ -1,8 +1,4 @@
#table-container {
text-align: center;
}
table { table {
background-color: blue background-color: blue
} }