もぐらたたき（テンプレートから）

atomic.studio/s/3730

📄 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="tm">30</span>s ／ スコア <span id="sc">0</span></div>
<div id="board" style="grid-template-columns:repeat(3,72px)"></div>
<div class="hint" id="hint">もぐらをタップ！</div><button class="btn" id="restart">もう一度</button>
</div>
<script id="game-data" type="application/json">{"title": "もぐらたたき", "bg": "#102a16", "mole": "#a16207", "hit": "#f59e0b", "time": 30, "holes": 9}</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>