代码： 全选
[[3,6],[-5,3,0,1,4,8],[8,6,0,3,1,0,4,1,8,4],[-5,6,9,5,8,7],[8,7,0,3,1,0,4,1,8,4,9,6,5,9,8,5,7,8],[-5,8,5,4,1],[1,7,0,3,1,0,1,4,8,4,9,6,5,9,5,8,7,8,4,5],[-5,7,8,4,5,1,2],[1,2,0,3,1,0,1,4,4,8,9,6,5,9,5,8,8,7,5,4,1,5,2,1],[-5,1,5,9,8,7],[7,2,0,3,1,0,1,4,4,8,9,6,9,5,5,8,7,8,5,4,5,1,2,1,8,9],[-5,2,5,4,0,3,7,8,9],[7,9,3,0,1,0,1,4,4,8,9,6,9,5,5,8,8,7,4,5,5,1,2,1,9,8,2,5,4,0,3,7],[-5,7,4,5,1],[1,9,3,0,1,0,1,4,4,8,9,6,9,5,5,8,8,7,5,4,1,5,2,1,9,8,2,5,4,0,3,7,7,4],[-5,9,6,2],[1,2,3,0,1,0,1,4,4,8,6,9,9,5,5,8,8,7,5,4,1,5,2,1,9,8,2,5,4,0,3,7,7,4,6,2],[-5,1,5,6,9],[9,2,3,0,1,0,1,4,4,8,9,6,9,5,5,8,8,7,5,4,5,1,2,1,9,8,2,5,4,0,3,7,7,4,6,2,5,6],[-5,2,1,4,8,7],[9,7,3,0,1,0,4,1,8,4,9,6,9,5,5,8,7,8,5,4,5,1,1,2,9,8,2,5,4,0,3,7,7,4,6,2,5,6],[-5,9,6,2,5,4,3,0],[0,7,0,3,1,0,4,1,8,4,6,9,9,5,5,8,7,8,4,5,5,1,1,2,9,8,2,5,4,0,3,7,7,4,6,2,5,6,4,3],[-1,7,4,7,8,4,0,4,1,4,3,4,5,8,4,0,3,1,0,1,2,3,7,5,8,5,6,5,1,2,5,6,2,6,9,9,5,9,8]]代码： 全选
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg id="konigsberg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="480" viewBox="0 0 720 480" style="background: lightblue; height: 100%; width: 100%;"><g id="kongnisbersvg">
<g class="appendarea"><circle cx="180" cy="48" r="24" fill="#fff" stroke="#333" stroke-width="2" i="0"/><circle cx="360" cy="48" r="24" fill="#fff" stroke="#333" stroke-width="2" i="1"/><circle cx="540" cy="48" r="24" fill="#fff" stroke="#333" stroke-width="2" i="2"/><circle cx="90" cy="203.88457268119896" r="24" fill="#fff" stroke="#333" stroke-width="2" i="3"/><circle cx="270" cy="203.88457268119896" r="24" fill="#fff" stroke="#333" stroke-width="2" i="4"/><circle cx="450" cy="203.88457268119896" r="24" fill="#fff" stroke="#333" stroke-width="2" i="5"/><circle cx="630" cy="203.88457268119896" r="24" fill="#fff" stroke="#333" stroke-width="2" i="6"/><circle cx="180" cy="359.7691453623979" r="24" fill="#fff" stroke="#333" stroke-width="2" i="7"/><circle cx="360" cy="359.7691453623979" r="24" fill="#fff" stroke="#333" stroke-width="2" i="8"/><circle cx="540" cy="359.7691453623979" r="24" fill="#fff" stroke="#333" stroke-width="2" i="9"/><path class="arrowbrg" d="M73,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="480" style="transform: rotate(480deg); transform-origin: 135px 125.942px 0px;"/><path class="arrowbrg" d="M208,48 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="180" style="transform: rotate(180deg); transform-origin: 270px 48px 0px;"/><path class="arrowbrg" d="M253,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="660" style="transform: rotate(660deg); transform-origin: 315px 125.942px 0px;"/><path class="arrowbrg" d="M253,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="600" style="transform: rotate(600deg); transform-origin: 315px 281.827px 0px;"/><path class="arrowbrg" d="M523,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="840" style="transform: rotate(840deg); transform-origin: 585px 281.827px 0px;"/><path class="arrowbrg" d="M433,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="240" style="transform: rotate(240deg); transform-origin: 495px 281.827px 0px;"/><path class="arrowbrg" d="M343,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="480" style="transform: rotate(480deg); transform-origin: 405px 281.827px 0px;"/><path class="arrowbrg" d="M208,359.7691453623979 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="1080" style="transform: rotate(1080deg); transform-origin: 270px 359.769px 0px;"/><path class="arrowbrg" d="M298,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="1080" style="transform: rotate(1080deg); transform-origin: 360px 203.885px 0px;"/><path class="arrowbrg" d="M343,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="600" style="transform: rotate(600deg); transform-origin: 405px 125.942px 0px;"/><path class="arrowbrg" d="M388,48 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="360" style="transform: rotate(360deg); transform-origin: 450px 48px 0px;"/><path class="arrowbrg" d="M388,359.7691453623979 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" rotatedeg="540" style="transform: rotate(540deg); transform-origin: 450px 359.769px 0px;"/><path class="arrowbrg" d="M433,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" rotatedeg="120" style="transform: rotate(120deg); transform-origin: 495px 125.942px 0px;"/><path class="arrowbrg" d="M163,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" rotatedeg="-120" style="transform: rotate(-120deg); transform-origin: 225px 125.942px 0px;"/><path class="arrowbrg" d="M73,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" rotatedeg="60" style="transform: rotate(60deg); transform-origin: 135px 281.827px 0px;"/><path class="arrowbrg" d="M163,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" rotatedeg="-60" style="transform: rotate(-60deg); transform-origin: 225px 281.827px 0px;"/><path class="arrowbrg" d="M523,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" rotatedeg="-120" style="transform: rotate(-120deg); transform-origin: 585px 125.942px 0px;"/><path class="arrowbrg" d="M478,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" rotatedeg="0" style="transform: rotate(0deg); transform-origin: 540px 203.885px 0px;"/><path class="arrowbrg" d="M118,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" rotatedeg="180" style="transform: rotate(180deg); transform-origin: 180px 203.885px 0px;"/></g>
<g class="bottomarea"><circle cx="180" cy="48" r="24" fill="#33d" stroke="none" stroke-width="4" i="0" stroke-dasharray="7 7" class="" style="transform: translate(0px);"/></g>
<g class="middlearea">
<line class="redline" x1="180" y1="359.7691453623979" x2="270" y2="203.88457268119896" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="180" y1="359.7691453623979" x2="360" y2="359.7691453623979" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270" y1="203.88457268119896" x2="180" y2="48" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270" y1="203.88457268119896" x2="360" y2="48" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270" y1="203.88457268119896" x2="90" y2="203.88457268119896" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270" y1="203.88457268119896" x2="450" y2="203.88457268119896" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360" y1="359.7691453623979" x2="270" y2="203.88457268119896" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="180" y1="48" x2="90" y2="203.88457268119896" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360" y1="48" x2="180" y2="48" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360" y1="48" x2="540" y2="48" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="90" y1="203.88457268119896" x2="180" y2="359.7691453623979" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450" y1="203.88457268119896" x2="360" y2="359.7691453623979" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450" y1="203.88457268119896" x2="630" y2="203.88457268119896" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450" y1="203.88457268119896" x2="360" y2="48" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540" y1="48" x2="450" y2="203.88457268119896" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="630" y1="203.88457268119896" x2="540" y2="48" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="630" y1="203.88457268119896" x2="540" y2="359.7691453623979" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540" y1="359.7691453623979" x2="450" y2="203.88457268119896" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540" y1="359.7691453623979" x2="360" y2="359.7691453623979" stroke="#e77" stroke-width="7" stroke-linecap="round"/></g>
<g class="toparea"><circle cx="180" cy="359.7691453623979" r="24" fill="#3d3" stroke="none" stroke-width="4" i="7" stroke-dasharray="7 7" class="" style="transform: translate(0px);"/></g>
<use>
<animateMotion dur="12s" fill="freeze" additive="sum" id="moveinroute" rotate="auto">
<mpath xlink:href="#movingroute"/>
</animateMotion>
</use>
<g id="g12155">
<path d="M 48 420 h 72 v 40 h -72 Z" fill="none" stroke="#fff" stroke-width="2" id="path22"/>
<path d="M 96 420 h 24 v 40 h -48 Z" fill="#3d3" stroke="#fff" stroke-width="2" id="path26" class=""/>
</g>
<g id="g8717" transform="translate(38.455111,0.32714844)" class="">
<circle cx="379.73492" cy="439.67285" r="16" fill="#b0dceb" stroke="#ffffff" stroke-width="2" id="circle5497"/>
<path style="fill:#078f00;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 373.27064,427.6435 19.50493,12.27039 -19.58086,11.99501 z" id="path5939"/>
</g>
<g id="g11048" transform="translate(0,-2.7672119)" class="">
<rect style="fill:#b0dceb;fill-opacity:1;stroke:#fff;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect7925" width="46.221607" height="27.315125" x="501.40842" y="429.10965"/>
<path style="fill:none;stroke:#490f92;stroke-width:3.6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 510.76874,434.58056 v 16.35487" id="path9124"/>
<path style="fill:none;stroke:#490f92;stroke-width:3.6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 526.0211,436.6151 -7.81082,6.64035 7.61586,6.43247" id="path9885"/>
<path style="fill:none;stroke:#490f92;stroke-width:3.6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 539.43881,436.6151 -7.81082,6.64035 7.61586,6.43247" id="path10346"/>
</g>
<rect style="fill:#b0dceb;fill-opacity:1;stroke:#490f92;stroke-width:3.6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect11400" width="21.318359" height="21.318359" x="576.03088" y="429.34082"/>
</g></svg>
代码： 全选
這裡為您整理出對應這 5 項改進，程式碼中**需要修改或新增的 4 個區塊**：
### 1. `addDots()` 函式內
在建立 `man_bottom` 的屬性設定時，加上 `stroke-width`：
```javascript
if (i == 3 || i == 6) {
let man_bottom = dot.cloneNode(true);
let manfill = i == 3 ? "#33d" : "#3d3";
man_bottom.setAttribute("fill", manfill);
man_bottom.setAttribute("stroke", "none");
man_bottom.setAttribute("stroke-width", "4"); // 💡 新增這行
man_bottom.setAttribute("i", i);
```
### 2. `judgeResult()` 函式內 (有兩處需要加 stroke)
**第一處：和局 (-4)**
```javascript
if (game_history.indexOf(current_history_str) == -1) {
h_status = -5;
game_status = game_status == 4 ? 1 : 3
} else {
h_status = -4;
game_status = 7;
detail_div.innerHTML = "Draw";
btn_play.classList.remove("hide");
// 💡 新增：和局雙方加上紅色邊框
men_bottom[0].setAttribute("stroke", "#e77");
men_bottom[1].setAttribute("stroke", "#e77");
}
```
**第二處：困斃 (-2) 或 沒放橋 (-3)**
```javascript
} else {
game_status = 7;
let current_man_str = current_man ? "Green" : "Blue";
let lose_reason;
if (route_tmp.length <= 1) {
lose_reason = "he does not take any steps.";
lose_num = -2;
} else {
lose_reason = "no new wooden bridge was set up.";
lose_num = -3;
}
game_history.push(JSON.stringify([lose_num].concat(route_tmp)));
detail_div.innerHTML = current_man_str + " man loses, because " + lose_reason;
btn_play.classList.remove("hide");
// 💡 新增：困斃或沒放橋，當前方加上紅色邊框
men_bottom[current_man].setAttribute("stroke", "#e77");
}
```
### 3. `historyCommen()` 函式內
在還原歷史盤面時，需先清空 stroke，並根據讀取到的狀態碼還原 stroke：
**第一處：清空 stroke (在設定 men_top 座標之後)**
```javascript
men_top[1].setAttribute("cx", dots[current_board[1]].getAttribute("cx"));
men_top[1].setAttribute("cy", dots[current_board[1]].getAttribute("cy"));
// 💡 新增：先重置雙方的 stroke
men_bottom[0].setAttribute("stroke", "none");
men_bottom[1].setAttribute("stroke", "none");
// animation motion reset
```
**第二處：還原狀態 stroke (在函式末段解析 history_route_tmp 處)**
```javascript
if (game_history.length > game_hp * 2 + 1) {
let history_route_tmp = JSON.parse(game_history[game_hp * 2 + 1]);
if (history_route_tmp[0] < -1) {
// 💡 新增：根據歷史狀態恢復對應的紅色邊框
if (history_route_tmp[0] == -4) {
men_bottom[0].setAttribute("stroke", "#e77");
men_bottom[1].setAttribute("stroke", "#e77");
} else if (history_route_tmp[0] == -2 || history_route_tmp[0] == -3) {
men_bottom[current_man].setAttribute("stroke", "#e77");
}
route.setAttribute("d", "M" +
```
### 4. `btn_play.onclick` 函式內
修改 `else if (game_status == 8)` 區塊，加入終局判斷與結局顯示：
```javascript
} else if (game_status == 8) {
this.classList.add("hide");
btn_history_next.classList.add("hide");
// 💡 新增：檢查當前歷史節點是否為終局 (-1, -2, -3, -4)
let is_terminal = false;
let status_code = 0;
if (game_history.length > game_hp * 2 + 1) {
let history_route_tmp = JSON.parse(game_history[game_hp * 2 + 1]);
status_code = history_route_tmp[0];
if (status_code < 0) {
is_terminal = true;
}
}
if (is_terminal) {
game_history.splice(game_hp * 2 + 2); // 保留至當前終局，捨棄後續多餘紀錄
game_status = 7;
// 💡 新增：恢復顯示結局文字
if (status_code == -4) {
detail_div.innerHTML = "Draw";
} else if (status_code == -2 || status_code == -3) {
let current_man_str = current_man ? "Green" : "Blue";
let lose_reason = status_code == -2 ? "he does not take any steps." : "no new wooden bridge was set up.";
detail_div.innerHTML = current_man_str + " man loses, because " + lose_reason;
} else if (status_code == -1) {
let loseman = current_man ? "Blue" : "Green";
detail_div.innerHTML = loseman + " man is lose, because of shooting!";
}
this.classList.remove("hide"); // 顯示 play 按鈕以便重開新局
} else {
route.classList.add("hide");
game_history.splice(game_hp * 2 + 1);
game_status = game_hp & 1 ? 3 : 1;
current_man = game_hp & 1;
displayGame();
}
} else {
```代码： 全选
[[3,6],[-5,3,4,0,1,2,5],[5,6,4,3,0,4,1,0,2,1,5,2],[-5,6,5,1,0],[5,0,4,3,0,4,0,1,2,1,5,2,5,6,1,5],[-5,5,8,4,7],[7,0,4,3,0,4,0,1,2,1,5,2,5,6,1,5,8,5,4,8,7,4],[-5,0,4,5,6],[7,6,4,3,4,0,0,1,2,1,5,2,6,5,1,5,8,5,4,8,7,4,5,4],[-5,7,8,9,6,5,4,0],[0,6,4,3,0,4,0,1,2,1,5,2,5,6,1,5,8,5,4,8,7,4,4,5,8,7,8,9,9,6],[-5,6,2,1,4,8],[0,8,4,3,0,4,0,1,1,2,5,2,5,6,1,5,8,5,8,4,7,4,4,5,8,7,8,9,9,6,6,2,1,4],[-5,0,1],[1,8,4,3,0,4,1,0,1,2,5,2,5,6,1,5,8,5,8,4,7,4,4,5,8,7,8,9,9,6,6,2,1,4],[-5,8,7,3,0,4,5,6],[1,6,4,3,4,0,1,0,1,2,5,2,6,5,1,5,8,5,8,4,7,4,5,4,7,8,8,9,9,6,6,2,1,4,7,3,3,0],[-5,1,5,4,3],[3,6,3,4,4,0,1,0,1,2,5,2,6,5,5,1,8,5,8,4,7,4,4,5,7,8,8,9,9,6,6,2,1,4,7,3,3,0],[-5,6,5,1],[3,1,3,4,4,0,1,0,1,2,5,2,5,6,1,5,8,5,8,4,7,4,4,5,7,8,8,9,9,6,6,2,1,4,7,3,3,0],[-5,3,4,5,6],[6,1,4,3,4,0,1,0,1,2,5,2,6,5,1,5,8,5,8,4,7,4,5,4,7,8,8,9,9,6,6,2,1,4,7,3,3,0],[-5,1,5,4,3],[6,3,3,4,4,0,1,0,1,2,5,2,6,5,5,1,8,5,8,4,7,4,4,5,7,8,8,9,9,6,6,2,1,4,7,3,3,0],[-5,6,5,1],[1,3,3,4,4,0,1,0,1,2,5,2,5,6,1,5,8,5,8,4,7,4,4,5,7,8,8,9,9,6,6,2,1,4,7,3,3,0],[-4,3,4,5,6],[1,6,4,3,4,0,1,0,1,2,5,2,6,5,1,5,8,5,8,4,7,4,5,4,7,8,8,9,9,6,6,2,1,4,7,3,3,0]]代码： 全选
為本程式製作「導出svg動畫」功能。
在頁面加載後，把「生成svg動畫」按鈕絕對定位到#fullscreen下方7px以及離屏幕右邊7px的地方。當屏寬發生變化時，其右邊7px的值跟#fullscreen一起改變。這個按鈕應是一個獨立的svg圖標。
當點擊這個按鈕時，作以下操作：
一，拿到game_history走到最後一步時的svg#konigsberg的outerHTML，把它的id改為konigsberganimate（以下簡稱ka）。
二，把ka中.toparea往後的所有元素去掉，把「.arrowbrg.hide」去掉，再把「所有的.arrowbrg」、「.bottomarea內的兩個元素」、「.middlearea內的所有元素」、「.toparea內的兩個元素」都加上opacity=0。
三，為ka中的「.toparea內的兩個元素」內部加上「<animate attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"></animate>」。
四，拿到game_history第一步時的svg#konigsberg，找到它的.bottomarea內的兩個元素，將它們的cx和cy屬性，賦值給ka內的.bottomarea內的兩個元素。之後給它們加上第一個動畫「<set id="koga1" attributeName="opacity" to="1" dur="2s" begin="1s;kogend.end+1s"/>」。
五，ka內的.toparea內的兩個元素加上動畫「<set id="kogu1" attributeName="opacity" to="1" end="kote1.end" begin="koga1.end"/>」。