ピンポン（テンプレートから）

atomic.studio/s/3727

📄 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="ps">0</span> ― CPU <span id="cs">0</span></div>
<canvas id="cv" width="420" height="300"></canvas>
<div class="hint" id="hint">← → / ドラッグ でラケット移動</div><button class="btn" id="restart">もう一度</button>
</div>
<script id="game-data" type="application/json">{"title": "ピンポン", "bg": "#0b1020", "ball": "#fde047", "me": "#60a5fa", "cpu": "#f43f5e", "goal": 5}</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>