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

製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

製作「冰火島︱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。

代码: 全选

製作「冰火島︱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。
附件
pic43342.jpg
pic43342.jpg (16.53 KiB) 查看 47 次
法諾a.png
法諾a.png (4.97 KiB) 查看 47 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

ifif.html.7z
(18.4 KiB) 已下载 5 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

當點擊一個島,無論是否選中己方棋子,這個島都將被選中並放大1.5倍。中心四個島以其自身中心放大,上、左下、右下三個島在放大時要配合translate以使其朝向中心放大並保持邊距。
附件
ifif21.html.7z
(19.08 KiB) 已下载 3 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

當一個島被選中而沒有己方棋子被選中時,如果點擊棋盤空地,則島將取消選中。

有己方棋子被選中時,其所在的島也會被選中,這時如果點擊棋盤空地,則島不會取消選中。這時如果點擊另一個島,只要是該棋子能飛到這個島,則不管有沒有點到那個空棋位,這個棋子都將飛過去。

當一方結束行動,不管是飛到另一個島,還是在島內移動,都將取消所有島的選中。

代码: 全选

當一個島被選中而沒有己方棋子被選中時,如果點擊棋盤空地,則島將取消選中。

有己方棋子被選中時,其所在的島也會被選中,這時如果點擊棋盤空地,則島不會取消選中。這時如果點擊另一個島,只要是該棋子能飛到這個島,則不管有沒有點到那個空棋位,這個棋子都將飛過去。

當一方結束行動,不管是飛到另一個島,還是在島內移動,都將取消所有島的選中。
附件
ifif23.html.7z
(20.69 KiB) 已下载 1 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

ifif24.html

把g#victoryLayer放到島的下面。
開始頁面的「規則介紹」應做成一個文字按鈕(無邊框),點擊後才打開規則介紹的頁面。
當一個棋子被選中時,去掉飛來的虛線圓。
當處於AI控制的一方行動時,島將不能被選中。
在「設置窗口」中,把「AI固定思考時間」一欄改為「自訂AI思考時間」,下面將提供輸入框設置這個值,單位為秒。把這欄移到「探索常數」的前面。
附件
ifif24.html.7z
(20.97 KiB) 已下载 1 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

改進:
開始頁面的「規則介紹」應做成一個文字按鈕(無邊框),點擊後才打開規則介紹的頁面。
當一個棋子被選中時,去掉飛來的虛線圓。
當處於AI控制的一方行動時,島將不能被選中。
當遊戲結束時,在消息欄出現「重新開局」按鈕,如果是電腦端則顯示在中間,如果是手機端則顯示在右邊。

在「設置窗口」中:
把「AI固定思考時間」一欄改為「自訂AI思考時間」,下面將提供輸入框設置這個值,單位為秒。把這欄移到「探索常數」的前面。
把「顯示可移動位置」和「動畫效果」的設置去掉,默認這兩個設置打勾生效。
去掉下方的「完成」按鈕。

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

代码: 全选

改進:
開始頁面的「規則介紹」應做成一個文字按鈕(無邊框),點擊後才打開規則介紹的頁面。
當一個棋子被選中時,去掉飛來的虛線圓。
當處於AI控制的一方行動時,島將不能被選中。
當遊戲結束時,在消息欄出現「重新開局」按鈕,如果是電腦端則顯示在中間,如果是手機端則顯示在右邊。

在「設置窗口」中:
把「AI固定思考時間」一欄改為「自訂AI思考時間」,下面將提供輸入框設置這個值,單位為秒。把這欄移到「探索常數」的前面。
把「顯示可移動位置」和「動畫效果」的設置去掉,默認這兩個設置打勾生效。
去掉下方的「完成」按鈕。

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

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

把生成的svg棋盤以及所有加入的元素,其所有屬性都不要寫到css,而是寫到元素屬性中,如fill、stroke等。如果有相同屬性,則要寫到父元素g的屬性中。

css的cursor: pointer;等非svg屬性仍可保留。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

改進
在「開始頁面」中:

去掉「MCTS 思考時間」。

把「規則介紹」四個字增大一些,去掉下劃線。

把「開始遊戲」按鈕的寬度改小,不要100%寬。

在「設置窗口」中:

把「自訂思考時間」的輸入模塊移到標題右邊,並把數字輸入框的寬度改小。

在「控制面板」中:

當在電腦端,把每個按鈕名稱的字體變大(20px),以下的樣式都不需要:「 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;」,思考秒數也變大(14px)。在電腦端,名稱和思考秒數不需要這麼大的間距。

在script中:

把每種AI默認思考時間改為「簡單6s,困難12s,專家24s,自訂48s」。

把生成的svg棋盤以及所有加入的元素,其所有SVG屬性都不要寫到css,而是寫到元素屬性中,如fill、stroke等。如果有相同屬性,則要寫到父元素g的屬性中。css的「cursor: pointer」等非svg屬性仍可保留。

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

代码: 全选

改進
在「開始頁面」中:

去掉「MCTS 思考時間」。

把「規則介紹」四個字增大一些,去掉下劃線。

把「開始遊戲」按鈕的寬度改小,不要100%寬。

在「設置窗口」中:

把「自訂思考時間」的輸入模塊移到標題右邊,並把數字輸入框的寬度改小。

在「控制面板」中:

當在電腦端,把每個按鈕名稱的字體變大(20px),以下的樣式都不需要:「  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;」,思考秒數也變大(14px)。在電腦端,名稱和思考秒數不需要這麼大的間距。

在script中:

把每種AI默認思考時間改為「簡單6s,困難12s,專家24s,自訂48s」。

把生成的svg棋盤以及所有加入的元素,其所有SVG屬性都不要寫到css,而是寫到元素屬性中,如fill、stroke等。如果有相同屬性,則要寫到父元素g的屬性中。css的「cursor: pointer」等非svg屬性仍可保留。

回答要求:明確給出所要修改的地方和所要替換的代碼。
附件
ifif241.html.7z
(21.56 KiB) 已下载 1 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

ifif242.html
附件
ifif242.html.7z
(21.49 KiB) 已下载 1 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

把火焰的形狀改成所上傳的圖案(無視水印)。同時,當火或冰行動結束,會出現兩個紅色或藍色的圈,現在把圈改為顯示在棋子中心的圓點,顏色跟棋子的描邊顏色一樣。

把「重新開始」按鈕改為放在文字後面。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

火棋子:

代码: 全选

<g xmlns="http://www.w3.org/2000/svg" id="fire-piece">
                <path d="M0 8.8C-4.7 8.5-7.2 5.4-6.5 1.6 C-6-1.5-3.4-3.3-2.8-8.8 C.6-6.7 2.8-3.9 2.1-1 C4.7-2.5 7.1-.2 7 3 C6.9 6.8 4.2 8.8 0 8.8Z" fill="url(#fireGradient)" stroke="#7f160f" stroke-width="1"/>
                <path d="M.2 6.7C-2.2 6.7-3.4 5-3 3 C-2.7 1.4-1.3.4-.6-2.3 C1.4-.8 2.7.7 2.1 2.5 C3.2 1.9 4 1 4.2.1 C5.2 3.9 3.1 6.7.2 6.7Z" fill="url(#fireCore)" opacity=".92"/>
              </g>
冰棋子:

代码: 全选

<g xmlns="http://www.w3.org/2000/svg" id="ice-piece">
                <path d="M0-9 L2.6-4.8 L6.6-5.6 L4.5-1.5 L8 2.4 L3.3 3.1 L2.1 8.3 L0 5.7 L-3 8.4 L-3.4 3.3 L-8 2 L-4.3-1.4 L-6.1-5.7 L-2.3-4.7Z" fill="url(#iceGradient)" stroke="#216b94" stroke-width="1"/>
                <path d="M0-6.7V6.2 M-5.6-3.2 5.6 3.2 M-5.6 3.2 5.6-3.2" fill="none" stroke="#fff" stroke-width="1.25" stroke-linecap="round" opacity=".88"/>
              </g>
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀一枝独秀
帖子: 6740
注册时间: 2022年 11月 18日 17:36
联系:

Re: 製作「冰火島︱Fire and Ice」html遊戲

帖子 ejsoon »

grok

代码: 全选

<g xmlns="http://www.w3.org/2000/svg" id="fire-piece">
  <path d="M0 8.8C-4.7 8.5-7.2 5.4-6.5 1.6C-6-1.5-3.4-3.3-2.8-8.8C.6-6.7 2.8-3.9 2.1-1C3.5-2.8 5.5-1.5 6.8 1C7 2.2 6.8 4.5 5.2 6.8C3.5 8.3 1.5 8.8 0 8.8Z" fill="url(#fireGradient)" stroke="#7f160f" stroke-width="1"/>
  <path d="M.2 6.7C-2.2 6.7-3.4 5-3 3C-2.7 1.4-1.3.4-.6-2.3C1.4-.8 2.7.7 2.1 2.5C3.2 1.9 4 1 4.2.1C5.2 3.9 3.1 6.7.2 6.7Z" fill="url(#fireCore)" opacity=".92"/>
</g>
https://ejsoon.vip/
弈趣極光:享受思維樂趣
回复
  • 相似主题
    回复总数
    阅读次数
    最新帖子

在线用户

正浏览此版面之用户: 没有注册用户 和 111 访客