「益智遊戲」和「抽象弈棋」
头像
ejsoon
一枝独秀一枝独秀
帖子: 6726
注册时间: 2022年 11月 18日 17:36
联系:

Re: 寡人新創作的弈棋「維諾廣場」竟然十分好玩!

帖子 ejsoon »

改進:
一,更改規則

之前的規則是「某個階段只要放了一個棋子,就可以選擇跳到下個階段」,現在改為「在本階段必須盡量落完所有棋子,只有所有本階段棋子都落完,或者證明已經無法再落下一個,才可以跳到下個階段」。

更改規則說明,包括中文和英文。

更改MCTS和alpha-beta邏輯,使之符合更新的規則。

更改控制區的點擊邏輯,棋子的選取將只能由程式來決定,不再能自由選擇。

二,MCTS會從頭開始搜尋的問題

當MCTS搜尋到時限而沒有執行,然後又要從頭開始搜尋時,要先彈出一個對話框,說明原因,點擊確定後才再從頭開始搜尋。

三,圓點閃爍的問題

當先手第一手棋沒有落對位置,會出現一個閃爍的圓點。現在要修改這個圓點的閃爍,在固定的時間內,只要「變大—變小—變大—變小」,然後就消失。

四,svg棋盤的問題

當前的svg棋盤,很多的svg屬性都寫在css中。現在要改為,所有的svg屬性,包括fill, stroke等等,都要寫到svg元素中,不要再寫到css。

回答要求:明確給出所要修改的地方和所要替換和代碼。

代码: 全选

改進:
一,更改規則

之前的規則是「某個階段只要放了一個棋子,就可以選擇跳到下個階段」,現在改為「在本階段必須盡量落完所有棋子,只有所有本階段棋子都落完,或者證明已經無法再落下一個,才可以跳到下個階段」。

更改規則說明,包括中文和英文。

更改MCTS和alpha-beta邏輯,使之符合更新的規則。

更改控制區的點擊邏輯,棋子的選取將只能由程式來決定,不再能自由選擇。

二,MCTS會從頭開始搜尋的問題

當MCTS搜尋到時限而沒有執行,然後又要從頭開始搜尋時,要先彈出一個對話框,說明原因,點擊確定後才再從頭開始搜尋。

三,圓點閃爍的問題

當先手第一手棋沒有落對位置,會出現一個閃爍的圓點。現在要修改這個圓點的閃爍,在固定的時間內,只要「變大—變小—變大—變小」,然後就消失。

四,svg棋盤的問題

當前的svg棋盤,很多的svg屬性都寫在css中。現在要改為,所有的svg屬性,包括fill, stroke等等,都要寫到svg元素中,不要再寫到css。

回答要求:明確給出所要修改的地方和所要替換和代碼。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6726
注册时间: 2022年 11月 18日 17:36
联系:

Re: 寡人新創作的弈棋「維諾廣場」竟然十分好玩!

帖子 ejsoon »

https://gpt.quanquan.space/share/CpSIky ... eKZDpJD8hU

vino2278.html

更新規則:如果能放則必須放,只有不能放或已經放完才能跳到下個階段。
附件
vino2278.html.7z
(56.3 KiB) 已下载 3 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6726
注册时间: 2022年 11月 18日 17:36
联系:

Re: 寡人新創作的弈棋「維諾廣場」竟然十分好玩!

帖子 ejsoon »

441 363 221 674 962 723 001 111 294 385 615 905 815 935 835 9392737 159 9293578 587 9091686 899 3818076 8384826 9353407 8185806 1819506 8575958 1979198 75380 91550 542 251 822 732 111 973 394 094 185 902 065 225 865 485 0605678 045 1828467 167 0515687 786 1565158 0424998 8676427 2464236 7686407 619 2820006 64180 86640

AI已經難以戰勝了。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6726
注册时间: 2022年 11月 18日 17:36
联系:

Re: 寡人新創作的弈棋「維諾廣場」竟然十分好玩!

帖子 ejsoon »

在電腦端,當一局結束時,彈出的窗口中,玩家一的分數區塊應和玩家二同樣寬度,下方的兩個按鈕應居中。

claude sonnet 5 (medium)

代码: 全选

Now the buttons — make them centered on desktop instead of right-aligned:现在验证一下改动前后是否语法正常(粗略检查大括号是否配对),然后输出文件。Edits look good. Let me present the updated file.已针对結算彈窗(`resultBackdrop`)做了兩處調整:

1. **分數區塊等寬**:`.modal-score-grid` 本身已是兩欄 `1fr` 的 grid,但補上 `min-width: 0`、`box-sizing: border-box`(並讓文字用 `overflow-wrap: anywhere`),避免玩家名稱較長或分數位數不同時撐大某一欄,確保玩家一、玩家二的區塊在任何情況下都嚴格等寬。
2. **按鈕置中**:`.modal-actions` 原本是 `justify-content: flex-end`(靠右),在電腦版寬螢幕下會偏向右側,已改成 `justify-content: center`,兩顆按鈕現在會置中顯示;手機版(≤620px)原本就會變成上下堆疊全寬,不受影響。
當先手第一手棋沒有落在正確的位置上時,並沒有見到「閃爍的圓點」,查找問題並修復。
附件
vino2279.html.7z
(55.14 KiB) 已下载 1 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6726
注册时间: 2022年 11月 18日 17:36
联系:

Re: 寡人新創作的弈棋「維諾廣場」竟然十分好玩!

帖子 ejsoon »

兩個專家ai對局:

代码: 全选

542 251 722 664 301 494 383 031 973 411 145 845 935 815 065 115 1424228 1110576 9394786 8485928 2420146 8575998 0616016 7571858 1646076 8183807 46680 10930
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6726
注册时间: 2022年 11月 18日 17:36
联系:

Re: 寡人新創作的弈棋「維諾廣場」竟然十分好玩!

帖子 ejsoon »

準備加數字和動畫,同時需要更改「計分規則」的說明。
附件
vino231.html.7z
(56.51 KiB) 已下载 1 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6726
注册时间: 2022年 11月 18日 17:36
联系:

Re: 寡人新創作的弈棋「維諾廣場」竟然十分好玩!

帖子 ejsoon »

在svg棋盤中,把棋子生成方式改為:先在defs中定義三種棋子的path路徑,然後在g#placedLayer中用use[translate rotate]調用。每個棋子的中心是它的尖角所在的正方形的中心,米諾則直接是它的中心。

claude sonnet 5 (medium)

代码: 全选

Now let's add the `buildPieceShapeDefs` function (and its helper) right after `appendShape`, before `renderMiniPiece`:Now let's update `renderPlacedPieces` to use `<use>` with translate/rotate:Now add the initialization call for `buildPieceShapeDefs()`:Syntax checks out. Let me do a quick sanity check on the piece geometry logic to make sure the `<use>` rotation reproduces the original per-cell shapes correctly.All four orientations for both Fino and Vino match exactly after rotation — the geometry logic is confirmed correct. Now let's clean up the test artifacts and copy the final file to outputs.修改內容如下:

1. **`<defs>` 中新增三個基準圖形**(`buildPieceShapeDefs()`,初始化時建立一次):
   - `#pieceDefFino`、`#pieceDefVino`:以 `tl` 方向為基準,座標系原點就是尖角(錨點)所在格的中心(`computeCanonicalPieceOutlineD()` 沿用原本 `getBoundaryPoints` + `insetRectilinearBoundary` 的算法,只是把 origin 平移到錨點格中心)。
   - `#pieceDefMino`:以自己中心為原點的正方形 `rect`。

2. **`g#placedLayer`(`renderPlacedPieces()`)改為呼叫 `<use>`**:
   - `translate(cx, cy)`:`cx,cy` 是該棋子尖角格(`piece.cells[0]`,即落子錨點)的中心;米諾則就是它自己那一格的中心。
   - `rotate(angle)`:`tl→0°、tr→90°、br→180°、bl→270°`,因為以尖角為圓心每轉 90° 剛好對應下一個方向(已用純數學驗證四個方向、法諾/維諾兩種棋子皆完全吻合原本逐格算出的外框)。
   - 顏色/透明度等仍沿用原本 `applyShapeSvgAttributes()`,視覺效果不變。

其餘棋盤功能(預覽層、迷你圖示、匯出入棋譜、AI 等)未受影響。
為什麼玩家一的棋子沒有邊了?

代码: 全选

Good, a browser is available. Let's actually render the board and inspect player 1's piece.找到原因了,這其實是**檔案中原本就存在的 bug,跟這次改成 `<use>` 沒關係**——我在原始檔案上測了一次,同一個問題也在(見下方對照)。

**根本原因**:`formatSvgAttributeValue()` 會用一個數字正規表示式,把每個屬性字串裡「看起來像數字」的片段都抓出來重新格式化(四捨五入到小數點後兩位),目的是處理座標、`d`、`transform` 這類數值字串。但玩家一的邊框顏色剛好是 `#a73e37`,其中 `73e37` 這段文字符合「科學記號數字」的樣式(`73 × 10^37`),於是被誤判成數字並算成 `7.3e+38`,顏色就整個壞掉變成 `#a7.3e+38`(無效顏色 → 瀏覽器直接不畫邊框)。

玩家二的顏色 `#2866a4`、`#60acf8` 裡沒有這種「數字+e+數字」的巧合組合,所以沒觸發,看起來才會像是「只有玩家一壞掉」。

**修法**:讓數字格式化函式遇到十六進位色碼(以 `#` 開頭)時直接跳過,不要用數字正規表示式去處理它。`stroke="#a73e37"` 正確了,邊框應該恢復了。已修好,複製到輸出目錄:**總結**:這是原檔案中本來就存在的 bug(跟改成 `<use>`/defs 無關,我用原始檔案重現後確認過),只是恰好玩家一的邊框色 `#a73e37` 觸發了它——`73e37` 這串文字被通用的數值格式化正規表示式誤判成科學記號數字,把顏色改壞成無效值 `#a7.3e+38`,瀏覽器因此不畫邊框。已修正 `formatSvgAttributeValue()`,讓它遇到十六進位色碼時直接跳過、不做數字重新格式化。
把所有的xlink:href直接改為href

代码: 全选

已改好,`<use>` 現在只設定 `href`(不再額外設定 `xlink:href`)。
把use棋子的這些屬性,都寫到defs中:stroke-width="3" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" fill-opacity="0.78"。
附件
vino2323.html.7z
(56.65 KiB) 尚未被下载
vino2322.html.7z
(56.46 KiB) 已下载 1 次
vino2321.html.7z
(56.48 KiB) 已下载 1 次
vino232.html.7z
(56.33 KiB) 已下载 2 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6726
注册时间: 2022年 11月 18日 17:36
联系:

Re: 寡人新創作的弈棋「維諾廣場」竟然十分好玩!

帖子 ejsoon »

claude sonnet 5 (medium)

代码: 全选

Now let's move the fixed presentation attributes into the defs shapes, and keep only fill/stroke (owner-dependent) on the `<use>`:Now update `renderPlacedPieces` so the `<use>` only sets the owner-dependent `fill`/`stroke` colors, instead of calling the generic `applyShapeSvgAttributes` (which would re-apply all the now-shared attributes):Good, that's defined earlier in the file. Let's verify syntax and re-render to confirm the DOM output looks correct.`<use>` 現在只剩 `href`、`transform`、`class`、`fill`、`stroke`,其他共用樣式都已寫進 `defs` 裡的三個基準圖形。複製到輸出目錄:**小提醒**:`fill-opacity` 最終顯示是 `0.78` 而不是 `0.777`。這不是這次改動造成的——整個 SVG 每次重繪時都會跑 `normalizeSvgNumericAttributes()`,把畫面上所有數字屬性統一四捨五入到小數點後兩位(原本 `appendShape` 畫在 `placedLayer` 上的棋子也一樣會被轉成 `0.78`,我在改動前的原始檔案上也測過,結果相同)。因為這是全站既有的數值格式化規則,我就沒有特別繞過它;如果你希望棋子的 `fill-opacity` 精確保留 `0.777`,需要另外調整 `normalizeSvgNumericAttributes`,讓它跳過這個屬性或跳過 `<defs>`,要我一併處理嗎?
去掉每次重繪都跑的normalizeSvgNumericAttributes,元素應該在加進去的時候就把數字的小數部分處理好。

另外,為什麼要在每個use棋子外再加一層g?把g去掉,把data-piece-id屬性放進use中,不需要加clip-path,因為父元素已經有了。

代码: 全选

Now let's consolidate these into one `setSvgAttributes` call:Good — this already goes through `setSvgAttributes`. Now let's remove the `normalizeSvgNumericAttributes` call and the function itself:Now let's find and remove `normalizeSvgNumericAttributes` function definition and its call site:Good, this confirms the outputs file already has all prior work correctly. Now let's check `buildPieceShapeDefs`:This is the correct, up-to-date file. Now let's apply this turn's three changes cleanly. First, remove the `<g>` wrapper in `renderPlacedPieces`:Good — no other code depends on the `<g>` wrapper or queries by `data-piece-id`, so this is safe. Now let's remove `normalizeSvgNumericAttributes` and fix the two raw `setAttribute` spots that relied on it (in `renderMiniPiece` and `renderPreview`):Now the two call sites — first, the mini-piece anchor dot:Now the second call site (in `renderPreview`, hover-anchor dot) and the other raw `setAttribute` there:Now remove the last remaining call at `renderBoard()`:All remaining raw `setAttribute` calls are non-numeric (aria labels, viewBox literal, href, fixed strings) — no computed floats left unformatted. Let's syntax-check and functionally verify with Playwright.棋子的填色和邊框都正常。清理暫存檔並輸出最終版本:修改內容:

1. **移除 `normalizeSvgNumericAttributes`**:整個函式定義和三個呼叫點都刪掉了。順帶找出兩處原本繞過 `setSvgAttributes`、直接用 `dot.setAttribute('cx', ...)` 等寫法設定數值的地方(小圖示的錨點、預覽層的錨點小圓點),一併改成透過 `setSvgAttributes` 一次寫入——這樣數字在**建立當下**就會被 `formatSvgAttributeValue` 格式化好,不需要再事後跑一次全域掃描。

2. **`g#placedLayer` 內拿掉多餘的 `<g>`**:`renderPlacedPieces()` 現在直接把 `<use>` 放進 `placedLayer`,不再包一層 `<g>`。

3. **`data-piece-id` 移到 `<use>` 上**:用 `use.dataset.pieceId = String(piece.id)` 設定。

4. **沒有加 `clip-path`**:`<use>` 本身完全沒有設定 `clip-path`,一直沿用父層 `#placedLayer` 已有的 `clip-path="url(#boardClip)")`。

最終每個棋子的 DOM 長這樣:
```html
<use href="#pieceDefFino" data-piece-id="1" transform="translate(216 216) rotate(0)" class="piece-shape owner-1" fill="#ff806f" stroke="#a73e37"></use>
```

我用無頭瀏覽器實際跑過一輪(放子、hover 預覽、側邊小圖示),確認畫面正常、主控台沒有錯誤。
附件
vino2324.html.7z
(56.48 KiB) 尚未被下载
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6726
注册时间: 2022年 11月 18日 17:36
联系:

Re: 寡人新創作的弈棋「維諾廣場」竟然十分好玩!

帖子 ejsoon »

代码: 全选

為下載按鈕增加功能:
當點擊下載按鈕,將彈出一個窗口,內容是:標題(下載svg檔),預覽區,選項區,下載區。

窗口右上角是一個打叉按鈕,點擊則關閉窗口。

預覽區是當前棋盤的svg的clone,但要去掉其中的clipPath及其調用,所有的filter,rect class="board-border",title id="boardSvgTitle",role="img",aria-label,g id="previewLayer",g id="openingHintLayer",g id="moveLayer"。

選項區有兩個勾選項,一個是「數字」,另一個是「動畫」。


https://ejsoon.vip/
弈趣極光:享受思維樂趣
回复
  • 相似主题
    回复总数
    阅读次数
    最新帖子

在线用户

正在浏览此版面的用户:ejsoon