-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
139 lines (129 loc) · 7.17 KB
/
Copy pathindex.html
File metadata and controls
139 lines (129 loc) · 7.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中国象棋 AI - 纯前端 WASM 引擎 (业余天花板·仅顶级特大可战)</title>
<link rel="stylesheet" href="./styles/main.css">
</head>
<body>
<div id="content">
<!-- 顶部大号标题与巨型比分徽章栏 -->
<div id="content-title" class="dfr aic jcsb">
<div id="black-counter" class="dfr aic jcc title-counter">
<span id="black-score" class="title-counter-data">AI</span>
</div>
<div class="dfc aic jcc">
<h1 id="title" class="dfr aic jcc">
<span class="title-red">中</span>
<span class="title-black">国</span>
<span class="title-red">象</span>
<span class="title-black">棋</span>
</h1>
<div class="title-sub-badge" style="font-size: 13px; color: #e2e8f0; margin-top: 4px; font-weight: 600; letter-spacing: 0.5px;">WASM 单线程引擎 · 业余天花板</div>
</div>
<div id="red-counter" class="dfr aic jcc title-counter">
<span id="red-score" class="title-counter-data">玩家</span>
</div>
</div>
<!-- 游戏主对局与侧边栏布局 -->
<div id="game-layout">
<!-- 棋盘与多级菜单外框 -->
<div id="border-frame" class="dfr aic jcc">
<!-- 浮动多级菜单遮罩 -->
<div id="board-options" class="dfr aic jcc">
<!-- 主菜单 -->
<div id="menu" class="board-option-type dfr aic jcc">
<div id="menu-content" class="board-option-type-content dfr aic jcc">
<div id="startbtn" class="board-option-type-btn dfr aic jcc">
<h1>开始</h1>
</div>
<div id="helpbtn" class="board-option-type-btn dfr aic jcc">
<h1>说明</h1>
</div>
</div>
</div>
<!-- 模式选择菜单 -->
<div id="menu-mode" class="board-option-type dfr aic jcc hide">
<div id="menu-mode-content" class="board-option-type-content dfr aic jcc">
<div id="pvpbtn" class="board-option-type-btn dfr aic jcc">
<h1>本机双人</h1>
</div>
<div id="pvebtn" class="board-option-type-btn dfr aic jcc">
<h1>人机对战</h1>
</div>
<div id="evebtn" class="board-option-type-btn dfr aic jcc">
<h1>机机对战</h1>
</div>
</div>
<div class="returnbtn board-option-type-btn dfr aic jcc" id="return-to-main">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z"/>
</svg>
</div>
</div>
<!-- 人机先手选择菜单 -->
<div id="menu-mode-pve" class="board-option-type dfr aic jcc hide">
<div id="menu-mode-content" class="board-option-type-content dfr aic jcc">
<div id="pfbtn" class="board-option-type-btn dfr aic jcc">
<h1>玩家先走(执红)</h1>
</div>
<div id="efbtn" class="board-option-type-btn dfr aic jcc">
<h1>电脑先走(执黑)</h1>
</div>
</div>
<div class="returnbtn board-option-type-btn dfr aic jcc" id="return-to-mode">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z"/>
</svg>
</div>
</div>
</div>
<!-- 象眼象棋渲染容器 -->
<div id="board-container"></div>
</div>
<!-- 侧边 AI 搜索评分日志面板 -->
<aside id="ai-panel">
<div id="ai-panel-title">AI 搜索评分</div>
<div id="ai-panel-subtitle">记录每一步的搜索深度、节点数、耗时、NPS 和 UCCI 评估分数。</div>
<div id="ai-table-wrap">
<table id="ai-stats-table">
<thead>
<tr id="ai-stats-header">
<th>#</th>
<th>方</th>
<th>来源</th>
<th>落子</th>
<th>节点</th>
<th>NPS</th>
<th>耗时</th>
<th>分数</th>
</tr>
</thead>
<tbody id="ai-stats-body">
<tr id="ai-stats-empty">
<td colspan="8">等待对局开始。开局后显示实时搜索统计</td>
</tr>
</tbody>
</table>
</div>
<div id="ai-current">等待对局开始。</div>
</aside>
</div>
<!-- 对局总结浮层 -->
<div id="game-summary" class="hide">
<span id="game-summary-text">红方胜！</span>
<button id="restartbtn" type="button">再来一局</button>
</div>
<!-- 底部全套硬核技术栈说明区块 -->
<div id="engine-note">
<p class="engine-tech">系统采用 Emscripten WebAssembly 字节码编译、Zobrist 哈希置换表 (Transposition Table) 与 C++ Alpha-Beta 树搜索算法，在浏览器本地实现微秒级计算。基于标准 UCCI 异步通信协议与 Web Worker 多线程解耦，实时解析节点数、NPS、耗时与评估分；配置 COOP / COEP 跨源隔离标头与原生 CSS Design System 模块化架构。</p>
</div>
</div>
<!-- 脚本引入 -->
<script src="./js/xiangqi.js"></script>
<script src="./js/xiangqiboard.js"></script>
<script src="./js/app.js"></script>
</body>
</html>