Dans cet article, nous allons voir comment créer un jeu de mémoire simple en utilisant HTML, CSS et JavaScript. Nous expliquerons chaque morceau de code étape par étape afin que même ceux qui voient la programmation pour la première fois puissent comprendre et reproduire le résultat. Nous verrons comment créer une structure de page, la styliser et ajouter une logique de jeu pour donner vie à vos cartes. Commençons ! 🚀
1. Qu'est-ce qu'un jeu de mémoire ? 🧠
Le jeu de mémoire (ou « Memory Game ») est un jeu classique dans lequel le joueur doit trouver des paires de cartes identiques, en les ouvrant à tour de rôle. La tâche principale est de mémoriser l'emplacement de chaque carte afin de trouver les paires avec succès. C'est un excellent exercice pour entraîner la mémoire et la concentration.
2. Structure du projet 📁
Notre projet se compose de trois fichiers principaux :
index.html: la structure du jeu, ce que l'utilisateur voit.
style.css: styles qui rendent le jeu beau et agréable à regarder.
script.js: logique du jeu qui détermine le comportement des cartes lors de l'interaction avec l'utilisateur.
Nous avons également un dossier images, contenant des images de cartes qui seront utilisées dans le jeu.
3. HTML : créer la base de la page 📝
Commençons par le fichier HTML. Il contient la structure de base de notre jeu, qui est un plateau de jeu et des fichiers de style et de script connectés :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Игра на память</title>
</head>
<body>
<div class="game-board">
<!-- Карты будут генерироваться здесь -->
</div>
<script src="script.js"></script>
</body>
</html>Explication du code
<div class="game-board">: Il s'agit du conteneur dans lequel toutes les cartes seront placées. Plus tard, nous les ajouterons dynamiquement à l'aide de JavaScript. C'est le principal endroit où l'utilisateur interagit avec le jeu.<link rel="stylesheet" href="style.css">: Nous connectons le fichier CSS pour styliser notre jeu et le rendre visuellement attrayant.<script src="script.js">: On connecte JavaScript pour ajouter la logique du jeu et rendre le jeu interactif.
4. CSS : ajouter de la beauté 🎨
Passons maintenant au CSS. Stylisons notre jeu pour qu'il soit attrayant et agréable pour le joueur.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 10px;
}
.card {
width: 100px;
height: 150px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.card img {
max-width: 100%;
max-height: 100%;
display: none;
}
.card.flipped img {
display: block;
}Explication du code
body: Centrons tout le contenu à l'écran pour que le jeu soit joli et centré. Cela créera une expérience utilisateur agréable..game-board: Nous utilisons grid layout pour organiser les cartes sous forme de grille. Cela permet de rendre la disposition des cartes soignée et uniforme..card: Styles pour les cartes. Ils auront un beau fond blanc, une ombre et des coins arrondis, ce qui les rendra visuellement attrayants. Lorsque l'utilisateur survole la carte, celle-ci doit sembler interactive..card img: Par défaut, les images des cartes sont masquées, puisque le joueur ne voit d'abord que le dos de la carte..flipped: Lorsque la carte est retournée, nous affichons une image afin que le joueur puisse voir ce qui se cache en dessous.
5. JavaScript : ajout de la logique du jeu 🧩
Maintenant, la partie la plus intéressante : ajoutons la logique du jeu à l'aide de JavaScript. JavaScript est responsable de l'interaction du joueur avec les cartes, de la vérification des correspondances et du contrôle de la progression du jeu. Examinons chaque fonction :
const cardsArray = [
{ name: 'card1', img: 'images/card1.png' },
{ name: 'card2', img: 'images/card2.png' },
// Ajoutez les autres paires de cartes
];
let firstCard = null;
let secondCard = null;
let lockBoard = false;
function createBoard() {
const gameBoard = document.querySelector('.game-board');
const shuffledCards = [...cardsArray, ...cardsArray].sort(() => 0.5 - Math.random());
shuffledCards.forEach(card => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.name = card.name;
const cardImage = document.createElement('img');
cardImage.src = card.img;
cardElement.appendChild(cardImage);
cardElement.addEventListener('click', flipCard);
gameBoard.appendChild(cardElement);
});
}
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flipped');
if (!firstCard) {
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
if (firstCard.dataset.name === secondCard.dataset.name) {
disableCards();
} else {
unflipCards();
}
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flipped');
secondCard.classList.remove('flipped');
resetBoard();
}, 1000);
}
function resetBoard() {
[firstCard, secondCard, lockBoard] = [null, null, false];
}
document.addEventListener('DOMContentLoaded', createBoard);Explication du code
Tableau
cardsArray: Contient des objets avec des informations sur les cartes, y compris leur nom et leur image. Nous dupliquons chaque carte pour créer des paires.Variables
firstCard,secondCard,lockBoard: Ces variables aident à suivre l'état du jeu.firstCardetsecondCardstockent des informations sur les cartes retournées actuelles, etlockBoardempêche le retournement d'autres cartes pendant la vérification des correspondances.Fonction
createBoard(): crée un plateau de jeu. Nous mélangeons les cartes pour que chaque jeu soit unique et intéressant, puis nous ajoutons les cartes au tableau.Fonction
flipCard(): contrôle le retournement de la carte. S'il s'agit de la première carte retournée, elle est enregistrée dansfirstCard. S'il s'agit de la deuxième carte, vérifiez si elles correspondent.Fonction
checkForMatch(): Compare deux cartes retournées. S'ils correspondent,disableCards()est appelé pour désactiver la possibilité de retourner ces cartes.Fonctions
disableCards()etunflipCards(): Si les cartes correspondent, nous les laissons ouvertes et désactivons l'événement de clic. Si elles ne correspondent pas, retournez-les après une seconde.Fonction
resetBoard(): Réinitialise les valeurs des variables pour pouvoir continuer le jeu sans erreurs.Événement
DOMContentLoaded: Garantit que notre fonctioncreateBoard()sera appelée lorsque tout le code HTML sera chargé.
6. Conclusion 🎉
Félicitations ! Vous avez maintenant une compréhension complète de la façon de créer un jeu de mémoire simple en utilisant HTML, CSS et JavaScript. Nous sommes passés d'une structure HTML de base à une logique de jeu complexe utilisant JavaScript. Ce jeu est un excellent moyen de pratiquer les bases de la programmation et d'améliorer vos compétences en DOM. N'ayez pas peur d'expérimenter et d'ajouter de nouvelles fonctionnalités, comme un compteur de points ou une minuterie ! 😊