86 lines
2.9 KiB
JavaScript
86 lines
2.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import './index.css';
|
|
|
|
const cardImages = [
|
|
{ id: 1, img: './images/angular.png' },
|
|
{ id: 2, img: './images/css.png' },
|
|
{ id: 3, img: './images/html.png' },
|
|
{ id: 4, img: './images/js.png' },
|
|
{ id: 5, img: './images/nodejs.png' },
|
|
{ id: 6, img: './images/react.png' },
|
|
{ id: 7, img: './images/scss.png' },
|
|
{ id: 8, img: './images/vue.png' },
|
|
];
|
|
|
|
// instead of doing previous method we can also do this
|
|
const shuffledCards = [...cardImages, ...cardImages].sort(() => Math.random() - 0.5);
|
|
|
|
const MemoryCardGame = () => {
|
|
const [cards, setCards] = useState(shuffledCards.map((card, index) => ({ ...card, flipped: false, id: index })));
|
|
const [flippedCards, setFlippedCards] = useState([]);
|
|
const [score, setScore] = useState(0);
|
|
const [attempts, setAttempts] = useState(0);
|
|
const [showingImages, setShowingImages] = useState(true);
|
|
|
|
useEffect(() => {
|
|
// Sirf 2 sec tk images show karega
|
|
const timer = setTimeout(() => {
|
|
setShowingImages(false);
|
|
setCards(prevCards => prevCards.map(card => ({ ...card, flipped: false })));
|
|
}, 2000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (flippedCards.length === 2) {
|
|
// Increment attempts when two cards are flipped
|
|
setAttempts(prevAttempts => prevAttempts + 1);
|
|
|
|
const [firstCard, secondCard] = flippedCards;
|
|
|
|
if (firstCard.img === secondCard.img) {
|
|
// Cards matching logic
|
|
setScore(prevScore => prevScore + 1);
|
|
setCards(prevCards => prevCards.map(card =>
|
|
card.img === firstCard.img ? { ...card, flipped: true } : card
|
|
));
|
|
} else {
|
|
// Cards do not match, flip them back after a short delay
|
|
setTimeout(() => {
|
|
setCards(prevCards => prevCards.map(card =>
|
|
card.id === firstCard.id || card.id === secondCard.id ? { ...card, flipped: false } : card
|
|
));
|
|
}, 1000);
|
|
}
|
|
|
|
// Clear flipped cards after processing
|
|
setFlippedCards([]);
|
|
}
|
|
}, [flippedCards]);
|
|
|
|
const handleCardClick = (card) => {
|
|
if (!card.flipped && flippedCards.length < 2 && !showingImages) {
|
|
setCards(prevCards => prevCards.map(c => (c.id === card.id ? { ...c, flipped: true } : c)));
|
|
setFlippedCards(prev => [...prev, card]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="memory-card-game">
|
|
<h1>Memory Card Game</h1>
|
|
<p>Score: {score}</p>
|
|
<p>Attempts: {attempts}</p>
|
|
<div className="card-grid">
|
|
{cards.map(card => (
|
|
<div key={card.id} className={`card ${card.flipped ? 'flipped' : ''}`} onClick={() => handleCardClick(card)}>
|
|
{card.flipped || showingImages ? <img src={card.img} alt="Card" /> : <div className="card-back">?</div>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MemoryCardGame;
|