製作「冰火島︱Fire and Ice」html遊戲
发表于 ： 2026年 9月 9日 18:46
製作「冰火島︱Fire and Ice」html遊戲
冰火島是一個二人抽象策略遊戲，規則說明：
棋盤
冰火島共有七個島，每個島都是一個法諾平面，有七個點和七條線（圓也算是一條線），每條線上都有三個點。而七個島也是排佈在一個更大的「法諾平面」上。
棋子
本棋為雙人遊戲，雙方各自選擇冰與火。最多需要二十五顆紅色的「火」，與二十四顆藍色的「冰」。
棋規
開局：由中心産生一個火，由火開始行動，之後雙方輪流行動。
行動：每方在他的回合，必須選擇做以下兩種行動的其中一種：
將他的一個棋子移至所在島的其它空位。
將他的一個棋子移至其它島的同一空位。
當該棋子移動結束後，原來的位置會産生一個對方棋子。
勝負：當一方的三個棋子處於一線，則他佔領了這個島。當一方佔領了三個處於同一線的島，他將贏得遊戲。
規則介紹完畢。我所上傳的圖片分別是「一個法諾平面」以及「七個法諾平面放在一個更大的法諾平面的整體實現圖」。
棋盤和棋子用svg實現，svg長寬為480*480。棋盤始終在頁面內居中，盡量縱向撐大（手機端則是横向），但留有邊距。電腦端右方（手機端是下方）是火方（先手方）控制區，電腦端左方（手機端是上方）是冰方（後手方）控制區。控制區中將把「人類、簡單AI、困難AI、專家AI、自訂AI」按鈕鋪開（電腦端縱向，手機端横向），每個按鈕都是一個svg圖標，，選中的將高亮，默認玩家一是人類，玩家二是簡單AI。
火方控制區背景色是火紅色，冰方控制區則是冰白色。加上美觀圖案背景。當輪到一方時，背景高亮。
棋盤區上方是消息欄，提示當前是第幾回合，輪到哪一方。下面是工具欄，有「回退、前進、導出棋譜、下載局面、設置」按鈕，每個按鈕都是一個svg圖標。這兩欄不要覆蓋到棋盤上。
實現MCTS搜尋，歸一化，AI分四種等級，簡單，困難，專家，自訂。思考時間分別為3s,6s,12s,18s。
當AI在思考時，消息欄精簡顯示「已用時間和MCTS搜尋次數」，每隔0.1s更新一次，當思考完落子時，精簡顯示「總用時、總搜尋次數、期望值、勝率」。全部都顯示在同一行，不要換行。
遊戲開始時有開始頁面，有標題，規則介紹，中文english語言切換，開始遊戲按鈕。
遊戲一開始，火方的一顆棋子將已經存在於中間島的中心位置上。火棋子和冰棋子也要用svg的path做得像火和冰。兩種棋子都應先在svg的defs中的g內定義，然後再用use引用。每個島也應是先定義再用use引用。當一個島被某一方佔領，其背景色應發生相應變化。
當有一方勝利，則整個棋盤背景色都將發生相應變化。
回答要求：整個程式寫到一個html中，包含全部的css和js。
冰火島是一個二人抽象策略遊戲，規則說明：
棋盤
冰火島共有七個島，每個島都是一個法諾平面，有七個點和七條線（圓也算是一條線），每條線上都有三個點。而七個島也是排佈在一個更大的「法諾平面」上。
棋子
本棋為雙人遊戲，雙方各自選擇冰與火。最多需要二十五顆紅色的「火」，與二十四顆藍色的「冰」。
棋規
開局：由中心産生一個火，由火開始行動，之後雙方輪流行動。
行動：每方在他的回合，必須選擇做以下兩種行動的其中一種：
將他的一個棋子移至所在島的其它空位。
將他的一個棋子移至其它島的同一空位。
當該棋子移動結束後，原來的位置會産生一個對方棋子。
勝負：當一方的三個棋子處於一線，則他佔領了這個島。當一方佔領了三個處於同一線的島，他將贏得遊戲。
規則介紹完畢。我所上傳的圖片分別是「一個法諾平面」以及「七個法諾平面放在一個更大的法諾平面的整體實現圖」。
棋盤和棋子用svg實現，svg長寬為480*480。棋盤始終在頁面內居中，盡量縱向撐大（手機端則是横向），但留有邊距。電腦端右方（手機端是下方）是火方（先手方）控制區，電腦端左方（手機端是上方）是冰方（後手方）控制區。控制區中將把「人類、簡單AI、困難AI、專家AI、自訂AI」按鈕鋪開（電腦端縱向，手機端横向），每個按鈕都是一個svg圖標，，選中的將高亮，默認玩家一是人類，玩家二是簡單AI。
火方控制區背景色是火紅色，冰方控制區則是冰白色。加上美觀圖案背景。當輪到一方時，背景高亮。
棋盤區上方是消息欄，提示當前是第幾回合，輪到哪一方。下面是工具欄，有「回退、前進、導出棋譜、下載局面、設置」按鈕，每個按鈕都是一個svg圖標。這兩欄不要覆蓋到棋盤上。
實現MCTS搜尋，歸一化，AI分四種等級，簡單，困難，專家，自訂。思考時間分別為3s,6s,12s,18s。
當AI在思考時，消息欄精簡顯示「已用時間和MCTS搜尋次數」，每隔0.1s更新一次，當思考完落子時，精簡顯示「總用時、總搜尋次數、期望值、勝率」。全部都顯示在同一行，不要換行。
遊戲開始時有開始頁面，有標題，規則介紹，中文english語言切換，開始遊戲按鈕。
遊戲一開始，火方的一顆棋子將已經存在於中間島的中心位置上。火棋子和冰棋子也要用svg的path做得像火和冰。兩種棋子都應先在svg的defs中的g內定義，然後再用use引用。每個島也應是先定義再用use引用。當一個島被某一方佔領，其背景色應發生相應變化。
當有一方勝利，則整個棋盤背景色都將發生相應變化。
回答要求：整個程式寫到一個html中，包含全部的css和js。
代码： 全选
製作「冰火島︱Fire and Ice」html遊戲
冰火島是一個二人抽象策略遊戲，規則說明：
棋盤
冰火島共有七個島，每個島都是一個法諾平面，有七個點和七條線（圓也算是一條線），每條線上都有三個點。而七個島也是排佈在一個更大的「法諾平面」上。
棋子
本棋為雙人遊戲，雙方各自選擇冰與火。最多需要二十五顆紅色的「火」，與二十四顆藍色的「冰」。
棋規
開局：由中心産生一個火，由火開始行動，之後雙方輪流行動。
行動：每方在他的回合，必須選擇做以下兩種行動的其中一種：
將他的一個棋子移至所在島的其它空位。
將他的一個棋子移至其它島的同一空位。
當該棋子移動結束後，原來的位置會産生一個對方棋子。
勝負：當一方的三個棋子處於一線，則他佔領了這個島。當一方佔領了三個處於同一線的島，他將贏得遊戲。
規則介紹完畢。我所上傳的圖片分別是「一個法諾平面」以及「七個法諾平面放在一個更大的法諾平面的整體實現圖」。
棋盤和棋子用svg實現，svg長寬為480*480。棋盤始終在頁面內居中，盡量縱向撐大（手機端則是横向），但留有邊距。電腦端右方（手機端是下方）是火方（先手方）控制區，電腦端左方（手機端是上方）是冰方（後手方）控制區。控制區中將把「人類、簡單AI、困難AI、專家AI、自訂AI」按鈕鋪開（電腦端縱向，手機端横向），每個按鈕都是一個svg圖標，，選中的將高亮，默認玩家一是人類，玩家二是簡單AI。
火方控制區背景色是火紅色，冰方控制區則是冰白色。加上美觀圖案背景。當輪到一方時，背景高亮。
棋盤區上方是消息欄，提示當前是第幾回合，輪到哪一方。下面是工具欄，有「回退、前進、導出棋譜、下載局面、設置」按鈕，每個按鈕都是一個svg圖標。這兩欄不要覆蓋到棋盤上。
實現MCTS搜尋，歸一化，AI分四種等級，簡單，困難，專家，自訂。思考時間分別為3s,6s,12s,18s。
當AI在思考時，消息欄精簡顯示「已用時間和MCTS搜尋次數」，每隔0.1s更新一次，當思考完落子時，精簡顯示「總用時、總搜尋次數、期望值、勝率」。全部都顯示在同一行，不要換行。
遊戲開始時有開始頁面，有標題，規則介紹，中文english語言切換，開始遊戲按鈕。
遊戲一開始，火方的一顆棋子將已經存在於中間島的中心位置上。火棋子和冰棋子也要用svg的path做得像火和冰。兩種棋子都應先在svg的defs中的g內定義，然後再用use引用。每個島也應是先定義再用use引用。當一個島被某一方佔領，其背景色應發生相應變化。
當有一方勝利，則整個棋盤背景色都將發生相應變化。
回答要求：整個程式寫到一個html中，包含全部的css和js。