2 games at the same time
This commit is contained in:
parent
18ac780202
commit
41ddcb3144
@ -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>
|
||||||
|
|||||||
299
script.js
299
script.js
@ -1,174 +1,181 @@
|
|||||||
|
class Connect4Game {
|
||||||
|
constructor(container) {
|
||||||
|
this.tableContainer = document.querySelector(container);
|
||||||
|
this.reset();
|
||||||
|
this.tableContainer.addEventListener("click", (e) => this.playerMove(e));
|
||||||
|
}
|
||||||
|
|
||||||
let board = Array(6).fill().map(() => Array(7).fill(0));
|
reset() {
|
||||||
console.log(board);
|
this.turn = 0;
|
||||||
|
this.board = Array(6).fill().map(() => Array(7).fill(0));
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
let turn = 0;
|
set(column) {
|
||||||
|
if (column >= 0 && column < 7) {
|
||||||
function reset() {
|
for (let i = 5; i >= 0; i--) {
|
||||||
turn = 0;
|
if (this.board[i][column] === 0) {
|
||||||
board = Array(6).fill().map(() => Array(7).fill(0));
|
this.board[i][column] = this.turn + 1;
|
||||||
}
|
console.log(`Player ${this.turn + 1} placed at (${i}, ${column})`);
|
||||||
|
this.turn ^= 1;
|
||||||
function set(column) {
|
return i;
|
||||||
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 ${this.turn + 1} could not place, column ${column} full`);
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
console.log(`Player ${turn+1} could not place, column ${column} full`);
|
|
||||||
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.`);
|
this.tableContainer.appendChild(winText);
|
||||||
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 (win && win.some(([_, x, y]) => x === i && y === j)) {
|
|
||||||
const player = win.find(([_, x, y]) => x === i && y === j)[0];
|
|
||||||
cell.classList.add(`winning${player}`);
|
|
||||||
}
|
|
||||||
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);
|
const table = document.createElement("table");
|
||||||
}
|
|
||||||
tableContainer.appendChild(table);
|
|
||||||
}
|
|
||||||
|
|
||||||
function playerMove(e) {
|
|
||||||
if (turn == -1 || turn == -2) {
|
|
||||||
reset()
|
|
||||||
render()
|
|
||||||
} else {
|
|
||||||
column = e.target.cellIndex
|
|
||||||
console.log(column)
|
|
||||||
set(column)
|
|
||||||
result = checkWin();
|
|
||||||
if (result) {
|
|
||||||
turn = (result[0][0])*-1
|
|
||||||
}
|
|
||||||
render(result)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkColumns() {
|
|
||||||
for (let j = 0; j < 7; j++) {
|
|
||||||
let ctr = 0;
|
|
||||||
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])) {
|
const row = document.createElement("tr");
|
||||||
ctr++;
|
for (let j = 0; j < 7; j++) {
|
||||||
winningCells.push([board[i][j], i, j]);
|
const cell = document.createElement("td");
|
||||||
} else {
|
if (win && win.some(([_, x, y]) => x === i && y === j)) {
|
||||||
ctr = 0;
|
const player = win.find(([_, x, y]) => x === i && y === j)[0];
|
||||||
winningCells = [];
|
cell.classList.add(`winning${player}`);
|
||||||
|
}
|
||||||
|
if (this.board[i][j] === 1) {
|
||||||
|
cell.classList.add("player1");
|
||||||
|
} else if (this.board[i][j] === 2) {
|
||||||
|
cell.classList.add("player2");
|
||||||
|
}
|
||||||
|
row.appendChild(cell);
|
||||||
}
|
}
|
||||||
if (ctr === 3) {
|
table.appendChild(row);
|
||||||
winningCells.push([board[i+1][j], i+1, j]);
|
}
|
||||||
return winningCells;
|
this.tableContainer.appendChild(table);
|
||||||
|
}
|
||||||
|
|
||||||
|
playerMove(e) {
|
||||||
|
if (this.turn === -1 || this.turn === -2) {
|
||||||
|
this.reset();
|
||||||
|
} else {
|
||||||
|
const column = e.target.cellIndex;
|
||||||
|
this.set(column);
|
||||||
|
const result = this.checkWin();
|
||||||
|
if (result) {
|
||||||
|
this.turn = (result[0][0]) * -1;
|
||||||
}
|
}
|
||||||
|
this.render(result);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkRows() {
|
checkColumns() {
|
||||||
for (let i = 0; i < 6; i++) {
|
|
||||||
let ctr = 0;
|
|
||||||
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])) {
|
let ctr = 0;
|
||||||
ctr++;
|
let winningCells = [];
|
||||||
winningCells.push([board[i][j], i, j]);
|
for (let i = 0; i < 6; i++) {
|
||||||
} else {
|
if (this.board[i][j] !== 0 && this.board[i][j] === this.board[i + 1]?.[j]) {
|
||||||
ctr = 0;
|
ctr++;
|
||||||
winningCells = [];
|
winningCells.push([this.board[i][j], i, j]);
|
||||||
}
|
} else {
|
||||||
if (ctr === 3) {
|
ctr = 0;
|
||||||
winningCells.push([board[i][j+1], i, j+1]);
|
winningCells = [];
|
||||||
return winningCells;
|
}
|
||||||
|
if (ctr === 3) {
|
||||||
|
winningCells.push([this.board[i + 1][j], i + 1, j]);
|
||||||
|
return winningCells;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkDescendingDiagonals() {
|
checkRows() {
|
||||||
for (let i = 0; i < 3; i++) {
|
for (let i = 0; i < 6; i++) {
|
||||||
for (let j = 0; j < 4; j++) {
|
let ctr = 0;
|
||||||
let player = board[i][j];
|
let winningCells = [];
|
||||||
if (player !== 0 && player === board[i+1][j+1] && player === board[i+2][j+2] && player === board[i+3][j+3]) {
|
for (let j = 0; j < 7; j++) {
|
||||||
return [
|
if (this.board[i][j] !== 0 && this.board[i][j] === this.board[i][j + 1]) {
|
||||||
[player, i, j],
|
ctr++;
|
||||||
[player, i+1, j+1],
|
winningCells.push([this.board[i][j], i, j]);
|
||||||
[player, i+2, j+2],
|
} else {
|
||||||
[player, i+3, j+3]
|
ctr = 0;
|
||||||
];
|
winningCells = [];
|
||||||
|
}
|
||||||
|
if (ctr === 3) {
|
||||||
|
winningCells.push([this.board[i][j + 1], i, j + 1]);
|
||||||
|
return winningCells;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkAscendingDiagonals() {
|
checkDescendingDiagonals() {
|
||||||
for (let i = 0; i < 3; i++) {
|
for (let i = 0; i < 3; i++) {
|
||||||
for (let j = 3; j < 7; 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 &&
|
||||||
return [
|
player === this.board[i + 1][j + 1] &&
|
||||||
[player, i, j],
|
player === this.board[i + 2][j + 2] &&
|
||||||
[player, i+1, j-1],
|
player === this.board[i + 3][j + 3]) {
|
||||||
[player, i+2, j-2],
|
return [
|
||||||
[player, i+3, j-3]
|
[player, i, j],
|
||||||
];
|
[player, i + 1, j + 1],
|
||||||
|
[player, i + 2, j + 2],
|
||||||
|
[player, i + 3, j + 3]
|
||||||
|
];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
checkAscendingDiagonals() {
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
for (let j = 3; j < 7; j++) {
|
||||||
|
let player = this.board[i][j];
|
||||||
|
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 [
|
||||||
|
[player, i, j],
|
||||||
|
[player, i + 1, j - 1],
|
||||||
|
[player, i + 2, j - 2],
|
||||||
|
[player, i + 3, j - 3]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
checkWin() {
|
||||||
|
let winArray = [];
|
||||||
|
|
||||||
|
let columnWin = this.checkColumns();
|
||||||
|
if (columnWin) {
|
||||||
|
winArray = winArray.concat(columnWin);
|
||||||
|
}
|
||||||
|
|
||||||
|
let rowWin = this.checkRows();
|
||||||
|
if (rowWin) {
|
||||||
|
winArray = winArray.concat(rowWin);
|
||||||
|
}
|
||||||
|
|
||||||
|
let descendingDiagonalWin = this.checkDescendingDiagonals();
|
||||||
|
if (descendingDiagonalWin) {
|
||||||
|
winArray = winArray.concat(descendingDiagonalWin);
|
||||||
|
}
|
||||||
|
|
||||||
|
let ascendingDiagonalWin = this.checkAscendingDiagonals();
|
||||||
|
if (ascendingDiagonalWin) {
|
||||||
|
winArray = winArray.concat(ascendingDiagonalWin);
|
||||||
|
}
|
||||||
|
|
||||||
|
return winArray.length > 0 ? winArray : null;
|
||||||
}
|
}
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkWin() {
|
|
||||||
let winArray = [];
|
|
||||||
|
|
||||||
let columnWin = checkColumns();
|
const game = new Connect4Game("#table-container");
|
||||||
if (columnWin) {
|
const game2 = new Connect4Game("#table-container2");
|
||||||
winArray = winArray.concat(columnWin);
|
|
||||||
}
|
|
||||||
|
|
||||||
let rowWin = checkRows();
|
|
||||||
if (rowWin) {
|
|
||||||
winArray = winArray.concat(rowWin);
|
|
||||||
}
|
|
||||||
|
|
||||||
let descendingDiagonalWin = checkDescendingDiagonals();
|
|
||||||
if (descendingDiagonalWin) {
|
|
||||||
winArray = winArray.concat(descendingDiagonalWin);
|
|
||||||
}
|
|
||||||
|
|
||||||
let ascendingDiagonalWin = checkAscendingDiagonals();
|
|
||||||
if (ascendingDiagonalWin) {
|
|
||||||
winArray = winArray.concat(ascendingDiagonalWin);
|
|
||||||
}
|
|
||||||
|
|
||||||
return winArray.length > 0 ? winArray : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
render(null);
|
|
||||||
document.querySelector("#table-container").addEventListener("click", (e) => playerMove(e))
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user