Next.js: Build a Simple Interactive Memory Game

Written by

javascriptdebugged

in

Ever wanted to build a fun, engaging game that you can share with your friends and family? Something that’s both challenging and a great way to test your memory skills? In this tutorial, we’ll dive into building a simple, yet effective, memory game using Next.js, a powerful React framework that lets us create web applications with ease. We’ll cover everything from setting up the project to deploying your game, making sure you have a solid understanding of the fundamentals.

Why Build a Memory Game?

Building a memory game is an excellent project for several reasons. First, it’s a relatively straightforward project, making it perfect for beginners and intermediate developers looking to hone their skills in Next.js and React. Second, it allows you to practice key concepts like state management, event handling, and component composition. Third, it’s a fun and rewarding project that you can share and showcase your skills with. Finally, it’s a great way to learn about user interface design and user experience (UI/UX).

What You’ll Learn

By the end of this tutorial, you’ll be able to:

  • Set up a Next.js project.
  • Create and manage component states.
  • Handle user interactions (like clicking cards).
  • Implement game logic (matching cards, checking for wins/losses).
  • Style your game using CSS.
  • Deploy your game online.

Prerequisites

Before we begin, make sure you have the following installed:

  • Node.js and npm (or yarn)
  • A code editor (like VS Code)
  • Basic understanding of JavaScript and React

Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app memory-game
cd memory-game

This will create a new Next.js project named “memory-game” and navigate you into the project directory. Next.js uses a file-system based router, which simplifies the process of creating pages. The `pages` directory is where you’ll put your components and define your routes.

Project Structure

Inside your `memory-game` directory, you’ll find a structure similar to this:


memory-game/
├── node_modules/
├── pages/
│   ├── _app.js
│   ├── index.js
│   └── api/
├── public/
│   └── ...
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .gitignore
├── next.config.js
├── package-lock.json
├── package.json
└── README.md

The `pages/index.js` file is the entry point for your home page. We will modify this file to build our game.

Creating the Card Component

Let’s create a reusable card component. Create a new file named `components/Card.js` in your project’s root directory. This component will represent each card in our game.


// components/Card.js
import React from 'react';

const Card = ({
  card, // Card object with id, value, and isFlipped properties
  onClick, // Function to handle card click
  isFlipped, // Boolean indicating if the card is flipped
  isDisabled, // Boolean indicating if the card is disabled
}) => {
  return (
    <div> onClick(card.id) : null}
    >
      {isFlipped ? card.value : '?'}
      {`
        .card {
          width: 80px;
          height: 100px;
          border: 1px solid #ccc;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 2em;
          cursor: pointer;
          margin: 10px;
          background-color: #f0f0f0;
          transition: all 0.3s ease;
        }

        .flipped {
          background-color: #fff;
          border: 1px solid black;
        }

        .disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      `}
      
    </div>
  );
};

export default Card;

This `Card` component accepts several props:

  • `card`: An object containing the card’s `id` and `value`.
  • `onClick`: A function that will be called when the card is clicked.
  • `isFlipped`: A boolean to indicate if the card should be displayed face-up.
  • `isDisabled`: A boolean to disable the card (e.g., during a match check).

The component renders a `div` that represents the card. The content of the card is either the `card.value` (if `isFlipped` is true) or a question mark (“?”). It also includes inline CSS styling for the card’s appearance.

Building the Game Logic in `index.js`

Now, let’s modify the `pages/index.js` file to implement the main game logic. Replace the contents of `pages/index.js` with the following code:


// pages/index.js
import React, { useState, useEffect } from 'react';
import Card from '../components/Card';

const generateCards = () => {
  const cardValues = [
    'A', 'B', 'C', 'D', 'E', 'F', 'A', 'B', 'C', 'D', 'E', 'F'
  ];
  const cards = [];
  cardValues.forEach((value, index) => {
    cards.push({ id: index, value, isFlipped: false, isMatched: false });
  });
  // Shuffle the cards
  for (let i = cards.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [cards[i], cards[j]] = [cards[j], cards[i]];
  }
  return cards;
};

const Home = () => {
  const [cards, setCards] = useState(generateCards());
  const [selectedCards, setSelectedCards] = useState([]);
  const [moves, setMoves] = useState(0);
  const [gameWon, setGameWon] = useState(false);
  const [isProcessing, setIsProcessing] = useState(false);

  useEffect(() => {
    if (selectedCards.length === 2) {
      setIsProcessing(true);
      const [card1, card2] = selectedCards;
      if (cards[card1].value === cards[card2].value) {
        // Match found
        const updatedCards = cards.map((card, index) => {
          if (index === card1 || index === card2) {
            return { ...card, isMatched: true, isFlipped: true };
          }
          return card;
        });
        setCards(updatedCards);
        setSelectedCards([]);
      } else {
        // No match
        setTimeout(() => {
          const updatedCards = cards.map((card, index) => {
            if (index === card1 || index === card2) {
              return { ...card, isFlipped: false };
            }
            return card;
          });
          setCards(updatedCards);
          setSelectedCards([]);
        }, 1000);
      }
      setMoves(prevMoves => prevMoves + 1);
    }
  }, [selectedCards, cards]);

  useEffect(() => {
    if (cards.every(card => card.isMatched)) {
      setGameWon(true);
    }
  }, [cards]);

  useEffect(() => {
    setIsProcessing(false);
  }, [selectedCards])

  const handleCardClick = (id) => {
    if (isProcessing || cards[id].isMatched) return;

    const updatedCards = cards.map((card, index) => {
      if (index === id) {
        return { ...card, isFlipped: true };
      }
      return card;
    });
    setCards(updatedCards);

    setSelectedCards(prevSelectedCards => {
      const newSelectedCards = [...prevSelectedCards, id];
      return newSelectedCards;
    });
  };

  const handleRestart = () => {
    setCards(generateCards());
    setSelectedCards([]);
    setMoves(0);
    setGameWon(false);
  };

  return (
    <div>
      <h1>Memory Game</h1>
      <div>
        <p>Moves: {moves}</p>
        {gameWon && <p>Congratulations! You won!</p>}
        {gameWon && <button>Play Again</button>}
      </div>
      <div>
        {cards.map((card, index) => (
          
        ))}
      </div>
      
        {`
          .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
          }

          h1 {
            margin-bottom: 20px;
          }

          .game-info {
            margin-bottom: 20px;
            text-align: center;
          }

          .card-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 800px;
          }

          button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 5px;
          }
        `}
      
    </div>
  );
};

export default Home;

Let’s break down this code:

  • **Imports:** We import `useState` and `useEffect` from React, and the `Card` component we created earlier.
  • **`generateCards()` function:** This function creates an array of card objects. Each card object has an `id`, `value` (e.g., ‘A’, ‘B’, ‘C’), `isFlipped` (initially `false`), and `isMatched` (initially `false`). The function shuffles the cards to randomize their positions.
  • **State Variables:**
    • `cards`: An array of card objects, representing the current state of the game.
    • `selectedCards`: An array holding the `id`s of the two cards the user has selected.
    • `moves`: Keeps track of the number of moves the player has made.
    • `gameWon`: A boolean indicating whether the game has been won.
    • `isProcessing`: A boolean to prevent the user from clicking cards while the game is checking for matches or flipping cards.
  • **`useEffect` Hooks:**
    • The first `useEffect` hook runs whenever `selectedCards` or `cards` changes. It checks if two cards have been selected. If so, it compares their values. If they match, it marks them as `isMatched`. If they don’t match, it flips them back over after a short delay (1 second). It also increments the `moves` counter.
    • The second `useEffect` hook checks if all cards are matched and sets `gameWon` to `true` if they are.
    • The third `useEffect` hook resets `isProcessing` to `false` when `selectedCards` changes.
  • **`handleCardClick(id)` function:** This function is called when a card is clicked. It updates the `cards` state to flip the selected card and adds the card’s ID to `selectedCards`.
  • **`handleRestart()` function:** This function resets the game to its initial state, generating a new set of cards and resetting the other state variables.
  • **JSX:** The component renders the game interface, including the game title, move counter, and a grid of `Card` components. It maps over the `cards` array and renders a `Card` component for each card, passing the necessary props. It also displays a “Congratulations!” message and a “Play Again” button if the game is won.

Styling the Game

The code includes basic inline styles for the game container, card grid, and the cards themselves. You can customize the styling further by modifying the CSS within the “ tags. Consider adding:

  • Different background colors for the cards.
  • More appealing fonts.
  • Animations for flipping the cards.
  • A game over screen with a final score.

Running Your Game

To run your game, open your terminal, navigate to your project directory (`memory-game`), and run:

npm run dev

This will start the development server, and you can view your game in your browser at `http://localhost:3000`.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • **Incorrect State Updates:** Make sure you’re correctly updating the state using the `setCards` and `setSelectedCards` functions. Remember to use the spread operator (`…`) to create new arrays when updating the state. Incorrect state updates can lead to unexpected behavior and bugs. For example, always create a new array when modifying the `cards` array.
  • **Not Handling Click Events Correctly:** Ensure that the `onClick` handler is correctly passed to the `Card` component and that it’s only active when the card isn’t disabled (e.g., during a match check). Also, make sure the `handleCardClick` function is correctly updating the selected cards.
  • **Forgetting to Shuffle Cards:** The card shuffling logic is crucial for making the game playable. Without shuffling, the game won’t work as expected. Double-check your `generateCards()` function.
  • **CSS Issues:** Incorrect CSS can make the game look broken. Carefully check your CSS to ensure the cards are displayed correctly, and the layout is responsive. Use your browser’s developer tools to inspect the elements and identify any styling problems.
  • **Unnecessary Re-renders:** Optimize your code to avoid unnecessary re-renders. For example, use `React.memo` for the `Card` component if it’s re-rendering too often.

Adding More Features

Once you have the basic memory game working, you can add more features to make it more engaging:

  • **Difficulty Levels:** Allow the user to choose the number of card pairs (e.g., easy, medium, hard).
  • **Timer:** Add a timer to track how long it takes the player to complete the game.
  • **Scoreboard:** Implement a scoreboard to store and display high scores.
  • **Animations:** Add animations for flipping cards, matching pairs, and winning the game.
  • **Sound Effects:** Add sound effects for card flips, matches, and the game win.
  • **Customization:** Allow the user to customize the card images or themes.

Summary / Key Takeaways

In this tutorial, we’ve built a simple memory game using Next.js. We’ve covered the essential aspects of creating a Next.js application, including component creation, state management, event handling, and basic styling. You’ve learned how to create a reusable `Card` component, manage the game’s state using `useState` and `useEffect`, and implement the core game logic. You’ve also learned how to handle user interactions and provide feedback. This project is a great starting point for anyone learning Next.js and React, and it provides a solid foundation for building more complex interactive web applications. Remember to experiment with the code and add your own features to enhance the game and further your understanding of Next.js.

FAQ

Here are some frequently asked questions:

  1. **How do I deploy my game?** You can deploy your Next.js application to platforms like Vercel, Netlify, or AWS. Vercel is particularly well-suited for Next.js projects and provides easy deployment with a few clicks. After deploying, you’ll receive a URL where your game is live.
  2. **How can I improve the performance of my game?** Optimize your images, use code splitting, and consider using React.memo for components that don’t need to re-render frequently. Also, use the production build for deployment.
  3. **How can I add different card images?** You can replace the text-based card values (e.g., ‘A’, ‘B’, ‘C’) with image URLs. You’ll need to store the image URLs in your card objects and modify the `Card` component to display the images instead of the text.
  4. **How can I add a timer?** You can use the `setInterval` function within a `useEffect` hook to start and stop a timer. Use the timer to update a state variable that displays the elapsed time. Remember to clear the interval when the game ends.
  5. **What is the difference between `useState` and `useEffect`?** `useState` is a hook used to manage the state of a component. It returns a state variable and a function to update that variable. `useEffect` is a hook that allows you to perform side effects in your functional components, such as data fetching, setting up subscriptions, or manually changing the DOM.

Creating this memory game, you’ve not only built a fun application but also gained valuable experience with Next.js, React, and fundamental web development concepts. The ability to build and deploy this project demonstrates a significant step forward in your journey, opening doors to more complex and exciting endeavors. The iterative process of refining your code, adding new features, and debugging any arising issues further solidifies your understanding, making each project a valuable learning experience.

More posts