🌈 Renkler Ülkesi

\n \n\n\n",[69],"571783d9-e687-48c5-8787-f82a190f540d","game.js","f9a7f870-7078-11f1-a21e-1607ee4eb77e",8,["D",1782380088693],"script","// 🌈 Renkler Ülkesi — çocuklar için renk öğrenme oyunu\n\nconst COLORS = [\n { id: \"kirmizi\", name: \"KIRMIZI\", hex: \"#ff2d4d\", emoji: \"❤️\" },\n { id: \"sari\", name: \"SARI\", hex: \"#ffd000\", emoji: \"💛\" },\n { id: \"yesil\", name: \"YEŞİL\", hex: \"#2ecc40\", emoji: \"💚\" },\n { id: \"mavi\", name: \"MAVİ\", hex: \"#1f8fff\", emoji: \"💙\" },\n];\n\n// Her renge ait sevimli nesneler\nconst OBJECTS = {\n kirmizi: [\n { emoji: \"🐞\", name: \"uğur böceği\" },\n { emoji: \"🍎\", name: \"elma\" },\n ],\n sari: [\n { emoji: \"🐥\", name: \"civciv\" },\n { emoji: \"☀️\", name: \"güneş\" },\n ],\n yesil: [\n { emoji: \"🌳\", name: \"ağaç\" },\n { emoji: \"🐸\", name: \"kurbağa\" },\n ],\n mavi: [\n { emoji: \"🐟\", name: \"balık\" },\n { emoji: \"🌊\", name: \"deniz\" },\n ],\n};\n\nconst app = document.getElementById(\"app\");\nlet score = 0;\n\n/* ----------------- Ses ----------------- */\nlet audioCtx;\nfunction tone(freq, dur = 0.15, type = \"sine\", delay = 0) {\n try {\n if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n const t = audioCtx.currentTime + delay;\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n osc.type = type;\n osc.frequency.value = freq;\n gain.gain.setValueAtTime(0.0001, t);\n gain.gain.exponentialRampToValueAtTime(0.25, t + 0.02);\n gain.gain.exponentialRampToValueAtTime(0.0001, t + dur);\n osc.connect(gain).connect(audioCtx.destination);\n osc.start(t);\n osc.stop(t + dur);\n } catch (e) {}\n}\nfunction happySound() {\n [523, 659, 784, 1046].forEach((f, i) => tone(f, 0.2, \"triangle\", i * 0.09));\n}\nfunction sadSound() {\n tone(300, 0.18, \"sawtooth\");\n tone(220, 0.22, \"sawtooth\", 0.12);\n}\nfunction popSound() {\n tone(700, 0.1, \"square\");\n}\n\n/* ----------------- Konuşma ----------------- */\nfunction speak(text) {\n try {\n window.speechSynthesis.cancel();\n const u = new SpeechSynthesisUtterance(text);\n u.lang = \"tr-TR\";\n u.rate = 0.85;\n u.pitch = 1.2;\n window.speechSynthesis.speak(u);\n } catch (e) {}\n}\n\n/* ----------------- Yardımcılar ----------------- */\nfunction shuffle(arr) {\n const a = [...arr];\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}\nfunction randItem(arr) {\n return arr[Math.floor(Math.random() * arr.length)];\n}\n\nfunction confetti() {\n const emojis = [\"🎉\", \"⭐\", \"🌈\", \"✨\", \"🎊\", \"💫\", \"🍬\"];\n for (let i = 0; i < 28; i++) {\n const c = document.createElement(\"div\");\n c.className = \"confetti\";\n c.textContent = randItem(emojis);\n c.style.left = Math.random() * 100 + \"vw\";\n c.style.animationDuration = 1.6 + Math.random() * 1.4 + \"s\";\n c.style.fontSize = 1.2 + Math.random() * 1.6 + \"rem\";\n document.body.appendChild(c);\n setTimeout(() => c.remove(), 3200);\n }\n}\nfunction starBurst(x, y) {\n const s = document.createElement(\"div\");\n s.className = \"star-burst\";\n s.textContent = \"⭐\";\n s.style.left = x - 16 + \"px\";\n s.style.top = y - 16 + \"px\";\n document.body.appendChild(s);\n setTimeout(() => s.remove(), 700);\n}\n\n/* ----------------- MENÜ ----------------- */\nfunction renderMenu() {\n app.innerHTML = `\n \n \n `;\n document.getElementById(\"play\").onclick = () => { popSound(); startGame(); };\n document.getElementById(\"learn\").onclick = () => { popSound(); renderLearn(); };\n}\n\n/* ----------------- ÖĞRENME MODU ----------------- */\nfunction renderLearn() {\n const cards = COLORS.map((c) => {\n const objs = OBJECTS[c.id];\n return `\n

${c.name}

${objs.map((o) => o.emoji).join(\" \")}

`;\n }).join(\"\");\n\n app.innerHTML = `\n \n

Renkler

Dokun ve dinle! 👂

${cards}

\n \n `;\n document.getElementById(\"back\").onclick = () => { popSound(); renderMenu(); };\n app.querySelectorAll(\".learn-card\").forEach((el) => {\n el.onclick = () => {\n popSound();\n const color = COLORS.find((c) => c.id === el.dataset.id);\n const obj = randItem(OBJECTS[color.id]);\n speak(`${color.name}. ${obj.name}.`);\n el.style.transform = \"scale(0.92)\";\n setTimeout(() => (el.style.transform = \"\"), 150);\n };\n });\n}\n\n/* ----------------- OYUN MODU ----------------- */\nfunction startGame() {\n score = 0;\n nextRound();\n}\n\nfunction nextRound() {\n const target = randItem(COLORS);\n const obj = randItem(OBJECTS[target.id]);\n const options = shuffle(COLORS);\n\n const cards = options.map((c) => `\n

\n ${OBJECTS[c.id].map((o) => o.emoji).join(\"\")}\n

`).join(\"\");\n\n app.innerHTML = `\n \n

Bu nesne hangi renk?

${obj.emoji}
${target.name}

${cards}

\n \n `;\n\n speak(`${obj.name}. Hangi renk?`);\n\n document.getElementById(\"back\").onclick = () => { popSound(); renderMenu(); };\n const msg = document.getElementById(\"msg\");\n\n app.querySelectorAll(\".color-card\").forEach((el) => {\n el.onclick = () => {\n const picked = el.dataset.id;\n if (picked === target.id) {\n score++;\n el.classList.add(\"correct\");\n msg.textContent = randItem([\"Harikasın! 🎉\", \"Aferin! 🌟\", \"Süpersin! 💖\", \"Çok iyi! 🥳\"]);\n msg.className = \"message good\";\n happySound();\n confetti();\n const r = el.getBoundingClientRect();\n starBurst(r.left + r.width / 2, r.top + r.height / 2);\n speak(randItem([\"Aferin!\", \"Harika!\", \"Çok güzel!\", \"Bravo!\"]));\n el.style.pointerEvents = \"none\";\n setTimeout(nextRound, 1700);\n } else {\n el.classList.add(\"wrong\");\n msg.textContent = \"Tekrar dene! 🤗\";\n msg.className = \"message bad\";\n sadSound();\n setTimeout(() => el.classList.remove(\"wrong\"), 400);\n }\n };\n });\n}\n\nrenderMenu();\n",[76],"3f3ea353-af02-4ba7-b898-68f138a63309","README.md","05b31e4c-7079-11f1-9f02-1607ee4eb77e",6,["D",1782380051409],"# 🌈 Renkler Ülkesi\n\nÇocuklar için neşeli, etkileşimli bir **renk öğrenme oyunu**. Türkçe seslendirmeli, animasyonlu ve mobil dostu.\n\n## Modlar\n\n- **📚 Renkleri Öğren** — Her renge dokun, adını sesli olarak duy.\n- **🎮 Renk Bulma Oyunu** — Ekrandaki renk adını oku ve doğru renge dokun. Doğru bilince konfeti, yıldız ve alkış! ⭐\n\n## Özellikler\n\n- 10 farklı renk (emojili kartlar 🍎🍊🐸🐳🍇)\n- Türkçe sesli okuma (Web Speech API)\n- Web Audio ile neşeli ses efektleri\n- Konfeti ve kutlama animasyonları\n- Telefon ve tablette tam uyumlu\n\n## Yapı\n\n```mermaid\ngraph TD\n A[main.ts
HTTP sunucu] -->|/| B[index.html]\n A -->|/style.css| C[style.css]\n A -->|/game.js| D[game.js
oyun mantığı]\n```\n\n- `main.ts` — statik dosyaları sunan HTTP handler\n- `index.html` — sayfa iskeleti\n- `style.css` — renkli, çocuk dostu tasarım\n- `game.js` — menü, öğrenme modu, oyun mantığı, sesler ve animasyonlar\n",[84],{"_37":83,"_13":84,"_40":85,"_42":-5,"_43":44,"_45":86,"_47":48,"_49":108,"_17":51,"_52":24,"_53":88,"_55":56,"_57":-5,"_96":109,"_18":110},{"_37":75,"_13":76,"_40":77,"_42":-5,"_43":44,"_45":78,"_47":48,"_49":105,"_17":71,"_52":80,"_53":81,"_55":56,"_57":-5,"_96":106,"_18":107},{"_37":68,"_13":69,"_40":70,"_42":-5,"_43":44,"_45":71,"_47":48,"_49":102,"_17":51,"_52":24,"_53":73,"_55":56,"_57":-5,"_96":103,"_18":104},{"_37":59,"_13":60,"_40":61,"_42":-5,"_43":44,"_45":62,"_47":48,"_49":99,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_96":100,"_18":101},{"_37":38,"_13":39,"_40":41,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":95,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_96":97,"_18":98},["D",1782379983683],"children",[],[39],["D",1782379949281],[],[60],["D",1782379945230],[],[69],["D",1782380088693],[],[76],["D",1782380051409],[],[84],"8949bd30-f10a-4e5c-93e0-66fd07e62b2a",["D",1782379939176],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Çocuklar için renk öğrenme oyunu","imageUrl","userId","2bdff85e-dfc1-4e21-8443-5372551c651b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","907b9e56-5a39-4385-bf06-9f5fc6e09424","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_164":160},"org",{"_11":12,"_158":-5,"_159":160,"_121":122,"_161":162,"_163":56},"branch",{"_17":78,"_13":16,"_37":44,"_150":111,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":14,"_157":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJxTGowakpBSVg0VmRJMTU3cnJzRmxwZjJycSJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_37":111,"_13":14,"_49":217,"_113":-5,"_114":56,"_115":116,"_117":116,"_118":119,"_120":-5,"_121":122,"_123":-5,"_124":56,"_125":-5,"_126":-5,"_127":51,"_128":129,"_130":-5,"_131":-5,"_132":-5,"_133":-5,"_134":135,"_136":135,"_137":138,"_139":138,"_140":138,"_141":135,"_142":135,"_143":218,"_145":219,"_147":220,"_149":56},[202,203,204,205,206],"files",[202,203,204,205,206],"counts",{"_193":51,"_194":64,"_195":64,"_31":196,"_197":198},[183,184,185,186,187],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_37":83,"_13":84,"_40":85,"_42":-5,"_43":44,"_45":86,"_47":48,"_49":87,"_17":51,"_52":24,"_53":88,"_55":56,"_57":-5,"_18":192},{"_37":75,"_13":76,"_40":77,"_42":-5,"_43":44,"_45":78,"_47":48,"_49":79,"_17":71,"_52":80,"_53":81,"_55":56,"_57":-5,"_18":191},{"_37":68,"_13":69,"_40":70,"_42":-5,"_43":44,"_45":71,"_47":48,"_49":72,"_17":51,"_52":24,"_53":73,"_55":56,"_57":-5,"_18":190},{"_37":59,"_13":60,"_40":61,"_42":-5,"_43":44,"_45":62,"_47":48,"_49":63,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_18":189},{"_37":38,"_13":39,"_40":41,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_18":188},[39],[60],[69],[76],[84],"pulls","branches","forks",{"_199":51,"_201":51},"connections",{"_199":51,"_200":51},"count","unfilledCount","emptyCount",{"_37":83,"_13":84,"_40":85,"_42":-5,"_43":44,"_45":86,"_47":48,"_49":108,"_17":51,"_52":24,"_53":88,"_55":56,"_57":-5,"_96":215,"_18":216},{"_37":75,"_13":76,"_40":77,"_42":-5,"_43":44,"_45":78,"_47":48,"_49":105,"_17":71,"_52":80,"_53":81,"_55":56,"_57":-5,"_96":213,"_18":214},{"_37":68,"_13":69,"_40":70,"_42":-5,"_43":44,"_45":71,"_47":48,"_49":102,"_17":51,"_52":24,"_53":73,"_55":56,"_57":-5,"_96":211,"_18":212},{"_37":59,"_13":60,"_40":61,"_42":-5,"_43":44,"_45":62,"_47":48,"_49":99,"_17":64,"_52":65,"_53":66,"_55":56,"_57":-5,"_96":209,"_18":210},{"_37":38,"_13":39,"_40":41,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":95,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_96":207,"_18":208},[],[39],[],[60],[],[69],[],[76],[],[84],["D",1782379939176],{"_11":12,"_164":160},{"_11":12,"_158":-5,"_159":160,"_121":122,"_161":162,"_163":56},{"_17":78,"_13":16,"_37":44,"_150":111,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":14,"_157":12},"ctx",{"_143":-5,"_180":254,"_255":256,"_257":258,"_259":56,"_260":56,"_261":56,"_262":48,"_263":-5,"_264":-7,"_265":-7,"_266":51,"_267":56,"_268":56,"_269":-5,"_270":56,"_271":56,"_272":56,"_273":-5},"ENV",{"_225":226,"_227":228,"_229":16,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code