○×ゲーム（テンプレートから）

atomic.studio/s/3724

📄 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="msg">あなたの番（○）</span></div>
<div id="board" style="grid-template-columns:repeat(3,72px);grid-auto-rows:72px"></div>
<div class="hint" id="hint">マスをタップ。CPUと対戦</div><button class="btn" id="restart">もう一度</button>
</div>
<script id="game-data" type="application/json">{"title": "○×ゲーム", "bg": "#1c2333", "me": "#22d3ee", "cpu": "#f43f5e"}</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>