クリッカー育成（テンプレートから）

atomic.studio/s/3703

📄 index.html コードを直接編集して「適用」でプレビューに反映

<!doctype html><html lang="ja"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"><title>クリッカー育成</title>
<style>
 html,body{margin:0;height:100%;background:#0e1525;color:#f5f9fc;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
 .wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;box-sizing:border-box}
 h1{font-size:18px;margin:0;font-weight:700} .hud{font-size:14px;color:#9da9bd} .hint{font-size:12px;color:#6b7689}
 canvas{background:var(--bg,#11131f);border-radius:14px;box-shadow:0 12px 48px #0008;max-width:96vw;height:auto;touch-action:none}
 .btn{background:#6366f1;color:#fff;border:0;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer}
 #board{display:grid;gap:6px} .cell{display:flex;align-items:center;justify-content:center;border-radius:8px;font-weight:700;user-select:none;cursor:pointer}
</style></head><body><div class="wrap">
<h1 id="title">クリッカー育成</h1><div class="hud" id="hud"><span id="amt">0</span> <span id="u"></span> ／ 自動 <span id="ps">0</span>/s</div>
<div style="font-size:80px;cursor:pointer;user-select:none" id="big">🍪</div>
<div class="hint" id="hint">クリックで増やす・貯めて自動化</div><button class="btn" id="restart">もう一度</button>
</div>
<script id="game-data" type="application/json">{"title": "クッキー工場", "bg": "#1a1206", "main": "#f59e0b", "unit": "クッキー", "perClick": 1, "upgradeCost": 20}</script>
<script>
const DATA=JSON.parse(document.getElementById('game-data').textContent);
document.getElementById('title').textContent=DATA.title||document.title;
if(DATA.bg)document.documentElement.style.setProperty('--bg',DATA.bg);

</script></body></html>