クッキークリッカー

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_158":159,"_160":161},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_108":89,"_27":53,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":58,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",10,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","52c9049c-a564-11f1-87d9-1607ee4eb77e","name","fileType","http","content","\n\n\n\nクッキークリッカー\n\n\n\n\n

0 クッキー

1秒あたり 0 クッキー

\n\n \n\n

\n 累計: 0 枚\n クリック: +1\n

\n\n

ショップ

\n\n

\n \n \n

\n\n\n\n\n","// ---- 型定義 ----\ninterface Building {\n id: string;\n name: string;\n icon: string;\n baseCost: number;\n baseCps: number;\n desc: string;\n}\n\ninterface GameState {\n cookies: number;\n totalBaked: number;\n clickPower: number;\n owned: Record;\n}\n\n// window.storage の型拡張（実際の実装は環境依存）\ndeclare global {\n interface Window {\n storage: {\n set(key: string, value: string, sync: boolean): Promise;\n get(key: string, sync: boolean): Promise<{ value?: string } | undefined>;\n };\n }\n}\n\n// ---- 定数 ----\nconst STORAGE_KEY = \"cookie-clicker-save\";\n\nconst buildings: Building[] = [\n {\n id: \"cursor\",\n name: \"カーソル\",\n icon: \"👆\",\n baseCost: 15,\n baseCps: 0.1,\n desc: \"おばあちゃんの指\",\n },\n {\n id: \"grandma\",\n name: \"グランマ\",\n icon: \"👵\",\n baseCost: 100,\n baseCps: 1,\n desc: \"素敵なおばあちゃんがもっとクッキーを焼いてくれます\",\n },\n {\n id: \"farm\",\n name: \"農場\",\n icon: \"🌾\",\n baseCost: 1100,\n baseCps: 8,\n desc: \"おばあちゃんが所有する農場\",\n },\n {\n id: \"mine\",\n name: \"鉱山\",\n icon: \"⛏️\",\n baseCost: 12000,\n baseCps: 47,\n desc: \"おばあちゃんが所有する鉱山\",\n },\n {\n id: \"factory\",\n name: \"工場\",\n icon: \"🏭\",\n baseCost: 130000,\n baseCps: 260,\n desc: \"おばあちゃんが所有する工場\",\n },\n {\n id: \"bank\",\n name: \"銀行\",\n icon: \"🏦\",\n baseCost: 1400000,\n baseCps: 1400,\n desc: \"おばあちゃんが所有する銀行\",\n },\n {\n id: \"temple\",\n name: \"寺院\",\n icon: \"🛕\",\n baseCost: 20000000,\n baseCps: 7800,\n desc: \"おばあちゃんが所有する寺院は貴重な古代のチョコレートで満ちています\",\n },\n {\n id: \"wizard\",\n name: \"魔法の塔\",\n icon: \"🧙\",\n baseCost: 330000000,\n baseCps: 44000,\n desc: \"魔法の呪文でクッキーを召喚します\",\n },\n];\n\n// ---- 状態 ----\nlet state: GameState = {\n cookies: 0,\n totalBaked: 0,\n clickPower: 1,\n owned: {},\n};\nbuildings.forEach((b) => state.owned[b.id] = 0);\n\n// ---- DOM 要素（HTML 側の id と一致させる） ----\nconst cookieCountEl = document.getElementById(\"cookieCount\") as HTMLElement;\nconst cpsLabelEl = document.getElementById(\"cpsLabel\") as HTMLElement;\nconst totalBakedEl = document.getElementById(\"totalBaked\") as HTMLElement;\nconst clickPowerLabelEl = document.getElementById(\n \"clickPowerLabel\",\n) as HTMLElement;\nconst itemListEl = document.getElementById(\"itemList\") as HTMLElement;\nconst cookieEl = document.getElementById(\"cookie\") as SVGElement;\nconst cookieZoneEl = document.getElementById(\"cookieZone\") as HTMLElement;\nconst saveMsgEl = document.getElementById(\"saveMsg\") as HTMLElement;\nconst rainLayerEl = document.getElementById(\"rainLayer\") as HTMLElement;\n\n// ---- ヘルパー関数 ----\nfunction formatNum(n: number): string {\n if (n < 1000) return Math.floor(n).toLocaleString(\"ja-JP\");\n const suffixes = [\"\", \"K\", \"M\", \"B\", \"T\", \"Qa\", \"Qi\", \"Sx\", \"Sp\"];\n let tier = Math.floor(Math.log10(n) / 3);\n if (tier <= 0) return Math.floor(n).toLocaleString(\"ja-JP\");\n if (tier >= suffixes.length) tier = suffixes.length - 1;\n const scaled = n / Math.pow(1000, tier);\n return scaled.toFixed(scaled < 10 ? 2 : (scaled < 100 ? 1 : 0)) +\n suffixes[tier];\n}\n\nfunction formatCps(n: number): string {\n if (n < 1000) {\n if (n === 0) return \"0\";\n if (n < 10) return n.toFixed(1);\n return Math.floor(n).toLocaleString(\"ja-JP\");\n }\n return formatNum(n);\n}\n\nfunction formatPayback(seconds: number): string {\n if (seconds < 60) return Math.round(seconds) + \"秒\";\n if (seconds < 3600) return Math.round(seconds / 60) + \"分\";\n return (seconds / 3600).toFixed(1) + \"時間\";\n}\n\nfunction costFor(building: Building): number {\n return Math.ceil(\n building.baseCost * Math.pow(1.15, state.owned[building.id]),\n );\n}\n\nfunction totalCps(): number {\n return buildings.reduce((sum, b) => sum + b.baseCps * state.owned[b.id], 0);\n}\n\n// ---- レンダリング ----\nfunction render(): void {\n cookieCountEl.innerHTML = formatNum(state.cookies) +\n \" クッキー\";\n cpsLabelEl.textContent = \"1秒あたり \" + formatCps(totalCps()) + \" クッキー\";\n totalBakedEl.textContent = \"累計: \" + formatNum(state.totalBaked) + \" 枚\";\n clickPowerLabelEl.textContent = \"クリック: +\" + formatNum(state.clickPower);\n\n buildings.forEach((b) => {\n const cost = costFor(b);\n const affordable = state.cookies >= cost;\n let div = itemListEl.querySelector(`[data-id=\"${b.id}\"]`) as\n | HTMLElement\n | null;\n if (!div) {\n div = document.createElement(\"div\");\n div.dataset.id = b.id;\n div.innerHTML = `\n

${b.icon}

\n `;\n itemListEl.appendChild(div);\n }\n div.className = \"item\" + (affordable ? \"\" : \" disabled\");\n const nameSpan = div.querySelector(\".name span\") as HTMLElement;\n const ownedSpan = div.querySelector(\".owned\") as HTMLElement;\n const descEl = div.querySelector(\".desc\") as HTMLElement;\n const costEl = div.querySelector(\".cost\") as HTMLElement;\n\n nameSpan.textContent = b.name;\n ownedSpan.textContent = String(state.owned[b.id]);\n const payback = b.baseCost / b.baseCps;\n descEl.textContent = `${b.desc} ・ +${formatCps(b.baseCps)}/秒 (約${\n formatPayback(payback)\n }で元が取れる)`;\n costEl.textContent = `${formatNum(cost)} クッキー`;\n });\n}\n\n// ---- 購入 ----\nfunction buyBuilding(b: Building): void {\n const cost = costFor(b);\n if (state.cookies < cost) return;\n state.cookies -= cost;\n state.owned[b.id] += 1;\n render();\n}\n\n// ---- 雨（落下クッキー） ----\nconst MAX_RAIN_COOKIES = 60;\n\nfunction spawnRainCookie(): void {\n if (rainLayerEl.childElementCount > MAX_RAIN_COOKIES) return;\n const el = document.createElement(\"div\");\n el.className = \"rain-cookie\";\n el.textContent = \"🍪\";\n const fallDuration = 3.5 + Math.random() * 3;\n const swayDuration = 1.5 + Math.random() * 1.5;\n const size = 16 + Math.random() * 16;\n el.style.left = (Math.random() * 100) + \"vw\";\n el.style.fontSize = size + \"px\";\n el.style.animationDuration = fallDuration + \"s, \" + swayDuration + \"s\";\n rainLayerEl.appendChild(el);\n setTimeout(() => el.remove(), fallDuration * 1000 + 100);\n}\n\nfunction spawnRainBurst(count: number): void {\n for (let i = 0; i < count; i++) {\n setTimeout(() => spawnRainCookie(), i * 60);\n }\n}\n\nlet rainTimer: number | null = null;\nfunction scheduleAmbientRain(): void {\n if (rainTimer) clearTimeout(rainTimer);\n const cps = totalCps();\n const interval = Math.max(250, 1800 / (1 + Math.log10(cps + 1)));\n rainTimer = window.setTimeout(() => {\n if (totalCps() > 0) spawnRainCookie();\n scheduleAmbientRain();\n }, interval);\n}\nscheduleAmbientRain();\n\n// ---- 浮遊数字 ----\nfunction spawnFloatNum(x: number, y: number, amount: number): void {\n const el = document.createElement(\"div\");\n el.className = \"float-num\";\n el.textContent = \"+\" + formatNum(amount);\n el.style.left = x + \"px\";\n el.style.top = y + \"px\";\n cookieZoneEl.appendChild(el);\n setTimeout(() => el.remove(), 900);\n}\n\n// ---- クリックイベント ----\ncookieEl.addEventListener(\"click\", (e: MouseEvent) => {\n state.cookies += state.clickPower;\n state.totalBaked += state.clickPower;\n const rect = cookieZoneEl.getBoundingClientRect();\n const x = e.clientX - rect.left + (Math.random() * 30 - 15);\n const y = e.clientY - rect.top;\n spawnFloatNum(x, y, state.clickPower);\n spawnRainBurst(2);\n render();\n});\n\n// ---- ゴールデンクッキー ----\nfunction trySpawnGolden(): void {\n if (document.querySelector(\".golden\")) return;\n if (Math.random() > 0.12) return;\n\n const g = document.createElement(\"div\");\n g.className = \"golden\";\n g.textContent = \"🍪\";\n g.style.fontSize = \"48px\";\n g.style.display = \"flex\";\n g.style.alignItems = \"center\";\n g.style.justifyContent = \"center\";\n const maxX = window.innerWidth - 300;\n const maxY = window.innerHeight - 100;\n g.style.left = Math.max(20, Math.random() * Math.max(maxX, 100)) + \"px\";\n g.style.top = (60 + Math.random() * Math.max(maxY - 100, 100)) + \"px\";\n\n g.addEventListener(\"click\", () => {\n const effects = [\"bonus\", \"frenzy\"];\n const effect = effects[Math.floor(Math.random() * effects.length)];\n if (effect === \"bonus\") {\n const bonus = Math.max(\n 50,\n Math.floor(totalCps() * 30 + state.cookies * 0.05),\n );\n state.cookies += bonus;\n state.totalBaked += bonus;\n showBanner(\"ラッキー！ +\" + formatNum(bonus) + \" クッキー\");\n spawnRainBurst(25);\n } else {\n state.clickPower *= 7;\n showBanner(\"クッキー・フレンジー！クリック効果 7倍 (13秒)\");\n setTimeout(() => {\n state.clickPower = Math.max(1, Math.floor(state.clickPower / 7));\n render();\n }, 13000);\n }\n render();\n g.remove();\n });\n\n document.body.appendChild(g);\n setTimeout(() => g.remove(), 13000);\n}\n\nfunction showBanner(text: string): void {\n const old = document.querySelector(\".banner\");\n if (old) old.remove();\n const b = document.createElement(\"div\");\n b.className = \"banner\";\n b.textContent = text;\n document.body.appendChild(b);\n setTimeout(() => b.remove(), 3000);\n}\n\nsetInterval(trySpawnGolden, 8000);\n\n// ---- ゲームループ ----\nlet lastTick = Date.now();\nsetInterval(() => {\n const now = Date.now();\n const dt = (now - lastTick) / 1000;\n lastTick = now;\n const gain = totalCps() * dt;\n state.cookies += gain;\n state.totalBaked += gain;\n render();\n}, 200);\n\n// ---- セーブ / ロード ----\nasync function saveGame(showMsg: boolean): Promise {\n try {\n await window.storage.set(STORAGE_KEY, JSON.stringify(state), false);\n if (showMsg) {\n saveMsgEl.textContent = \"保存しました\";\n setTimeout(() => saveMsgEl.textContent = \"\", 2000);\n }\n } catch (err) {\n console.error(\"save error\", err);\n if (showMsg) saveMsgEl.textContent = \"保存に失敗しました\";\n }\n}\n\nasync function loadGame(): Promise {\n try {\n const result = await window.storage.get(STORAGE_KEY, false);\n if (result?.value) {\n const loaded = JSON.parse(result.value) as Partial;\n state = Object.assign(state, loaded);\n buildings.forEach((b) => {\n if (!(b.id in state.owned)) state.owned[b.id] = 0;\n });\n }\n } catch (_err) {\n // セーブがなければ何もしない\n }\n render();\n}\n\n// ---- イベント登録 ----\ndocument.getElementById(\"saveBtn\")?.addEventListener(\n \"click\",\n () => saveGame(true),\n);\ndocument.getElementById(\"resetBtn\")?.addEventListener(\"click\", async () => {\n if (!confirm(\"本当にリセットしますか？進行状況が消えます。\")) return;\n state = { cookies: 0, totalBaked: 0, clickPower: 1, owned: {} };\n buildings.forEach((b) => state.owned[b.id] = 0);\n await saveGame(false);\n render();\n});\n\n// ストアのイベントデリゲーション\nitemListEl.addEventListener(\"click\", (e: Event) => {\n const target = e.target as HTMLElement;\n const itemDiv = target.closest(\".item\") as HTMLElement | null;\n if (!itemDiv) return;\n const b = buildings.find((bld) => bld.id === itemDiv.dataset.id);\n if (b) buyBuilding(b);\n});\n\n// 自動セーブ（20秒ごと）\nsetInterval(() => saveGame(false), 20000);\n\n// 起動\nloadGame();","createdAt",["D",1788199272981],"branchVersion","branchId","5b6b29f3-9ac0-41d1-b293-5008419e6c5b","id","f00cd481-77e5-4bf8-b22a-5e4615b701be","cu",["D",1788198506191],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","9f3bac8a-d43d-4ccf-9505-cf0f141186f8","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019fa766-f010-73f2-920a-31044edf22b4","tursoName","f00cd48177e54bf8b22a5e4615b701be","tursoHostname","f00cd48177e54bf8b22a5e4615b701be-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789518676100],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":55,"_104":105,"_106":25},"branch",{"_13":88,"_32":89,"_43":42,"_90":44,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":45,"_97":98},"isOwned",56,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nznp","handle","displayName","AbyssalFractal","avatar","https://avatars.githubusercontent.com/u/308141039?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":153,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":154,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":155,"_83":156,"_85":157,"_87":25},"tree",[148],"files",[148],"counts",{"_137":62,"_138":139,"_140":62,"_141":142,"_143":144},"contents",[129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":130,"_32":28,"_30":31,"_131":-5,"_41":42,"_40":14,"_132":25,"_38":133,"_13":134,"_33":34,"_35":37,"_24":25,"_135":-5,"_27":136},"29bc194f-9e40-4b40-a019-d2a1d04b9639","parentId","latest",["D",1788199272981],3,"label",[28],"pulls","branches",1,"forks","envVars",{"_145":62,"_147":62},"connections",{"_145":62,"_146":62},"count","unfilledCount","emptyCount",{"_43":130,"_32":28,"_30":31,"_131":-5,"_41":42,"_40":14,"_132":25,"_38":149,"_13":134,"_33":34,"_35":37,"_24":25,"_135":-5,"_150":151,"_27":152},["D",1788199272981],"children",[],[28],["D",1788198506191],["D",1789518676100],{"_99":98,"_107":103},{"_99":98,"_100":101,"_102":103,"_18":55,"_104":105,"_106":25},{"_13":88,"_32":89,"_43":42,"_90":44,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":45,"_97":98},"ctx",{"_81":-5,"_126":191,"_192":193,"_194":195,"_196":25,"_197":25,"_198":25,"_199":58,"_200":-5,"_201":-7,"_202":-7,"_203":62,"_204":25,"_205":25,"_206":-5,"_207":25,"_208":25,"_209":25,"_210":-5},"ENV",{"_162":163,"_164":165,"_166":89,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Diff · v10