<!DOCTYPE html>
<html>
<head>
<style>
.plateau {
display: grid;
grid-template-columns: repeat(7, 7%); /* Chaque colonne occupe la même fraction de l'espace disponible */
}
.cell {
width: 100%;
padding-top: 100%; /* Pour garder les cases carrées */
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%; /* Pour créer des cercles */
}
.rouge {
background-color: red;
border-radius: 50%; /* Pour créer des cercles */
}
.jaune {
background-color: yellow;
border-radius: 50%; /* Pour créer des cercles */
}
</style>
</head>
<body>
<div class="plateau" id="plateau"></div>
<script>
const numrangées = 6;
const numcolonnes = 7;
const plateau = document.getElementById("plateau");
let coupsJoues = 0;
let joueurActuel = "rouge";
const cells = [];
function creercell(rangée, colonne) {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.dataset.row = rangée;
cell.dataset.col = colonne;
plateau.appendChild(cell);
cells.push(cell);
}
function changeJoueur() {
joueurActuel = joueurActuel === "rouge" ? "jaune" : "rouge";
}
function verifVictoire(rangée, colonne) {
const currentcell = cells.find(c => parseInt(c.dataset.row) === rangée && parseInt(c.dataset.col) === colonne);
const currentColor = currentcell.classList.contains("rouge") ? "rouge" : "jaune";
// verif alignement horizontal
let count = 0;
for (let i = colonne - 3; i <= colonne + 3; i++) {
const cell = cells.find(c => parseInt(c.dataset.row) === rangée && parseInt(c.dataset.col) === i);
if (cell && cell.classList.contains(currentColor)) {
count++;
if (count === 4) {
return true;
}
} else {
count = 0;
}
}
// verif alignement vertical
count = 0;
for (let i = rangée - 3; i <= rangée + 3; i++) {
const cell = cells.find(c => parseInt(c.dataset.row) === i && parseInt(c.dataset.col) === colonne);
if (cell && cell.classList.contains(currentColor)) {
count++;
if (count === 4) {
return true;
}
} else {
count = 0;
}
}
// verif alignement diagonal
count = 0;
for (let i = -3; i <= 3; i++) {
const cell = cells.find(c => parseInt(c.dataset.row) === rangée + i && parseInt(c.dataset.col) === colonne + i);
if (cell && cell.classList.contains(currentColor)) {
count++;
if (count === 4) {
return true;
}
} else {
count = 0;
}
}
// verif alignement anti-diagonal
count = 0;
for (let i = -3; i <= 3; i++) {
const cell = cells.find(c => parseInt(c.dataset.row) === rangée - i && parseInt(c.dataset.col) === colonne + i);
if (cell && cell.classList.contains(currentColor)) {
count++;
if (count === 4) {
return true;
}
} else {
count = 0;
}
}
return false;
}
for (let rangée = 0; rangée < numrangées; rangée++) {
for (let colonne = 0; colonne < numcolonnes; colonne++) {
creercell(rangée, colonne);
}
}
cells.forEach(cell => {
cell.addEventListener("click", function () {
const colonne = parseInt(cell.dataset.col);
for (let rangée = numrangées - 1; rangée >= 0; rangée--) {
const currentcell = cells.find(c => parseInt(c.dataset.row) === rangée && parseInt(c.dataset.col) === colonne);
if (!currentcell.classList.contains("rouge") && !currentcell.classList.contains("jaune")) {
currentcell.classList.add(joueurActuel);
coupsJoues++;
if (verifVictoire(rangée, colonne)) {
alert("Joueur " + joueurActuel + " a gagné !");
location.reload();
}else if (coupsJoues === numrangées * numcolonnes) {
alert("Égalité ! Aucun joueur n'a gagné.");
location.reload();
}
else {
changeJoueur();
}
break;
}
}
});
});
</script>
</body>
</html>