Veuillez vous connecter à votre compte.
Explications:
La carte mémoire est un simple jeu de cartes assorties dans lequel toutes les cartes sont retournées sur une surface et deux cartes sont retournées face visible à chaque tour. L'objectif de ce jeu est de faire correspondre toutes les paires de cartes.
Dans ce jeu (Memory Card Game en JavaScript), vous verrez les deux démos. Dans la démo 1, il y a 16 cartes où toutes les deux cartes ont les mêmes images, mais chaque carte est placée au hasard, et vous devez les trouver. Il n'y a pas de limite de temps pour trouver les paires de cartes.
Recommandée:
Dans la démo 2, tout est comme dans la démo 1, mais il y a un temps limite de 30 secondes, et il faut trouver la paire de cartes dans ce temps imparti.
Pour créer ce jeu en JavaScript. Tout d'abord, vous devez créer trois fichiers : HTML, CSS et JavaScript. Après avoir créé ces fichiers, vous devez coller les codes donnés dans votre fichier.
N'oubliez pas que si vous copiez-collez les codes, vous n'obtiendrez pas les images utilisées dans ce jeu, et vous n'obtiendrez pas non plus les codes sources de la démo 2 de ce jeu. Si vous les voulez, vous pouvez facilement télécharger les fichiers source de ce jeu de carte mémoire à partir du bouton de téléchargement inférieur
<!DOCTYPE html>
<!-- Coding By Coding Team
-->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Memory Card Game in JavaScript | Coding Team</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<ul class="cards">
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-1.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-6.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-3.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-2.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-1.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-5.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-2.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-6.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-3.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-5.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #6563FF;
}
.wrapper{
padding: 25px;
border-radius: 10px;
background: #F8F8F8;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.cards, .card, .view{
display: flex;
align-items: center;
justify-content: center;
}
.cards{
height: 400px;
width: 400px;
flex-wrap: wrap;
justify-content: space-between;
}
.cards .card{
cursor: pointer;
list-style: none;
user-select: none;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
height: calc(100% / 4 - 10px);
width: calc(100% / 4 - 10px);
}
.card.shake{
animation: shake 0.35s ease-in-out;
}
@keyframes shake {
0%, 100%{
transform: translateX(0);
}
20%{
transform: translateX(-13px);
}
40%{
transform: translateX(13px);
}
60%{
transform: translateX(-8px);
}
80%{
transform: translateX(8px);
}
}
.card .view{
width: 100%;
height: 100%;
position: absolute;
border-radius: 7px;
background: #fff;
pointer-events: none;
backface-visibility: hidden;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
transition: transform 0.25s linear;
}
.card .front-view img{
width: 19px;
}
.card .back-view img{
max-width: 45px;
}
.card .back-view{
transform: rotateY(-180deg);
}
.card.flip .back-view{
transform: rotateY(0);
}
.card.flip .front-view{
transform: rotateY(180deg);
}
@media screen and (max-width: 700px) {
.cards{
height: 350px;
width: 350px;
}
.card .front-view img{
width: 17px;
}
.card .back-view img{
max-width: 40px;
}
}
@media screen and (max-width: 530px) {
.cards{
height: 300px;
width: 300px;
}
.card .front-view img{
width: 15px;
}
.card .back-view img{
max-width: 35px;
}
}
const cards = document.querySelectorAll(".card");
let matched = 0;
let cardOne, cardTwo;
let disableDeck = false;
function flipCard({target: clickedCard}) {
if(cardOne !== clickedCard && !disableDeck) {
clickedCard.classList.add("flip");
if(!cardOne) {
return cardOne = clickedCard;
}
cardTwo = clickedCard;
disableDeck = true;
let cardOneImg = cardOne.querySelector(".back-view img").src,
cardTwoImg = cardTwo.querySelector(".back-view img").src;
matchCards(cardOneImg, cardTwoImg);
}
}
function matchCards(img1, img2) {
if(img1 === img2) {
matched++;
if(matched == 8) {
setTimeout(() => {
return shuffleCard();
}, 1000);
}
cardOne.removeEventListener("click", flipCard);
cardTwo.removeEventListener("click", flipCard);
cardOne = cardTwo = "";
return disableDeck = false;
}
setTimeout(() => {
cardOne.classList.add("shake");
cardTwo.classList.add("shake");
}, 400);
setTimeout(() => {
cardOne.classList.remove("shake", "flip");
cardTwo.classList.remove("shake", "flip");
cardOne = cardTwo = "";
disableDeck = false;
}, 1200);
}
function shuffleCard() {
matched = 0;
disableDeck = false;
cardOne = cardTwo = "";
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];
arr.sort(() => Math.random() > 0.5 ? 1 : -1);
cards.forEach((card, i) => {
card.classList.remove("flip");
let imgTag = card.querySelector(".back-view img");
imgTag.src = `images/img-${arr[i]}.png`;
card.addEventListener("click", flipCard);
});
}
shuffleCard();
cards.forEach(card => {
card.addEventListener("click", flipCard);
});
C'est tout, vous avez maintenant créé avec succès un jeu de mémoire Si votre code ne fonctionne pas ou si vous rencontrez des problèmes, veuillez télécharger les fichiers de code source à partir du bouton de téléchargement indiqué. C'est gratuit et un fichier .zip sera téléchargé puis vous devrez l'extraire.
Télécharger le code source
Pour télécharger le fichier aller y sur le groupe Coding Team et taper @jeu pour pouvoir débloquer le mot de passe
Télécharger
×
Taper @jeu dans le groupe pour recevoir le mot de passe! Cliquer-moi pour aller dans le groupe
FIN DU PROJECT
Merci pour la visite. J'espère que vous avez appris aussi. Merci de partager mon contenu/cours sur les réseaux sociaux. Si vous avez des questions/suggestions sur ce sujet, veuillez soumettre un seul commentaire. Je répondrai avec votre réponse pendant un maximum de 24 heures. Bon codage!
