OSDN Git Service

[update] : 判定関数を実装したかった
authorhayao <hayao@fascode.net>
Tue, 3 Aug 2021 15:26:10 +0000 (00:26 +0900)
committerhayao <hayao@fascode.net>
Tue, 3 Aug 2021 15:26:10 +0000 (00:26 +0900)
sanmoku/index.html
sanmoku/script/init.js
sanmoku/script/main.js
sanmoku/style/common.css

index 104fe98..cdc1273 100644 (file)
     </footer>\r
 \r
     <!-- ゲームの動きなどを書いたファイルを読み込む -->\r
-    <script src="./script/define.js"></script>\r
-    <script src="./script/init.js"></script>\r
-    <script src="./script/main.js"></script>\r
+    <script src="script/define.js"></script>\r
+    <script src="script/init.js"></script>\r
+    <script src="script/main.js"></script>\r
 \r
 </body>\r
-</html>
\ No newline at end of file
+</html>\r
\ No newline at end of file
index b7a25f5..f5a5525 100644 (file)
@@ -1,15 +1,25 @@
 // 初期化をする関数\r
 const InitilizeTable = () => {\r
-    for (a = 0 ; a < TableYNumber; a++){ // 行を作成するループ\r
+    for (y = 0 ; y < TableYNumber; y++){ // 行を作成するループ\r
         \r
         // 行を作成する\r
         let tr = document.createElement("tr")\r
 \r
         // 先程作成した行の中で横並びのボックスを作る\r
-        for(b = 0; b < TableXNumber; b++){\r
-            let td = document.createElement("td"); // ボックスを作成\r
+        for(x = 0; x < TableXNumber; x++){\r
+            // ボックスを作成\r
+            let td = document.createElement("td"); \r
+\r
+            // ボックスの設定\r
             td.innerText = InitialStr; // ボックスの文字を初期化する(空白に設定する)\r
             td.dataset.clicked = false; // ボックスの状態を「クリックされていない」にする\r
+\r
+            // 座標を設定\r
+            td.dataset.x = x;\r
+            td.dataset.y = y;\r
+\r
+\r
+            // ボックスを表示\r
             td.addEventListener("click", ClickedBox) //ボックスがクリックされた時「ClickedBox」関数を実行する\r
             tr.appendChild(td) //行に先程作成したボックスを挿入する\r
         }\r
index 53de7f1..1611402 100644 (file)
@@ -1,4 +1,5 @@
 // ボックスがクリックされたときの処理
+// init.jsでボタンがクリックされた場合にClickedBox関数を実行するように指示している
 const ClickedBox = (e) => {
     const MySelf = e.path[0] // クリックされたボックスを取得する
 
@@ -8,10 +9,14 @@ const ClickedBox = (e) => {
             // クリックされたボックスの設定
             MySelf.innerText = PlayerMarks[CurrentPlayer]; //クリックされたボックスのテキストをクリックしたプレーヤーの記号にする
             MySelf.dataset.clicked = "true"; //ボックスの状態を「クリック済み」にする
+            MySelf.dataset.player  = CurrentPlayer; // チェックしたプレーヤーのIDをボックスに書き込む
 
             // プレイヤーを変更する
             ChangePlayer();
 
+            // 勝利判定を行う
+            Judgement();
+
             // すべてチェックされた場合の処理
             CheckedBox++;
             if (CheckedBox == TableXNumber * TableYNumber){  // もしチェックされた数とマス目の数が等しいならば
@@ -38,3 +43,45 @@ const ChangePlayer = () => {
 window.addEventListener("load", ()=>{
     console.log(CurrentPlayer + "でゲームをスタートします")
 })
+
+// 配列の重複した値が指定回数以上ならTrueを返す
+// 使い方: CountArrayValue(配列, 回数)
+// 参考: https://teratail.com/questions/98451
+const CountArrayValue = (array, count) => {
+    // あとで実装する
+}
+
+// 勝敗の判定 ジャッジメントですの!
+const Judgement = () => {
+    // プレーヤーごとに判定
+    // プレーヤーIDでループし、変数pに今チェック対象のプレーヤーIDが代入される
+    for (p=0; p < PlayerNumer; p++){
+        // チェックしたプレーヤーのIDが書き込まれたボックスの一覧を取得
+        const elements = Array.from(MainTable.querySelectorAll("[data-player]"));
+
+        // 今チェック中のプレーヤーのチェックしたボックスの座標
+        CheckedByCurrentPlayerX = [];
+        CheckedByCurrentPlayerY = [];
+
+        // 上で取得したボックスの一覧1つ1つで確認処理を行う
+        elements.forEach((e) => {
+
+            if (e.dataset.player == p){ // もしいま確認しているボックスが今確認しているプレーヤーIDと一致したら
+
+                // チェックされているボックスの座標を座標リストに追加する
+                CheckedByCurrentPlayerX.push(e.dataset.x);
+                CheckedByCurrentPlayerY.push(e.dataset.y);
+            }
+        });
+
+        // X軸方向の確認
+        //if ()
+        console.log(CountArrayValue(CheckedByCurrentPlayerX, TableXNumber))
+
+        // ログ表示
+        //console.log(p + "のチェック済みのX座標")
+        //console.log(CheckedByCurrentPlayerX)
+        //console.log(p + "のチェック済みのY座標")
+        //console.log(CheckedByCurrentPlayerY)
+    }
+}
index 4499aa3..3932954 100644 (file)
@@ -25,4 +25,6 @@ td{
     \r
     font-size: 20px; /* ボックス内の文字の大きさをドット20個に設定 */\r
     line-height: 20px; /* ボックスの1行の高さをドット20個に設定 */\r
+\r
+    text-align: center; /* 文字を左右中央に配置 */\r
 }
\ No newline at end of file