Retro Run – A Memory Game Inspired by My Gaming RootsTry ➚

Introduction

As a kid, I was glued to screens—joysticks in hand, eyes wide with wonder—playing games that weren’t just fun but sparked something deeper. That obsession with gaming didn’t just pass the time; it set me on a path to computer science. Today, I’ve channeled that nostalgia into Retro Run, a memory game where you match cards featuring classics like Pong, Pac-Man, and Super Mario Bros. It starts with a simple 2x2 grid and ramps up to a challenging 12x12. It’s a tribute to the games that shaped me, and I’m excited to share how they led me here—plus a peek at the code behind it.

Gaming: My Childhood Obsession

Growing up, gaming wasn’t just a hobby—it was a world I couldn’t get enough of. I’d spend hours dodging ghosts in Pac-Man, jumping barrels in Super Mario Bros., or blasting aliens in Space Invaders. Each game was a puzzle, a challenge, a story—and I was hooked. I’d wonder: How do these worlds come to life? That curiosity about the how behind the pixels drove me to tinker with computers, learn to code, and eventually dive into computer science. Those late nights chasing high scores weren’t wasted—they were the foundation of who I am today, a developer building my own digital creations.

Retro Run: A Nostalgic Twist

Retro Run is my love letter to those classics. It’s a memory game that begins with an easy 2x2 grid—just 2 pairs to match—and scales all the way to a massive 12x12, testing your memory with 72 pairs. The cards feature artwork from the games that inspired me, so every flip is a trip down memory lane—Pong’s simple paddles, Tetris’s falling blocks, or Minecraft’s pixelated landscapes. I picked 15 iconic titles from my childhood, each a milestone in gaming history and a personal touchstone that fueled my passion for tech.

Key Code Behind Retro Run

Building Retro Run was a blast—here are a few key snippets from `memory-game.js` that make it tick with the new 2x2 to 12x12 range:

Randomizing the Cards

const generateCards = (size) => {
  const pairCount = (size * size) / 2;
  const shuffledPool = shuffleArray([...imagePool]);
  const selectedImages = shuffledPool.slice(0, pairCount);
  const cards = [...selectedImages, ...selectedImages];
  return shuffleArray(cards).map((img, index) => ({
    id: index,
    image: img,
    isFlipped: false,
    isMatched: false,
  }));
};

This function pulls random game images—like Pong or Doom—from my classics list, duplicates them for pairs, and shuffles them. For a 2x2 grid, it grabs 2 images; for 12x12, it scales to 72. Every start or refresh gets a fresh mix, keeping the nostalgia alive and unpredictable.

Flipping and Matching

const handleCardClick = (clickedCard) => {
  if (flippedCards.length >= 2 || clickedCard.isFlipped || clickedCard.isMatched) return;

  const newCards = cards.map((card) =>
    card.id === clickedCard.id ? { ...card, isFlipped: true } : card
  );
  setCards(newCards);
  setFlippedCards([...flippedCards, clickedCard]);

  if (flippedCards.length === 1) {
    setMoves(moves + 1);
    const firstCard = flippedCards[0];
    if (firstCard.image === clickedCard.image) {
      setCards((prevCards) =>
        prevCards.map((card) =>
          card.image === clickedCard.image ? { ...card, isMatched: true, isFlipped: true } : card
        )
      );
      setFlippedCards([]);
    } else {
      setTimeout(() => {
        setCards((prevCards) =>
          prevCards.map((card) =>
            card.id === firstCard.id || card.id === clickedCard.id
              ? { ...card, isFlipped: false }
              : card
          )
        );
        setFlippedCards([]);
      }, 1000);
    }
  }
};

Click a card, it flips—pick two, and if they match (two Marios), they stay; if not (Mario and Zelda), they flip back after a second. This logic scales from 2x2’s quick wins to 12x12’s brain-bending challenge, echoing the thrill of my old gaming days.

Leveling Up

const levels = [2, 4, 6, 8, 10, 12]; // Grid sizes from 2x2 to 12x12

const handleNextLevel = () => {
  if (level < levels.length - 1) {
    setLevel(level + 1);
  } else {
    alert('You’ve conquered all levels! Great job!');
  }
};

const resetGameForLevel = (newLevel) => {
  setCards(generateCards(levels[newLevel]));
  setFlippedCards([]);
  setMoves(0);
  setGameWon(false);
};

Start small at 2x2, win, and `handleNextLevel` pushes you to 4x4, up to 12x12. `resetGameForLevel` refreshes the grid with new random cards—2 pairs at first, 72 at the end—mirroring how those classic games kept me hooked with growing challenges.

From Player to Creator

Gaming as a kid wasn’t just play—it was a gateway. Pong’s simplicity made me wonder about code. Doom’s 3D worlds pushed me to explore graphics. Minecraft’s endless possibilities taught me creativity in tech. Each game planted a seed, and Retro Run is the harvest—a memory game that’s both a nod to my past and a showcase of what I’ve learned. It’s wild to think those hours mashing buttons led me to build tools like this today.

Conclusion

Retro Run blends nostalgia with coding joy, turning my childhood gaming obsession into something you can play—from a breezy 2x2 to a daunting 12x12. From Pong to Fortnite, these classics didn’t just entertain me—they inspired a career in computer science. Try it out, flip some cards, and let me know what you think—or share your own gaming memories! It’s live at RetroRun, ready for a retro challenge.