Les styles définissent l'apparence de la grille et des cellules. La grille est structurée en un modèle de colonnes avec des espaces entre les cellules. Les cellules ont une forme arrondie et changent de couleur au survol. Les jetons des joueurs sont animés pour simuler une chute dans la grille.
.container {
display: flex; /* Utilise Flexbox pour la disposition des éléments enfants */
flex-direction: column; /* Aligne les éléments enfants en colonne (verticalement) */
align-items: center; /* Centre les éléments enfants horizontalement */
justify-content: center; /* Centre les éléments enfants verticalement */
text-align: center; /* Centre le texte à l'intérieur des éléments */
height: 90vh; /* Définit la hauteur du conteneur à 90% de la hauteur de la fenêtre */
}
.grid {
display: grid; /* Utilise la disposition CSS Grid pour les éléments enfants */
grid-template-columns: repeat(7, 50px); /* Crée 7 colonnes de 50 pixels de large chacune */
grid-gap: 5px; /* Ajoute un espace de 5 pixels entre les éléments de la grille */
margin: 20px auto; /* Ajoute une marge de 20 pixels en haut et en bas, et centre horizontalement */
}
.cell {
width: 50px; /* Définit la largeur de chaque cellule à 50 pixels */
height: 50px; /* Définit la hauteur de chaque cellule à 50 pixels */
background-color: #eee; /* Définit la couleur de fond des cellules */
border: 1px solid #ccc; /* Ajoute une bordure grise autour des cellules */
cursor: pointer; /* Change le curseur en une main lorsqu'on passe la souris dessus */
position: relative; /* Permet de positionner les éléments enfants relativement à cette cellule */
border-radius: 50%; /* Arrondit les coins des cellules pour les rendre circulaires */
display: flex; /* Utilise Flexbox pour aligner les éléments enfants */
align-items: center; /* Centre les éléments enfants verticalement */
justify-content: center; /* Centre les éléments enfants horizontalement */
}
.cell:hover {
background-color: #ddd; /* Change la couleur de fond des cellules au survol */
}
.circle {
width: 40px; /* Définit la largeur du cercle à 40 pixels */
height: 40px; /* Définit la hauteur du cercle à 40 pixels */
border-radius: 50%; /* Arrondit les coins pour rendre l'élément circulaire */
position: absolute; /* Positionne le cercle de façon absolue par rapport à son parent */
top: -200px; /* Positionne le cercle 200 pixels au-dessus de son parent */
left: 5px; /* Positionne le cercle à 5 pixels de la gauche de son parent */
transition: top 0.5s ease; /* Ajoute une transition douce de 0,5 seconde pour la propriété 'top' */
}
Ce code gère un jeu interactif de type Puissance 4. Il commence par ajouter des écouteurs d'événements pour les boutons et les cellules de la grille, en initialisant la grille et en gérant les mouvements des joueurs. Lorsqu'un joueur clique sur une cellule, le jeu vérifie si le mouvement entraîne une victoire, et anime visuellement les jetons des joueurs. Une fonction permet également de réinitialiser le jeu après chaque victoire.
// Attends que le DOM soit complètement chargé avant d'exécuter le code
document.addEventListener('DOMContentLoaded', () => {
// Sélectionne le bouton avec l'ID 'animatedButton'
const button = document.getElementById('animatedButton');
// Ajoute un événement 'click' au bouton
button.addEventListener('click', () => {
// Ajoute la classe 'enlarged' au bouton pour déclencher l'animation
button.classList.add('enlarged');
// Supprime la classe 'enlarged' après 327 millisecondes pour terminer l'animation
setTimeout(() => {
button.classList.remove('enlarged');
}, 327);
});
});
// Définition des constantes pour le nombre de lignes et de colonnes
const ROWS = 6;
const COLS = 7;
// Initialisation du joueur actuel (1 ou 2)
let currentPlayer = 1;
// Initialisation de la grille de jeu comme un tableau vide
let grid = [];
// Fonction pour créer la grille de jeu
function createGrid() {
// Sélectionne l'élément de la grille dans le DOM
const gridElement = document.getElementById('grid');
// Boucle pour créer les lignes de la grille
for (let row = 0; row < ROWS; row++) {
// Initialise une nouvelle ligne dans la grille
grid[row] = [];
// Boucle pour créer les colonnes de chaque ligne
for (let col = 0; col < COLS; col++) {
// Crée un nouvel élément div pour chaque cellule
const cell = document.createElement('div');
// Ajoute la classe 'cell' à la cellule
cell.classList.add('cell');
// Ajoute des attributs de données pour la ligne et la colonne
cell.dataset.row = row;
cell.dataset.col = col;
// Ajoute un événement 'click' à la cellule
cell.addEventListener('click', () => handleMove(col));
// Ajoute la cellule à l'élément de la grille dans le DOM
gridElement.appendChild(cell);
// Initialise la cellule dans la grille à 0 (vide)
grid[row][col] = 0;
}
}
}
// Fonction pour gérer le mouvement lorsqu'une cellule est cliquée
function handleMove(col) {
// Boucle à l'envers pour trouver la première cellule vide dans la colonne
for (let row = ROWS - 1; row >= 0; row--) {
// Si la cellule est vide (0)
if (grid[row][col] === 0) {
// Remplit la cellule avec la valeur du joueur actuel
grid[row][col] = currentPlayer;
// Animer le jeton tombant
animateDrop(row, col);
// Vérifie si ce mouvement gagne la partie
if (checkForWin(row, col)) {
// Affiche un message d'alerte après une seconde et réinitialise le jeu
setTimeout(() => {
alert(`Joueur ${currentPlayer} a gagné !`);
resetGame();
}, 1000);
return;
}
// Change le joueur actuel
currentPlayer = currentPlayer === 1 ? 2 : 1;
return;
}
}
}
// Fonction pour animer la chute du jeton
function animateDrop(row, col) {
// Sélectionne la cellule correspondante dans le DOM
const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
// Crée un nouvel élément div pour le jeton
const circle = document.createElement('div');
// Ajoute la classe 'circle' au jeton
circle.classList.add('circle');
// Définir la couleur du jeton en fonction du joueur actuel
circle.style.backgroundColor = currentPlayer === 1 ? 'red' : 'yellow';
// Ajoute le jeton à la cellule
cell.appendChild(circle);
// Déclenche l'animation en changeant la position après 10 millisecondes
setTimeout(() => {
circle.style.top = '5px';
}, 10);
}
// Fonction pour vérifier si un joueur a gagné après un mouvement
function checkForWin(row, col) {
// Vérifie la victoire verticale
if (checkDirection(row, col, 1, 0) + checkDirection(row, col, -1, 0) >= 3) {
return true;
}
// Vérifie la victoire horizontale
if (checkDirection(row, col, 0, 1) + checkDirection(row, col, 0, -1) >= 3) {
return true;
}
// Vérifie la victoire en diagonale /
if (checkDirection(row, col, 1, 1) + checkDirection(row, col, -1, -1) >= 3) {
return true;
}
// Vérifie la victoire en diagonale \
if (checkDirection(row, col, 1, -1) + checkDirection(row, col, -1, 1) >= 3) {
return true;
}
return false;
}
// Fonction pour vérifier une direction spécifique pour la victoire
function checkDirection(row, col, rowChange, colChange) {
// Obtient la valeur du joueur actuel
const currentPlayerValue = grid[row][col];
// Initialise le compteur de jetons alignés
let count = 0;
// Variables pour les prochaines cellules dans la direction
let r = row + rowChange;
let c = col + colChange;
// Boucle tant que les cellules suivantes sont dans les limites et contiennent le jeton du joueur actuel
while (r >= 0 && r < ROWS && c >= 0 && c < COLS && grid[r][c] === currentPlayerValue) {
count++;
r += rowChange;
c += colChange;
}
return count;
}
// Fonction pour réinitialiser le jeu
function resetGame() {
// Réinitialise la grille et le joueur actuel
grid = [];
currentPlayer = 1;
// Vide l'élément de la grille dans le DOM
const gridElement = document.getElementById('grid');
gridElement.innerHTML = '';
// Crée une nouvelle grille
createGrid();
}
// Appelle la fonction pour créer la grille au chargement initial
createGrid();