<!
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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc
100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #333;
.container {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 800px;
padding: 30px;
text-align: center;
overflow: hidden;
position: relative;
.header {
margin-bottom: 30px;
.header h1 {
color: #ff6b6b;
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
.header p {
color: #555;
font-size: 1.2rem;
.game-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
.game-controls {
flex: 1;
min-width: 300px;
background: linear-gradient(to bottom, #ffffff, #f0f9ff);
border-radius: 15px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
.game-display {
flex: 1;
min-width: 300px;
background: linear-gradient(to bottom, #ffffff, #f0f9ff);
border-radius: 15px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.section-title {
color: #4ecdc4;
font-size: 1.5rem;
margin-bottom: 20px;
border-bottom: 3px solid #ffd166;
padding-bottom: 10px;
display: inline-block;
.table-selector {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 20px;
.table-btn {
background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
border: none;
border-radius: 10px;
padding: 15px 5px;
font-size: 1.2rem;
font-weight: bold;
color: #fff;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
.table-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.table-btn.active {
background: linear-gradient(to bottom, #4ecdc4, #88d3ce);
transform: scale(1.05);
.mode-selector {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
.mode-btn {
background: linear-gradient(to right, #a1c4fd, #c2e9fb);
border: none;
border-radius: 50px;
padding: 15px;
font-size: 1.1rem;
font-weight: bold;
color: #444;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.mode-btn:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
.mode-btn.active {
background: linear-gradient(to right, #ff9a9e, #fad0c4);
color: #fff;
.mode-btn i {
font-size: 1.3rem;
.question-display {
font-size: 5rem;
font-weight: bold;
color: #ff6b6b;
margin: 30px 0;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
height: 120px;
display: flex;
align-items: center;
justify-content: center;
.answer-input {
width: 200px;
padding: 15px;
font-size: 2rem;
text-align: center;
border: 3px solid #4ecdc4;
border-radius: 15px;
outline: none;
margin-bottom: 20px;
.answer-input:focus {
border-color: #ff6b6b;
box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
.action-buttons {
display: flex;
gap: 15px;
justify-content: center;
.action-btn {
padding: 12px 25px;
font-size: 1.1rem;
border: none;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
.submit-btn {
background: linear-gradient(to right, #4ecdc4, #88d3ce);
color: white;
.next-btn {
background: linear-gradient(to right, #ff9a9e, #fad0c4);
color: white;
.action-btn:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
.progress-container {
background-color: #f8f9fa;
border-radius: 15px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
.stats {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
font-size: 1.1rem;
color: #555;
.stat-value {
font-weight: bold;
color: #ff6b6b;
font-size: 1.3rem;
.progress-bar {
height: 20px;
background-color: #e9ecef;
border-radius: 10px;
overflow: hidden;
.progress-fill {
height: 100%;
background: linear-gradient(to right, #4ecdc4, #ff6b6b);
border-radius: 10px;
width: 0%;
transition: width 0.5s ease;
.stars-container {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
.star {
font-size: 2.5rem;
color: #e9ecef;
.star.filled {
color: #ffd166;
text-shadow: 0 0 10px rgba(255, 209, 102, 0.7);
.feedback {
font-size: 1.3rem;
font-weight: bold;
margin: 15px 0;
min-height: 30px;
.correct {
color: #4ecdc4;
.incorrect {
color: #ff6b6b;
}
.character {
font-size: 5rem;
margin-bottom: 20px;
animation: bounce 2s infinite;
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
.trophy {
font-size: 4rem;
color: #ffd166;
margin-bottom: 20px;
display: none;
.celebration {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
z-index: 10;
border-radius: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
animation: fadeIn 0.5s;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
.celebration.show {
display: flex;
.celebration h2 {
font-size: 3rem;
color: #ff6b6b;
margin-bottom: 20px;
.celebration p {
font-size: 1.5rem;
margin-bottom: 30px;
color: #555;
.celebration-btn {
background: linear-gradient(to right, #4ecdc4, #88d3ce);
color: white;
border: none;
border-radius: 50px;
padding: 15px 40px;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
.celebration-btn:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
@media (max-width: 768px) {
.game-section {
flex-direction: column;
.question-display {
font-size: 3.5rem;
height: 90px;
.header h1 {
font-size: 2rem;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>✨ <✨ لعبة جدول الضرب السحري/h1>
<p><!تعلم وحّس ن مهاراتك في الرياضيات مع هذه اللعبة الممتعة/p>
</div>
<div class="game-section">
<div class="game-controls">
<h2 class="section-title"> <اختر جدول الضرب/h2>
<div class="table-selector" id="tableSelector">
<!-- Tables will be generated by JavaScript -->
</div>
<h2 class="section-title" style="margin-top: 30px;"> اختر نمط
<اللعب/h2>
<div class="mode-selector">
<button class="mode-btn active" id="learnMode">
<i class="fas fa-book-open"></i> وضع التعّلم
</button>
<button class="mode-btn" id="practiceMode">
<i class="fas fa-running"></i> وضع التمرين
</button>
<button class="mode-btn" id="challengeMode">
<i class="fas fa-trophy"></i> وضع التحدي
</button>
</div>
</div>
<div class="game-display">
<div class="character">🧠</div>
<div class="question-display" id="questionDisplay">5 × 3 = ?
</div>
<input type="number" class="answer-input" id="answerInput"
placeholder=">"اإلجابة
<div class="feedback" id="feedback"></div>
<div class="action-buttons">
<button class="action-btn submit-btn" id="submitBtn">
<i class="fas fa-check"></i> تحقق
</button>
<button class="action-btn next-btn" id="nextBtn">
<i class="fas fa-arrow-right"></i> التالي
</button>
</div>
</div>
</div>
<div class="progress-container">
<div class="stats">
<div>اإلجابات الصحيحة: <span class="stat-value"
id="correctCount">0</span></div>
<div> اإلجابات الخاطئة: <span class="stat-value"
id="incorrectCount">0</span></div>
<div>المستوى: <span class="stat-value"
id="level">1</span></div>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="stars-container">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
</div>
<div class="celebration" id="celebration">
<div class="trophy">🏆</div>
<h2><!أحسنت! لقد أكملت التحدي/h2>
<p>< لقد أجبت علىspan id="finalCorrect">0</span> إجابة
<صحيحة/p>
<button class="celebration-btn" id="playAgainBtn"> العب مرة
<أخرى/button>
</div>
</div>
<script>
// العناصر الرئيسية
const tableSelector = document.getElementById('tableSelector');
const questionDisplay =
document.getElementById('questionDisplay');
const answerInput = document.getElementById('answerInput');
const feedback = document.getElementById('feedback');
const submitBtn = document.getElementById('submitBtn');
const nextBtn = document.getElementById('nextBtn');
const correctCount = document.getElementById('correctCount');
const incorrectCount = document.getElementById('incorrectCount');
const levelDisplay = document.getElementById('level');
const progressFill = document.getElementById('progressFill');
const stars = document.querySelectorAll('.star');
const celebration = document.getElementById('celebration');
const finalCorrect = document.getElementById('finalCorrect');
const playAgainBtn = document.getElementById('playAgainBtn');
// متغيرات اللعبة
let selectedTable = 1;
let gameMode = 'learn'; // 'learn', 'practice', 'challenge'
let correctAnswers = 0;
let incorrectAnswers = 0;
let level = 1;
let currentQuestion = {};
let starsEarned = 0;
let questionsAnswered = 0;
// تهيئة جداول الضرب
function initTables() {
for (let i = 1; i <= 12; i++) {
const button = document.createElement('button');
button.className = 'table-btn';
button.textContent = i;
button.dataset.table = i;
if (i === 1) {
button.classList.add('active');
}
button.addEventListener('click', () => {
document.querySelector('.table-
btn.active').classList.remove('active');
button.classList.add('active');
selectedTable = i;
generateQuestion();
});
tableSelector.appendChild(button);
// تهيئة أنماط اللعب
function initGameModes() {
const modes = ['learnMode', 'practiceMode', 'challengeMode'];
modes.forEach(mode => {
document.getElementById(mode).addEventListener('click',
function() {
document.querySelector('.mode-
btn.active').classList.remove('active');
this.classList.add('active');
gameMode = mode.replace('Mode', '');
resetGame();
generateQuestion();
});
});
}
// توليد سؤال عشوائي
function generateQuestion() {
let num1, num2;
if (gameMode === 'learn') {
// نركز على الجدول المحدد،في وضع التعلم
num1 = selectedTable;
num2 = Math.floor(Math.random() * 12) + 1;
} else if (gameMode === 'practice') {
// نستخدم الجدول المحدد مع بعض االختالف،في وضع التمرين
num1 = Math.random() > 0.3 ? selectedTable :
Math.floor(Math.random() * 12) + 1;
num2 = Math.floor(Math.random() * 12) + 1;
} else {
// أسئلة عشوائية تمامًا،في وضع التحدي
num1 = Math.floor(Math.random() * 12) + 1;
num2 = Math.floor(Math.random() * 12) + 1;
currentQuestion = {
num1: num1,
num2: num2,
answer: num1 * num2
};
questionDisplay.textContent = `${num1} × ${num2} = ?`;
answerInput.value = '';
feedback.textContent = '';
answerInput.focus();
// التحقق من اإلجابة
function checkAnswer() {
const userAnswer = parseInt(answerInput.value);
if (isNaN(userAnswer)) {
feedback.textContent = ' ;'الرجاء إدخال إجابة صحيحة
feedback.className = 'feedback incorrect';
return;
questionsAnswered++;
if (userAnswer === currentQuestion.answer) {
feedback.textContent = ' ;'👏 !إجابة صحيحة! أحسنت
feedback.className = 'feedback correct';
correctAnswers++;
correctCount.textContent = correctAnswers;
// زيادة النجوم
if (questionsAnswered % 3 === 0 && starsEarned < 5) {
stars[starsEarned].classList.add('filled');
starsEarned++;
} else {
feedback.textContent = ` الجواب الصحيح هو. إجابة خاطئة$
{currentQuestion.answer}`;
feedback.className = 'feedback incorrect';
incorrectAnswers++;
incorrectCount.textContent = incorrectAnswers;
// تحديث شريط التقدم والمستوى
updateProgress();
// تحديث شريط التقدم والمستوى
function updateProgress() {
const totalAnswers = correctAnswers + incorrectAnswers;
const progressPercentage = Math.min(100, (correctAnswers / 10) *
100);
progressFill.style.width = `${progressPercentage}%`;
// تحديث المستوى
const newLevel = Math.floor(correctAnswers / 10) + 1;
if (newLevel > level) {
level = newLevel;
levelDisplay.textContent = level;
animateLevelUp();
// تحقق من االنتهاء،في وضع التحدي
if (gameMode === 'challenge' && totalAnswers >= 15) {
endChallenge();
}
// رسوميات للمستوى الجديد
function animateLevelUp() {
levelDisplay.style.transform = 'scale(1.5)';
levelDisplay.style.color = '#ff6b6b';
setTimeout(() => {
levelDisplay.style.transform = 'scale(1)';
levelDisplay.style.color = '#ff6b6b';
}, 500);
// إنهاء وضع التحدي
function endChallenge() {
finalCorrect.textContent = correctAnswers;
celebration.classList.add('show');
// إعادة تعيين اللعبة
function resetGame() {
correctAnswers = 0;
incorrectAnswers = 0;
questionsAnswered = 0;
level = 1;
starsEarned = 0;
correctCount.textContent = '0';
incorrectCount.textContent = '0';
levelDisplay.textContent = '1';
progressFill.style.width = '0%';
// إعادة تعيين النجوم
stars.forEach(star => star.classList.remove('filled'));
// إخفاء شاشة االحتفال
celebration.classList.remove('show');
// تهيئة األحداث
function initEvents() {
submitBtn.addEventListener('click', checkAnswer);
nextBtn.addEventListener('click', generateQuestion);
answerInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
checkAnswer();
});
playAgainBtn.addEventListener('click', function() {
resetGame();
generateQuestion();
});
// بدء اللعبة
function startGame() {
initTables();
initGameModes();
initEvents();
generateQuestion();
// بدء اللعبة عند تحميل الصفحة
window.addEventListener('DOMContentLoaded', startGame);
</script>
</body>
</html>
