🌈 Renkler Ülkesi

\n \n\n\n",[137],"571783d9-e687-48c5-8787-f82a190f540d","game.js","f9a7f870-7078-11f1-a21e-1607ee4eb77e",["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",[144],"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",[151],"pulls","branches","forks","envVars",{"_164":40,"_166":40},"connections",{"_164":40,"_165":40},"count","unfilledCount","emptyCount",{"_18":150,"_20":151,"_113":152,"_115":-5,"_116":66,"_117":153,"_119":101,"_22":185,"_63":40,"_121":94,"_122":155,"_124":26,"_125":-5,"_173":186,"_83":187},{"_18":143,"_20":144,"_113":145,"_115":-5,"_116":66,"_117":64,"_119":101,"_22":182,"_63":139,"_121":147,"_122":148,"_124":26,"_125":-5,"_173":183,"_83":184},{"_18":136,"_20":137,"_113":138,"_115":-5,"_116":66,"_117":139,"_119":101,"_22":179,"_63":40,"_121":94,"_122":141,"_124":26,"_125":-5,"_173":180,"_83":181},{"_18":127,"_20":128,"_113":129,"_115":-5,"_116":66,"_117":130,"_119":101,"_22":176,"_63":132,"_121":133,"_122":134,"_124":26,"_125":-5,"_173":177,"_83":178},{"_18":111,"_20":112,"_113":114,"_115":-5,"_116":66,"_117":118,"_119":101,"_22":172,"_63":40,"_121":94,"_122":123,"_124":26,"_125":-5,"_173":174,"_83":175},["D",1782379983683],"children",[],[112],["D",1782379949281],[],[128],["D",1782379945230],[],[137],["D",1782380088693],[],[144],["D",1782380051409],[],[151],["D",1782379939176],{"_16":17,"_81":77},{"_16":17,"_75":-5,"_76":77,"_33":34,"_78":79,"_80":26},{"_63":64,"_20":65,"_18":66,"_67":19,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":21,"_74":17},"ctx",{"_56":-5,"_103":225,"_226":227,"_228":229,"_230":26,"_231":26,"_232":26,"_233":101,"_234":-5,"_235":-7,"_236":-7,"_237":40,"_238":26,"_239":26,"_240":-5,"_241":26,"_242":26,"_243":26,"_244":-5},"ENV",{"_196":197,"_198":199,"_200":65,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224},"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"]

Search