PHP Memory Card Matching Game
Build a classic memory card matching game with flip animations, score tracking, and PHP-generated card layouts.
PHPCSSJavaScriptGameAnimation
Overview
Create a memory card matching game with satisfying flip animations. PHP shuffles the cards and tracks high scores.
index.php
php
<?php
session_start();
$emojis = ['������','������','������','������','������','������','������','������'];
$cards = array_merge($emojis, $emojis);
shuffle($cards);
$best = $_SESSION['best_score'] ?? '—';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Memory Match Game</title>
<style>
body { background: #0a0a23; color: #fff; font-family: sans-serif; text-align: center; padding: 2rem; }
.grid { display: grid; grid-template-columns: repeat(4, 100px); gap: 12px; justify-content: center; }
.card { width: 100px; height: 100px; perspective: 600px; cursor: pointer; }
.card-inner { width: 100%; height: 100%; position: relative; transition: transform 0.5s; transform-style: preserve-3d; }
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.card-front { background: linear-gradient(135deg, #6c63ff, #48dbfb); }
.card-back { background: #1a1a3e; transform: rotateY(180deg); }
.card.matched .card-inner { animation: matchPop 0.4s; }
@keyframes matchPop { 50% { transform: rotateY(180deg) scale(1.15); } }
.card.matched { pointer-events: none; opacity: 0.7; }
</style>
</head>
<body>
<h1>������ Memory Match</h1>
<p>Moves: <span id="moves">0</span> | Best: <?= $best ?></p>
<div class="grid">
<?php foreach ($cards as $i => $emoji): ?>
<div class="card" data-emoji="<?= $emoji ?>" onclick="flipCard(this)">
<div class="card-inner">
<div class="card-front">❓</div>
<div class="card-back"><?= $emoji ?></div>
</div>
</div>
<?php endforeach; ?>
</div>
<script>
let flipped = [], matched = 0, moves = 0, locked = false;
function flipCard(card) {
if (locked || card.classList.contains('flipped')) return;
card.classList.add('flipped');
flipped.push(card);
if (flipped.length === 2) {
moves++; document.getElementById('moves').textContent = moves;
locked = true;
const [a, b] = flipped;
if (a.dataset.emoji === b.dataset.emoji) {
a.classList.add('matched'); b.classList.add('matched');
matched += 2; flipped = []; locked = false;
if (matched === document.querySelectorAll('.card').length)
setTimeout(() => alert('You won in ' + moves + ' moves!'), 300);
} else {
setTimeout(() => { a.classList.remove('flipped'); b.classList.remove('flipped'); flipped = []; locked = false; }, 800);
}
}
}
</script>
</body>
</html>Technologies
- PHP — card shuffling, session-based high score - CSS — 3D flip animation with perspective & backface-visibility - JavaScript — game logic, matching detection
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!