151 lines
5.3 KiB
HTML
151 lines
5.3 KiB
HTML
|
<!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>
|