SES KOPYASI
by DriftBuilder15572 lines15.9 KB
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>SES KOPYASI</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: #0a0a0f;
color: #fff;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#game {
width: 100%;
max-width: 480px;
height: 100vh;
max-height: 900px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
/* Menü */
#menu {
text-align: center;
animation: fadeIn 0.6s ease;
}
#menu h1 {
font-size: 2.5rem;
font-weight: 900;
background: linear-gradient(90deg, #00ff88, #00ccff, #ff00aa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 8px;
letter-spacing: -1px;
}
#menu p { color: #888; margin-bottom: 30px; font-size: 0.95rem; }
.best {
background: rgba(255,255,255,0.05);
padding: 10px 20px;
border-radius: 12px;
margin-bottom: 30px;
display: inline-block;
font-size: 0.9rem;
color: #aaa;
}
.best span { color: #00ff88; font-weight: 700; }
button {
background: linear-gradient(135deg, #00ff88, #00ccff);
color: #000;
border: none;
padding: 18px 60px;
font-size: 1.2rem;
font-weight: 800;
border-radius: 50px;
cursor: pointer;
transition: transform 0.15s;
letter-spacing: 1px;
}
button:active { transform: scale(0.95); }
/* Oyun alanı */
#arena { display: none; text-align: center; width: 100%; }
#roundInfo {
position: absolute; top: 20px; left: 0; right: 0;
display: flex; justify-content: space-between;
padding: 0 24px;
font-size: 0.85rem;
color: #666;
font-weight: 600;
}
#roundInfo b { color: #fff; }
#signal {
width: 220px;
height: 220px;
border-radius: 50%;
margin: 0 auto 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 800;
letter-spacing: 2px;
transition: all 0.2s;
background: #1a1a24;
color: #333;
position: relative;
}
#signal.active {
box-shadow: 0 0 60px currentColor, 0 0 120px currentColor;
animation: pulse 0.4s ease;
}
#signal .emoji { font-size: 4rem; display: block; margin-bottom: 5px; }
#signal .label { font-size: 1.1rem; }
#hint {
font-size: 1rem;
color: #aaa;
margin-bottom: 20px;
min-height: 24px;
font-weight: 600;
}
/* Ses göstergesi */
#meter {
width: 100%;
height: 8px;
background: #1a1a24;
border-radius: 4px;
overflow: hidden;
margin-bottom: 20px;
}
#meterFill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #00ff88, #ffaa00, #ff3366);
transition: width 0.05s linear;
border-radius: 4px;
}
/* Geri sayım */
#countdown {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.9);
display: none;
align-items: center;
justify-content: center;
font-size: 8rem;
font-weight: 900;
color: #00ff88;
z-index: 10;
}
#countdown.show { display: flex; animation: pop 0.5s ease; }
/* Sonuç */
#result {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.95);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
text-align: center;
z-index: 20;
}
#result.show { display: flex; animation: fadeIn 0.3s ease; }
#result h2 { font-size: 2rem; margin-bottom: 10px; }
#result .score { font-size: 4rem; font-weight: 900; color: #00ff88; margin: 20px 0; }
#result .sub { color: #888; margin-bottom: 30px; }
/* Liderlik tablosu */
#leaderboard {
position: absolute;
top: 60px;
left: 20px; right: 20px;
display: none;
}
#leaderboard.show { display: block; animation: fadeIn 0.4s; }
#leaderboard h3 { font-size: 0.8rem; color: #666; margin-bottom: 10px; letter-spacing: 2px; }
.lb-row {
display: flex;
justify-content: space-between;
padding: 8px 12px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
margin-bottom: 5px;
font-size: 0.9rem;
}
.lb-row.me { background: rgba(0,255,136,0.15); border: 1px solid rgba(0,255,136,0.3); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes pop { 0%{transform:scale(0.5);opacity:0} 50%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 75%{transform:translateX(10px)} }
.shake { animation: shake 0.3s ease; }
</style>
</head>
<body>
<div id="game">
<!-- MENÜ -->
<div id="menu">
<h1>SES KOPYASI</h1>
<p>Rengi gör. Sesini kopyala.</p>
<div class="best">En Yüksek: <span id="bestScore">0</span></div>
<br>
<button onclick="startGame()">BAŞLA</button>
<p style="margin-top:30px; font-size:0.8rem; color:#555;">
🎤 Mikrofon izni gerekli<br>
Sessiz bir ortamda oyna
</p>
</div>
<!-- OYUN ALANI -->
<div id="arena">
<div id="roundInfo">
<div>Tur: <b id="roundNum">1</b></div>
<div>Skor: <b id="scoreNum">0</b></div>
<div>Can: <b id="lifeNum">❤❤❤</b></div>
</div>
<div id="signal">
<div>
<span class="emoji">🎤</span>
<div class="label">HAZIR</div>
</div>
</div>
<div id="hint">Hazır ol...</div>
<div id="meter"><div id="meterFill"></div></div>
<div id="leaderboard">
<h3>CANLI SKOR</h3>
<div id="lbList"></div>
</div>
</div>
<!-- GERİ SAYIM -->
<div id="countdown">3</div>
<!-- SONUÇ -->
<div id="result">
<h2 id="resultTitle">OYUN BİTTİ</h2>
<div class="score" id="finalScore">0</div>
<div class="sub" id="resultSub">İyi denemeydi kanka!</div>
<button onclick="startGame()">TEKRAR OYNA</button>
</div>
</div>
<script>
// ==================== OYUN KONFİGÜRASYONU ====================
const CONFIG = {
baseWindow: 1200, // ms — tepki verme süresi
windowDecrease: 0.9, // her 3 turda %10 azalır
minWindow: 500,
dBThresholds: {
low: { min: 0, max: 0.25 }, // sessiz
mid: { min: 0.25, max: 0.55 }, // orta
high: { min: 0.55, max: 1.0 } // yüksek
},
durationThresholds: {
short: { min: 0, max: 250 }, // ms
long: { min: 250, max: 99999 }
},
tolerance: 0.15, // %15 tolerans
maxLives: 3
};
// Renk → hedef ses profili
const SIGNALS = {
green: { color:'#00ff88', emoji:'🟢', label:'KISA & SESSİZ', hint:'Parmak şıklat!', dB:'low', dur:'short' },
blue: { color:'#00ccff', emoji:'🔵', label:'ORTA & ORTA', hint:'El çırp!', dB:'mid', dur:'short' },
red: { color:'#ff3366', emoji:'🔴', label:'UZUN & YÜKSEK', hint:'Bağır! (uzun)', dB:'high', dur:'long' },
yellow: { color:'#ffcc00', emoji:'🟡', label:'UZUN & SESSİZ', hint:'"Hmmmm" diye mırıldan', dB:'low', dur:'long' }
};
// ==================== DURUM ====================
let audioCtx, analyser, micStream, dataArray;
let isPlaying = false;
let currentSignal = null;
let round = 1, score = 0, lives = CONFIG.maxLives;
let listenStart = 0, listenEnd = 0;
let peakVolume = 0;
let reactionWindow = CONFIG.baseWindow;
let soundDetected = false;
let rafId = null;
let roundTimeout = null;
// ==================== SES MOTORU ====================
async function initMic() {
try {
micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
analyser = audioCtx.createAnalyser();
analyser.fftSize = 512;
analyser.smoothingTimeConstant = 0.3;
const source = audioCtx.createMediaStreamSource(micStream);
source.connect(analyser);
dataArray = new Uint8Array(analyser.frequencyBinCount);
return true;
} catch (e) {
alert('Mikrofon izni gerekli kanka! 🎤');
return false;
}
}
function getVolume() {
if (!analyser) return 0;
analyser.getByteTimeDomainData(dataArray);
let sum = 0;
for (let i = 0; i < dataArray.length; i++) {
const v = (dataArray[i] - 128) / 128;
sum += v * v;
}
return Math.sqrt(sum / dataArray.length); // 0-1 arası RMS
}
// ==================== OYUN MANTIĞI ====================
async function startGame() {
document.getElementById('menu').style.display = 'none';
document.getElementById('result').classList.remove('show');
document.getElementById('arena').style.display = 'block';
if (!audioCtx) {
const ok = await initMic();
if (!ok) return;
}
if (audioCtx.state === 'suspended') await audioCtx.resume();
round = 1; score = 0; lives = CONFIG.maxLives;
reactionWindow = CONFIG.baseWindow;
updateHUD();
showLeaderboard();
isPlaying = true;
await countdown(3);
nextRound();
}
function countdown(n) {
return new Promise(resolve => {
const el = document.getElementById('countdown');
el.classList.add('show');
let i = n;
el.textContent = i;
const iv = setInterval(() => {
i--;
if (i > 0) {
el.textContent = i;
el.style.animation = 'none';
void el.offsetWidth;
el.style.animation = 'pop 0.5s ease';
} else {
clearInterval(iv);
el.classList.remove('show');
resolve();
}
}, 800);
});
}
function nextRound() {
if (!isPlaying) return;
if (lives <= 0) return endGame();
// Rastgele sinyal seç
const keys = Object.keys(SIGNALS);
const key = keys[Math.floor(Math.random() * keys.length)];
currentSignal = SIGNALS[key];
const signalEl = document.getElementById('signal');
signalEl.style.color = currentSignal.color;
signalEl.style.background = currentSignal.color + '22';
signalEl.classList.add('active');
signalEl.innerHTML = `
<div>
<span class="emoji">${currentSignal.emoji}</span>
<div class="label" style="color:${currentSignal.color}">${currentSignal.label}</div>
</div>
`;
document.getElementById('hint').textContent = '👉 ' + currentSignal.hint;
document.getElementById('hint').style.color = currentSignal.color;
// Dinlemeye başla
soundDetected = false;
peakVolume = 0;
listenStart = performance.now();
listenEnd = 0;
// Volume meter
meterLoop();
// Zaman aşımı
clearTimeout(roundTimeout);
roundTimeout = setTimeout(() => {
if (!soundDetected) {
fail('Çok yavaş! ⏰');
}
}, reactionWindow);
}
function meterLoop() {
if (!isPlaying || soundDetected) return;
const vol = getVolume();
document.getElementById('meterFill').style.width = Math.min(100, vol * 200) + '%';
if (vol > peakVolume) peakVolume = vol;
// Ses tespit edildi mi? (eşik: 0.05)
if (vol > 0.05) {
if (!soundDetected) {
soundDetected = true;
listenStart = performance.now();
peakVolume = vol;
// Ses bitene kadar bekle (0.15s sessizlik)
waitForSilence();
}
}
rafId = requestAnimationFrame(meterLoop);
}
function waitForSilence() {
let silenceStart = 0;
const check = () => {
if (!isPlaying) return;
const vol = getVolume();
if (vol > peakVolume) peakVolume = vol;
document.getElementById('meterFill').style.width = Math.min(100, vol * 200) + '%';
if (vol < 0.04) {
if (silenceStart === 0) silenceStart = performance.now();
if (performance.now() - silenceStart > 150) {
// Ses bitti
listenEnd = silenceStart;
evaluate();
return;
}
} else {
silenceStart = 0;
}
// Maks 2 saniye dinle
if (performance.now() - listenStart > 2000) {
listenEnd = performance.now();
evaluate();
return;
}
requestAnimationFrame(check);
};
requestAnimationFrame(check);
}
function evaluate() {
if (!isPlaying) return;
clearTimeout(roundTimeout);
cancelAnimationFrame(rafId);
const duration = listenEnd - listenStart;
const volume = peakVolume;
// Hedef aralıkları al
const dbRange = CONFIG.dBThresholds[currentSignal.dB];
const durRange = CONFIG.durationThresholds[currentSignal.dur];
// Toleranslı kontrol
const dbOK = volume >= dbRange.min * (1 - CONFIG.tolerance) &&
volume <= dbRange.max * (1 + CONFIG.tolerance);
const durOK = duration >= durRange.min * (1 - CONFIG.tolerance) &&
duration <= durRange.max * (1 + CONFIG.tolerance);
// Feedback
const volDesc = volume < 0.15 ? 'çok sessiz' : volume < 0.4 ? 'orta' : 'yüksek';
const durDesc = duration < 250 ? 'kısa' : 'uzun';
if (dbOK && durOK) {
// Başarılı
const bonus = Math.max(0, Math.round((reactionWindow - duration) / 100));
score += 10 + bonus;
document.getElementById('hint').textContent = `✅ MÜKEMMEL! +${10 + bonus}`;
document.getElementById('hint').style.color = '#00ff88';
updateHUD();
setTimeout(() => {
round++;
// Her 3 turda zorlaş
if (round % 3 === 1 && round > 1) {
reactionWindow = Math.max(CONFIG.minWindow, reactionWindow * CONFIG.windowDecrease);
}
updateHUD();
setTimeout(nextRound, 400);
}, 600);
} else {
const reason = !dbOK
? `Sesin ${volDesc} oldu (${currentSignal.label} bekleniyordu)`
: `Süre ${durDesc} oldu (${currentSignal.dur === 'short' ? 'kısa' : 'uzun'} bekleniyordu)`;
fail(reason);
}
}
function fail(reason) {
clearTimeout(roundTimeout);
cancelAnimationFrame(rafId);
lives--;
updateHUD();
const signalEl = document.getElementById('signal');
signalEl.classList.add('shake');
setTimeout(() => signalEl.classList.remove('shake'), 300);
document.getElementById('hint').textContent = '❌ ' + reason;
document.getElementById('hint').style.color = '#ff3366';
if (lives <= 0) {
setTimeout(endGame, 800);
} else {
setTimeout(() => {
round++;
updateHUD();
nextRound();
}, 1200);
}
}
function updateHUD() {
document.getElementById('roundNum').textContent = round;
document.getElementById('scoreNum').textContent = score;
document.getElementById('lifeNum').textContent = '❤'.repeat(Math.max(0, lives)) || '💀';
document.getElementById('lifeNum').style.color = lives === 1 ? '#ff3366' : '#fff';
updateLeaderboard();
}
function endGame() {
isPlaying = false;
clearTimeout(roundTimeout);
cancelAnimationFrame(rafId);
const best = Math.max(score, parseInt(localStorage.getItem('echoBest') || '0'));
localStorage.setItem('echoBest', best);
document.getElementById('bestScore').textContent = best;
document.getElementById('finalScore').textContent = score;
document.getElementById('resultTitle').textContent = score > 100 ? '🔥 EFSANE!' : score > 50 ? '💪 İYİ!' : '😅 TEKRAR DENE';
document.getElementById('resultSub').textContent = `Tur ${round} • En iyi: ${best}`;
document.getElementById('result').classList.add('show');
document.getElementById('arena').style.display = 'none';
}
// ==================== LİDERLİK TABLOSU (Yerel Demo) ====================
// Not: Gerçek oyunda Firebase/Supabase ile online yapılır
function showLeaderboard() {
document.getElementById('leaderboard').classList.add('show');
}
function updateLeaderboard() {
const list = document.getElementById('lbList');
// Demo: Yerel skorlar simülasyonu
const dummy = [
{ name: 'Sen', score: score, me: true },
{ name: 'Kaan', score: 87 },
{ name: 'Zeynep', score: 64 },
{ name: 'Mert', score: 41 }
].sort((a, b) => b.score - a.score);
list.innerHTML = dummy.map(p =>
`<div class="lb-row ${p.me ? 'me' : ''}">
<span>${p.me ? '👤 ' : ''}${p.name}</span>
<span><b>${p.score}</b></span>
</div>`
).join('');
}
// ==================== BAŞLAT ====================
window.addEventListener('load', () => {
document.getElementById('bestScore').textContent =
localStorage.getItem('echoBest') || '0';
});
</script>
</body>
</html>Game Source: SES KOPYASI
Creator: DriftBuilder15
Libraries: none
Complexity: complex (572 lines, 15.9 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: ses-kopyasi-driftbuilder15" to link back to the original. Then publish at arcadelab.ai/publish.