[update] : フォームによる設定変更を可能にした

diff --git a/sanmoku/index.html b/sanmoku/index.html
index 443d109..44be627 100644 (file)
--- a/sanmoku/index.html
+++ b/sanmoku/index.html
@@ -44,22 +44,22 @@
 \r
         <!-- 設定 -->\r
         <h2>設定</h2>\r
-        <p>まだ使えないよ</p>\r
         <form>\r
             <table>\r
                 <tr>\r
                     <td>縦方向のマス目の数</td>\r
-                    <td><input type="number"></td>\r
+                    <td><input type="number" id="inputtablex"></td>\r
                 </tr>\r
                 <tr>\r
                     <td>横方向のマス目の数</td>\r
-                    <td><input type="number"></td>\r
+                    <td><input type="number" id="inputtabley"></td>\r
                 </tr>\r
                 <tr>\r
                     <td>プレーヤーの人数</td>\r
-                    <td><input type="number"></td>\r
+                    <td><input type="number" id="inputplayernumber"></td>\r
                 </tr>\r
             </table>\r
+            <input type="button" value="適用" id="apply">\r
         </form>\r
         \r
     </main>\r

diff --git a/sanmoku/script/define.js b/sanmoku/script/define.js
index 2214c26..46ca6e0 100644 (file)
--- a/sanmoku/script/define.js
+++ b/sanmoku/script/define.js
@@ -1,8 +1,8 @@
 // 横のマス目の数\r
-const TableXNumber = 3;\r
+let TableXNumber = 3;\r
 \r
 // 縦のマス目の数\r
-const TableYNumber = 3;\r
+let TableYNumber = 3;\r
 \r
 // マス目の初期値\r
 const InitialStr = "　";\r
@@ -11,7 +11,7 @@ const InitialStr = "　";
 const PlayerMarks = ["◯", "✗" , "△"];\r
 \r
 // プレイヤーの人数（現在 2のみ指定可能）\r
-const PlayerNumer = 2;\r
+let PlayerNumer = 2;\r
 \r
 // 現在のプレイヤー\r
 let CurrentPlayer = 0;\r
@@ -37,6 +37,18 @@ const CurrentConfig = document.getElementById("currentconfig")
 // リセットボタン\r
 const ResetButton = document.getElementById("reset");\r
 \r
+// 適用ボタン\r
+const ApplyButton = document.getElementById("apply");\r
+\r
+// 設定フォーム: 縦のマス目\r
+const InputTableX = document.getElementById("inputtablex")\r
+\r
+// 設定フォーム: 横のマス目\r
+const InputTableY = document.getElementById("inputtabley")\r
+\r
+// 設定フォーム: プレーヤーの人数\r
+const InputPlayerNumber = document.getElementById("inputplayernumber")\r
+\r
 // チェック済みのボックスの数\r
 let CheckedBox = 0;\r
 \r

diff --git a/sanmoku/script/init.js b/sanmoku/script/init.js
index c893bbf..2ea092d 100644 (file)
--- a/sanmoku/script/init.js
+++ b/sanmoku/script/init.js
@@ -1,5 +1,6 @@
 // 初期化をする関数\r
 const InitilizeTable = () => {\r
+    MainTable.innerHTML = null;\r
     for (y = 0 ; y < TableYNumber; y++){ // 行を作成するループ\r
         \r
         // 行を作成する\r

diff --git a/sanmoku/script/judgement.js b/sanmoku/script/judgement.js
index 7bbc1df..06f513d 100644 (file)
--- a/sanmoku/script/judgement.js
+++ b/sanmoku/script/judgement.js
@@ -43,13 +43,13 @@ const Judgement = () => {
         }
 
         // X座標の確認
-        if (CountArrayValue(CheckedByCurrentPlayerX, TableXNumber)){
+        if (CountArrayValue(CheckedByCurrentPlayerX, TableYNumber)){
             // チェックした値がX座標で一致した→すなわち縦方向がそろった
             WinExit("縦方向");
         }
 
         // Y軸方向の確認
-        if (CountArrayValue(CheckedByCurrentPlayerY, TableYNumber)){
+        if (CountArrayValue(CheckedByCurrentPlayerY, TableXNumber)){
             // チェックした値がY座標で一致した→すなわち横方向がそろった
             WinExit("横方向");
         }

diff --git a/sanmoku/script/main.js b/sanmoku/script/main.js
index eaef91b..242839a 100644 (file)
--- a/sanmoku/script/main.js
+++ b/sanmoku/script/main.js
@@ -75,3 +75,34 @@ window.addEventListener("load", UpdateCurrentConfig)
 ResetButton.addEventListener("click", ()=>{
     location.reload();
 })
+
+// 初回起動時に設定のボックス内に初期設定を入れておく
+window.addEventListener("load", ()=>{
+    InputTableX.value = TableXNumber;
+    InputTableY.value = TableYNumber;
+    InputPlayerNumber.value = PlayerNumer;
+})
+
+// 適用ボタンが押された時の処理
+ApplyButton.addEventListener("click", ()=>{
+
+    // それぞれの状態を初期化
+    PlayerNumer   = InputPlayerNumber.value;
+    GameEnded     = false;
+    CheckedBox    = 0;
+    CurrentPlayer = 0;
+    Msg.innerText = null;
+
+    // 入力された値が正常か確認
+    if(InputTableX.value >= 3 && InputTableY.value >= 3){
+        TableXNumber = InputTableX.value;
+        TableYNumber = InputTableY.value;
+    }else{
+        Msg.innerText = "3以上の整数を指定してください"
+        return;
+    }
+    
+    // ゲーム全体の初期化と表示されている設定を更新
+    InitilizeTable();
+    UpdateCurrentConfig();
+})