40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>五子棋</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<main class="board-area">
|
|
<canvas id="board"></canvas>
|
|
</main>
|
|
<aside class="panel">
|
|
<h1>五子棋</h1>
|
|
<div class="status" id="status">轮到黑方落子</div>
|
|
<label>对战模式
|
|
<select id="mode">
|
|
<option value="ai" selected>人机对战</option>
|
|
<option value="pvp">双人对战</option>
|
|
</select>
|
|
</label>
|
|
<label id="side-row">我方执子
|
|
<select id="side">
|
|
<option value="1" selected>黑子（先手）</option>
|
|
<option value="2">白子（后手）</option>
|
|
</select>
|
|
</label>
|
|
<button id="new-game">新对局</button>
|
|
<p class="hint">点击棋盘交叉点落子，先连成五子者获胜。切换模式或执子会开始新对局。</p>
|
|
</aside>
|
|
</div>
|
|
<script src="js/engine.js"></script>
|
|
<script src="js/ai.js"></script>
|
|
<script src="js/renderer.js"></script>
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|