<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>لعبة ماجيك رومبي</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Background Styles */
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #0a0e17 0%, #1a1f2e 50%, #0a0e17 100%);
min-height: 100vh;
color: #e0e0e0;
overflow-x: hidden;
}
/* Game Container */
.game-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Header Styles */
.game-header {
text-align: center;
margin-bottom: 20px;
}
.game-title {
font-size: 2.5rem;
font-weight: 700;
color: #00ff88;
text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
margin-bottom: 10px;
}
/* Score Display */
.score-panel {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.score-item {
background: rgba(0, 255, 136, 0.1);
border: 2px solid #00ff88;
border-radius: 15px;
padding: 15px 25px;
text-align: center;
min-width: 120px;
}
.score-label {
font-size: 0.9rem;
color: #00b4d8;
margin-bottom: 5px;
}
.score-value {
font-size: 1.8rem;
font-weight: 700;
color: #00ff88;
}
/* Timer Bar */
.timer-container {
width: 100%;
max-width: 600px;
margin: 0 auto 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
height: 25px;
overflow: hidden;
border: 2px solid #00b4d8;
}
.timer-bar {
height: 100%;
background: linear-gradient(90deg, #00ff88, #00b4d8);
width: 100%;
transition: width 0.1s linear;
border-radius: 20px;
}
/* Game Board */
.game-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 15px;
max-width: 800px;
margin: 0 auto;
padding: 20px;
flex: 1;
}
/* Card Styles */
.card {
aspect-ratio: 3/4;
perspective: 1000px;
cursor: pointer;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
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: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.card-back {
background: linear-gradient(135deg, #00ff88, #00b4d8);
border: 3px solid #00ff88;
}
.card-back::before {
content: '✦';
font-size: 3rem;
color: #0a0e17;
animation: pulse 2s infinite;
}
.card-front {
background: linear-gradient(135deg, #1a1f2e, #2a3040);
border: 3px solid #00b4d8;
transform: rotateY(180deg);
flex-direction: column;
padding: 5px;
}
.card-symbol {
font-size: 2.5rem;
}
.card-value {
font-size: 1.2rem;
font-weight: 700;
color: #00ff88;
}
.card.matched {
animation: matchPulse 0.5s ease;
}
.card.matched .card-front {
border-color: #00ff88;
box-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
}
/* Card Match Animation */
@keyframes matchPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Magic Combo Display */
.combo-display {
text-align: center;
font-size: 1.5rem;
color: #00ff88;
margin: 15px 0;
min-height: 40px;
}
.combo-display.active {
animation: comboFlash 0.5s ease;
}
@keyframes comboFlash {
0%, 100% { transform: scale(1); color: #00ff88; }
50% { transform: scale(1.2); color: #ff0080; }
}
/* Game Controls */
.game-controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
flex-wrap: wrap;
}
.btn {
padding: 12px 30px;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
}
.btn-primary {
background: linear-gradient(135deg, #00ff88, #00b4d8);
color: #0a0e17;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 255, 136, 0.4);
}
.btn-secondary {
background: transparent;
border: 2px solid #00b4d8;
color: #00b4d8;
}
.btn-secondary:hover {
background: #00b4d8;
color: #0a0e17;
}
/* Game Over Screen */
.game-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 14, 23, 0.95);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
flex-direction: column;
}
.game-screen.active {
display: flex;
}
.screen-title {
font-size: 3rem;
font-weight: 700;
color: #00ff88;
text-shadow: 0 0 30px rgba(0, 255, 136, 0.7);
margin-bottom: 20px;
}
.screen-subtitle {
font-size: 1.5rem;
color: #00b4d8;
margin-bottom: 30px;
}
.final-score {
font-size: 4rem;
font-weight: 700;
color: #ff0080;
margin: 20px 0;
}
/* Level Indicator */
.level-indicator {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 0, 128, 0.2);
border: 2px solid #ff0080;
border-radius: 10px;
padding: 10px 20px;
text-align: center;
}
.level-label {
font-size: 0.8rem;
color: #ff0080;
}
.level-value {
font-size: 1.5rem;
font-weight: 700;
color: #ff0080;
}
/* Instructions */
.instructions {
text-align: center;
margin: 15px 0;
padding: 15px;
background: rgba(0, 180, 216, 0.1);
border-radius: 10px;
border: 1px solid #00b4d8;
}
.instructions p {
margin: 5px 0;
color: #00b4d8;
}
/* Floating Particles */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
background: #00ff88;
border-radius: 50%;
opacity: 0.3;
animation: float 15s infinite;
}
@keyframes float {
0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
10% { opacity: 0.3; }
90% { opacity: 0.3; }
100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}
/* Mobile Responsive */
@media (max-width: 768px) {
.game-title {
font-size: 1.8rem;
}
.score-panel {
gap: 15px;
}
.score-item {
padding: 10px 15px;
min-width: 90px;
}
.game-board {
gap: 10px;
padding: 10px;
}
.card-symbol {
font-size: 1.8rem;
}
.card-value {
font-size: 1rem;
}
.screen-title {
font-size: 2rem;
}
.final-score {
font-size: 3rem;
}
}
</style>
</head>
<body>
<!-- Floating Particles Background -->
<div class="particles" id="particles"></div>
<!-- Game Container -->
<div class="game-container">
<!-- Header Section -->
<header class="game-header">
<h1 class="game-title">✨ ماجيك رومبي ✨</h1>
</header>
<!-- Score Panel -->
<div class="score-panel">
<div class="score-item">
<div class="score-label">النقاط</div>
<div class="score-value" id="score">0</div>
</div>
<div class="score-item">
<div class="score-label">المطابقات</div>
<div class="score-value" id="matches">0/0</div>
</div>
<div class="score-item">
<div class="score-label">الوقت</div>
<div class="score-value" id="time">60</div>
</div>
</div>
<!-- Timer Bar -->
<div class="timer-container">
<div class="timer-bar" id="timerBar"></div>
</div>
<!-- Combo Display -->
<div class="combo-display" id="comboDisplay">ابحث عن البطاقات المتشابهة!</div>
<!-- Instructions -->
<div class="instructions">
<p>🎯 اقلب بطاقتين للعثور على المطابقات</p>
<p>⚡ combos السريعة تعطيك نقاط إضافية!</p>
</div>
<!-- Game Board -->
<div class="game-board" id="gameBoard"></div>
<!-- Game Controls -->
<div class="game-controls">
<button class="btn btn-primary" id="startBtn">ابدأ اللعبة</button>
<button class="btn btn-secondary" id="restartBtn">إعادة</button>
</div>
</div>
<!-- Start Screen -->
<div class="game-screen active" id="startScreen">
<div class="screen-title">✨ ماجيك رومبي ✨</div>
<div class="screen-subtitle">لعبة بطاقات سحرية</div>
<p style="margin-bottom: 30px; color: #00b4d8;">اقلب البطاقات واعثر على المطابقات<br>اجمع أكبر عدد من النقاط قبل نفاد الوقت!</p>
<button class="btn btn-primary" id="playBtn">ابدأ اللعب</button>
</div>
<!-- Game Over Screen -->
<div class="game-screen" id="gameOverScreen">
<div class="screen-title">انتهت اللعبة!</div>
<div class="screen-subtitle">نقاطك النهائية</div>
<div class="final-score" id="finalScore">0</div>
<div class="screen-subtitle" id="resultMessage">أحسنت!</div>
<button class="btn btn-primary" id="playAgainBtn">العب مرة أخرى</button>
</div>
<!-- Win Screen -->
<div class="game-screen" id="winScreen">
<div class="screen-title">🎉 مبروك! 🎉</div>
<div class="screen-subtitle">أكملت المستوى!</div>
<div class="final-score" id="winScore">0</div>
<button class="btn btn-primary" id="nextLevelBtn">المستوى التالي</button>
</div>
<script>
// Game Variables
let score = 0;
let matches = 0;
let totalPairs = 0;
let timeLeft = 60;
let timerInterval = null;
let flippedCards = [];
let isLocked = false;
let comboCount = 0;
let level = 1;
let baseTime = 60;
// Card Symbols for the game
const symbols = ['🌟', '💎', '🔮', '🎭', '🌙', '☀️', '⭐', '💫', '🌈', '🔥', '❄️', '⚡', '🌺', '🦋', '🎪', '🎨'];
// DOM Elements
const gameBoard = document.getElementById('gameBoard');
const scoreDisplay = document.getElementById('score');
const matchesDisplay = document.getElementById('matches');
const timeDisplay = document.getElementById('time');
const timerBar = document.getElementById('timerBar');
const comboDisplay = document.getElementById('comboDisplay');
const startScreen = document.getElementById('startScreen');
const gameOverScreen = document.getElementById('gameOverScreen');
const winScreen = document.getElementById('winScreen');
const finalScoreDisplay = document.getElementById('finalScore');
const startBtn = document.getElementById('startBtn');
const restartBtn = document.getElementById('restartBtn');
const playBtn = document.getElementById('playBtn');
const playAgainBtn = document.getElementById('playAgainBtn');
const nextLevelBtn = document.getElementById('nextLevelBtn');
const particlesContainer = document.getElementById('particles');
// Initialize Particles
function createParticles() {
particlesContainer.innerHTML = '';
for (let i = 0; i < 20; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 15 + 's';
particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
particlesContainer.appendChild(particle);
}
}
// Calculate pairs based on level
function getPairCount() {
const basePairs = 6;
return Math.min(basePairs + (level - 1) * 2, 16);
}
// Shuffle Array
function shuffleArray(array) {
const newArray = [...array];
for (let i = newArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
}
return newArray;
}
// Create Game Board
function createBoard() {
gameBoard.innerHTML = '';
const pairCount = getPairCount();
totalPairs = pairCount;
// Select symbols for this level
const selectedSymbols = symbols.slice(0, pairCount);
// Create pairs of cards
let cards = [];
selectedSymbols.forEach((symbol, index) => {
cards.push({ id: index * 2, symbol: symbol, value: index + 1 });
cards.push({ id: index * 2 + 1, symbol: symbol, value: index + 1 });
});
// Shuffle cards
cards = shuffleArray(cards);
// Calculate grid columns
const cols = pairCount <= 8 ? 4 : pairCount <= 12 ? 4 : 6;
gameBoard.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
// Create card elements
cards.forEach((card, index) => {
const cardElement = document.createElement('div');
cardElement.className = 'card';
cardElement.dataset.id = card.id;
cardElement.dataset.symbol = card.symbol;
cardElement.dataset.value = card.value;
cardElement.innerHTML = `
<div class="card-inner">
<div class="card-back"></div>
<div class="card-front">
<span class="card-symbol">${card.symbol}</span>
<span class="card-value">${card.value}</span>
</div>
</div>
`;
cardElement.addEventListener('click', () => flipCard(cardElement));
gameBoard.appendChild(cardElement);
});
matchesDisplay.textContent = `0/${totalPairs}`;
}
// Flip Card
function flipCard(card) {
if (isLocked) return;
if (card.classList.contains('flipped')) return;
if (card.classList.contains('matched')) return;
if (flippedCards.length >= 2) return;
card.classList.add('flipped');
flippedCards.push(card);
if (flippedCards.length === 2) {
checkMatch();
}
}
// Check Match
function checkMatch() {
isLocked = true;
const card1 = flippedCards[0];
const card2 = flippedCards[1];
const isMatch = card1.dataset.symbol === card2.dataset.symbol;
if (isMatch) {
handleMatch(card1, card2);
} else {
handleMismatch(card1, card2);
}
}
// Handle Match
function handleMatch(card1, card2) {
comboCount++;
// Calculate score with combo bonus
const basePoints = 100;
const comboBonus = comboCount > 1 ? (comboCount - 1) * 50 : 0;
const timeBonus = Math.floor(timeLeft / 10) * 10;
const points = basePoints + comboBonus + timeBonus;
score += points;
matches++;
card1.classList.add('matched');
card2.classList.add('matched');
// Show combo message
if (comboCount > 1) {
comboDisplay.textContent = `🔥 Combo x${comboCount}! +${points}`;
comboDisplay.classList.add('active');
setTimeout(() => comboDisplay.classList.remove('active'), 500);
} else {
comboDisplay.textContent = `✨ مطابق! +${points}`;
}
updateScore();
flippedCards = [];
isLocked = false;
// Check win condition
if (matches === totalPairs) {
setTimeout(showWinScreen, 500);
}
}
// Handle Mismatch
function handleMismatch(card1, card2) {
comboCount = 0;
comboDisplay.textContent = '❌ لا تطابق!';
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
flippedCards = [];
isLocked = false;
}, 800);
}
// Update Score Display
function updateScore() {
scoreDisplay.textContent = score;
matchesDisplay.textContent = `${matches}/${totalPairs}`;
}
// Start Timer
function startTimer() {
timeLeft = baseTime + (level - 1) * 10;
timeDisplay.textContent = timeLeft;
timerBar.style.width = '100%';
timerInterval = setInterval(() => {
timeLeft--;
timeDisplay.textContent = timeLeft;
timerBar.style.width = (timeLeft / baseTime) * 100 + '%';
if (timeLeft <= 0) {
clearInterval(timerInterval);
showGameOver();
}
}, 1000);
}
// Stop Timer
function stopTimer() {
if (timerInterval) {
clearInterval(timerInterval);
timerInterval = null;
}
}
// Show Game Over Screen
function showGameOver() {
stopTimer();
finalScoreDisplay.textContent = score;
// Set result message based on score
let message = 'حاول مرة أخرى!';
if (score > 1000) message = 'ممتاز!';
if (score > 2000) message = 'رائع جداً!';
if (score > 3000) message = 'أسطوري!';
document.getElementById('resultMessage').textContent = message;
gameOverScreen.classList.add('active');
}
// Show Win Screen
function showWinScreen() {
stopTimer();
// Bonus points for completing level
const levelBonus = level * 200;
score += levelBonus;
updateScore();
document.getElementById('winScore').textContent = score;
winScreen.classList.add('active');
}
// Start Game
function startGame() {
score = 0;
matches = 0;
flippedCards = [];
isLocked = false;
comboCount = 0;
updateScore();
comboDisplay.textContent = 'ابحث عن البطاقات المتشابهة!';
createBoard();
startTimer();
startScreen.classList.remove('active');
gameOverScreen.classList.remove('active');
winScreen.classList.remove('active');
}
// Next Level
function nextLevel() {
level++;
winScreen.classList.remove('active');
startGame();
}
// Event Listeners
startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', () => {
stopTimer();
level = 1;
startGame();
});
playBtn.addEventListener('click', startGame);
playAgainBtn.addEventListener('click', () => {
level = 1;
startGame();
});
nextLevelBtn.addEventListener('click', nextLevel);
// Keyboard Controls
document.addEventListener('keydown', (e) => {
if (e.key === ' ' || e.key === 'Enter') {
if (startScreen.classList.contains('active')) {
startGame();
} else if (gameOverScreen.classList.contains('active')) {
level = 1;
startGame();
} else if (winScreen.classList.contains('active')) {
nextLevel();
}
}
});
// Initialize
createParticles();
</script>
</body>
</html>