準備為三菱棋做遊戲和MCTS搜尋
发表于 ： 2026年 6月 25日 16:38
製作一個基於svg的html5弈棋遊戲：
一，《三菱棋（Trirhombus）》是一款二人抽象策略遊戲，雙方所用的棋子相同。
本棋的棋子有三種，在所上傳的svg的defs中，其名稱和id對應關係為：藍棋id=tile0，紅棋id=tile1，橙棋id=tile2。
每個玩家每種棋子都持有6個，則一方一共持有18個棋子。
二，棋盤的網格為豎放的正三角形，即把所有密鋪的正三角形的邊連起來會得到豎線。正三角形的高為18，以兩個豎邊貼合的三角形作為棋盤中心。不用真的把網格畫出來，這裡只是在介紹規則。
每個棋子都是一個相當於由兩個正三角形組合而成的菱形。藍棋是兩個正三角形横向貼合，所貼合的邊是豎邊。紅棋是斜邊對斜邊上下貼合，上面的三角形朝左，下面朝右。橙棋也是斜邊對斜邊上下貼合，但跟紅棋相反，上面的三角形朝右，下面朝左。
三，起初一個藍棋落在棋盤中心，這是先手方的第一手棋。往後所有的棋子都要與場上已有的棋子邊與邊貼合，唯一禁止的是形成空洞。後手方的第二手棋一定要用紅棋，往後雙方可以任意選擇棋子類型。
横坐標：棋盤中心往左的每個縱列的三角形的横坐標為「abcdefg...」，往右為「ABCDEFG...」。
縱坐標：横向中線一排三角形是第0排，往下將是第1、2、3…正排，往上則是第-1、-2、-3…負排。
程式中記三角形坐標時先寫縱坐標再寫横坐標，如(a,-1)。
一個棋子由兩個正三角形構成，則要有兩組坐標，比如[(a,-1),(a,-2)]。
記譜簡寫：
1.開局第一手藍棋置於棋盤中心，記作「0」。
2.如果藍棋的兩個三角形都位於0排，如果在左方則標為「一個小寫字母」，右方則標為「一個大寫字母」，取最靠近中心的三角形横坐標。
3.如果藍棋的兩個三角形分別位於a列和A列，如果在下方（正排）則標作「a$A」，上方（負排）則標作「A$a」，$指無符號數字。
4.如果藍棋位於其它地方，則標作「前字母$後字母」。如果在下方（正排），則前字母與後字母按字母順序排，上方（負排）則前字母與後字母按字母倒序排，
5.紅棋和橙棋標作「$字母$」，$指無符號數字，分別為前數字和後數字。當兩個三角形中至少有一個是正數時，則前數字小於後數字，否則前數字大於後數字。
四，頁面功能
頁面背景為淺黄色。
svg直接放進html，垂直居中並且水平居中，作為棋盤。如果是電腦端，其上下間距應為36px，如果是手機端，其左右間距應為0。
棋盤外為雙方分別提供三種菱形棋子按鈕（每個棋子按鈕都是一個獨立的svg），以及它的剩餘數量。如果是手機端，則我方（先手方）的藍、紅、橙棋横向一排置於svg下方，平分間隔，數量標在棋子下方。對方則用相同的擺放方式翻轉180度後置於svg的上方。
如果是電腦端，則我方置於右下角，藍、紅、橙棋縱向擺放，數字位於棋子右邊。對方則位於左上角，並且以藍、紅、橙棋的順序縱向擺放，數字位於棋子的左邊。
第一手藍棋默認是先手已下至svg棋盤中心，則輪到後手方，他將可以點擊一個棋子，當他點擊其中一個棋子後，svg中的g.etdrop內部的最後將會加上多個對應的棋子<use href="tile$">，並加上opacity使其處於半透明狀態，置於其所有能夠落子的地方。
當他點擊其中一個棋子，則它將去掉opacity屬性，同時其它透明狀態的棋子將會
移除，之後輪到另一方。
同時顯示當前玩家的分數，計分規則將在之後介紹，現在先加上計分的元素。電腦端我方分數顯示在右上角，對方在左下角。手機端我方顯示在最下方，對方翻轉180度後顯示在最上方。目前先是一方下了多少藍棋就得多少分。
把所有css和js都寫到一個html中。
一，《三菱棋（Trirhombus）》是一款二人抽象策略遊戲，雙方所用的棋子相同。
本棋的棋子有三種，在所上傳的svg的defs中，其名稱和id對應關係為：藍棋id=tile0，紅棋id=tile1，橙棋id=tile2。
每個玩家每種棋子都持有6個，則一方一共持有18個棋子。
二，棋盤的網格為豎放的正三角形，即把所有密鋪的正三角形的邊連起來會得到豎線。正三角形的高為18，以兩個豎邊貼合的三角形作為棋盤中心。不用真的把網格畫出來，這裡只是在介紹規則。
每個棋子都是一個相當於由兩個正三角形組合而成的菱形。藍棋是兩個正三角形横向貼合，所貼合的邊是豎邊。紅棋是斜邊對斜邊上下貼合，上面的三角形朝左，下面朝右。橙棋也是斜邊對斜邊上下貼合，但跟紅棋相反，上面的三角形朝右，下面朝左。
三，起初一個藍棋落在棋盤中心，這是先手方的第一手棋。往後所有的棋子都要與場上已有的棋子邊與邊貼合，唯一禁止的是形成空洞。後手方的第二手棋一定要用紅棋，往後雙方可以任意選擇棋子類型。
横坐標：棋盤中心往左的每個縱列的三角形的横坐標為「abcdefg...」，往右為「ABCDEFG...」。
縱坐標：横向中線一排三角形是第0排，往下將是第1、2、3…正排，往上則是第-1、-2、-3…負排。
程式中記三角形坐標時先寫縱坐標再寫横坐標，如(a,-1)。
一個棋子由兩個正三角形構成，則要有兩組坐標，比如[(a,-1),(a,-2)]。
記譜簡寫：
1.開局第一手藍棋置於棋盤中心，記作「0」。
2.如果藍棋的兩個三角形都位於0排，如果在左方則標為「一個小寫字母」，右方則標為「一個大寫字母」，取最靠近中心的三角形横坐標。
3.如果藍棋的兩個三角形分別位於a列和A列，如果在下方（正排）則標作「a$A」，上方（負排）則標作「A$a」，$指無符號數字。
4.如果藍棋位於其它地方，則標作「前字母$後字母」。如果在下方（正排），則前字母與後字母按字母順序排，上方（負排）則前字母與後字母按字母倒序排，
5.紅棋和橙棋標作「$字母$」，$指無符號數字，分別為前數字和後數字。當兩個三角形中至少有一個是正數時，則前數字小於後數字，否則前數字大於後數字。
四，頁面功能
頁面背景為淺黄色。
svg直接放進html，垂直居中並且水平居中，作為棋盤。如果是電腦端，其上下間距應為36px，如果是手機端，其左右間距應為0。
棋盤外為雙方分別提供三種菱形棋子按鈕（每個棋子按鈕都是一個獨立的svg），以及它的剩餘數量。如果是手機端，則我方（先手方）的藍、紅、橙棋横向一排置於svg下方，平分間隔，數量標在棋子下方。對方則用相同的擺放方式翻轉180度後置於svg的上方。
如果是電腦端，則我方置於右下角，藍、紅、橙棋縱向擺放，數字位於棋子右邊。對方則位於左上角，並且以藍、紅、橙棋的順序縱向擺放，數字位於棋子的左邊。
第一手藍棋默認是先手已下至svg棋盤中心，則輪到後手方，他將可以點擊一個棋子，當他點擊其中一個棋子後，svg中的g.etdrop內部的最後將會加上多個對應的棋子<use href="tile$">，並加上opacity使其處於半透明狀態，置於其所有能夠落子的地方。
當他點擊其中一個棋子，則它將去掉opacity屬性，同時其它透明狀態的棋子將會
移除，之後輪到另一方。
同時顯示當前玩家的分數，計分規則將在之後介紹，現在先加上計分的元素。電腦端我方分數顯示在右上角，對方在左下角。手機端我方顯示在最下方，對方翻轉180度後顯示在最上方。目前先是一方下了多少藍棋就得多少分。
把所有css和js都寫到一個html中。
代码： 全选
製作一個基於svg的html5弈棋遊戲：
一，《三菱棋（Trirhombus）》是一款二人抽象策略遊戲，雙方所用的棋子相同。
本棋的棋子有三種，在所上傳的svg的defs中，其名稱和id對應關係為：藍棋id=tile0，紅棋id=tile1，橙棋id=tile2。
每個玩家每種棋子都持有6個，則一方一共持有18個棋子。
二，棋盤的網格為豎放的正三角形，即把所有密鋪的正三角形的邊連起來會得到豎線。正三角形的高為18，以兩個豎邊貼合的三角形作為棋盤中心。不用真的把網格畫出來，這裡只是在介紹規則。
每個棋子都是一個相當於由兩個正三角形組合而成的菱形。藍棋是兩個正三角形横向貼合，所貼合的邊是豎邊。紅棋是斜邊對斜邊上下貼合，上面的三角形朝左，下面朝右。橙棋也是斜邊對斜邊上下貼合，但跟紅棋相反，上面的三角形朝右，下面朝左。
三，起初一個藍棋落在棋盤中心，這是先手方的第一手棋。往後所有的棋子都要與場上已有的棋子邊與邊貼合，唯一禁止的是形成空洞。後手方的第二手棋一定要用紅棋，往後雙方可以任意選擇棋子類型。
横坐標：棋盤中心往左的每個縱列的三角形的横坐標為「abcdefg...」，往右為「ABCDEFG...」。
縱坐標：横向中線一排三角形是第0排，往下將是第1、2、3…正排，往上則是第-1、-2、-3…負排。
程式中記三角形坐標時先寫縱坐標再寫横坐標，如(a,-1)。
一個棋子由兩個正三角形構成，則要有兩組坐標，比如[(a,-1),(a,-2)]。
記譜簡寫：
1.開局第一手藍棋置於棋盤中心，記作「0」。
2.如果藍棋的兩個三角形都位於0排，如果在左方則標為「一個小寫字母」，右方則標為「一個大寫字母」，取最靠近中心的三角形横坐標。
3.如果藍棋的兩個三角形分別位於a列和A列，如果在下方（正排）則標作「a$A」，上方（負排）則標作「A$a」，$指無符號數字。
4.如果藍棋位於其它地方，則標作「前字母$後字母」。如果在下方（正排），則前字母與後字母按字母順序排，上方（負排）則前字母與後字母按字母倒序排，
5.紅棋和橙棋標作「$字母$」，$指無符號數字，分別為前數字和後數字。當兩個三角形中至少有一個是正數時，則前數字小於後數字，否則前數字大於後數字。
四，頁面功能
頁面背景為淺黄色。
svg直接放進html，垂直居中並且水平居中，作為棋盤。如果是電腦端，其上下間距應為36px，如果是手機端，其左右間距應為0。
棋盤外為雙方分別提供三種菱形棋子按鈕（每個棋子按鈕都是一個獨立的svg），以及它的剩餘數量。如果是手機端，則我方（先手方）的藍、紅、橙棋横向一排置於svg下方，平分間隔，數量標在棋子下方。對方則用相同的擺放方式翻轉180度後置於svg的上方。
如果是電腦端，則我方置於右下角，藍、紅、橙棋縱向擺放，數字位於棋子右邊。對方則位於左上角，並且以藍、紅、橙棋的順序縱向擺放，數字位於棋子的左邊。
第一手藍棋默認是先手已下至svg棋盤中心，則輪到後手方，他將可以點擊一個棋子，當他點擊其中一個棋子後，svg中的g.etdrop內部的最後將會加上多個對應的棋子<use href="tile$">，並加上opacity使其處於半透明狀態，置於其所有能夠落子的地方。
當他點擊其中一個棋子，則它將去掉opacity屬性，同時其它透明狀態的棋子將會
移除，之後輪到另一方。
同時顯示當前玩家的分數，計分規則將在之後介紹，現在先加上計分的元素。電腦端我方分數顯示在右上角，對方在左下角。手機端我方顯示在最下方，對方翻轉180度後顯示在最上方。目前先是一方下了多少藍棋就得多少分。
把所有css和js都寫到一個html中。