圈圈之地

代码： 全选

[(0,0),(1,0)] [(0,-2),(0,-1)] [(0,1),(0,2)] [(1,-2),(1,-1)] [(-1,-3),(0,-3)] [(-1,3),(0,3)] [(-1,0),(-1,1)] [(-2,0),(-2,1)] [(1,1),(1,2)] [(-2,2),(-1,2)] [(1,-3),(2,-3)] [(2,-1),(2,0)] [(3,-1),(3,0)] [(1,3),(2,3)] [(2,-2),(3,-2)] [(-3,1),(-3,2)] [(-2,3),(-2,4)] [(-3,5),(-2,5)] [(0,4),(0,5)] [(3,1),(4,1)] [(2,4),(2,5)] [(4,-1),(4,0)] [(-1,4),(-1,5)] [(-2,6),(-1,6)] [(1,4),(1,5)] [(2,-5),(2,-4)] [(2,-6),(3,-6)] [(3,-4),(3,-3)] [(4,-4),(4,-3)] [(2,1),(2,2)] [(4,2),(4,3)] [(-3,3),(-3,4)] [(3,2),(3,3)] [(1,-5),(1,-4)] [(3,-5),(4,-5)] [(-1,-5),(-1,-4)]

代码： 全选

點擊下載功能的改進
當點擊「下載」時，程式會直接下載當前的svg棋盤。現在改為彈出一個全屏窗口，其具體要求描述如下：

一，窗口右上角有叉形關閉按鈕，其內部有svg顯示區，下方選項區，以及下載按鈕。所有的元素都要展示出來。

二，svg顯示區將等比例顯示所要下載的svg圖像文件，其內容為svg棋盤的clone。

三，選項區有「是否顯示網格，是否顯示數字，是否下載動畫」，做成現代美觀的切換按鈕，其左方文字為「網格、數字、動畫」。把三者排在一行，平分間隔。

四，網格默認是勾選的，當取消時，將把clone中的網格去掉。

五，數字默認不勾選，當勾選時，將在ejdrop內的最後加上text標籤：

<text x="棋子横坐標" y="棋子縱坐標" stroke="none" fill="black" font-size="24" font-family="ZT Nature">棋子次序</text>

按clone中每個use棋子的次序添加對應的數字，在代碼中寫明數字的横坐標和縱坐標相對於棋子中心坐標的偏移量，並分為一位數和兩位數，使我在測試中可以修改。

之後在clone的.etboard中添加：

```
<style>
@font-face {
    font-family: 'ZT Nature';
    src: url(...) format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
</style>
```

我會自行補充url的內容。

六，當動畫勾選時，數字將不能勾選，二者相斥。

動畫也會在clone的.etboard中添加同樣的style。

動畫的步驟為：

1.為.etdrop增加屬性opacity=0，同時在其內部最前面添加動畫「<animate id="tr0" begin="0;trend.end" attributeName="opacity" values="0;0;1" fill="freeze" dur="2s"/>」。

2.每個use都有transform="translate(x,y)"，取到它們的屬性坐標(x,y)，在所有的<use>內部添加動畫「<animateTransform attributeName="transform" attributeType="XML" type="translate" from="屬性坐標" to="視圖外不遠的坐標，我方在下面，對方在上面" dur="1s" fill="freeze" begin="tr0.begin"/>」。

3.按次序為每一個use內部添加動畫「<animateTransform id="tr(n)" attributeName="transform" attributeType="XML" type="translate" from="視圖外坐標" to="屬性坐標" dur="1s" fill="freeze" begin="tr(n-1).end"/>」。例如第一個use內加的是「<animateTransform id="tr1" attributeName="transform" attributeType="XML" type="translate" from="視圖外坐標" to="屬性坐標" dur="1s" fill="freeze" begin="tr0.end"/>」。

4.當最後一個use棋子添加動畫（假設id="tr36"）完畢後，挑出對於我方得分無用的棋子（算法是去掉一個棋子，如果分數不變則無用），這些棋子將以朝向當前視圖中心的反方向，添加往視圖外移動再移回來的動畫「<animateTransform id="trme" attributeName="transform" attributeType="XML" type="translate" values="屬性坐標;視圖外坐標;視圖外坐標;視圖外坐標;屬性坐標" dur="4s" fill="freeze" begin="tr36.end+1s"/>」。

5.同時在.etboard內部的最後添加一個text標籤「<text id="trmetxt" x="視圖外距右邊界12" y="視圖內距下邊界12" stroke="none" fill="black" font-size="60" font-family="ZT Nature">我方得分</text>」，

動畫「<animateTransform id="trme" attributeName="transform" attributeType="XML" type="translate" values="屬性坐標;視圖外坐標;視圖外坐標;視圖外坐標;屬性坐標" dur="4s" fill="freeze" begin="tr36.end+1s"/>」