Eğlenceli Çarpım Tablosu Oyunu

Düşen Toplama Oyunu body { box-sizing: border-box; font-family: Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin: 0; padding: 20px; min-height: 100vh; user-select: none; } .game-header { background: rgba(255, 255, 255, 0.95); padding: 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s ease; } .title { font-size: 2rem; color: #4a5568; margin: 0; } .score-display { display: flex; gap: 30px; align-items: center; } .score-item { text-align: center; } .score-label { font-size: 0.9rem; color: #718096; margin: 0; } .score-value { font-size: 1.5rem; font-weight: bold; color: #2d3748; margin: 0; transition: all 0.3s ease; } .score-pulse { animation: score-pulse 0.6s ease-out; } @keyframes score-pulse { 0% { transform: scale(1); color: #2d3748; } 50% { transform: scale(1.3); color: #48bb78; text-shadow: 0 0 10px rgba(72, 187, 120, 0.8); } 100% { transform: scale(1); color: #2d3748; } } .game-area { height: 500px; position: relative; background: rgba(255, 255, 255, 0.1); border-radius: 15px; overflow: hidden; margin-bottom: 20px; border: 3px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; } .flash-effect { animation: flash-screen 0.4s ease-out; } @keyframes flash-screen { 0% { background: rgba(255, 255, 255, 0.1); } 50% { background: rgba(255, 215, 0, 0.3); box-shadow: inset 0 0 100px rgba(255, 215, 0, 0.5); } 100% { background: rgba(255, 255, 255, 0.1); } } .falling-equation { position: absolute; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%); border-radius: 15px; padding: 10px 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.2s ease; border: 3px solid #ff6b9d; width: 120px; text-align: center; } .falling-equation:nth-child(2n) { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-color: #4ecdc4; } .falling-equation:nth-child(3n) { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); border-color: #ff8a65; } .falling-equation:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.3); } .falling-equation.correct { border-color: #48bb78; background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%); } .falling-equation.incorrect { border-color: #e53e3e; background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%); } .equation-text { font-size: 1.5rem; font-weight: bold; color: #2b6cb0; margin: 0; } .answer-text { font-size: 1.3rem; color: #d53f8c; font-weight: bold; margin: 5px 0 0 0; } .controls { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .btn { padding: 15px 30px; border: none; border-radius: 25px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; color: white; } .btn-start { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); } .btn-pause { background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); } .btn-restart { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .game-over { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 40px; border-radius: 20px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.3); z-index: 1000; display: none; } .game-over h2 { color: #4a5568; margin-bottom: 20px; } .final-score { font-size: 3rem; color: #48bb78; font-weight: bold; margin: 20px 0; } .countdown-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 2000; display: none; } .countdown-number { font-size: 8rem; font-weight: bold; color: white; text-shadow: 0 0 30px rgba(255, 255, 255, 0.8); animation: countdown-pulse 1s ease-in-out; } @keyframes countdown-pulse { 0% { transform: scale(0.5); opacity: 0; color: #ff6b9d; } 50% { transform: scale(1.2); opacity: 1; color: #48bb78; text-shadow: 0 0 50px rgba(72, 187, 120, 0.9); } 100% { transform: scale(1); opacity: 1; color: white; text-shadow: 0 0 30px rgba(255, 255, 255, 0.8); } } @keyframes explode { 0% { transform: scale(1); opacity: 1; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } 25% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 255, 255, 0.6); } 50% { transform: scale(1.5); opacity: 0.9; box-shadow: 0 0 50px rgba(72, 187, 120, 0.9), 0 0 100px rgba(255, 255, 255, 0.8); } 75% { transform: scale(1.8); opacity: 0.6; box-shadow: 0 0 80px rgba(102, 126, 234, 0.7), 0 0 150px rgba(255, 255, 255, 0.5); } 100% { transform: scale(0); opacity: 0; box-shadow: 0 0 100px rgba(255, 255, 255, 0); } } .explode { animation: explode 0.6s ease-out forwards; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .shake { animation: shake 0.3s ease-in-out; } .confetti { position: absolute; width: 15px; height: 15px; background: #ff6b9d; pointer-events: none; z-index: 1000; border-radius: 2px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 107, 157, 0.6); } .confetti:nth-child(2n) { background: #4ecdc4; border-radius: 50%; box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 25px rgba(78, 205, 196, 0.7); } .confetti:nth-child(3n) { background: #ff8a65; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); width: 18px; height: 18px; box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 138, 101, 0.8); } .confetti:nth-child(4n) { background: #48bb78; border-radius: 50%; width: 12px; height: 12px; box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 18px rgba(72, 187, 120, 0.6); } .confetti:nth-child(5n) { background: #667eea; border-radius: 3px; width: 10px; height: 16px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 22px rgba(102, 126, 234, 0.7); } .confetti:nth-child(6n) { background: linear-gradient(45deg, #ffd700, #ffed4e); border-radius: 50%; width: 16px; height: 16px; box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 30px rgba(255, 237, 78, 0.8); } .sparkle { position: absolute; width: 4px; height: 4px; background: white; border-radius: 50%; pointer-events: none; z-index: 1001; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); } @keyframes sparkle-twinkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } } .sparkle-animate { animation: sparkle-twinkle 1s ease-in-out infinite; } @keyframes confetti-explode-1 { 0% { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 1; } 20% { transform: translate(-80px, -60px) rotate(180deg) scale(1.2); opacity: 1; } 100% { transform: translate(-150px, 400px) rotate(720deg) scale(0.3); opacity: 0; } } @keyframes confetti-explode-2 { 0% { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 1; } 20% { transform: translate(80px, -60px) rotate(-180deg) scale(1.2); opacity: 1; } 100% { transform: translate(150px, 400px) rotate(-720deg) scale(0.3); opacity: 0; } } @keyframes confetti-explode-3 { 0% { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 1; } 20% { transform: translate(-40px, -80px) rotate(90deg) scale(1.2); opacity: 1; } 100% { transform: translate(-80px, 400px) rotate(540deg) scale(0.3); opacity: 0; } } @keyframes confetti-explode-4 { 0% { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 1; } 20% { transform: translate(40px, -80px) rotate(-90deg) scale(1.2); opacity: 1; } 100% { transform: translate(80px, 400px) rotate(-540deg) scale(0.3); opacity: 0; } } @keyframes confetti-explode-5 { 0% { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 1; } 20% { transform: translate(0px, -90px) rotate(270deg) scale(1.2); opacity: 1; } 100% { transform: translate(0px, 400px) rotate(900deg) scale(0.3); opacity: 0; } } @keyframes confetti-explode-6 { 0% { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 1; } 20% { transform: translate(-60px, -40px) rotate(45deg) scale(1.2); opacity: 1; } 100% { transform: translate(-120px, 400px) rotate(405deg) scale(0.3); opacity: 0; } } @keyframes confetti-explode-7 { 0% { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 1; } 20% { transform: translate(60px, -40px) rotate(-45deg) scale(1.2); opacity: 1; } 100% { transform: translate(120px, 400px) rotate(-405deg) scale(0.3); opacity: 0; } } @keyframes confetti-explode-8 { 0% { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 1; } 20% { transform: translate(-100px, -20px) rotate(135deg) scale(1.2); opacity: 1; } 100% { transform: translate(-180px, 400px) rotate(675deg) scale(0.3); opacity: 0; } } .confetti-animate:nth-child(8n+1) { animation: confetti-explode-1 4s ease-out forwards; } .confetti-animate:nth-child(8n+2) { animation: confetti-explode-2 4s ease-out forwards; } .confetti-animate:nth-child(8n+3) { animation: confetti-explode-3 4s ease-out forwards; } .confetti-animate:nth-child(8n+4) { animation: confetti-explode-4 4s ease-out forwards; } .confetti-animate:nth-child(8n+5) { animation: confetti-explode-5 4s ease-out forwards; } .confetti-animate:nth-child(8n+6) { animation: confetti-explode-6 4s ease-out forwards; } .confetti-animate:nth-child(8n+7) { animation: confetti-explode-7 4s ease-out forwards; } .confetti-animate:nth-child(8n) { animation: confetti-explode-8 4s ease-out forwards; } /* Mobil uyumluluk */ @media (max-width: 768px) { body { padding: 10px; } .game-header { flex-direction: column; gap: 15px; text-align: center; } .title { font-size: 1.5rem; } .score-display { gap: 20px; } .game-area { height: 400px; } .falling-equation { width: 100px; padding: 8px 12px; } .equation-text { font-size: 1.3rem; } .answer-text { font-size: 1.1rem; } .controls { gap: 15px; } .btn { padding: 12px 25px; font-size: 1rem; } .countdown-number { font-size: 6rem; } } 🎯 Çarpım Tablosu Oyunu Puan 0 Doğru 0 Yanlış 0 Süre 90 🎮 Başla ⏸ Duraklat 🔄 Yeniden 🎉 Oyun Bitti! 0 Harika bir performans sergiledın! 🎮 Tekrar Oyna 3 🎯 Çarpım Tablosu OyunuEğlenceli ve interaktif matematik oyunu! Ekranda beliren çarpım işlemlerinin doğru mu yanlış mı olduğunu hızlıca karar ver. 90 saniye içinde en yüksek puanı toplamaya çalış!✨ Özellikler:Görsel efektler: Konfeti, parıltılar ve rengarenk animasyonlarSes efektleri: Doğru/yanlış cevap sesleri, buton tıklama sesleri ve geri sayımPuan sistemi: Doğru cevap +10 puan, yanlış cevap -5 puanMobil uyumlu: Telefon ve tablette mükemmel çalışırTürkçe arayüz: Tamamen Türkçe menüler ve açıklamalar🎮 Nasıl Oynanır:"Başla" butonuna tıkla3-2-1 geri sayımını bekleEkranda beliren çarpım işlemlerini kontrol etDoğru olanları tıkla, yanlış olanları atla90 saniye içinde en yüksek puanı hedefle!Çocuklar için güvenli, eğitici ve süper eğlenceli! 🌟

Eğlenceli Çarpım Tablosu Oyunu

🎯 Çarpım Tablosu Oyunu

🎉 Oyun Bitti!

Öğretmen

Bir yanıt yazın Yanıtı iptal et

5.Sınıf Temel Geometrik Kavramlar Kim Milyoner Olmak İster Yarışması

5.Sınıf Çarpma ve Bölme Problemleri Test Çöz

5.Sınıf Temel Geometrik Kavramlar Etkinliği

7.Sınıf Tam Sayılarda Toplama İşlemi Etkinliği-2

5.Sınıf Açılar Konu Kavrama Etkinliği

5.Sınıf Kare ve Dikdörtgenin Çevre ve Alanı Etkinlik ve Test Çöz

🎯 6.Sınıf Ortak Kat ve Ortak Bölen Bulma Oyunu

4.Sınıf Doğal Sayıların Okunuşu Basamak ve Sayı Değerleri Etkinliği

5.Sınıf Eşitliğin Korunumu Sürükle Bırak Etkinliği

Etkin Matematik

5.Sınıf Matematik

🎯 Çarpım Tablosu Oyunu

🎉 Oyun Bitti!

Öğretmen

6.Sınıf Asal Sayılar Test

6.Sınıf Aralarında Asal Sayıları Bulma Oyunu

İlgili Makaleler

Doğal Sayılar Dört İşlem Oyunu

Matematik Dört işlem Oyunu