모각미니사례 | 4X4 카드맞추기 게임

Create a 4x4 memory card matching game using HTML, CSS, and JavaScript based on the 8 image files provided.

**1. Game Assets:**
   - You will be given 8 unique image files (e.g., `image1.png`, `image2.png`, ..., `image8.png`).
   - Use these 8 images to create 8 pairs of cards. This means each unique image will appear on exactly two cards.

**2. Game Board:**
   - Create a 4x4 grid that holds a total of 16 cards.
   - At the start of the game, shuffle the 8 pairs of cards and place them face down on the grid.

**3. Gameplay Logic:**
   - A player can click on a face-down card to flip it over and reveal its image.
   - A maximum of two cards can be flipped at a time.
   - If the two flipped cards show the same image, they are a match. They should remain face-up and become unclickable.
   - If the two flipped cards do not match, they should automatically flip back to their face-down position after a 1-second delay.

**4. Game State Tracking:**
   - Implement a "Moves" counter that increments by one each time a player attempts to match a pair.
   - The game ends when all 8 pairs have been successfully matched.
   - Upon completion, display a "You Win!" message along with the total number of moves taken.

**5. Styling and Animation:**
   - Style the cards with a uniform back design. The front of the cards will be the provided images.
   - Add a smooth CSS card-flipping animation for a better user experience.