From 76e8d2e0327bd9b163d8885b7067635e5273f0ea Mon Sep 17 00:00:00 2001
From: shikukuya <shikukuya@qq.com>
Date: Tue, 3 Jan 2023 15:25:32 +0800
Subject: [PATCH] =?UTF-8?q?shikukuya:=20=E7=BE=8E=E5=8C=96ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/index.css     | 132 +++++++++++++---
 css/index.css.map |   2 +-
 css/index.less    | 387 ++++++++++++++++++++++++++++------------------
 index.html        | 101 ++++++------
 js/index.js       |   8 +-
 5 files changed, 403 insertions(+), 227 deletions(-)

diff --git a/css/index.css b/css/index.css
index 63188d2..b10c1ff 100644
--- a/css/index.css
+++ b/css/index.css
@@ -3,17 +3,103 @@
   padding: 0;
   box-sizing: border-box;
 }
-body {
+button,
+input[type="number"],
+select {
+  border: #ccc solid 2px;
+  padding: 0.7em 1em;
+  border-radius: 10px;
+  margin: 2px;
+  transition: all 0.3s;
+}
+button:hover,
+input[type="number"]:hover,
+select:hover,
+button:focus,
+input[type="number"]:focus,
+select:focus {
+  background-color: #333;
+  color: #fff;
+  box-shadow: #aaa 0 0 5px;
+}
+button::-webkit-inner-spin-button,
+input[type="number"]::-webkit-inner-spin-button,
+select::-webkit-inner-spin-button {
+  display: none;
+}
+input[type="number"],
+select {
+  padding: 0.5em;
+  border-radius: 7px;
+}
+input[type="color"] {
+  border: #ccc solid 2px;
+  border-radius: 3px;
+  margin: 2px;
+  transition: all 0.3s;
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+input[type="color"]::-webkit-color-swatch {
+  border: none;
+}
+input[type="color"]:hover,
+input[type="color"]:focus {
+  box-shadow: #aaa 0 0 10px;
+}
+html {
+  height: 100%;
+}
+html body {
   overflow-x: hidden;
+  background-image: linear-gradient(to top right, #ddd, #ccc);
+  height: 100%;
 }
-body h1 {
+html body h1 {
   text-align: center;
+  margin: 0.5em 0;
+}
+html body h1::before,
+html body h1::after {
+  content: "/////";
+  margin: 0 0.5em;
+  color: rebeccapurple;
+}
+html body .shapeSelect,
+html body .normalGameDiv {
+  text-align: center;
+  position: relative;
+}
+html body .shapeSelect .wip:hover::before,
+html body .normalGameDiv .wip:hover::before {
+  content: "制作中";
+  position: absolute;
+  top: 4em;
+  color: #000;
+  font-weight: bold;
+}
+html body .normalOption {
+  border: #ccc solid 2px;
+  border-radius: 10px;
+  padding: 1em;
+  margin: 1em;
+  box-shadow: #aaa 0 0 2px;
+}
+html body .normalOption label {
+  display: block;
+}
+html body .normalOption :not(label) {
+  margin-bottom: 0.5em;
+}
+html body .normalOption button {
+  display: block;
 }
-body .normalGameDiv .boardShakeFx {
+html body .normalGameDiv .boardShakeFx {
   animation-name: littleShake;
   animation-fill-mode: forwards;
 }
-body .normalGameDiv .table {
+html body .normalGameDiv .table {
   width: 100%;
   outline: solid 1px;
   padding-top: 100px;
@@ -21,20 +107,20 @@ body .normalGameDiv .table {
   padding-bottom: 100px;
   background-color: #d3a969;
 }
-body .normalGameDiv .table .tableLine {
+html body .normalGameDiv .table .tableLine {
   height: 30px;
   margin-bottom: 0;
 }
-body .normalGameDiv .table .tableLine .tableBoxShakeFx {
+html body .normalGameDiv .table .tableLine .tableBoxShakeFx {
   animation-name: small;
   animation-fill-mode: forwards;
 }
-body .normalGameDiv .table .tableLine .tableBoxHover {
+html body .normalGameDiv .table .tableLine .tableBoxHover {
   outline-width: 3px;
   z-index: 4;
   transform: scale(1.5);
 }
-body .normalGameDiv .table .tableLine .tableBox {
+html body .normalGameDiv .table .tableLine .tableBox {
   width: 30px;
   height: 30px;
   margin-left: 0;
@@ -42,7 +128,7 @@ body .normalGameDiv .table .tableLine .tableBox {
   transition: all 0.2s;
   position: relative;
 }
-body .normalGameDiv .table .tableLine .tableBox .block {
+html body .normalGameDiv .table .tableLine .tableBox .block {
   width: 100%;
   height: 100%;
   z-index: 3;
@@ -53,11 +139,11 @@ body .normalGameDiv .table .tableLine .tableBox .block {
   outline-width: 3px;
   outline-color: transparent;
 }
-body .normalGameDiv .table .tableLine .tableBox .block:hover {
+html body .normalGameDiv .table .tableLine .tableBox .block:hover {
   cursor: pointer;
   outline-style: solid;
 }
-body .normalGameDiv .table .tableLine .tableBox .bz {
+html body .normalGameDiv .table .tableLine .tableBox .bz {
   display: block;
   position: absolute;
   left: 0;
@@ -67,10 +153,10 @@ body .normalGameDiv .table .tableLine .tableBox .bz {
   z-index: 0;
   background-size: contain;
 }
-body .normalGameDiv .table .tableLine .tableBox .bz:hover {
+html body .normalGameDiv .table .tableLine .tableBox .bz:hover {
   filter: blur(5px);
 }
-body .normalGameDiv .table .tableLine .tableBox .littleStone {
+html body .normalGameDiv .table .tableLine .tableBox .littleStone {
   position: absolute;
   border-radius: 50%;
   left: 50%;
@@ -78,7 +164,7 @@ body .normalGameDiv .table .tableLine .tableBox .littleStone {
   z-index: 1;
   transition-timing-function: ease-out;
 }
-body .normalGameDiv .table .tableLine .tableBox .shrink {
+html body .normalGameDiv .table .tableLine .tableBox .shrink {
   position: absolute;
   width: 30px;
   height: 30px;
@@ -89,7 +175,7 @@ body .normalGameDiv .table .tableLine .tableBox .shrink {
   animation-name: blockBoom;
   animation-fill-mode: forwards;
 }
-body .normalGameDiv .table .tableLine .tableBox .putFx {
+html body .normalGameDiv .table .tableLine .tableBox .putFx {
   position: absolute;
   width: 30px;
   height: 30px;
@@ -100,24 +186,24 @@ body .normalGameDiv .table .tableLine .tableBox .putFx {
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;
 }
-body .normalGameDiv .table .tableLine .tableBox .wall {
+html body .normalGameDiv .table .tableLine .tableBox .wall {
   background-color: dimgray;
   border-radius: 20%;
   outline: none;
 }
-body .normalGameDiv .table .tableLine .tableBox .wall:hover {
+html body .normalGameDiv .table .tableLine .tableBox .wall:hover {
   cursor: not-allowed;
 }
-body .normalGameDiv .table .tableLine .tableBox .fireStone {
+html body .normalGameDiv .table .tableLine .tableBox .fireStone {
   background-color: #ea4040;
   border: solid 3px gold;
   border-radius: 20%;
   outline: none;
 }
-body .normalGameDiv .table .tableLine .tableBox .fireStone:hover {
+html body .normalGameDiv .table .tableLine .tableBox .fireStone:hover {
   cursor: not-allowed;
 }
-body .normalGameDiv .table .tableLine .tableBox .fireStoneMoveFx {
+html body .normalGameDiv .table .tableLine .tableBox .fireStoneMoveFx {
   background-color: #ea4040;
   border: solid 3px gold;
   border-radius: 20%;
@@ -125,10 +211,10 @@ body .normalGameDiv .table .tableLine .tableBox .fireStoneMoveFx {
   width: 30px;
   height: 30px;
 }
-body .normalGameDiv .table .tableLine .tableBox .playerBlock {
+html body .normalGameDiv .table .tableLine .tableBox .playerBlock {
   border-radius: 50%;
 }
-body .normalGameDiv .table .tableLine .tableBox .playerBlock:hover {
+html body .normalGameDiv .table .tableLine .tableBox .playerBlock:hover {
   cursor: auto;
 }
-/*# sourceMappingURL=index.css.map */
\ No newline at end of file
+/*# sourceMappingURL=./index.css.map */
\ No newline at end of file
diff --git a/css/index.css.map b/css/index.css.map
index 44e461c..92ae4e0 100644
--- a/css/index.css.map
+++ b/css/index.css.map
@@ -1 +1 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;EACA,sBAAA;;AAGF;EACE,kBAAA;;AADF,IAGE;EACE,kBAAA;;AAJJ,IAOE,eACE;EACE,2BAAA;EACA,6BAAA;;AAVN,IAOE,eAME;EAEE,WAAA;EACA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EAKA,yBAAA;;AAxBN,IAOE,eAME,OAaE;EACE,YAAA;EACA,gBAAA;;AA5BR,IAOE,eAME,OAaE,WAKE;EACE,qBAAA;EACA,6BAAA;;AAjCV,IAOE,eAME,OAaE,WAUE;EACE,kBAAA;EACA,UAAA;EACA,WAAW,UAAX;;AAvCV,IAOE,eAME,OAaE,WAiBE;EAEE,WAAA;EACA,YAAA;EACA,cAAA;EACA,WAAA;EACA,oBAAA;EACA,kBAAA;;AAlDV,IAOE,eAME,OAaE,WAiBE,UAUE;EACE,WAAA;EACA,YAAA;EACA,UAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,8BAAA;EACA,kBAAA;EACA,0BAAA;;AAEA,IAzDV,eAME,OAaE,WAiBE,UAUE,OAWG;EACC,eAAA;EACA,oBAAA;;AAlEd,IAOE,eAME,OAaE,WAiBE,UA2BE;EACE,cAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EAEA,wBAAA;;AAEA,IA1EV,eAME,OAaE,WAiBE,UA2BE,IAWG;EACC,QAAQ,SAAR;;AAlFd,IAOE,eAME,OAaE,WAiBE,UA4CE;EAEE,kBAAA;EACA,kBAAA;EACA,SAAA;EACA,QAAA;EAEA,UAAA;EACA,oCAAA;;AA/FZ,IAOE,eAME,OAaE,WAiBE,UAyDE;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,OAAA;EACA,MAAA;EACA,kBAAA;EAEA,YAAA;EACA,yBAAA;EACA,6BAAA;;AA9GZ,IAOE,eAME,OAaE,WAiBE,UAuEE;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,OAAA;EACA,MAAA;EACA,kBAAA;EAEA,qBAAA;EACA,6BAAA;EACA,sCAAA;;AA5HZ,IAOE,eAME,OAaE,WAiBE,UA0FE;EACE,yBAAA;EACA,kBAAA;EACA,aAAA;;AAEA,IAnIV,eAME,OAaE,WAiBE,UA0FE,MAKG;EACC,mBAAA;;AA3Id,IAOE,eAME,OAaE,WAiBE,UAoGE;EACE,yBAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;;AAMA,IAlJV,eAME,OAaE,WAiBE,UAoGE,WAUG;EACC,mBAAA;;AA1Jd,IAOE,eAME,OAaE,WAiBE,UAmHE;EACE,yBAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EAOA,WAAA;EACA,YAAA;;AA1KZ,IAOE,eAME,OAaE,WAiBE,UAkIE;EACE,kBAAA;;AAEA,IAzKV,eAME,OAaE,WAiBE,UAkIE,aAGG;EACC,YAAA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;EACA,sBAAA;;AAGF;AACA,KAAK;AACL;EACE,sBAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;EACA,oBAAA;;AAEA,MAAC;AAAD,KARG,eAQF;AAAD,MAAC;AACD,MAAC;AAAD,KATG,eASF;AAAD,MAAC;EACC,sBAAA;EACA,WAAA;EACA,wBAAA;;AAGF,MAAC;AAAD,KAfG,eAeF;AAAD,MAAC;EACC,aAAA;;AAIJ,KAAK;AACL;EACE,cAAA;EACA,kBAAA;;AAGF,KAAK;EACH,sBAAA;EACA,kBAAA;EACA,WAAA;EACA,oBAAA;;AAEA,KANG,cAMF;EACC,UAAA;;AAGF,KAVG,cAUF;EACC,YAAA;;AAGF,KAdG,cAcF;AACD,KAfG,cAeF;EACC,yBAAA;;AAIJ;EACE,YAAA;;AADF,IAGE;EACE,kBAAA;EACA,kBAAkB,yCAAlB;EACA,YAAA;;AANJ,IAGE,KAKE;EACE,kBAAA;EACA,eAAA;;AAEA,IATJ,KAKE,GAIG;AACD,IAVJ,KAKE,GAKG;EACC,SAAS,OAAT;EACA,eAAA;EACA,oBAAA;;AAhBR,IAGE,KAiBE;AApBJ,IAGE,KAkBE;EACE,kBAAA;EACA,kBAAA;;AAvBN,IAGE,KAiBE,aAKE,KAAI,MAAM;AAzBhB,IAGE,KAkBE,eAIE,KAAI,MAAM;EACR,SAAS,KAAT;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,iBAAA;;AA9BR,IAGE,KA+BE;EACE,sBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,wBAAA;;AAvCN,IAGE,KA+BE,cAOE;EACE,cAAA;;AA1CR,IAGE,KA+BE,cAWE,KAAI;EACF,oBAAA;;AA9CR,IAGE,KA+BE,cAeE;EACE,cAAA;;AAlDR,IAGE,KAmDE,eACE;EACE,2BAAA;EACA,6BAAA;;AAzDR,IAGE,KAmDE,eAME;EAEE,WAAA;EACA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EAKA,yBAAA;;AAvER,IAGE,KAmDE,eAME,OAaE;EACE,YAAA;EACA,gBAAA;;AA3EV,IAGE,KAmDE,eAME,OAaE,WAKE;EACE,qBAAA;EACA,6BAAA;;AAhFZ,IAGE,KAmDE,eAME,OAaE,WAUE;EACE,kBAAA;EACA,UAAA;EACA,WAAW,UAAX;;AAtFZ,IAGE,KAmDE,eAME,OAaE,WAiBE;EAEE,WAAA;EACA,YAAA;EACA,cAAA;EACA,WAAA;EACA,oBAAA;EACA,kBAAA;;AAjGZ,IAGE,KAmDE,eAME,OAaE,WAiBE,UAUE;EACE,WAAA;EACA,YAAA;EACA,UAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,8BAAA;EACA,kBAAA;EACA,0BAAA;;AAEA,IA5GZ,KAmDE,eAME,OAaE,WAiBE,UAUE,OAWG;EACC,eAAA;EACA,oBAAA;;AAjHhB,IAGE,KAmDE,eAME,OAaE,WAiBE,UA2BE;EACE,cAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EAEA,wBAAA;;AAEA,IA7HZ,KAmDE,eAME,OAaE,WAiBE,UA2BE,IAWG;EACC,QAAQ,SAAR;;AAjIhB,IAGE,KAmDE,eAME,OAaE,WAiBE,UA4CE;EAEE,kBAAA;EACA,kBAAA;EACA,SAAA;EACA,QAAA;EAEA,UAAA;EACA,oCAAA;;AA9Id,IAGE,KAmDE,eAME,OAaE,WAiBE,UAyDE;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,OAAA;EACA,MAAA;EACA,kBAAA;EAEA,YAAA;EACA,yBAAA;EACA,6BAAA;;AA7Jd,IAGE,KAmDE,eAME,OAaE,WAiBE,UAuEE;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,OAAA;EACA,MAAA;EACA,kBAAA;EAEA,qBAAA;EACA,6BAAA;EACA,sCAAA;;AA3Kd,IAGE,KAmDE,eAME,OAaE,WAiBE,UAoFE;EACE,yBAAA;EACA,kBAAA;EACA,aAAA;;AAEA,IAhLZ,KAmDE,eAME,OAaE,WAiBE,UAoFE,MAKG;EACC,mBAAA;;AApLhB,IAGE,KAmDE,eAME,OAaE,WAiBE,UA8FE;EACE,yBAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;;AAMA,IA/LZ,KAmDE,eAME,OAaE,WAiBE,UA8FE,WAUG;EACC,mBAAA;;AAnMhB,IAGE,KAmDE,eAME,OAaE,WAiBE,UA6GE;EACE,yBAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EAOA,WAAA;EACA,YAAA;;AAnNd,IAGE,KAmDE,eAME,OAaE,WAiBE,UA4HE;EACE,kBAAA;;AAEA,IAtNZ,KAmDE,eAME,OAaE,WAiBE,UA4HE,aAGG;EACC,YAAA"}
\ No newline at end of file
diff --git a/css/index.less b/css/index.less
index ccb876c..9acbe3a 100644
--- a/css/index.less
+++ b/css/index.less
@@ -4,191 +4,280 @@
   box-sizing: border-box;
 }
 
-body {
-  overflow-x: hidden;
+button,
+input[type="number"],
+select {
+  border: #ccc solid 2px;
+  padding: 0.7em 1em;
+  border-radius: 10px;
+  margin: 2px;
+  transition: all 0.3s;
+
+  &:hover,
+  &:focus {
+    background-color: #333;
+    color: #fff;
+    box-shadow: #aaa 0 0 5px;
+  }
 
-  h1 {
-    text-align: center;
+  &::-webkit-inner-spin-button {
+    display: none;
   }
+}
 
-  .normalGameDiv {
-    .boardShakeFx {
-      animation-name: littleShake;
-      animation-fill-mode: forwards;
-    }
+input[type="number"],
+select {
+  padding: 0.5em;
+  border-radius: 7px;
+}
 
-    .table {
-      //height: 100px;
-      width: 100%;
-      outline: solid 1px;
-      padding-top: 100px;
-      padding-left: 30px;
-      padding-bottom: 100px;
-
-      @L: 30px;
-      //@M: 5px;
-      @M: 0;
-      background-color: #d3a969;
-
-      .tableLine {
-        height: @L;
-        margin-bottom: @M;
-        //outline: solid 1px;
-
-        .tableBoxShakeFx {
-          animation-name: small;
-          animation-fill-mode: forwards;
-        }
+input[type="color"] {
+  border: #ccc solid 2px;
+  border-radius: 3px;
+  margin: 2px;
+  transition: all 0.3s;
 
-        .tableBoxHover {
-          outline-width: 3px;
-          z-index: 4;
-          transform: scale(1.5);
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
 
-        }
+  &::-webkit-color-swatch {
+    border: none;
+  }
 
-        .tableBox {
-          //outline: solid 1px red;
-          width: @L;
-          height: @L;
-          margin-left: @M;
-          float: left;
-          transition: all 0.2s;
-          position: relative;
-
-
-          .block {
-            width: 100%;
-            height: 100%;
-            z-index: 3;
-            position: absolute;
-            left: 0;
-            top: 0;
-            transition: outline-color 0.5s;
-            outline-width: 3px;
-            outline-color: transparent;
+  &:hover,
+  &:focus {
+    box-shadow: #aaa 0 0 10px;
+  }
+}
 
-            &:hover {
-              cursor: pointer;
-              outline-style: solid;
-            }
-          }
+html {
+  height: 100%;
 
-          .bz {
-            display: block;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 0;
-            //background-image: url("../img/normal.png");
-            background-size: contain;
-
-            &:hover {
-              filter: blur(5px);
-            }
-          }
+  body {
+    overflow-x: hidden;
+    background-image: linear-gradient(to top right, #ddd, #ccc);
+    height: 100%;
 
+    h1 {
+      text-align: center;
+      margin: 0.5em 0;
 
-          .littleStone {
-            // 小碎石子
-            position: absolute;
-            border-radius: 50%;
-            left: 50%;
-            top: 50%;
-            //outline: solid 3px red;
-            z-index: 1;
-            transition-timing-function: ease-out;
-          }
+      &::before,
+      &::after {
+        content: "/////";
+        margin: 0 0.5em;
+        color: rebeccapurple;
+      }
+    }
+
+    .shapeSelect,
+    .normalGameDiv {
+      text-align: center;
+      position: relative;
+
+      .wip:hover::before {
+        content: "制作中";
+        position: absolute;
+        top: 4em;
+        color: #000;
+        font-weight: bold;
+      }
+    }
 
+    .normalOption {
+      border: #ccc solid 2px;
+      border-radius: 10px;
+      padding: 1em;
+      margin: 1em;
+      box-shadow: #aaa 0 0 2px;
 
-          // 死亡特效
-          .shrink {
-            position: absolute;
-            width: @L;
-            height: @L;
-            left: 0;
-            top: 0;
-            border-radius: 50%;
+      label {
+        display: block;
+      }
+
+      :not(label) {
+        margin-bottom: 0.5em;
+      }
+
+      button {
+        display: block;
+      }
+    }
+
+    .normalGameDiv {
+      .boardShakeFx {
+        animation-name: littleShake;
+        animation-fill-mode: forwards;
+      }
+
+      .table {
+        //height: 100px;
+        width: 100%;
+        outline: solid 1px;
+        padding-top: 100px;
+        padding-left: 30px;
+        padding-bottom: 100px;
+
+        @L: 30px;
+        //@M: 5px;
+        @M: 0;
+        background-color: #d3a969;
+
+        .tableLine {
+          height: @L;
+          margin-bottom: @M;
+          //outline: solid 1px;
 
-            z-index: 100;
-            animation-name: blockBoom;
+          .tableBoxShakeFx {
+            animation-name: small;
             animation-fill-mode: forwards;
+          }
+
+          .tableBoxHover {
+            outline-width: 3px;
+            z-index: 4;
+            transform: scale(1.5);
 
           }
 
-          .putFx {
-            position: absolute;
+          .tableBox {
+            //outline: solid 1px red;
             width: @L;
             height: @L;
-            left: 0;
-            top: 0;
-            border-radius: 50%;
+            margin-left: @M;
+            float: left;
+            transition: all 0.2s;
+            position: relative;
+
+
+            .block {
+              width: 100%;
+              height: 100%;
+              z-index: 3;
+              position: absolute;
+              left: 0;
+              top: 0;
+              transition: outline-color 0.5s;
+              outline-width: 3px;
+              outline-color: transparent;
+
+              &:hover {
+                cursor: pointer;
+                outline-style: solid;
+              }
+            }
 
-            animation-name: putFx;
-            animation-fill-mode: forwards;
-            animation-timing-function: ease-in-out;
-          }
+            .bz {
+              display: block;
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 100%;
+              height: 100%;
+              z-index: 0;
+              //background-image: url("../img/normal.png");
+              background-size: contain;
+
+              &:hover {
+                filter: blur(5px);
+              }
+            }
 
 
-          .air {
-            //background-color: #323232;
-          }
+            .littleStone {
+              // 小碎石子
+              position: absolute;
+              border-radius: 50%;
+              left: 50%;
+              top: 50%;
+              //outline: solid 3px red;
+              z-index: 1;
+              transition-timing-function: ease-out;
+            }
 
 
-          .wall {
-            background-color: dimgray;
-            border-radius: 20%;
-            outline: none;
+            // 死亡特效
+            .shrink {
+              position: absolute;
+              width: @L;
+              height: @L;
+              left: 0;
+              top: 0;
+              border-radius: 50%;
+
+              z-index: 100;
+              animation-name: blockBoom;
+              animation-fill-mode: forwards;
 
-            &:hover {
-              cursor: not-allowed;
             }
-          }
 
-          .fireStone {
-            background-color: #ea4040;
-            border: solid 3px gold;
-            border-radius: 20%;
-            outline: none;
-            //animation-name: fireFlame;
-            //animation-duration: 5s;
-            //animation-iteration-count: infinite;
-            //animation-timing-function: linear;
-
-            &:hover {
-              cursor: not-allowed;
+            .putFx {
+              position: absolute;
+              width: @L;
+              height: @L;
+              left: 0;
+              top: 0;
+              border-radius: 50%;
+
+              animation-name: putFx;
+              animation-fill-mode: forwards;
+              animation-timing-function: ease-in-out;
             }
-          }
 
-          .fireStoneMoveFx {
-            background-color: #ea4040;
-            border: solid 3px gold;
-            border-radius: 20%;
-            outline: none;
-            //position: absolute;
-            //left: 0;
-            //top: 0;
-            //border-radius: 50%;
-            //background-color: #ea4040;
-            //filter: blur(5px);
-            width: @L;
-            height: @L;
-          }
+            .wall {
+              background-color: dimgray;
+              border-radius: 20%;
+              outline: none;
 
-          .playerBlock {
-            border-radius: 50%;
+              &:hover {
+                cursor: not-allowed;
+              }
+            }
+
+            .fireStone {
+              background-color: #ea4040;
+              border: solid 3px gold;
+              border-radius: 20%;
+              outline: none;
+              //animation-name: fireFlame;
+              //animation-duration: 5s;
+              //animation-iteration-count: infinite;
+              //animation-timing-function: linear;
+
+              &:hover {
+                cursor: not-allowed;
+              }
+            }
 
-            &:hover {
-              cursor: auto;
+            .fireStoneMoveFx {
+              background-color: #ea4040;
+              border: solid 3px gold;
+              border-radius: 20%;
+              outline: none;
+              //position: absolute;
+              //left: 0;
+              //top: 0;
+              //border-radius: 50%;
+              //background-color: #ea4040;
+              //filter: blur(5px);
+              width: @L;
+              height: @L;
+            }
+
+            .playerBlock {
+              border-radius: 50%;
+
+              &:hover {
+                cursor: auto;
+              }
             }
           }
-        }
 
 
-      }
+        }
 
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index cc07310..e2b6204 100644
--- a/index.html
+++ b/index.html
@@ -1,66 +1,62 @@
 <!doctype html>
 <html lang="zh-CN">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>test</title>
+    <title>围棋大变种</title>
     <link rel="stylesheet" href="css/animation.css">
     <link rel="stylesheet" href="css/index.css">
-    <style class="normalStyle">
-        .air:hover {
-
-        }
-    </style>
+    <style class="normalStyle"></style>
 </head>
+
 <body>
-<h1>围棋大变种</h1>
-<button class="normal">正方形网络</button>
-<div class="normalOption" style="display: none">
-    棋盘宽度：
-    <label>
+    <h1>围棋大变种</h1>
+    
+    <div class="shapeSelect">
+        <button class="normal">正方形网络</button>
+        <button class="triangle wip">三角形</button>
+        <button class="hexagon wip">六边形</button>
+    </div>
+
+    <div class="normalOption" style="display: none">
+        <label>棋盘宽度：</label>
         <input type="number" class="width" value="19">
-    </label>
-    棋盘高度：
-    <label>
+        <label>棋盘高度：</label>
         <input type="number" class="height" value="19">
-    </label>
-    玩家数量：
-    <input type="number" value="2" min="2" class="playerNumber">
-    玩家颜色设定：
-    <span class="userColorList">
-        <input type="color" value="#000000">
-        <input type="color" value="#ffffff">
-    </span>
-    地形模式：
-    <select name="hinderMode" class="hinderMode">
-        <option value="传统">传统</option>
-        <option value="随机碎石地">随机碎石地</option>
-        <option value="随机火石地">随机火石地</option>
-        <option value="中凸高原">中凸高原</option>
-        <option value="中框">中框</option>
-        <option value="角落消失">角落消失</option>
-        <option value="九宫格分裂世界">九宫格分裂世界</option>
-        <option value="九宫格迷宫世界">九宫格迷宫世界</option>
-        <option value="田字格分裂世界">田字格分裂世界</option>
-        <option value="X分裂世界">X分裂世界</option>
-    </select>
-    碎石出现概率
-    <input type="range" max="100" min="0" value="0" class="stoneRate">
-    火石出现概率
-    <input type="range" max="100" min="0" value="0" class="firestoneRate">
-    <button class="play">开始游戏</button>
-</div>
-
-<div class="normalGameDiv" style="display: none">
-    <button class="autoPlayRandom100">自动随机100步</button>
-    <button class="autoPlayRandom10">自动随机10步</button>
-    <div class="table"></div>
-</div>
-
-<button class="triangle">三角形</button>
-<button class="triangle">六边形</button>
+        <label>玩家数量：</label>
+        <input type="number" value="2" min="2" class="playerNumber">
+        <label>玩家颜色设定：</label>
+        <span class="userColorList">
+            <input type="color" value="#000000">
+            <input type="color" value="#ffffff">
+        </span>
+        <label>地形模式：</label>
+        <select name="hinderMode" class="hinderMode">
+            <option value="传统">传统</option>
+            <option value="随机碎石地">随机碎石地</option>
+            <option value="随机火石地">随机火石地</option>
+            <option value="中凸高原">中凸高原</option>
+            <option value="中框">中框</option>
+            <option value="角落消失">角落消失</option>
+            <option value="九宫格分裂世界">九宫格分裂世界</option>
+            <option value="九宫格迷宫世界">九宫格迷宫世界</option>
+            <option value="田字格分裂世界">田字格分裂世界</option>
+            <option value="X分裂世界">X分裂世界</option>
+        </select>
+        <label>碎石出现概率</label>
+        <input type="range" max="100" min="0" value="0" class="stoneRate">
+        <label>火石出现概率</label>
+        <input type="range" max="100" min="0" value="0" class="firestoneRate">
+        <button class="play">开始游戏 / 重新开始</button>
+    </div>
+    <div class="normalGameDiv" style="display: none">
+        <button class="autoPlayRandom100">自动随机100步</button>
+        <button class="autoPlayRandom10">自动随机10步</button>
+        <div class="table"></div>
+    </div>
 </body>
 
 
@@ -69,4 +65,5 @@ <h1>围棋大变种</h1>
 <script src="js/gameObject.js"></script>
 <script src="js/normalGame.js"></script>
 <script src="js/index.js"></script>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 73002e6..9a2d879 100644
--- a/js/index.js
+++ b/js/index.js
@@ -26,8 +26,6 @@ window.onload = function () {
                 cInput.value = randomColor();
                 colorList.appendChild(cInput);
             }
-        } else {
-
         }
     }
     // 选择正方模式按钮
@@ -43,4 +41,10 @@ window.onload = function () {
         let game = new NormalGame(gameDiv, normalOption);
         normalOption.style.display = "none";
     }
+
+
+    // 解决取色器关闭后输入法无法使用
+    $("input[type='color']").onblur = function () {
+        window.open().close();
+    }
 }