Memory Card Match Game (Tekion Staff Frontend Developer) | React Machine Coding Round

• Preventing extra clicks: Disable interaction while the game is evaluating the match outcome to avoid unintended behavior.
• Handling wrong match delay: Using setTimeout to briefly show an error state for unmatched cards before flipping them back.
• End condition: The game ends when all pairs are matched, requiring a check for the complete state of the game board.

Solution

To implement the Memory Card Match Game, we will manage the game's state using React functional components and hooks. The entire implementation will be structured in a single file App.tsx. Below is a detailed explanation of the approach followed by the corresponding code.

Approach:

1. Generate a deck of cards with pairs and shuffle them.
2. Render the cards in a grid layout.
3. Handle the click event to flip cards and check for matches.
4. Implement visual feedback for correct and incorrect matches.
5. Check for game completion and render an appropriate message.

Implementation:

JavaScript(App.jsx)
Copy
import React, { useState, useEffect } from 'react';

const cardValues = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D'];
const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
};

const App = () => {
    const [cards, setCards] = useState(shuffleArray([...cardValues]).map((value, index) => ({
        id: index,
        value,
        flipped: false,
        matched: false
    })));
    const [flippedIndices, setFlippedIndices] = useState([]);
    const [disableClicks, setDisableClicks] = useState(false);

    const handleCardClick = (index) => {
        if (disableClicks || cards[index].flipped || cards[index].matched) return;
        const newCards = [...cards];
        newCards[index].flipped = true;
        setFlippedIndices([...flippedIndices, index]);
        setCards(newCards);
    };

    useEffect(() => {
        if (flippedIndices.length === 2) {
            setDisableClicks(true);
            const [firstIndex, secondIndex] = flippedIndices;
            const areMatched = cards[firstIndex].value === cards[secondIndex].value;

            if (!areMatched) {
                setTimeout(() => {
                    const newCards = [...cards];
                    newCards[firstIndex].flipped = false;
                    newCards[secondIndex].flipped = false;
                    setCards(newCards);
                    setDisableClicks(false);
                }, 1000);
            } else {
                const newCards = [...cards];
                newCards[firstIndex].matched = true;
                newCards[secondIndex].matched = true;
                setCards(newCards);
                setDisableClicks(false);
            }
            setFlippedIndices([]);
        }
    }, [flippedIndices]);

    const isGameComplete = cards.every(card => card.matched);

    return (
        <div>
            <h1>Memory Card Match Game</h1>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '10px' }}>
                {cards.map((card, index) => (
                    <div
                        key={card.id}
                        onClick={() => handleCardClick(index)}
                        style={{
                            width: '100px',
                            height: '100px',
                            backgroundColor: card.flipped || card.matched ? 'lightblue' : 'gray',
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            cursor: 'pointer',
                            fontSize: '24px'
                        }}>
                        {card.flipped || card.matched ? card.value : "?"}
                    </div>
                ))}
            </div>
            {isGameComplete && <h2>You Won!</h2>}
        </div>
    );
};

export default App

Conclusion

Similar Questions

• Build a To-Do List Application with React.
• Implement a Tic-Tac-Toe Game using React.
• Create a Quiz App that tracks scores.
• Develop a Simple E-commerce Shopping Cart.
• Code a Responsive Navigation Menu with React.