<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ブラウザ上で遊べるかるた取りゲームです。">
<meta name="keywords" content="かるた, 小倉百人一首, ブラウザゲーム, かるた取り">
<title>かるた取りゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>かるた取りゲーム</h1>
</header>
<!-- メニューセクション -->
<div id="menu">
<div class="menu-section">
<div class="menu-section">
<h2>【札の向き】</h2>
<label><input type="radio" name="direction" value="normal" checked> 通常</label>
<label><input type="radio" name="direction" value="turn"> 逆向き</label>
<label><input type="radio" name="direction" value="random"> ランダム</label>
</div>
<button id="start-btn">ゲーム開始</button>
</div>
<!-- ゲームセクション -->
<div id="game-area">
<div id="text-line">ここに読み上げ文字が流れます</div>
<div id="cards-container">
<!-- 札カード -->
<div class="card" onclick="takeCard(this)">
<img src="card1.png" alt="かるた札1">
</div>
<div class="card" onclick="takeCard(this)">
<img src="card2.png" alt="かるた札2">
</div>
<div class="card" onclick="takeCard(this)">
<img src="card3.png" alt="かるた札3">
</div>
</div>
</div>
<!-- スコア表示 -->
<div id="score-board">得点: <span id="score">0</span></div>
<footer>
<p>© 2024 かるたゲーム</p>
</footer>
<script src="script.js"></script>
</body>
</html>
