<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>30秒当てゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<h1>ぴったり20秒当てゲーム</h1>
<p class="game-introduction">5回チャレンジして、最高得点を目指そう！</p>
<div class="controls">
<button id="startButton">スタート</button>
<button id="stopButton" disabled>ストップ</button>
</div>
<p id="timerDisplay"></p>
<p id="result"></p>
<p id="attemptsLeft">残り回数: 5</p>
<p id="totalPoints">累計ポイント: 0</p>
</div>
<div class="score-board">
<h2>ポイント表</h2>
<table>
<tr>
<th>差</th>
<th>ポイント</th>
</tr>
<tr>
<td>ぴったり20秒</td>
<td>15ポイント</td>
</tr>
<tr>
<td>0.5秒以内</td>
<td>10ポイント</td>
</tr>
<tr>
<td>1秒以内</td>
<td>8ポイント</td>
</tr>
<tr>
<td>2秒以内</td>
<td>6ポイント</td>
</tr>
<tr>
<td>3秒以内</td>
<td>4ポイント</td>
</tr>
<tr>
<td>5秒以内</td>
<td>2ポイント</td>
</tr>
<tr>
<td>5秒超</td>
<td>1ポイント</td>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
