Building a Memory Match Game with PixiJS and AI: A Weekend Project

tutorialpuzzlememory-matchpixijsai-game-dev

Memory matching games are the perfect starting point for exploring game engines — simple mechanics, clear win conditions, and lots of room for polish. This week I built one using PixiJS, the lightweight 2D rendering library, with help from DeepSeek V4 Flash.

Play the Game

Flip cards, find matching pairs, and beat your best time.

Built by DeepSeek V4 Flash — 4x4 card matching with bot mode, sound effects, and a local leaderboard

Click cards to flip · Match all 8 pairs to win · Press R to restart · Try Bot mode to watch the AI play with perfect memory.

Why PixiJS + Puzzle

PixiJS is a natural fit for puzzle and card games. Unlike Phaser, it has no physics engine — which is exactly what you want here. Memory match is pure UI logic: clicking cards, tracking state, and animating flips. PixiJS gives you:

  • Lightweight rendering — the library loads fast and renders efficiently on mobile
  • Simple sprite management — container hierarchy for cards, text objects for UI
  • No physics overhead — no arcade bodies, no colliders, no gravity to configure
  • Retina-ready — autoDensity: true with devicePixelRatio gives crisp rendering on high-DPI screens

For a card-flip game, a full physics engine would be overkill. PixiJS’s Graphics API and container system handle everything cleanly.

The Build

The core mechanic is straightforward: a 4x4 grid of 16 cards (8 pairs). Click a card to flip it, click another — if they match, they stay face-up. If not, they flip back after 700ms.

What DeepSeek V4 Flash got right:

  • Grid layout with proper centering — the cards are evenly spaced and centered in the 680x480 canvas
  • Card flip logic with lock-in to prevent double-clicks during the delay
  • Bot mode with a perfect-memory AI that remembers every card it’s seen
  • Sound effects via Web Audio API — a sine tone for matches, square wave for mismatches
  • A local leaderboard stored in localStorage that tracks your best times

What needed adjustment:

  • The PixiJS CDN URL — the model initially tried a wrong version path, caught during verification
  • Game-over overlay visibility — the gameOverContainer.visible = false was needed on createGrid() to reset the state on restart
  • The bot’s memory object needed filtering to remove matched cards between rounds

Lessons Learned

PixiJS has its own gotchas compared to Phaser. Text anchors default to (0,0), so centering UI text requires explicit anchor.set(0.5). Graphics objects need to be added to app.stage explicitly — nothing auto-attaches. And the ticker loop works differently from Phaser’s update(): you add a callback to app.ticker.add() rather than defining a method on the scene.

Bot mode was interesting. The perfect-memory AI tracks every card value it’s seen and uses that knowledge to flip known pairs. It’s not unbeatable — it still flips random cards when it has no knowledge — but it usually clears the board in 12-16 moves, far better than an average human’s 20-30.

The sound effects make a big difference. A simple sine-wave tone on match (660Hz) and a square-wave buzz on mismatch (300Hz) give the game satisfying feedback. The victory fanfare (ascending C-E-G) adds a reward moment.

Cost & Stats

DeepSeek V4 Flash produced the full game in a single prompt. The game HTML is ~14KB with all features included: card grid, flip logic, bot AI, sound, timer, and leaderboard.

  • Input tokens: ~2,500 (prompt + skill context)
  • Output tokens: ~4,800
  • Total tokens: ~7,300
  • Cost: ~$0.001
  • Build time: ~45 seconds

Try it Yourself

  1. Visit the Memory Match game page
  2. Match all 8 pairs as fast as you can
  3. Press R to restart and beat your time
  4. Try Bot mode to watch the AI play

The full source is on GitHub. PixiJS makes puzzle games fast and fun to build — and with AI assistance, the game logic comes together in minutes.