Tam Sayılarla Dört İşlem Pratikleri

Wordwall Oyun

Başlık Metninizi Buraya Ekleyin

Matematiksel Asal Top Oyunu Tasarımı Kopyası – Sabriye GÜNEŞHALK

<br /> <html lang="tr"><br /> <head><br /> <meta charset="UTF-8" /><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /><br /> <title>Asal Toplar – Matematik Oyunu</title><br /> <script src="https://cdn.tailwindcss.com"></script> <style> /* Güzel gölgeler ve pürüzsüz animasyonlar için küçük dokunuşlar */<br /> .soft-shadow { box-shadow: 0 10px 30px rgba(0,0,0,0.18); }<br /> .glow { box-shadow: 0 0 0 8px rgba(34,197,94,0.12); }<br /> .vignette { box-shadow: inset 0 0 120px rgba(0,0,0,0.22); }<br /> .pop { transform: scale(1.12); }<br /> .shake { animation: shake 300ms ease-in-out; }<br /> @keyframes shake {<br /> 0%, 100% { transform: translateX(0) }<br /> 25% { transform: translateX(-8px) }<br /> 50% { transform: translateX(8px) }<br /> 75% { transform: translateX(-4px) }<br /> }<br /> .fade-in { animation: fade 300ms ease-out; }<br /> @keyframes fade { from { opacity: 0 } to { opacity: 1 } }<br /> .floaty { animation: floaty 10s ease-in-out infinite; }<br /> @keyframes floaty {<br /> 0%, 100% { transform: translateY(0) }<br /> 50% { transform: translateY(-14px) }<br /> }<br /> /* Oyun alanı boyutlandırma ve katmanlar */<br /> #gameArea { touch-action: none; }<br /> .ball { will-change: transform; }<br /> .no-select { user-select: none; -webkit-user-select: none; }<br /> </style> <p></p></head><br /> <body class="min-h-screen bg-gradient-to-br from-sky-900 via-indigo-900 to-fuchsia-900 text-white font-sans"><br />  <header class="max-w-7xl mx-auto px-6 pt-8"> <div class="flex items-center justify-between gap-4"> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-xl bg-white/10 grid place-items-center soft-shadow"> <br /> <path fill="currentColor" d="M12 2L2 7l10 5 10-5-10-5Zm8 11.2-2 .9V20l2-1v-5.8ZM4 18.9l2 1V14l-2-.9v5.8ZM12 22l-6-3v-7l6 3 6-3v7l-6 3Z"></path> </div> <div> <h1 class="text-2xl font-bold tracking-tight">Asal Toplar</h1> <p class="text-white/70 text-sm">Sepeti kaydır, asal sayıları yakala!</p> </div> </div> <div class="flex items-center gap-2"> <button id="btnStart" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-700 text-white font-semibold transition soft-shadow">Başlat</button><br /> <button id="btnPause" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 active:bg-white/30 text-white font-semibold transition">Duraklat</button><br /> <button id="btnRestart" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 active:bg-white/30 text-white font-semibold transition">Yeniden</button> </div> </div> </header> <p> </p> <section class="max-w-7xl mx-auto px-6 mt-6"> <div class="grid grid-cols-2 sm:grid-cols-4 gap-3"> <div class="rounded-2xl bg-white/10 backdrop-blur p-4 soft-shadow"> <div class="text-white/70 text-xs">Seviye</div> <div id="levelLabel" class="text-lg font-bold mt-1">1 / 6</div> <div id="levelRange" class="text-white/60 text-xs mt-1">1–10 arası</div> </div> <div class="rounded-2xl bg-white/10 backdrop-blur p-4 soft-shadow"> <div class="text-white/70 text-xs">Süre</div> <div id="timeLabel" class="text-lg font-bold mt-1">01:00</div> <div class="w-full bg-white/10 h-2 rounded mt-2 overflow-hidden"> <div id="timeBar" class="h-2 bg-emerald-400 rounded" style="width: 100%;"></div> </div> </div> <div class="rounded-2xl bg-white/10 backdrop-blur p-4 soft-shadow"> <div class="text-white/70 text-xs">Puan</div> <div id="scoreLabel" class="text-lg font-bold mt-1">0</div> <div class="text-white/60 text-xs mt-1">Asal top yakalama</div> </div> <div class="rounded-2xl bg-white/10 backdrop-blur p-4 soft-shadow"> <div class="text-white/70 text-xs">Hedef</div> <div id="hintLabel" class="text-lg font-bold mt-1">Asalları yakala</div> <div id="spawnHint" class="text-white/60 text-xs mt-1">Aynı anda 3–4 top düşer</div> </div> </div> </section> <p> <br /> <main class="max-w-7xl mx-auto px-6 mt-6"></main></p> <div id="gameArea" class="relative w-full aspect-[10/9] md:aspect-[14/9] lg:aspect-[16/9] rounded-3xl bg-gradient-to-b from-indigo-800/60 via-indigo-800/30 to-indigo-900/60 overflow-hidden soft-shadow vignette border border-white/10">  <div class="absolute inset-0 pointer-events-none"> <div class="absolute -top-20 -left-20 w-60 h-60 rounded-full bg-fuchsia-500/20 blur-3xl"></div> <div class="absolute top-10 right-10 w-48 h-48 rounded-full bg-sky-500/20 blur-3xl"></div> <div class="absolute bottom-10 left-1/3 w-40 h-40 rounded-full bg-emerald-400/20 blur-3xl"></div> <p> <br /> <defs><br /> <lineargradient id="grad" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#38bdf8"></stop><br /> <stop offset="100%" stop-color="#a78bfa"></stop><br /> </lineargradient> </defs><br /> <circle cx="100" cy="100" r="80" fill="none" stroke="url(#grad)" stroke-width="4"></circle><br /> </p></div> <p> </p> <div id="ballsLayer" class="absolute inset-0"></div> <p> </p> <div id="basket" class="absolute bottom-2 left-1/2 -translate-x-1/2 w-36 sm:w-40 h-6 sm:h-7 rounded-full bg-gradient-to-b from-amber-300 to-amber-500 border border-amber-200/70 soft-shadow no-select grid place-items-center"> <div class="w-[80%] h-2 sm:h-2.5 rounded bg-amber-700/40"></div> </div> <p> </p> <div id="overlay" class="absolute inset-0 grid place-items-center bg-black/40 backdrop-blur-sm"> <div class="max-w-xl w-[92%] rounded-2xl p-6 bg-white/10 border border-white/15 soft-shadow fade-in"> <h2 class="text-xl font-bold">Kurallar</h2> <ul class="text-sm text-white/85 mt-3 space-y-2 list-disc list-inside"> <li>Sepeti sağa–sola kaydırarak yukarıdan düşen topları yakala.</li> <li>Sadece üzerinde asal sayı yazan toplar puan kazandırır.</li> <li>Her seviye 60 saniyedir. 6 seviye sonunda toplam puanın gösterilir.</li> <li>Toplar aynı anda 3–4 adet düşer. Dikkatli ol!</li> </ul> <div class="mt-4 text-xs text-white/70"> İpuçları: Klavye ok tuşları (← →) veya A/D ile hareket edebilirsin. Dokunmatik sürükleme de çalışır. </div> <div class="mt-5 flex gap-2"> <button id="overlayStart" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-700 text-white font-semibold transition soft-shadow">Başla</button><br /> <button id="overlayClose" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 active:bg-white/30 text-white font-semibold transition">Kapat</button> </div> </div> </div> <p> </p> <div id="levelEnd" class="hidden absolute inset-0 grid place-items-center bg-black/40 backdrop-blur-sm"> <div class="max-w-md w-[92%] rounded-2xl p-6 bg-white/10 border border-white/15 soft-shadow"> <h3 id="levelEndTitle" class="text-xl font-bold">Seviye Bitti</h3> <p id="levelEndDesc" class="text-white/80 text-sm mt-2">Sıradaki seviyeye geçiliyor…</p> <div class="mt-4 flex gap-2"> <button id="nextLevelBtn" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-700 text-white font-semibold transition soft-shadow">Devam</button> </div> </div> </div> <p> </p> <div id="gameOver" class="hidden absolute inset-0 grid place-items-center bg-black/50 backdrop-blur-sm"> <div class="max-w-md w-[92%] rounded-2xl p-6 bg-white/10 border border-white/15 soft-shadow"> <h3 class="text-2xl font-bold">Oyun Bitti 🎉</h3> <p id="finalScore" class="text-white/85 mt-2">Toplam puanın: 0</p> <div class="mt-4 flex gap-2"> <button id="restartBtn" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-700 text-white font-semibold transition soft-shadow">Yeniden Oyna</button> </div> </div> </div> <p> </p> <div id="toastLayer" class="absolute inset-0 pointer-events-none"></div> </div> <p> </p> <footer class="max-w-7xl mx-auto px-6 py-6 text-white/60 text-xs"> Canva Code • Asal sayıları yakala, puanını kap!<br /> </footer> <p> <script> // ------------- OYUN DURUMU ------------- const LEVELS = [ { id: 1, min: 1, max: 10, label: "1–10 arası asallar" }, { id: 2, min: 10, max: 30, label: "10–30 arası asallar" }, { id: 3, min: 30, max: 50, label: "30–50 arası asallar" }, { id: 4, min: 50, max: 75, label: "50–75 arası asallar" }, { id: 5, min: 75, max: 100, label: "75–100 arası asallar" }, { id: 6, min: 1, max: 100, label: "1–100 arası tüm sayılar" } ]; const LEVEL_SECONDS = 60; const gameArea = document.getElementById('gameArea'); const ballsLayer = document.getElementById('ballsLayer'); const basketEl = document.getElementById('basket'); const overlay = document.getElementById('overlay'); const levelEnd = document.getElementById('levelEnd'); const gameOver = document.getElementById('gameOver'); const toastLayer = document.getElementById('toastLayer'); const btnStart = document.getElementById('btnStart'); const btnPause = document.getElementById('btnPause'); const btnRestart = document.getElementById('btnRestart'); const overlayStart = document.getElementById('overlayStart'); const overlayClose = document.getElementById('overlayClose'); const nextLevelBtn = document.getElementById('nextLevelBtn'); const restartBtn = document.getElementById('restartBtn'); const levelLabel = document.getElementById('levelLabel'); const levelRange = document.getElementById('levelRange'); const timeLabel = document.getElementById('timeLabel'); const timeBar = document.getElementById('timeBar'); const scoreLabel = document.getElementById('scoreLabel'); const finalScore = document.getElementById('finalScore'); const levelEndTitle = document.getElementById('levelEndTitle'); const levelEndDesc = document.getElementById('levelEndDesc'); let state = { running: false, paused: false, levelIndex: 0, // 0-based timeLeft: LEVEL_SECONDS, score: 0, balls: [], basket: { x: 0, width: 0, y: 0 }, idCounter: 1, lastSpawn: 0, spawnEvery: 850, // ms maxBalls: 4, minBalls: 3, speedRange: [90, 160] // px/s }; // ------------- YARDIMCI FONKSİYONLAR ------------- function clamp(v, min, max){ return Math.max(min, Math.min(max, v)); } function isPrime(n) { if (n < 2) return false; if (n % 2 === 0) return n === 2; const r = Math.floor(Math.sqrt(n)); for (let i = 3; i <= r; i += 2) if (n % i === 0) return false; return true; } function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function formatTime(sec){ const m = Math.floor(sec / 60).toString().padStart(2,'0'); const s = (sec % 60).toString().padStart(2,'0'); return `${m}:${s}`; } function updateHud(){ levelLabel.textContent = `${state.levelIndex+1} / ${LEVELS.length}`; levelRange.textContent = LEVELS[state.levelIndex].label; timeLabel.textContent = formatTime(state.timeLeft); const pct = (state.timeLeft / LEVEL_SECONDS) * 100; timeBar.style.width = `${pct}%`; timeBar.style.backgroundColor = pct < 25 ? '#ef4444' : (pct < 50 ? '#f59e0b' : '#34d399'); scoreLabel.textContent = state.score; } function showToast(text, good = true, x=0, y=0) { const el = document.createElement('div'); el.className = `absolute text-sm font-bold ${good ? 'text-emerald-300' : 'text-rose-300'}`; el.style.left = `${x}px`; el.style.top = `${y}px`; el.style.transform = `translate(-50%, -50%)`; el.style.opacity = '0'; el.textContent = text; toastLayer.appendChild(el); // küçük yukarı animasyonu let t = 0; const dur = 700; const start = performance.now(); function anim(now){ t = (now - start); const p = clamp(t/dur, 0, 1); el.style.opacity = p < .15 ? p/.15 : (1 - (p-0.15)/0.85); el.style.transform = `translate(-50%, calc(-50% - ${p*24}px))`; if (p < 1) requestAnimationFrame(anim); else el.remove(); } requestAnimationFrame(anim); } function resetBalls() { state.balls.forEach(b => b.el && b.el.remove()); state.balls = []; } // ------------- SEPET KONTROL ------------- function initBasket(){ const rect = gameArea.getBoundingClientRect(); const basketRect = basketEl.getBoundingClientRect(); state.basket.width = basketRect.width; state.basket.y = rect.height - (basketRect.height + 12); // alt boşluk // Ortaya yerleştir state.basket.x = rect.width / 2; setBasketPosition(state.basket.x); } function setBasketPosition(x){ const rect = gameArea.getBoundingClientRect(); const half = state.basket.width / 2; state.basket.x = clamp(x, half + 6, rect.width - half - 6); basketEl.style.left = `${state.basket.x}px`; basketEl.style.transform = `translate(-50%, 0)`; } // Klavye let keys = { left:false, right:false }; document.addEventListener('keydown', (e)=>{ if (e.key === 'ArrowLeft' || e.key.toLowerCase() === 'a') keys.left = true; if (e.key === 'ArrowRight'|| e.key.toLowerCase() === 'd') keys.right= true; }); document.addEventListener('keyup', (e)=>{ if (e.key === 'ArrowLeft' || e.key.toLowerCase() === 'a') keys.left = false; if (e.key === 'ArrowRight'|| e.key.toLowerCase() === 'd') keys.right= false; }); // Sürükleme / dokunmatik let dragging = false; function getLocalX(pageX){ const r = gameArea.getBoundingClientRect(); return pageX - r.left; } gameArea.addEventListener('pointerdown', (e)=>{ dragging = true; setBasketPosition(getLocalX(e.pageX)); gameArea.setPointerCapture(e.pointerId); }); gameArea.addEventListener('pointermove', (e)=>{ if (!dragging) return; setBasketPosition(getLocalX(e.pageX)); }); gameArea.addEventListener('pointerup', (e)=>{ dragging = false; gameArea.releasePointerCapture(e.pointerId); }); // ------------- TOPLAR ------------- function createBall(){ const rect = gameArea.getBoundingClientRect(); const level = LEVELS[state.levelIndex]; // Aynı anda 3–4 top kısıtı if (state.balls.length >= state.maxBalls) return; const radius = randInt(18, 26); // px const num = randInt(level.min, level.max); const prime = isPrime(num); const x = randInt(radius + 8, rect.width - radius - 8); const speed = randInt(state.speedRange[0], state.speedRange[1]); // px/s const color = prime ? 'from-emerald-400 to-emerald-600' : 'from-indigo-300 to-indigo-500'; const el = document.createElement('div'); el.className = `ball absolute rounded-full text-sm font-bold text-white grid place-items-center bg-gradient-to-b ${color} border border-white/20 soft-shadow`; el.style.width = `${radius*2}px`; el.style.height = `${radius*2}px`; el.style.left = `${x - radius}px`; el.style.top = `-${radius*2 + 10}px`; el.style.transform = `translate(0, 0)`; // İç metin const label = document.createElement('div'); label.textContent = num; label.className = 'drop-shadow-[0_2px_2px_rgba(0,0,0,0.35)]'; el.appendChild(label); ballsLayer.appendChild(el); const ball = { id: state.idCounter++, el, x, y: -radius*2 - 10, radius, speed, num, prime }; state.balls.push(ball); } function updateBalls(dt){ const rect = gameArea.getBoundingClientRect(); // Sepet hareketi (klavye) if (keys.left || keys.right) { const moveSpeed = rect.width * 0.7; // ekran genişliğine göre hız const dx = moveSpeed * dt * (keys.right - keys.left); setBasketPosition(state.basket.x + dx); } // Topları hareket ettir const toRemove = []; for (let b of state.balls) { b.y += b.speed * dt; // Konum güncelle b.el.style.transform = `translate(0, ${b.y}px)`; // Çarpışma kontrolü const basketTop = state.basket.y; const basketLeft = state.basket.x - state.basket.width/2; const basketRight= state.basket.x + state.basket.width/2; const ballBottom = b.y + b.radius*2; const ballCenterX = b.x; const hitVertical = ballBottom >= basketTop && ballBottom <= basketTop + 28; const hitHorizontal = (ballCenterX >= basketLeft) && (ballCenterX <= basketRight); if (hitVertical && hitHorizontal) { // Yakalandı if (b.prime) { state.score += 1; scoreLabel.classList.add('pop','glow'); setTimeout(()=>{ scoreLabel.classList.remove('pop','glow'); }, 220); showToast('+1', true, state.basket.x, basketTop - 10); } else { basketEl.classList.add('shake'); setTimeout(()=> basketEl.classList.remove('shake'), 320); showToast('Asal değil', false, state.basket.x, basketTop - 10); } toRemove.push(b.id); continue; } // Aşağı düştü mü? if (b.y - b.radius > rect.height + 10) { toRemove.push(b.id); } } if (toRemove.length) { state.balls = state.balls.filter(b=>{ const remove = toRemove.includes(b.id); if (remove) b.el.remove(); return !remove; }); } } // ------------- SEVİYE YÖNETİMİ ------------- function startLevel(idx){ state.levelIndex = idx; state.timeLeft = LEVEL_SECONDS; state.lastSpawn = 0; resetBalls(); // Zorluk ayarı (ileri seviyelerde daha hızlı) const factor = 1 + idx * 0.08; state.spawnEvery = 900 / factor; state.speedRange = [90 * factor, 165 * factor]; updateHud(); overlay.classList.add('hidden'); levelEnd.classList.add('hidden'); gameOver.classList.add('hidden'); state.running = true; state.paused = false; } function endLevel(){ state.running = false; levelEndTitle.textContent = `Seviye ${state.levelIndex+1} tamamlandı`; if (state.levelIndex < LEVELS.length - 1) { levelEndDesc.textContent = `Sıradaki seviye: ${LEVELS[state.levelIndex+1].label}`; levelEnd.classList.remove('hidden'); } else { // Oyun bitti finalScore.textContent = `Toplam puanın: ${state.score}`; gameOver.classList.remove('hidden'); } } function restartGame(){ state.score = 0; scoreLabel.textContent = '0'; startLevel(0); } // ------------- ANA DÖNGÜ ------------- let lastTime = performance.now(); function loop(now){ const dt = (now - lastTime) / 1000; lastTime = now; if (state.running && !state.paused) { // Süre state.timeLeft -= dt; if (state.timeLeft <= 0) { state.timeLeft = 0; updateHud(); endLevel(); } else { updateHud(); } // Top üretimi state.lastSpawn += dt * 1000; // Minimum eşzamanlı top sayısını koru if (state.balls.length < state.minBalls) { createBall(); } else if (state.lastSpawn >= state.spawnEvery) { createBall(); state.lastSpawn = 0; } // Topları güncelle updateBalls(dt); } requestAnimationFrame(loop); } requestAnimationFrame(loop); // ------------- OLAYLAR ------------- function ensureInitLayout(){ // boyutlar hazır olunca sepeti merkezle initBasket(); updateHud(); } window.addEventListener('resize', ()=>{ initBasket(); // Topların sol konumlarını yeniden hizalamaya gerek yok, x merkezleri sabit (transform ile düşüyorlar) }); window.addEventListener('load', ensureInitLayout); ensureInitLayout(); // Butonlar btnStart.addEventListener('click', ()=>{ if (!state.running && state.levelIndex === 0 && state.timeLeft === LEVEL_SECONDS && state.score === 0) { startLevel(0); } else if (!state.running && state.levelIndex > 0 && state.levelIndex < LEVELS.length) { // Arada kaldıysa devam startLevel(state.levelIndex); } else { state.paused = false; state.running = true; } }); btnPause.addEventListener('click', ()=>{ if (!state.running) return; state.paused = !state.paused; btnPause.textContent = state.paused ? 'Sürdür' : 'Duraklat'; }); btnRestart.addEventListener('click', ()=>{ restartGame(); }); overlayStart.addEventListener('click', ()=>{ restartGame(); }); overlayClose.addEventListener('click', ()=>{ overlay.classList.add('hidden'); }); nextLevelBtn.addEventListener('click', ()=>{ if (state.levelIndex < LEVELS.length - 1) { startLevel(state.levelIndex + 1); } }); restartBtn.addEventListener('click', ()=>{ gameOver.classList.add('hidden'); restartGame(); }); // İlk seferde sepet konumunu ayarla initBasket(); </script><br /> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'98af5fd5c643b0d2',t:'MTc1OTg2MDgyNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></p></body><br /> </html><br />

Tüm Oyunlar

Birbirinden eğlenceli interaktif oyunlar için doğru yerdesiniz. Eğlenirken öğrenmek için aşağıdaki butona tıklayın.

Sabriye Hoca

Uyuyan Öğrenci İstemiyoruz

Wordwall Oyun

Başlık Metninizi Buraya Ekleyin

Tüm Oyunlar

Bize Ulaşın

Hızlı Erişim

Bizi Harita da Bulun