共享会话
在開始頁面中的「規則介紹」按鈕下方，增加一個「操作說明」按鈕。只需要文字，不需要外框和背景色。當點擊後，彈出一個「操作…
分享于 2026年8月20日 04:36
提问者在開始頁面中的「規則介紹」按鈕下方，增加一個「操作說明」按鈕。只需要文字，不需要外框和背景色。當點擊後，彈出一個「操作說明」頁面，右上角有打叉關閉窗口按鈕，頁面內容如下： 界面介紹：中間是棋盤，左右是玩家控制區，如果是手機端則是上下。（配svg結構圖並用文字標注。）
棋盤控制：棋盤內有工具欄，當點擊棋盤空白區域，會把工具欄切換至「方向控制」，再次點擊則會切換回工具欄。（配圖svg展示工具欄和方向控制的切換，animate控制兩層的opacity輪流切換）
計分標記：分為「頂棋計分」和「鑫棋計分」，這個標記的用途有三個，一是提醒玩家當前規則所選的計分方式，二是當前輪到哪一方行動，三是點擊會切換到默認AI控制。（配圖是兩個計分記svg）
確認取消：當行動結束要點擊「打勾確認」，如想取消所有行動則點擊「打叉取消」。（配svg圖展示兩個按鈕）
AI控制：當一方由AI控制時，它的「打勾按鈕」會由一個AI按鈕替代。當點擊它會切換AI等級。當點擊「打叉」就會切換成人類。當未輪到的一方是人類控制時，他的「打勾」會替換成綠色的AI按鈕，點擊它則將由AI接管。（配svg圖展示各種AI圖標按鈕）
棋子按鈕：當點擊一個控制區中的棋子，則它將被選中。再次點擊被選中的棋子，則它將被翻轉。（配svg圖展示棋子被選中及翻轉，用animate實現翻轉，棋子隨機選擇一個）
當有棋子被選中時，如果點擊棋盤上的對方棋子，則這個對方棋子的中心會出現藍點，同時己方選中的棋子的所有放置可能，都會半透明出現在棋盤上。點擊其中一個半透明棋子，則棋子會落在棋盤上。（配svg圖展示在對方棋子上展示一個己方棋子的所有放置可能，隨後半透明棋子消失，其中一個成為實際落下的棋子，雙方棋子是隨機選擇的，用animate循環動畫實現）
開局點擊其中一個棋子，它會自動落在棋盤中心，按住棋盤並拖動，可以旋轉棋子至任意角度。這時點擊「確認」即可結束回合。（配svg圖展示棋子自動落下並旋轉，用animate實現翻轉，棋子和旋轉角度隨機）
注意也要相應加上英文操作說明。
不要影響當前正確的遊戲流程，明確給出所有要修改的地方和所要替換的代碼。
QuanAI以下修改均只新增「操作說明」介面及其示意動畫，不改動 selectTile()、actionCheck()、actionCross()、AI 搜尋、計分、棋盤事件或棋局狀態，因此不會影響現有遊戲流程。
共需要修改 6 個位置。
1. 替換彈窗 CSS，並加入操作說明樣式
在 <style> 中找到目前的：
css
#rules-modal {
display: none;
position: absolute;
top: 5%;
left: 10%;
width: 80%;
max-width: 90vw;
height: 90%;
background: #2c2f33;
border: 2px solid #7289da;
z-index: 2000;
padding: 0;
box-sizing: border-box;
border-radius: 8px;
color: #ddd;
line-height: 1.6;
flex-direction: column;
}
#rules-modal-scroll {
overflow-y: auto;
padding: 25px;
box-sizing: border-box;
flex: 1;
min-height: 0;
}將以上整段替換為：
css
#rules-modal,
#operation-modal {
display: none;
position: absolute;
top: 5%;
left: 10%;
width: 80%;
max-width: 90vw;
height: 90%;
background: #2c2f33;
border: 2px solid #7289da;
z-index: 2000;
padding: 0;
box-sizing: border-box;
border-radius: 8px;
color: #ddd;
line-height: 1.6;
flex-direction: column;
}
#operation-modal {
z-index: 2200;
}
#rules-modal-scroll,
#operation-modal-scroll {
overflow-y: auto;
padding: 25px;
box-sizing: border-box;
flex: 1;
min-height: 0;
overscroll-behavior: contain;
}
/* 開始頁面的純文字操作說明按鈕 */
.operation-link-btn {
appearance: none;
display: inline-block;
margin: 0;
padding: 4px 8px;
border: none;
outline: none;
box-shadow: none;
background: transparent;
color: #b9c7ff;
font: inherit;
font-size: 1em;
line-height: 1.4;
cursor: pointer;
transition:
color 0.2s,
text-shadow 0.2s;
}
.operation-link-btn:hover,
.operation-link-btn:focus-visible {
color: #ffffff;
text-decoration: underline;
text-shadow: 0 0 8px rgba(114, 137, 218, 0.7);
}
/* 操作說明右上角關閉按鈕 */
.operation-close-btn {
appearance: none;
position: absolute;
top: 9px;
right: 9px;
z-index: 20;
width: 34px;
height: 34px;
margin: 0;
padding: 5px;
border: none;
outline: none;
background: transparent;
color: #aaa;
cursor: pointer;
}
.operation-close-btn:hover,
.operation-close-btn:focus-visible {
color: #fff;
}
.operation-close-btn svg {
display: block;
width: 24px;
height: 24px;
}
/* 操作說明內容 */
#operation-modal h1 {
margin-top: 0;
padding-right: 36px;
color: #7289da;
}
#operation-modal h2 {
margin: 0 0 8px;
color: #8ea1e1;
font-size: 1.3em;
}
#operation-modal p {
margin: 0 0 14px;
}
.operation-intro {
margin-bottom: 22px !important;
color: #bbb;
}
.operation-guide-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.operation-card {
min-width: 0;
padding: 18px;
box-sizing: border-box;
border: 1px solid rgba(114, 137, 218, 0.35);
border-radius: 10px;
background: rgba(255, 255, 255, 0.035);
}
.operation-card-wide {
grid-column: 1 / -1;
}
.operation-demo {
display: block;
width: 100%;
height: auto;
margin-top: 12px;
border-radius: 10px;
background: #f4f5f7;
overflow: hidden;
}
.operation-demo text {
font-family: sans-serif;
}
.operation-tip {
margin-top: 18px;
padding: 12px 14px;
border-left: 4px solid #7289da;
background: rgba(114, 137, 218, 0.1);
color: #ccc;
}
/* SVG 內部中英文標註 */
.operation-svg .op-en {
display: none;
}
body.en .operation-svg .op-en {
display: inline;
}
body.en .operation-svg .op-zh {
display: none;
}2. 在手機版 CSS 中加入操作說明的響應式樣式
在現有的：
css
@media (max-width: 768px) {區塊結尾、最後一個 } 之前加入：
css
#operation-modal {
top: 2%;
left: 3%;
width: 94%;
max-width: 94vw;
height: 96%;
}
#operation-modal-scroll {
padding: 18px 14px;
}
.operation-guide-grid {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.operation-card,
.operation-card-wide {
grid-column: 1;
padding: 14px;
}
.operation-link-btn {
padding: 3px 6px;
}3. 替換開始頁面的「規則說明」按鈕區塊
找到：
html
<div class="menu-row" style="margin-top: 10px; margin-bottom: 30px">
<button
class="menu-btn"
id="ui-btn-rules"
onclick="document.getElementById('rules-modal').style.display = 'flex'"
style="background: #43b581"
>
規則說明
</button>
</div>替換為：
html
<div
class="menu-row"
style="
margin-top: 10px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
"
>
<button
class="menu-btn"
id="ui-btn-rules"
onclick="document.getElementById('rules-modal').style.display = 'flex'"
style="background: #43b581"
>
規則說明
</button>
<button
type="button"
class="operation-link-btn"
id="ui-btn-operation"
onclick="openOperationGuide()"
aria-haspopup="dialog"
aria-controls="operation-modal"
>
操作說明
</button>
</div>這個新按鈕只有文字，沒有邊框和背景色。
4. 插入完整的「操作說明」彈窗
找到規則彈窗結束後的：
html
<div id="arb-confirm-dialog" class="custom-dialog">在它的正前方插入以下完整代碼：
html
<div
id="operation-modal"
role="dialog"
aria-modal="true"
aria-labelledby="operation-modal-title"
>
<button
type="button"
class="operation-close-btn"
onclick="closeOperationGuide()"
aria-label="Close"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
fill="currentColor"
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
<div id="operation-modal-scroll">
<!-- 操作說明專用 SVG 定義。所有 ID 均使用 op- 前綴，避免與正式棋盤衝突。 -->
<svg
width="0"
height="0"
aria-hidden="true"
focusable="false"
style="position: absolute; overflow: hidden"
>
<defs>
<g id="op-piece-a">
<path d="M -61.687,17.119 L -14.563,-17.119 L 21.437,-17.119 L 32.562,17.119 Z" />
</g>
<g id="op-piece-b">
<path d="M -76.249,24.775 L -0.001,-30.623 L 29.124,-9.463 L 40.249,24.775 Z" />
</g>
<g id="op-piece-c">
<path d="M -55.468,19.14 L 2.781,-23.18 L 31.906,-2.02 L 2.781,19.14 Z" />
</g>
<g id="op-ai-human">
<path
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
/>
</g>
<g id="op-ai-easy">
<rect
x="5"
y="7"
width="14"
height="11"
rx="3"
fill="none"
stroke="currentColor"
stroke-width="2"
/>
<line x1="12" y1="2" x2="12" y2="6" stroke="currentColor" stroke-width="2" />
<circle cx="9" cy="12" r="1.2" fill="currentColor" />
<circle cx="15" cy="12" r="1.2" fill="currentColor" />
</g>
<g id="op-ai-hard">
<rect x="2" y="9" width="2" height="6" rx="1" />
<rect x="20" y="9" width="2" height="6" rx="1" />
<rect
x="5"
y="6"
width="14"
height="12"
rx="3"
fill="none"
stroke="currentColor"
stroke-width="2"
/>
<circle cx="9" cy="11" r="1.2" />
<circle cx="15" cy="11" r="1.2" />
<rect x="9" y="14" width="6" height="2" />
</g>
<g id="op-ai-expert">
<path stroke-width="2" stroke="currentColor" d="M10 2h4M12 2v3M4 5l2-2M20 5l-2-2" />
<path
stroke-width="2"
stroke="currentColor"
fill="none"
d="M3 6h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z"
/>
<circle fill="currentColor" cx="9" cy="11" r="1.6" />
<circle fill="currentColor" cx="15" cy="11" r="1.6" />
<path stroke="currentColor" d="M8 15.5h8" />
</g>
<g id="op-ai-custom">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</g>
</defs>
</svg>
<h1 id="operation-modal-title">
<span class="zh-text">操作說明</span>
<span class="en-text">How to Play</span>
</h1>
<p class="operation-intro">
<span class="zh-text">
以下示意圖只用於介紹介面操作。每次打開本頁時，部分示意棋子、雙方顏色及開局旋轉角度都會重新隨機選擇。
</span>
<span class="en-text">
The diagrams below explain the interface only. Some demonstration pieces, player colors, and the opening
rotation angle are randomized whenever this page is opened.
</span>
</p>
<div class="operation-guide-grid">
<!-- 一、界面介紹 -->
<section class="operation-card operation-card-wide">
<h2>
<span class="zh-text">界面介紹</span>
<span class="en-text">Interface Layout</span>
</h2>
<p>
<span class="zh-text">
中間是棋盤，左右兩側是玩家控制區；如果使用手機，介面會改為上下排列。
</span>
<span class="en-text">
The board is in the center, with the player control areas on the left and right. On a phone, the control
areas are arranged above and below the board.
</span>
</p>
<svg
class="operation-demo operation-svg"
viewBox="0 0 760 400"
role="img"
aria-label="Interface layout"
>
<rect x="0" y="0" width="760" height="400" rx="12" fill="#e9ebee" />
<text class="op-zh" x="380" y="28" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
桌面版
</text>
<text class="op-en" x="380" y="28" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
Desktop
</text>
<rect x="35" y="48" width="150" height="130" rx="10" fill="#96ffbe" stroke="#333" stroke-width="2" />
<rect x="195" y="48" width="370" height="130" rx="10" fill="#fff" stroke="#7289da" stroke-width="3" />
<rect x="575" y="48" width="150" height="130" rx="10" fill="#ffc2eb" stroke="#333" stroke-width="2" />
<text class="op-zh" x="110" y="112" text-anchor="middle" font-size="17" fill="#222">玩家控制區</text>
<text class="op-en" x="110" y="112" text-anchor="middle" font-size="16" fill="#222">Player controls</text>
<text class="op-zh" x="380" y="112" text-anchor="middle" font-size="22" font-weight="bold" fill="#333">
棋盤
</text>
<text class="op-en" x="380" y="112" text-anchor="middle" font-size="22" font-weight="bold" fill="#333">
Board
</text>
<text class="op-zh" x="650" y="112" text-anchor="middle" font-size="17" fill="#222">玩家控制區</text>
<text class="op-en" x="650" y="112" text-anchor="middle" font-size="16" fill="#222">Player controls</text>
<text class="op-zh" x="380" y="218" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
手機版
</text>
<text class="op-en" x="380" y="218" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
Mobile
</text>
<rect x="280" y="235" width="200" height="42" rx="8" fill="#96ffbe" stroke="#333" stroke-width="2" />
<rect x="280" y="284" width="200" height="68" rx="8" fill="#fff" stroke="#7289da" stroke-width="3" />
<rect x="280" y="359" width="200" height="32" rx="8" fill="#ffc2eb" stroke="#333" stroke-width="2" />
<text class="op-zh" x="380" y="262" text-anchor="middle" font-size="15" fill="#222">玩家控制區</text>
<text class="op-en" x="380" y="262" text-anchor="middle" font-size="14" fill="#222">Player controls</text>
<text class="op-zh" x="380" y="326" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
棋盤
</text>
<text class="op-en" x="380" y="326" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
Board
</text>
<text class="op-zh" x="380" y="381" text-anchor="middle" font-size="14" fill="#222">玩家控制區</text>
<text class="op-en" x="380" y="381" text-anchor="middle" font-size="13" fill="#222">Player controls</text>
<path d="M380 180v28" stroke="#7289da" stroke-width="3" stroke-dasharray="5 5" />
<path d="M370 202l10 10 10-10" fill="none" stroke="#7289da" stroke-width="3" />
</svg>
</section>
<!-- 二、棋盤控制 -->
<section class="operation-card operation-card-wide">
<h2>
<span class="zh-text">棋盤控制</span>
<span class="en-text">Board Controls</span>
</h2>
<p>
<span class="zh-text">
棋盤內有工具欄。點擊棋盤空白區域，工具欄會切換為「方向控制」；再次點擊空白區域，就會切換回工具欄。
</span>
<span class="en-text">
The board contains a toolbar. Click an empty area of the board to switch to the directional controls.
Click an empty area again to return to the toolbar.
</span>
</p>
<svg
class="operation-demo operation-svg"
viewBox="0 0 760 310"
role="img"
aria-label="Toolbar and directional control animation"
>
<rect x="0" y="0" width="760" height="310" rx="12" fill="#fff" />
<rect x="18" y="18" width="724" height="274" rx="12" fill="#f8f8f8" stroke="#bbb" stroke-width="2" />
<circle cx="380" cy="125" r="8" fill="none" stroke="#00bfff" stroke-width="3" opacity="0">
<animate
attributeName="r"
values="8;8;38;38;8"
keyTimes="0;0.1;0.22;0.8;1"
dur="6s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0;1;0;0;0"
keyTimes="0;0.1;0.28;0.9;1"
dur="6s"
repeatCount="indefinite"
/>
</circle>
<!-- 第一層：工具欄 -->
<g opacity="1">
<animate
attributeName="opacity"
values="1;1;0;0;1"
keyTimes="0;0.34;0.44;0.86;1"
dur="6s"
repeatCount="indefinite"
/>
<text class="op-zh" x="380" y="56" text-anchor="middle" font-size="19" font-weight="bold" fill="#333">
工具欄
</text>
<text class="op-en" x="380" y="56" text-anchor="middle" font-size="19" font-weight="bold" fill="#333">
Toolbar
</text>
<rect x="145" y="220" width="470" height="54" rx="27" fill="#23272a" opacity="0.92" />
<g fill="#ddd">
<path
transform="translate(175 234) scale(1.1)"
d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
/>
<path
transform="translate(245 234) scale(-1.1 1.1) translate(-24 0)"
d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
/>
<path
transform="translate(302 233)"
d="M3.52 10.94C2.98 10.41 10.41 2.98 10.94 3.52L14.12 7.76C14.65 8.29 8.29 14.65 7.76 14.12Z M10.14 11.73L11.73 10.14L19.69 18.1L18.1 19.69Z"
/>
<path transform="translate(368 233)" d="M4 2h16v18H4V2zm2 4v12h12V6H6z" />
<path transform="translate(435 233)" d="M16 3l-4 4h3v7h2V7h3l-4-4zm-5 14H8v-7H6v7H3l4 4 4-4z" />
<path
transform="translate(502 233)"
d="M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7z"
/>
<path transform="translate(568 233)" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
</g>
</g>
<!-- 第二層：方向控制 -->
<g opacity="0">
<animate
attributeName="opacity"
values="0;0;1;1;0"
keyTimes="0;0.34;0.44;0.86;1"
dur="6s"
repeatCount="indefinite"
/>
<text class="op-zh" x="380" y="56" text-anchor="middle" font-size="19" font-weight="bold" fill="#333">
方向控制
</text>
<text class="op-en" x="380" y="56" text-anchor="middle" font-size="19" font-weight="bold" fill="#333">
Directional Controls
</text>
<g fill="#23272a" opacity="0.9">
<circle cx="380" cy="84" r="22" />
<circle cx="380" cy="250" r="22" />
<circle cx="190" cy="166" r="22" />
<circle cx="570" cy="166" r="22" />
<circle cx="205" cy="84" r="22" />
<circle cx="555" cy="84" r="22" />
<circle cx="205" cy="250" r="22" />
<circle cx="555" cy="250" r="22" />
<circle cx="380" cy="166" r="24" />
</g>
<g fill="#fff">
<path d="M380 72l-9 12h18z" />
<path d="M380 262l9-12h-18z" />
<path d="M178 166l12-9v18z" />
<path d="M582 166l-12 9v-18z" />
<text x="205" y="91" text-anchor="middle" font-size="23" fill="#fff">−</text>
<text x="555" y="91" text-anchor="middle" font-size="23" fill="#fff">+</text>
<text x="205" y="257" text-anchor="middle" font-size="23" fill="#fff">+</text>
<text x="555" y="257" text-anchor="middle" font-size="23" fill="#fff">−</text>
<circle cx="380" cy="166" r="7" />
<path
d="M380 146v8M380 178v8M360 166h8M392 166h8"
fill="none"
stroke="#fff"
stroke-width="3"
/>
</g>
</g>
</svg>
</section>
<!-- 三、計分標記 -->
<section class="operation-card">
<h2>
<span class="zh-text">計分標記</span>
<span class="en-text">Scoring Marker</span>
</h2>
<p>
<span class="zh-text">
計分標記分為「頂棋計分」和「鑫棋計分」。它會提示目前選擇的計分方式、現在輪到哪一方行動；點擊當前一方的標記，還可以切換至預設 AI 控制。
</span>
<span class="en-text">
There are two markers: “Bracing Piece Scoring” and “TriGolden Piece Scoring.” The marker shows the selected
scoring rule and whose turn it is. Clicking the active player’s marker switches that player to the default
AI.
</span>
</p>
<svg
class="operation-demo operation-svg"
viewBox="0 0 760 270"
role="img"
aria-label="Scoring markers"
>
<defs>
<linearGradient id="op-grad-dinger" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7289da" />
<stop offset="100%" stop-color="#7289da" stop-opacity="0" />
</linearGradient>
<linearGradient id="op-grad-xin" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#7289da" stop-opacity="0" />
<stop offset="50%" stop-color="#7289da" />
<stop offset="100%" stop-color="#7289da" stop-opacity="0" />
</linearGradient>
</defs>
<rect x="0" y="0" width="760" height="270" rx="12" fill="#f7f7f7" />
<circle cx="205" cy="116" r="72" fill="#fff" stroke="#7289da" stroke-width="3">
<animate
attributeName="stroke-opacity"
values="0.35;1;0.35"
dur="2s"
repeatCount="indefinite"
/>
</circle>
<g transform="translate(145 58)">
<path
d="M4,4 L14.397,36 H105.602 L116,4"
fill="none"
stroke="#7289da"
stroke-width="4"
/>
<polygon points="32.707,120 60,36 87.293,120" fill="url(#op-grad-dinger)" />
</g>
<circle cx="555" cy="116" r="72" fill="#fff" stroke="#7289da" stroke-width="3" />
<g transform="translate(495 58)">
<path
d="M4,4 L14.397,36 H105.602 L116,4 Z"
fill="url(#op-grad-xin)"
stroke="none"
/>
<path
d="M32.707,120 L60,36 L87.293,120"
fill="none"
stroke="#7289da"
stroke-width="4"
/>
</g>
<text class="op-zh" x="205" y="225" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
頂棋計分
</text>
<text class="op-en" x="205" y="225" text-anchor="middle" font-size="16" font-weight="bold" fill="#333">
Bracing Piece Scoring
</text>
<text class="op-zh" x="555" y="225" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
鑫棋計分
</text>
<text class="op-en" x="555" y="225" text-anchor="middle" font-size="16" font-weight="bold" fill="#333">
TriGolden Piece Scoring
</text>
<g transform="translate(370 126) scale(1.4) translate(-12 -12)" color="#7289da" fill="#7289da">
<use href="#op-ai-easy" />
</g>
<path d="M345 116h-24M415 116h24" stroke="#7289da" stroke-width="3" stroke-dasharray="5 4" />
</svg>
</section>
<!-- 四、確認取消 -->
<section class="operation-card">
<h2>
<span class="zh-text">確認取消</span>
<span class="en-text">Confirm and Cancel</span>
</h2>
<p>
<span class="zh-text">
當本回合行動完成時，點擊「打勾確認」結束回合。如果想取消本回合的所有選擇和暫時落子，點擊「打叉取消」。
</span>
<span class="en-text">
When your move is complete, click the check button to confirm and end the turn. Click the cross button to
cancel all selections and temporary placements made during the current turn.
</span>
</p>
<svg
class="operation-demo operation-svg"
viewBox="0 0 760 270"
role="img"
aria-label="Confirm and cancel buttons"
>
<rect x="0" y="0" width="760" height="270" rx="12" fill="#f7f7f7" />
<circle cx="235" cy="115" r="62" fill="#43b581" />
<path
d="M205 116l19 19 43-48"
fill="none"
stroke="#fff"
stroke-width="13"
stroke-linecap="round"
stroke-linejoin="round"
/>
<circle cx="525" cy="115" r="62" fill="#f04747" />
<path
d="M495 85l60 60M555 85l-60 60"
fill="none"
stroke="#fff"
stroke-width="13"
stroke-linecap="round"
/>
<text class="op-zh" x="235" y="220" text-anchor="middle" font-size="20" font-weight="bold" fill="#333">
打勾確認
</text>
<text class="op-en" x="235" y="220" text-anchor="middle" font-size="19" font-weight="bold" fill="#333">
Confirm
</text>
<text class="op-zh" x="525" y="220" text-anchor="middle" font-size="20" font-weight="bold" fill="#333">
打叉取消
</text>
<text class="op-en" x="525" y="220" text-anchor="middle" font-size="19" font-weight="bold" fill="#333">
Cancel
</text>
</svg>
</section>
<!-- 五、AI 控制 -->
<section class="operation-card operation-card-wide">
<h2>
<span class="zh-text">AI 控制</span>
<span class="en-text">AI Control</span>
</h2>
<p>
<span class="zh-text">
當一方由 AI 控制時，它的打勾按鈕會被 AI 按鈕替代。點擊 AI 按鈕可循環切換 AI 等級；點擊打叉會停止 AI 並改回人類控制。如果尚未輪到的一方目前由人類控制，它的打勾按鈕會顯示為綠色 AI 按鈕，點擊後由 AI 接管。
</span>
<span class="en-text">
When a player is AI-controlled, the check button is replaced by an AI button. Click it to cycle through AI
levels. Click the cross button to stop the AI and return control to a human. If a human-controlled player
is not taking the current turn, their check button becomes a green AI button; clicking it lets the AI take
over.
</span>
</p>
<svg
class="operation-demo operation-svg"
viewBox="0 0 760 330"
role="img"
aria-label="AI control buttons"
>
<rect x="0" y="0" width="760" height="330" rx="12" fill="#f7f7f7" />
<text class="op-zh" x="380" y="34" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
點擊藍色 AI 按鈕循環切換等級
</text>
<text class="op-en" x="380" y="34" text-anchor="middle" font-size="17" font-weight="bold" fill="#333">
Click the blue AI button to cycle through levels
</text>
<g>
<circle cx="105" cy="104" r="46" fill="#7289da" />
<g transform="translate(105 104) scale(1.7) translate(-12 -12)" color="#111" fill="#111">
<use href="#op-ai-easy" />
</g>
<text class="op-zh" x="105" y="172" text-anchor="middle" font-size="16" fill="#333">簡單</text>
<text class="op-en" x="105" y="172" text-anchor="middle" font-size="16" fill="#333">Easy</text>
</g>
<g>
<circle cx="285" cy="104" r="46" fill="#7289da" />
<g transform="translate(285 104) scale(1.7) translate(-12 -12)" color="#fff" fill="#fff">
<use href="#op-ai-hard" />
</g>
<text class="op-zh" x="285" y="172" text-anchor="middle" font-size="16" fill="#333">困難</text>
<text class="op-en" x="285" y="172" text-anchor="middle" font-size="16" fill="#333">Hard</text>
</g>
<g>
<circle cx="475" cy="104" r="46" fill="#7289da" />
<g transform="translate(475 104) scale(1.7) translate(-12 -12)" color="#fff" fill="#fff">
<use href="#op-ai-expert" />
</g>
<text class="op-zh" x="475" y="172" text-anchor="middle" font-size="16" fill="#333">專家</text>
<text class="op-en" x="475" y="172" text-anchor="middle" font-size="16" fill="#333">Expert</text>
</g>
<g>
<circle cx="655" cy="104" r="46" fill="#7289da" />
<g transform="translate(655 104) scale(1.6) translate(-12 -12)" color="#fff" fill="#fff">
<use href="#op-ai-custom" />
</g>
<text class="op-zh" x="655" y="172" text-anchor="middle" font-size="16" fill="#333">自訂</text>
<text class="op-en" x="655" y="172" text-anchor="middle" font-size="16" fill="#333">Custom</text>
</g>
<circle cx="155" cy="255" r="38" fill="#f04747" />
<path
d="M137 237l36 36M173 237l-36 36"
fill="none"
stroke="#fff"
stroke-width="8"
stroke-linecap="round"
/>
<path d="M205 255h66" stroke="#555" stroke-width="3" />
<path d="M263 247l12 8-12 8" fill="none" stroke="#555" stroke-width="3" />
<g transform="translate(315 255) scale(1.7) translate(-12 -12)" color="#444" fill="#444">
<use href="#op-ai-human" />
</g>
<circle cx="505" cy="255" r="38" fill="#43b581" />
<g transform="translate(505 255) scale(1.45) translate(-12 -12)" color="#fff" fill="#fff">
<use href="#op-ai-easy" />
</g>
<text class="op-zh" x="155" y="313" text-anchor="middle" font-size="15" fill="#333">
打叉改回人類
</text>
<text class="op-en" x="155" y="313" text-anchor="middle" font-size="14" fill="#333">
Cross: human control
</text>
<text class="op-zh" x="505" y="313" text-anchor="middle" font-size="15" fill="#333">
綠色按鈕：AI 接管
</text>
<text class="op-en" x="505" y="313" text-anchor="middle" font-size="14" fill="#333">
Green button: AI takeover
</text>
</svg>
</section>
<!-- 六、棋子按鈕 -->
<section class="operation-card operation-card-wide">
<h2>
<span class="zh-text">棋子按鈕</span>
<span class="en-text">Piece Buttons</span>
</h2>
<p>
<span class="zh-text">
點擊控制區中的棋子即可選中它；再次點擊已選中的同一個棋子，就會把棋子翻轉。
</span>
<span class="en-text">
Click a piece in the control area to select it. Click the same selected piece again to flip it.
</span>
</p>
<svg
class="operation-demo operation-svg"
viewBox="0 0 760 270"
role="img"
aria-label="Selecting and flipping a piece"
>
<rect x="0" y="0" width="760" height="270" rx="12" fill="#f7f7f7" />
<rect x="115" y="66" width="190" height="120" rx="14" fill="#30343a" stroke="#7289da" stroke-width="5">
<animate
attributeName="stroke-opacity"
values="0.45;1;0.45"
dur="1.8s"
repeatCount="indefinite"
/>
</rect>
<g transform="translate(210 126) scale(0.8)">
<use id="op-selected-piece" href="#op-piece-a" fill="#96ffbe" />
</g>
<path d="M335 126h90" stroke="#7289da" stroke-width="4" stroke-dasharray="8 6" />
<path d="M416 116l14 10-14 10" fill="none" stroke="#7289da" stroke-width="4" />
<rect x="455" y="66" width="190" height="120" rx="14" fill="#30343a" stroke="#7289da" stroke-width="5" />
<g transform="translate(550 126)">
<g>
<animateTransform
attributeName="transform"
type="scale"
values="1 1;1 1;-1 1;-1 1;1 1"
keyTimes="0;0.25;0.45;0.78;1"
dur="4s"
repeatCount="indefinite"
/>
<g transform="scale(0.8)">
<use id="op-flipping-piece" href="#op-piece-a" fill="#96ffbe" />
</g>
</g>
</g>
<text class="op-zh" x="210" y="225" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
點擊選中
</text>
<text class="op-en" x="210" y="225" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
Click to select
</text>
<text class="op-zh" x="550" y="225" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
再次點擊翻轉
</text>
<text class="op-en" x="550" y="225" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
Click again to flip
</text>
</svg>
</section>
<!-- 七、選擇目標和落子 -->
<section class="operation-card operation-card-wide">
<h2>
<span class="zh-text">選擇目標和落子</span>
<span class="en-text">Selecting a Target and Placing a Piece</span>
</h2>
<p>
<span class="zh-text">
當有棋子被選中時，點擊棋盤上的對方棋子，該棋子中心會出現藍點。己方所選棋子的所有可放置位置會以半透明棋子顯示；點擊其中一個半透明棋子，即可把棋子暫時落到棋盤上。
</span>
<span class="en-text">
After selecting a piece, click an opponent’s piece on the board. A blue dot appears at its center, and all
legal placements for your selected piece appear as translucent pieces. Click one of them to place the
piece temporarily on the board.
</span>
</p>
<svg
class="operation-demo operation-svg"
viewBox="0 0 760 380"
role="img"
aria-label="Legal placement animation"
>
<rect x="0" y="0" width="760" height="380" rx="12" fill="#fff" />
<rect x="20" y="20" width="720" height="340" rx="12" fill="#fafafa" stroke="#bbb" stroke-width="2" />
<rect x="45" y="70" width="150" height="115" rx="12" fill="#30343a" stroke="#7289da" stroke-width="4" />
<g transform="translate(120 128) scale(0.62)">
<use
class="op-placement-own"
href="#op-piece-a"
fill="#96ffbe"
/>
</g>
<text class="op-zh" x="120" y="220" text-anchor="middle" font-size="16" font-weight="bold" fill="#333">
① 已選中的棋子
</text>
<text class="op-en" x="120" y="220" text-anchor="middle" font-size="15" font-weight="bold" fill="#333">
① Selected piece
</text>
<path d="M210 185h78" stroke="#7289da" stroke-width="3" stroke-dasharray="7 5" />
<path d="M280 176l13 9-13 9" fill="none" stroke="#7289da" stroke-width="3" />
<!-- 對方目標棋子 -->
<g transform="translate(420 190) scale(0.82)">
<use
id="op-placement-target"
href="#op-piece-b"
fill="#ffc2eb"
stroke="#555"
stroke-width="2"
/>
</g>
<!-- 藍色中心點 -->
<circle cx="420" cy="190" r="7" fill="#00bfff" opacity="0">
<animate
attributeName="opacity"
values="0;0;1;1;0"
keyTimes="0;0.14;0.22;0.85;1"
dur="6s"
repeatCount="indefinite"
/>
</circle>
<!-- 所有半透明落點 -->
<g opacity="0">
<animate
attributeName="opacity"
values="0;0;1;1;0"
keyTimes="0;0.22;0.3;0.7;0.8"
dur="6s"
repeatCount="indefinite"
/>
<g transform="translate(420 95) scale(0.58)">
<use
class="op-placement-own"
href="#op-piece-a"
fill="#96ffbe"
fill-opacity="0.36"
stroke="#333"
stroke-width="2"
/>
</g>
<g transform="translate(535 180) rotate(72) scale(0.58)">
<use
class="op-placement-own"
href="#op-piece-a"
fill="#96ffbe"
fill-opacity="0.36"
stroke="#333"
stroke-width="2"
/>
</g>
<g transform="translate(420 285) rotate(180) scale(0.58)">
<use
class="op-placement-own"
href="#op-piece-a"
fill="#96ffbe"
fill-opacity="0.36"
stroke="#333"
stroke-width="2"
/>
</g>
<g transform="translate(305 185) rotate(288) scale(0.58)">
<use
class="op-placement-own"
href="#op-piece-a"
fill="#96ffbe"
fill-opacity="0.36"
stroke="#333"
stroke-width="2"
/>
</g>
</g>
<!-- 最終實際落下的棋子 -->
<g transform="translate(535 180) rotate(72) scale(0.58)" opacity="0">
<animate
attributeName="opacity"
values="0;0;0;1;1"
keyTimes="0;0.65;0.73;0.8;1"
dur="6s"
repeatCount="indefinite"
/>
<use
class="op-placement-own"
href="#op-piece-a"
fill="#96ffbe"
stroke="#333"
stroke-width="2"
/>
</g>
<text class="op-zh" x="420" y="338" text-anchor="middle" font-size="16" font-weight="bold" fill="#333">
② 點擊對方棋子 ③ 顯示所有可能 ④ 點擊其中一個落子
</text>
<text class="op-en" x="420" y="338" text-anchor="middle" font-size="15" font-weight="bold" fill="#333">
② Select opponent ③ Show legal placements ④ Click one to place
</text>
</svg>
</section>
<!-- 八、開局落子和旋轉 -->
<section class="operation-card operation-card-wide">
<h2>
<span class="zh-text">開局落子和旋轉</span>
<span class="en-text">Opening Move and Rotation</span>
</h2>
<p>
<span class="zh-text">
開局時點擊其中一個棋子，它會自動落在棋盤中心。按住棋盤並拖動，可以把首枚棋子旋轉到任意角度；完成後點擊「確認」即可結束回合。
</span>
<span class="en-text">
At the beginning of the game, click one of your pieces and it will automatically move to the center of the
board. Press and drag on the board to rotate the opening piece to any angle, then click Confirm to end the
turn.
</span>
</p>
<svg
class="operation-demo operation-svg"
viewBox="0 0 760 350"
role="img"
aria-label="Opening placement and rotation animation"
>
<rect x="0" y="0" width="760" height="350" rx="12" fill="#f7f7f7" />
<rect x="35" y="80" width="145" height="145" rx="14" fill="#30343a" stroke="#7289da" stroke-width="4" />
<text class="op-zh" x="108" y="55" text-anchor="middle" font-size="17" font-weight="bold" fill="#333">
點擊棋子
</text>
<text class="op-en" x="108" y="55" text-anchor="middle" font-size="17" font-weight="bold" fill="#333">
Click a piece
</text>
<rect x="220" y="32" width="505" height="270" rx="14" fill="#fff" stroke="#7289da" stroke-width="3" />
<line x1="472" y1="42" x2="472" y2="292" stroke="#ddd" stroke-width="2" stroke-dasharray="6 6" />
<line x1="230" y1="167" x2="715" y2="167" stroke="#ddd" stroke-width="2" stroke-dasharray="6 6" />
<circle cx="472" cy="167" r="82" fill="none" stroke="#00bfff" stroke-width="3" stroke-dasharray="8 7" opacity="0">
<animate
attributeName="opacity"
values="0;0;1;1"
keyTimes="0;0.42;0.52;1"
dur="7s"
repeatCount="indefinite"
/>
</circle>
<path
d="M530 110a82 82 0 0 1 15 91"
fill="none"
stroke="#00bfff"
stroke-width="5"
stroke-linecap="round"
opacity="0"
>
<animate
attributeName="opacity"
values="0;0;1;1"
keyTimes="0;0.42;0.52;1"
dur="7s"
repeatCount="indefinite"
/>
</path>
<path
d="M542 199l8 14 8-14"
fill="none"
stroke="#00bfff"
stroke-width="5"
stroke-linejoin="round"
opacity="0"
>
<animate
attributeName="opacity"
values="0;0;1;1"
keyTimes="0;0.42;0.52;1"
dur="7s"
repeatCount="indefinite"
/>
</path>
<!-- 棋子由控制區移動到棋盤中心 -->
<g transform="translate(108 153)">
<animateTransform
attributeName="transform"
type="translate"
values="108 153;108 153;472 167;472 167"
keyTimes="0;0.14;0.38;1"
dur="7s"
repeatCount="indefinite"
/>
<!-- 隨機旋轉角度由 JavaScript 改寫 values -->
<g>
<animateTransform
id="op-opening-rotate"
attributeName="transform"
type="rotate"
values="0 0 0;0 0 0;137 0 0;137 0 0"
keyTimes="0;0.42;0.72;1"
dur="7s"
repeatCount="indefinite"
/>
<!-- 同時示範棋子的正反面翻轉 -->
<g>
<animateTransform
attributeName="transform"
type="scale"
values="1 1;1 1;-1 1;-1 1"
keyTimes="0;0.23;0.36;1"
dur="7s"
repeatCount="indefinite"
/>
<g transform="scale(0.72)">
<use
id="op-opening-piece"
href="#op-piece-c"
fill="#96ffbe"
stroke="#444"
stroke-width="2"
/>
</g>
</g>
</g>
</g>
<circle cx="672" cy="262" r="30" fill="#43b581">
<animate
attributeName="r"
values="30;30;34;30"
keyTimes="0;0.72;0.84;1"
dur="7s"
repeatCount="indefinite"
/>
</circle>
<path
d="M657 262l10 10 21-25"
fill="none"
stroke="#fff"
stroke-width="7"
stroke-linecap="round"
stroke-linejoin="round"
/>
<text
id="op-opening-angle-zh"
class="op-zh"
x="472"
y="326"
text-anchor="middle"
font-size="17"
font-weight="bold"
fill="#333"
>
隨機角度：137°
</text>
<text
id="op-opening-angle-en"
class="op-en"
x="472"
y="326"
text-anchor="middle"
font-size="17"
font-weight="bold"
fill="#333"
>
Random angle: 137°
</text>
</svg>
</section>
</div>
<div class="operation-tip">
<span class="zh-text">
提示：暫時落下的棋子仍可點擊取回。只有按下打勾確認後，本回合才會正式完成。
</span>
<span class="en-text">
Tip: A temporarily placed piece can still be clicked and picked up. The turn is finalized only after you press
the check button.
</span>
</div>
</div>
</div>5. 在 i18n 中加入英文按鈕文字
在 const i18n = { 中找到：
js
'ui-btn-rules': { zh: '規則說明', en: 'Rules' },
'ui-btn-start': { zh: '開始遊戲', en: 'Start Game' },替換為：
js
'ui-btn-rules': { zh: '規則說明', en: 'Rules' },
'ui-btn-operation': { zh: '操作說明', en: 'How to Play' },
'ui-btn-start': { zh: '開始遊戲', en: 'Start Game' },這樣現有的 setLang() 就會自動切換新按鈕的中英文，不需要更改 setLang() 本身。
6. 加入操作說明的打開、關閉和隨機示意函數
找到：
js
const SVG_CHECK = '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />';
function setLang(lang) {在兩者之間插入：
js
// 操作說明專用函數；只修改說明彈窗中的示意 SVG，不讀寫任何正式棋局狀態。
function operationRandomItem(items) {
return items[Math.floor(Math.random() * items.length)];
}
function setOperationUseHref(selector, href) {
document.querySelectorAll(selector).forEach(use => {
use.setAttribute('href', href);
});
}
function setOperationFill(selector, color) {
document.querySelectorAll(selector).forEach(element => {
element.setAttribute('fill', color);
});
}
function randomizeOperationGuideDemos() {
const demoPieces = ['#op-piece-a', '#op-piece-b', '#op-piece-c'];
const playerColors = ['#ffc2eb', '#96ffbe'];
// 「棋子按鈕」示意：隨機選擇一種棋子和顏色。
const selectedPiece = operationRandomItem(demoPieces);
const selectedColor = operationRandomItem(playerColors);
setOperationUseHref('#op-selected-piece, #op-flipping-piece', selectedPiece);
setOperationFill('#op-selected-piece, #op-flipping-piece', selectedColor);
// 「選擇目標和落子」示意：雙方棋形分別隨機選擇。
const ownPieceIndex = Math.floor(Math.random() * demoPieces.length);
let opponentPieceIndex = Math.floor(Math.random() * demoPieces.length);
if (opponentPieceIndex === ownPieceIndex) {
opponentPieceIndex = (opponentPieceIndex + 1) % demoPieces.length;
}
const ownPiece = demoPieces[ownPieceIndex];
const opponentPiece = demoPieces[opponentPieceIndex];
const ownIsPink = Math.random() < 0.5;
const ownColor = ownIsPink ? '#ffc2eb' : '#96ffbe';
const opponentColor = ownIsPink ? '#96ffbe' : '#ffc2eb';
setOperationUseHref('#operation-modal .op-placement-own', ownPiece);
setOperationFill('#operation-modal .op-placement-own', ownColor);
const targetUse = document.getElementById('op-placement-target');
if (targetUse) {
targetUse.setAttribute('href', opponentPiece);
targetUse.setAttribute('fill', opponentColor);
}
// 「開局落子和旋轉」示意：棋子、顏色和 1～360 度角度均隨機。
const openingPiece = operationRandomItem(demoPieces);
const openingColor = operationRandomItem(playerColors);
const openingAngle = Math.floor(Math.random() * 360) + 1;
const openingUse = document.getElementById('op-opening-piece');
if (openingUse) {
openingUse.setAttribute('href', openingPiece);
openingUse.setAttribute('fill', openingColor);
}
const openingRotateAnimation = document.getElementById('op-opening-rotate');
if (openingRotateAnimation) {
openingRotateAnimation.setAttribute(
'values',
`0 0 0;0 0 0;${openingAngle} 0 0;${openingAngle} 0 0`
);
}
const angleZh = document.getElementById('op-opening-angle-zh');
const angleEn = document.getElementById('op-opening-angle-en');
if (angleZh) {
angleZh.textContent = `隨機角度：${openingAngle}°`;
}
if (angleEn) {
angleEn.textContent = `Random angle: ${openingAngle}°`;
}
// 每次打開說明頁時，把所有 SVG 示意動畫重新由零開始播放。
requestAnimationFrame(() => {
document.querySelectorAll('#operation-modal svg.operation-demo').forEach(svg => {
try {
if (typeof svg.setCurrentTime === 'function') {
svg.setCurrentTime(0);
}
if (typeof svg.unpauseAnimations === 'function') {
svg.unpauseAnimations();
}
} catch (error) {
// 部分瀏覽器不支援 SVG SMIL 控制 API 時，保留其原生播放行為。
}
});
});
}
function openOperationGuide() {
const modal = document.getElementById('operation-modal');
const scroll = document.getElementById('operation-modal-scroll');
if (!modal) return;
// 避免兩個開始頁面說明視窗同時顯示。
const rulesModal = document.getElementById('rules-modal');
if (rulesModal) {
rulesModal.style.display = 'none';
}
modal.style.display = 'flex';
if (scroll) {
scroll.scrollTop = 0;
}
randomizeOperationGuideDemos();
}
function closeOperationGuide() {
const modal = document.getElementById('operation-modal');
if (modal) {
modal.style.display = 'none';
}
}插入後，附近代碼應為：
js
const SVG_CHECK = '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />';
// 上述新增函數放在這裡
function setLang(lang) {
currentLang = lang;
// ...
}修改後的行為
完成以上修改後：
- 開始頁面「規則說明」下方會出現純文字「操作說明」。
- 英文介面中顯示為
How to Play。 - 按鈕沒有背景色及邊框。
- 點擊後打開可捲動的操作說明頁面。
- 右上角有打叉關閉按鈕。
- 工具欄和方向控制使用兩層
<g>的opacity動畫輪流顯示。 - 棋子翻轉使用
<animateTransform type="scale">。 - 半透明落點、藍色目標點和實際落子使用循環
<animate>。 - 開局示意會隨機選擇棋形、顏色和 1～360 度旋轉角度。
- 所有新增 SVG ID 均以
op-開頭，所有新增 JavaScript 函數均只操作說明頁 DOM，不修改正式遊戲資料。