LoginSignup
KLB686
@KLB686

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

【javascript】将棋の駒の動きを再現したい【jquery】

Q&AClosed
JavaScriptjQueryゲーム初心者将棋

解決したいこと

・以下①②を、駒の数や動きが増えても追加しやすいコードに修正したい

①駒の動きを盤面に表示する
②移動可能な範囲をクリックするとその場所に移動できる

発生している問題

・上記①②を実装する為のコードがとても長くなってしまった。

特定の駒が特定の場所にいる時に移動可能な範囲を1マスづつ設定する関数を作成。
動きを再現することはできたが、より効率的な実装が必要と考えた。
しかし、具体的な方針を整理することができなかった。

背景

HTML/CSS/JSにて5×5将棋を作成したいと考える
練習として駒の少ないどうぶつ将棋を作成するも【発生している問題】が発生
最終目標の5×5将棋の作成する上で、駒が増えてもメンテナンスの手間をより少なくできるコードに①②を修正したい

自分で試したこと

実装にあたり、下記URLを参照しました。
https://www.aura-office.co.jp/blog/algorithm_shogi/

駒の動きをそれぞれ関数で設定するところは参考にできましたが
より効率的に駒の動きを設定する具体的な方針が分かりませんでした。

「このサイトが参考になる」「この考え方が足りていない」等のアドバイス、お力添えをいただきたく質問に至りました。

調べる力不足で申し訳ございません。
当方Javascript勉強中の初学者ですが、質問が分かりずらい点等あれば厳しくご指摘いただければと思います。

※※※補足※※※

質問最下部にソースコード全文を追記致しました。
あわせて、ご確認いただければ幸いです。

該当するソースコード

HTML

        <table class="box_cover">
          <!--1-->
          <tr class="row1">
            <!--1-1-->
            <td class="r1 l1 td" id="1">
              <div id="e_giraffe" class="item player2_item giraffe">
                <img src="img/キリン.png" />
              </div>
            </td>
            <!--1-2-->
            <td class="r1 l2 td" id="2">
              <div id="e_lion" class="item player2_item lion">
                <img src="img/ライオン.png" />
              </div>
            </td>
            <!--1-3-->
            <td class="r1 l3 td" id="3">
              <div id="e_elephant" class="item player2_item elephant">
                <img src="img/象.png" />
              </div>
            </td>
          </tr>
          <!--2-->
          <tr class="row2">
            <!--2-1-->
            <td class="r2 l1 td" id="4"></td>
            <!--2-2-->
            <td class="r2 l2 td" id="5">
              <div id="e_chick" class="player2_item chick item">
                <img src="img/ひよこ.png" />
              </div>
            </td>
            <!--2-3-->
            <td class="r2 l3 td" id="6"></td>
          </tr>
          <!--3-->
          <tr class="row3">
            <!--3-1-->
            <td class="r3 l1 td" id="7"></td>
            <!--3-2-->
            <td class="r3 l2 td" id="8">
              <div id="m_chick" class="chick item player1_item">
                <img src="img/ひよこ.png" />
              </div>
            </td>
            <!--3-3-->
            <td class="r3 l3 td" id="9"></td>
          </tr>
          <!--4-->
          <tr class="row4">
            <!--4-1-->
            <td class="r4 l1 td" id="10">
              <div id="m_elephant" class="item elephant player1_item">
                <img src="img/象.png" />
              </div>
            </td>
            <!--4-2-->
            <td class="r4 l2 td" id="11">
              <div id="m_lion" class="item lion player1_item">
                <img src="img/ライオン.png" />
              </div>
            </td>
            <!--4-3-->
            <td class="r4 l3 td" id="12">
              <div id="m_giraffe" class="item giraffe player1_item">
                <img src="img/キリン.png" />
              </div>
            </td>
          </tr>
        </table>

Javascript 【発生している問題】>　該当箇所①

            function lionMove(player_item, clickPoint) {
                activeRemove(clickItem);
                // 1/1
                if (clickPoint.hasClass('l1') && clickPoint.hasClass('r1')) {
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                } else if (clickPoint.hasClass('l1') && clickPoint.hasClass('r4')) {
                    // 4/1
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 2}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                } else if (clickPoint.hasClass('l1')) {
                    // 2/1 or 3/1
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 2}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                }

                // 1/3
                if (clickPoint.hasClass('l3') && clickPoint.hasClass('r1')) {
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 2}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                } else if (clickPoint.hasClass('l3') && clickPoint.hasClass('r4')) {
                    // 4/3
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                } else if (clickPoint.hasClass('l3')) {
                    // 2/3 or 3/3
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 2}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                }

                // 1/2
                if (clickPoint.hasClass('l2') && clickPoint.hasClass('r1')) {
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 2}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                } else if (clickPoint.hasClass('l2') && clickPoint.hasClass('r4')) {
                    // 4/2
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 2}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                } else if (clickPoint.hasClass('l2')) {
                    // 2/2 or 3/2
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 2}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 2}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                }
            }

Javascript 【発生している問題】>　該当箇所②

            //持ち駒を使用した場合
            if ($('.fClick').hasClass('captured')) {
                clickPoint.append($('.fClick'));
                if (moveObserver % 2) {
                    SaveHtml();
                    moveObserver++;
                    turnCounter += 1;
                    $('.now_turn').text(`${turnCounter + 1}ターン目です。`);
                    turn = 2;
                    $('.now_player').text(`player${turn}のターンです。`);
                } else {
                    SaveHtml();
                    moveObserver++;
                    turnCounter += 1;
                    $('.now_turn').text(`${turnCounter + 1}ターン目です。`);
                    turn = 1;
                    $('.now_player').text(`player${turn}のターンです。`);
                }
                $('.fClick').addClass('item');
                $('.fClick').removeClass('get_item');
                $('.fClick').removeClass('captured');
                $('.fClick').removeClass('select');
                $('.fClick').removeClass('fClick');
                clickPoint.removeClass('active');

            } else {
                //通常駒を動かした場合　＝　2回目のタッチ時
                clickPoint.append($('.fClick'));
                if (moveObserver % 2) {
                    SaveHtml();
                    moveObserver++;
                    turnCounter += 1;
                    $('.now_turn').text(`${turnCounter + 1}ターン目です。`);
                    turn = 2;
                    $('.now_player').text(`player${turn}のターンです。`);
                } else {
                    SaveHtml();
                    moveObserver++;
                    turnCounter += 1;
                    $('.now_turn').text(`${turnCounter + 1}ターン目です。`);
                    turn = 1;
                    $('.now_player').text(`player${turn}のターンです。`);
                }
                $('.fClick').removeClass('select');
                $('.fClick').removeClass('fClick');
                clickPoint.removeClass('active');

CSS

.none {
  display: none;
}

.active {
  background-color: #60eeff;
}

.select {
  border: 5px solid blue;
}

ソースコード全文

HTML

  <div class="all_cover">
    <div id="main_cover" class="main_cover">
      <div class="player2_space captured_space"></div>
  
        <!--ここから　盤面-->
        <table class="box_cover">
          <!--1-->
          <tr class="row1">
            <!--1-1-->
            <td class="r1 l1 td" id="1">
              <div id="e_giraffe" class="item player2_item giraffe">
                <img src="img/キリン.png" />
              </div>
            </td>
            <!--1-2-->
            <td class="r1 l2 td" id="2">
              <div id="e_lion" class="item player2_item lion">
                <img src="img/ライオン.png" />
              </div>
            </td>
            <!--1-3-->
            <td class="r1 l3 td" id="3">
              <div id="e_elephant" class="item player2_item elephant">
                <img src="img/象.png" />
              </div>
            </td>
          </tr>
          <!--2-->
          <tr class="row2">
            <!--2-1-->
            <td class="r2 l1 td" id="4"></td>
            <!--2-2-->
            <td class="r2 l2 td" id="5">
              <div id="e_chick" class="player2_item chick item">
                <img src="img/ひよこ.png" />
              </div>
            </td>
            <!--2-3-->
            <td class="r2 l3 td" id="6"></td>
          </tr>
          <!--3-->
          <tr class="row3">
            <!--3-1-->
            <td class="r3 l1 td" id="7"></td>
            <!--3-2-->
            <td class="r3 l2 td" id="8">
              <div id="m_chick" class="chick item player1_item">
                <img src="img/ひよこ.png" />
              </div>
            </td>
            <!--3-3-->
            <td class="r3 l3 td" id="9"></td>
          </tr>
          <!--4-->
          <tr class="row4">
            <!--4-1-->
            <td class="r4 l1 td" id="10">
              <div id="m_elephant" class="item elephant player1_item">
                <img src="img/象.png" />
              </div>
            </td>
            <!--4-2-->
            <td class="r4 l2 td" id="11">
              <div id="m_lion" class="item lion player1_item">
                <img src="img/ライオン.png" />
              </div>
            </td>
            <!--4-3-->
            <td class="r4 l3 td" id="12">
              <div id="m_giraffe" class="item giraffe player1_item">
                <img src="img/キリン.png" />
              </div>
            </td>
          </tr>
        </table>


      <div class="left_case">
        <div class="turn_case">
          <p class="now_player"></p>
          <p class="now_turn">1ターン目です。</p>
        </div>
        <div class="player1_space captured_space"></div> 
      </div>
               <!--ここまで　盤面-->
    </div>
  </div>

  <!-- 勝敗決着後 -->
  <div class="winer_case overlay">
    <div class="winer_window">

        <div class="setting overlay">
          <div class="turn_choice">
            <p>あなたが先手です</p>
            <p class="announce"><span class="announce_span"></span>ゲームを行います。よろしいですか？</p>
            <div class="ok_btn">ok</div>
          </div>
        </div>

      </div>
    </div>
  </div>

  </body>

javascript

jQuery(function ($) {
    var turnCounter = 0;
    var moveObserver;
    var turn = 1;
    var saveHtml = [];

    //okボタン押下で開始
    $(".ok_btn").on('click', function () {
        if (moveObserver === undefined) {
            moveObserver = 1;
        }
        $('.overlay').addClass('none');
        $('.setting').addClass('none');
        $('.now_player').text(`player${turn}のターンです。`);
    });
    //=================================================//

    function SaveHtml() {
        saveHtml.push($('.main_cover').html());
    }

    function activeRemove(clickItem) {
        if ($('body').find('.fClick').length > 0) {
            //既に一回タッチしている場合　かつ　そこに移動可能な駒がある場合
            var old = $('body').find('.fClick');
            old.removeClass('select');
            old.removeClass('fClick');
            $('body').find('.active').removeClass('active');
            clickItem.addClass('fClick');
            clickItem.addClass('select');
        } else {
            //一回目のタッチの場合　は移動可能な個所を表示
            clickItem.addClass('fClick');
            clickItem.addClass('select');
        }
    }

    //駒をクリックしたとき
    $('.td').on('click', function () {
        var clickItem = $(this).find('.item');

        if (clickItem.hasClass('item')) {
            //attr("id")　でクリックした要素の　id属性を取得する
            var clickPointId = Number($(this).attr('id'));

            //象の動ける箇所を表示
            function elephantMove(player_item, clickPoint) {
                activeRemove(clickItem);
                // 左の列にいる時
                if (clickPoint.hasClass('l1') && clickPoint.hasClass('r1')) {
                    // 一段目　= 斜め前のみ　動ける
                    $(`#${clickPointId + 4}`).addClass('active');
                } else if (clickPoint.hasClass('l1') && clickPoint.hasClass('r4')) {
                    // 四段目　= 斜め後のみ　動ける
                    $(`#${clickPointId - 2}`).addClass('active');
                } else if (clickPoint.hasClass('l1')) {
                    // 二.三段目　= 斜め前と後に　動ける
                    $(`#${clickPointId - 2}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                }

                // 真ん中の列にいる時
                if (clickPoint.hasClass('l2') && clickPoint.hasClass('r1')) {
                    // 一段目　= 斜め前のみ　動ける
                    $(`#${clickPointId + 2}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                } else if (clickPoint.hasClass('l2') && clickPoint.hasClass('r4')) {
                    // 四段目　= 斜め後のみ　動ける
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId - 2}`).addClass('active');
                } else if (clickPoint.hasClass('l2')) {
                    // 二.三段目　= 斜め前と後に　動ける
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId - 2}`).addClass('active');
                    $(`#${clickPointId + 2}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                }

                // 右の列にいる時
                if (clickPoint.hasClass('l3') && clickPoint.hasClass('r1')) {
                    // 一段目　= 斜め前のみ　動ける
                    $(`#${clickPointId + 2}`).addClass('active');
                } else if (clickPoint.hasClass('l3') && clickPoint.hasClass('r4')) {
                    // 四段目　= 斜め後のみ　動ける
                    $(`#${clickPointId - 4}`).addClass('active');
                } else if (clickPoint.hasClass('l3')) {
                    // 二.三段目　= 斜め前と後に　動ける
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId + 2}`).addClass('active');
                }

            }

            //キリンの動ける箇所を表示
            function giraffeMove(player_item, clickPoint) {
                activeRemove(clickItem);

                if (clickPoint.hasClass('l1') && clickPoint.hasClass('r1')) {
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                } else if (clickPoint.hasClass('l1') && clickPoint.hasClass('r4')) {
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                } else if (clickPoint.hasClass('l1')) {
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                }

                if (clickPoint.hasClass('l3') && clickPoint.hasClass('r1')) {
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                } else if (clickPoint.hasClass('l3') && clickPoint.hasClass('r4')) {
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                } else if (clickPoint.hasClass('l3')) {
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                }

                if (clickPoint.hasClass('l2') && clickPoint.hasClass('r1')) {
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                } else if (clickPoint.hasClass('l2') && clickPoint.hasClass('r4')) {
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                } else if (clickPoint.hasClass('l2')) {
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                }

            }

            //左上からを「1/1」・右下を「4/3」とする
            function lionMove(player_item, clickPoint) {
                activeRemove(clickItem);
                // 1/1
                if (clickPoint.hasClass('l1') && clickPoint.hasClass('r1')) {
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                } else if (clickPoint.hasClass('l1') && clickPoint.hasClass('r4')) {
                    // 4/1
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 2}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                } else if (clickPoint.hasClass('l1')) {
                    // 2/1 or 3/1
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 2}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                }

                // 1/3
                if (clickPoint.hasClass('l3') && clickPoint.hasClass('r1')) {
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 2}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                } else if (clickPoint.hasClass('l3') && clickPoint.hasClass('r4')) {
                    // 4/3
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                } else if (clickPoint.hasClass('l3')) {
                    // 2/3 or 3/3
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 2}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                }

                // 1/2
                if (clickPoint.hasClass('l2') && clickPoint.hasClass('r1')) {
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 2}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                } else if (clickPoint.hasClass('l2') && clickPoint.hasClass('r4')) {
                    // 4/2
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 2}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                } else if (clickPoint.hasClass('l2')) {
                    // 2/2 or 3/2
                    $(`#${clickPointId - 4}`).addClass('active');
                    $(`#${clickPointId - 3}`).addClass('active');
                    $(`#${clickPointId - 2}`).addClass('active');
                    $(`#${clickPointId - 1}`).addClass('active');
                    $(`#${clickPointId + 1}`).addClass('active');
                    $(`#${clickPointId + 2}`).addClass('active');
                    $(`#${clickPointId + 3}`).addClass('active');
                    $(`#${clickPointId + 4}`).addClass('active');
                }
            }
            //======= 駒の動き（関数) end=======//

            //======= player1駒 =======//
            if (clickItem.hasClass('player1_item')) {
                if (turn === 1) {
                    //======= player1ひよこ駒 =======//
                    if (clickItem.hasClass('chick')) {
                        activeRemove(clickItem);
                        var removePoints = $('.td').find('.player1_item');
                        $(`#${clickPointId - 3}`).addClass('active');
                        for (i = 0; i < removePoints.length; i++) {
                            var removePoint = $(removePoints[i]).parent('.td');
                            removePoint.removeClass('active');
                        }
                    }

                    //======= player1ニワトリ駒 =======//
                    if (clickItem.hasClass('chicken')) {
                        activeRemove(clickItem);
                        var removePoints = $('.td').find('.player1_item');
                        if ($(this).hasClass('l1') && $(this).hasClass('r1')) {
                            $(`#${clickPointId + 1}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                        } else if ($(this).hasClass('l1') && $(this).hasClass('r4')) {
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId - 2}`).addClass('active');
                            $(`#${clickPointId + 1}`).addClass('active');
                        } else if ($(this).hasClass('l1')) {
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId - 2}`).addClass('active');
                            $(`#${clickPointId + 1}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                        }

                        if ($(this).hasClass('l3') && $(this).hasClass('r1')) {
                            $(`#${clickPointId - 1}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                        } else if ($(this).hasClass('l3') && $(this).hasClass('r4')) {
                            $(`#${clickPointId - 4}`).addClass('active');
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId - 1}`).addClass('active');
                        } else if ($(this).hasClass('l3')) {
                            $(`#${clickPointId - 4}`).addClass('active');
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId - 1}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                        }

                        if ($(this).hasClass('l2') && $(this).hasClass('r1')) {
                            $(`#${clickPointId - 1}`).addClass('active');
                            $(`#${clickPointId + 1}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                        } else if ($(this).hasClass('l2') && $(this).hasClass('r4')) {
                            $(`#${clickPointId - 4}`).addClass('active');
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId - 2}`).addClass('active');
                            $(`#${clickPointId - 1}`).addClass('active');
                            $(`#${clickPointId + 1}`).addClass('active');
                        } else if ($(this).hasClass('l2')) {
                            $(`#${clickPointId - 4}`).addClass('active');
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId - 2}`).addClass('active');
                            $(`#${clickPointId - 1}`).addClass('active');
                            $(`#${clickPointId + 1}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                        }
                    }

                    //======= player1キリン駒 =======//
                    if (clickItem.hasClass('giraffe')) {
                        giraffeMove('.player1_item', $(this));
                    }

                    //======= player1ゾウ駒 =======//
                    if (clickItem.hasClass('elephant')) {
                        elephantMove('.player1_item', $(this));
                    }

                    //======= player1ライオン駒 =======//
                    if (clickItem.hasClass('lion')) {
                        lionMove('.player1_item', $(this));
                    }
                }
            }
            //player1駒 end

            //======= player2駒 =======//
            if (clickItem.hasClass('player2_item')) {
                if (turn === 2) {
                    //======= player1ひよこ駒 =======//
                    if (clickItem.hasClass('chick')) {
                        activeRemove(clickItem);
                        var removePoints = $('.td').find('.player2_item');
                        $(`#${clickPointId + 3}`).addClass('active');
                        for (i = 0; i < removePoints.length; i++) {
                            var removePoint = $(removePoints[i]).parent('.td');
                            removePoint.removeClass('active');
                        }
                    }

                    //======= player2ニワトリ駒 =======//
                    if (clickItem.hasClass('chicken')) {
                        activeRemove(clickItem);
                        var removePoints = $('.td').find('.player2_item');
                        if ($(this).hasClass('l1') && $(this).hasClass('r1')) {
                            $(`#${clickPointId + 1}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                            $(`#${clickPointId + 4}`).addClass('active');
                        } else if ($(this).hasClass('l1') && $(this).hasClass('r4')) {
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId + 1}`).addClass('active');
                        } else if ($(this).hasClass('l1')) {
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId + 1}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                            $(`#${clickPointId + 4}`).addClass('active');
                        }

                        if ($(this).hasClass('l3') && $(this).hasClass('r1')) {
                            $(`#${clickPointId - 1}`).addClass('active');
                            $(`#${clickPointId + 2}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                        } else if ($(this).hasClass('l3') && $(this).hasClass('r4')) {
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId - 1}`).addClass('active');
                        } else if ($(this).hasClass('l3')) {
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId - 1}`).addClass('active');
                            $(`#${clickPointId + 2}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                        }

                        if ($(this).hasClass('l2') && $(this).hasClass('r1')) {
                            $(`#${clickPointId - 1}`).addClass('active');
                            $(`#${clickPointId + 1}`).addClass('active');
                            $(`#${clickPointId + 2}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                            $(`#${clickPointId + 4}`).addClass('active');
                        } else if ($(this).hasClass('l2') && $(this).hasClass('r4')) {
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId - 1}`).addClass('active');
                            $(`#${clickPointId + 1}`).addClass('active');
                        } else if ($(this).hasClass('l2')) {
                            $(`#${clickPointId - 3}`).addClass('active');
                            $(`#${clickPointId - 1}`).addClass('active');
                            $(`#${clickPointId + 1}`).addClass('active');
                            $(`#${clickPointId + 2}`).addClass('active');
                            $(`#${clickPointId + 3}`).addClass('active');
                            $(`#${clickPointId + 4}`).addClass('active');
                        }
                    }

                    //======= player2キリン駒 =======//
                    if (clickItem.hasClass('giraffe')) {
                        giraffeMove('.player2_item', $(this));
                    }

                    //======= player2ゾウ駒 =======//
                    if (clickItem.hasClass('elephant')) {
                        elephantMove('.player2_item', $(this));
                    }

                    //======= player2ライオン駒 =======//
                    if (clickItem.hasClass('lion')) {
                        lionMove('.player2_item', $(this));
                    }
                }
            }
            //player2駒 end

        }
        //クリックイベント hasClass('.item') end

        //=================================================//
        //クリックして移動先を表示させた後の処理
        //=================================================//
        if ($(this).hasClass('active')) {//if1

            function captureRule(space, fPlayer, sPlayer) {
                space.append(clickItem);
                clickItem.removeClass('item');
                clickItem.addClass('get_item');
                clickItem.removeClass(fPlayer);
                clickItem.addClass(sPlayer);
            }
            //ゲーム終了判定（ライオンが獲られた時）
            function lionObserve() {
                if ($('.get_item').hasClass('lion')) {
                    //player1 win
                    if ($('.get_item').hasClass('player1_item')) {
                        $('#winer').text('player1の勝ち');
                    }

                    //player2 win
                    if ($('.get_item').hasClass('player2_item')) {
                        $('#winer').text('player2の勝ち');
                    }
                    $('.winer_case').removeClass('none');
                    $('.winer_window').removeClass('none');
                }
            }

            function chickenCheck() {
                if (clickItem.hasClass('chicken')) {
                    clickItem.removeClass('chicken');
                    clickItem.addClass('chick');
                    $('.chick').children('p').text('ひよこ');
                    clickItem.children('img').attr('src', './img/./どうぶつ将棋/img/ひよこ.png');
                }
            }
            //======= player1がplayer2の駒をとった時 =======//
            if (clickItem.hasClass('player2_item') && $('.fClick').hasClass('player1_item')) {//if2
                captureRule($('.player1_space'), 'player2_item', 'player1_item');
                lionObserve();
                chickenCheck();
            }//if2 end

            //======= player2がplayer1の駒をとった時 =======//
            if (clickItem.hasClass('player1_item') && $('.fClick').hasClass('player2_item')) {//if3
                captureRule($('.player2_space'), 'player1_item', 'player2_item');
                lionObserve();
                chickenCheck();

            }//if3 end

            var clickPoint = $(this);
            //持ち駒を使用した場合
            if ($('.fClick').hasClass('captured')) {
                clickPoint.append($('.fClick'));
                if (moveObserver % 2) {
                    SaveHtml();
                    moveObserver++;
                    turnCounter += 1;
                    $('.now_turn').text(`${turnCounter + 1}ターン目です。`);
                    turn = 2;
                    $('.now_player').text(`player${turn}のターンです。`);
                } else {
                    SaveHtml();
                    moveObserver++;
                    turnCounter += 1;
                    $('.now_turn').text(`${turnCounter + 1}ターン目です。`);
                    turn = 1;
                    $('.now_player').text(`player${turn}のターンです。`);
                }
                $('.fClick').addClass('item');
                $('.fClick').removeClass('get_item');
                $('.fClick').removeClass('captured');
                $('.fClick').removeClass('select');
                $('.fClick').removeClass('fClick');
                clickPoint.removeClass('active');

            } else {
                //通常駒を動かした場合　＝　2回目のタッチ時
                clickPoint.append($('.fClick'));
                if (moveObserver % 2) {
                    SaveHtml();
                    moveObserver++;
                    turnCounter += 1;
                    $('.now_turn').text(`${turnCounter + 1}ターン目です。`);
                    turn = 2;
                    $('.now_player').text(`player${turn}のターンです。`);
                } else {
                    SaveHtml();
                    moveObserver++;
                    turnCounter += 1;
                    $('.now_turn').text(`${turnCounter + 1}ターン目です。`);
                    turn = 1;
                    $('.now_player').text(`player${turn}のターンです。`);
                }
                $('.fClick').removeClass('select');
                $('.fClick').removeClass('fClick');
                clickPoint.removeClass('active');

                //------- ゲーム終了判定（ライオンが最終ラインに到達 -------//
                var moveItem = clickPoint.find('.item');
                if (moveItem.hasClass('lion')) {
                    var tdId = clickPoint.attr('id');
                    if (moveItem.hasClass('player1_item')) {
                        if (tdId === '1' || tdId === '2' || tdId === '3') {
                            $('#winer').text('player1の勝ち');
                            $('.winer_case').removeClass('none');
                            $('.winer_window').removeClass('none');
                        }
                    }

                    if (moveItem.hasClass('player2_item')) {
                        if (tdId === '10' || tdId === '11' || tdId === '12') {
                            $('#winer').text('player2の勝ち');
                            $('.winer_case').removeClass('none');
                            $('.winer_window').removeClass('none');
                        }
                    }
                }

                //------- ひよこが最終ラインに到達したらニワトリへ -------//
                if (moveItem.hasClass('chick')) {
                    var tdId = clickPoint.attr('id');
                    if (moveItem.hasClass('player1_item')) {
                        if (tdId === '1' || tdId === '2' || tdId === '3') {
                            moveItem.children('img').attr('src', 'img/ニワトリ.png');
                            $('.chick').children('p').text('ニワトリ');
                            moveItem.removeClass('chick');
                            moveItem.addClass('chicken');
                        }
                    }

                    if (moveItem.hasClass('player2_item')) {
                        if (tdId === '10' || tdId === '11' || tdId === '12') {
                            moveItem.children('img').attr('src', 'img/ニワトリ.png');
                            $('.chick').children('p').text('ニワトリ');
                            moveItem.removeClass('chick');
                            moveItem.addClass('chicken');
                        }
                    }
                }
                //------------------------------➶//
            }
        }
        //if1end

        if (!clickItem.hasClass('fClick')) {
            //コマがあるところ以外をクリックした時activeとfClickを削除する。
            $('.td').removeClass('active');
            $('.select').removeClass('select');
            $('.fClick').removeClass('fClick');
        }

    });
    //クリックイベント　$('.td') end


    //=================================================//
    //持ち駒スペースから出す時
    //=================================================//

    function capturedMethod(e) {
        var capturedItem = $(e.target).parent('.get_item');
        if (capturedItem.hasClass('get_item')) {
            activeRemove(capturedItem);
            capturedItem.addClass('fClick');
            capturedItem.addClass('select');
            capturedItem.addClass('captured');
            $('.td').addClass('active');

            // 持ち駒を持った時に相手の駒がいる箇所に上から打てないようにする
            var removePoints = $('.td').find('.item');
            for (i = 0; i < removePoints.length; i++) {
                var removePoint = $(removePoints[i]).parent('.td');
                removePoint.removeClass('active');
            }
        }

    }

    $('.captured_space').on('click', function (e) {
        var capturedSpace = $(e.currentTarget);
        if (turn === 1 && capturedSpace.hasClass('player1_space')) {
            capturedMethod(e);
        }
        if (turn === 2 && capturedSpace.hasClass('player2_space')) {
            capturedMethod(e);
        }
    });

});

CSS

body p {
  margin: 0;
}

.all_cover {
  display: flex;
}

.main_cover {
  display: flex;
  justify-content: center;
}

.player2_space,
.player1_space {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 300px;
  height: 400px;
  border: solid 1px #ccc;
  margin: 0 30px;
  padding: 20px 20px 20px 40px;
}

.player2_space .item,
.player1_space .item {
  width: 150px;
  height: 150px;
}

.left_case {
  align-self: flex-end;
}

.turn_case {
  text-align: center;
  margin-left: 10px;
  margin-bottom: 20px;
  font-weight: bold;
}

.player2_space {
  margin-top: 25px;
}

.box_cover {
  display: flex;
  flex-wrap: wrap;
  border-collapse: collapse;
  table-layout: fixed;
}

.box_cover .td {
  border: 1px solid #707070;
  width: 150px;
  height: 150px;
  padding: 2px;
  position: relative;
}

.box_cover span {
  color: red;
  font-size: 16px;
}

.row_point {
  padding-left: 10px;
}

.get_item {
  width: 85px;
  height: 85px;
  margin-right: 10px;
}

.item {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.item img,
.get_item img {
  width: 100%;
  height: 100%;
}

.player2_item img {
  transform: rotate(180deg);
}

.giraffe {
  background-color: #f80202;
}

.lion {
  background-color: #ff7c01;
}

.elephant {
  background-color: #02f87d;
}

.chick {
  background-color: #ff00ff;
}

.chicken {
  background-color: #ff0461;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.winer_window {
  background-color: white;
  background-image: url("../img/邵ｺ�ｽｩ?�ｽｿ�ｽｽ?邵ｺ�ｽｶ邵ｺ�ｽ､?�ｽｿ�ｽｽ??�ｽｿ�ｽｽ?/img/陷肴剌闌�.jpg");
  background-size: cover;
  width: 50%;
  padding: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#winer {
  margin-top: 45px;
  font-weight: bold;
  color: white;
  font-size: 20px;
}

.btn_case {
  display: flex;
  width: 50%;
  margin: 50px auto;
}

.btn {
  background-color: red;
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-weight: bold;
  text-align: center;
}

.btn:hover {
  cursor: pointer;
}

.setting_btn {
  background-color: red;
  width: 100px;
  height: 100px;
  cursor: pointer;
  margin-left: auto;
}

.reset_btn {
  background-color: red;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.reset_btn p,
.setting_btn p {
  line-height: 100px;
  margin: 0;
  font-weight: bold;
}

.setting {
  background-color: #fff;
  width: 100%;
  height: 100%;
  padding: 30px;
  font-size: 18px;
  font-weight: bold;
}

.setting_p2 {
  font-size: 14px;
  color: red;
}

.choice_area {
  margin-top: 10px;
  margin-bottom: 20px;
}

.item,
.get_item,
.turn_btn,
.ok_btn {
  cursor: pointer;
}

.turn_btn {
  font-weight: normal;
  margin-bottom: 5px;
}

.turn_btn:hover {
  color: blue;
}

.announce_span {
  color: red;
}

.ok_btn {
  background-color: red;
  width: 100px;
  margin-left: auto;
  margin-right: 30px;
  margin-top: 25px;
  padding: 5px;
}

.outer_btn_case {
  display: flex;
  margin-left: 50px;
  margin-top: 10px;
  margin-bottom: 50px;
}

.outer_btn {
  position: static;
}

.back_btn {
  margin-left: 50px;
}

.overlay_rule {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.rule {
  overflow: scroll;
}

.close_btn {
  position: fixed;
  top: 30px;
  right: 30px;
}

.close_icon {
  font-size: 30px;
  color: red;
}

.close_icon:hover {
  cursor: pointer;
}

.rule_inner {
  padding-left: 20px;
  padding-top: 20px;
}

.rule_description p {
  margin-bottom: 10px;
}

.rule_description p:nth-child(2) {
  margin-bottom: 0px;
}

.rule_description p:nth-child(3) {
  font-size: 14px;
}

.rule_try,
.rule_catch {
  color: red;
  font-weight: bold;
}

.rule_title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

.rule_move {
  margin-top: 50px;
}

.rule_move_title {
  font-size: 25px;
  font-weight: bold;
}

.rule_item {
  margin-top: 20px;
}

.rule_move_item {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
/*============ javascript騾包ｽｨ ============*/
.none {
  display: none;
}

.active {
  background-color: #60eeff;
}

.select {
  border: 5px solid blue;
}
0

4Answer

shiracamus
@shiracamus

似たような処理は、異なる値を変数にしたり異なる処理をコールバック関数呼出しにして、それらを引数に取る共通関数を定義するといいですよ。

0Like

Comments

  1. @KLB686

    Questioner
    @shiracamus 様
    回答ありがとうございます！

    似たような処理、「1つ前に進む」など共通しやすい処理を考えてみます！
    また、コールバック関数等も意識して修正してみようと思います！
mouseofmicky
@mouseofmicky

動物の移動範囲をリストにまとめてみました。これを編集する事で動物の追加や改変を行えるでしょう。

全体が大きいので差分だけ貼ります。動作コードはjsfiddleを見て下さい
https://jsfiddle.net/ukfoo/wnjtLoqa/

差分を表示 
jQuery(function ($) {
     var turnCounter = 0;
     var moveObserver;
     var turn = 1;
     var saveHtml = [];
 
+    const AnimalTerritories = {
+      chick: [
+        {x: 0, y: -1}
+      ],
+      chicken: [
+        {x: -1, y: -1},
+        {x: 0, y: -1},
+        {x: 1, y: -1},
+
+        {x: -1, y: 0},
+        {x: 1, y: 0},
+
+        {x: 0, y: 1},
+      ],
+      giraffe: [
+        {x: 0, y: -1},
+        {x: -1, y: 0},
+        {x: 1, y: 0},
+        {x: 0, y: 1},
+      ],
+      elephant: [
+        {x: -1, y: -1},
+        {x: 1, y: -1},
+        {x: -1, y: 1},
+        {x: 1, y: 1},
+      ],
+      lion: [
+        {x: -1, y: -1},
+        {x: 0, y: -1},
+        {x: 1, y: -1},
+
+        {x: -1, y: 0},
+        {x: 1, y: 0},
+
+        {x: -1, y: 1},
+        {x: 0, y: 1},
+        {x: 1, y: 1},
+      ]
+    };
+
     //駒をクリックしたとき
     $('.td').on('click', function () {
         var clickItem = $(this).find('.item');
 
         if (clickItem.hasClass('item')) {
             //attr("id")　でクリックした要素の　id属性を取得する
             var clickPointId = Number($(this).attr('id'));
 
-            //象の動ける箇所を表示
-            function elephantMove(player_item, clickPoint) {
-                activeRemove(clickItem);
-                // 左の列にいる時
-                if (clickPoint.hasClass('l1') && clickPoint.hasClass('r1')) {
-                    // 一段目　= 斜め前のみ　動ける
-                    $(`#${clickPointId + 4}`).addClass('active');
-                } else if (clickPoint.hasClass('l1') && clickPoint.hasClass('r4')) {
-                    // 四段目　= 斜め後のみ　動ける
-                    $(`#${clickPointId - 2}`).addClass('active');
-                } else if (clickPoint.hasClass('l1')) {
-                    // 二.三段目　= 斜め前と後に　動ける
-                    $(`#${clickPointId - 2}`).addClass('active');
-                    $(`#${clickPointId + 4}`).addClass('active');
-                }
-
-                // 真ん中の列にいる時
-                if (clickPoint.hasClass('l2') && clickPoint.hasClass('r1')) {
-                    // 一段目　= 斜め前のみ　動ける
-                    $(`#${clickPointId + 2}`).addClass('active');
-                    $(`#${clickPointId + 4}`).addClass('active');
-                } else if (clickPoint.hasClass('l2') && clickPoint.hasClass('r4')) {
-                    // 四段目　= 斜め後のみ　動ける
-                    $(`#${clickPointId - 4}`).addClass('active');
-                    $(`#${clickPointId - 2}`).addClass('active');
-                } else if (clickPoint.hasClass('l2')) {
-                    // 二.三段目　= 斜め前と後に　動ける
-                    $(`#${clickPointId - 4}`).addClass('active');
-                    $(`#${clickPointId - 2}`).addClass('active');
-                    $(`#${clickPointId + 2}`).addClass('active');
-                    $(`#${clickPointId + 4}`).addClass('active');
-                }
-
-                // 右の列にいる時
-                if (clickPoint.hasClass('l3') && clickPoint.hasClass('r1')) {
-                    // 一段目　= 斜め前のみ　動ける
-                    $(`#${clickPointId + 2}`).addClass('active');
-                } else if (clickPoint.hasClass('l3') && clickPoint.hasClass('r4')) {
-                    // 四段目　= 斜め後のみ　動ける
-                    $(`#${clickPointId - 4}`).addClass('active');
-                } else if (clickPoint.hasClass('l3')) {
-                    // 二.三段目　= 斜め前と後に　動ける
-                    $(`#${clickPointId - 4}`).addClass('active');
-                    $(`#${clickPointId + 2}`).addClass('active');
-                }
-
-            }
-
-            //キリンの動ける箇所を表示
-            function giraffeMove(player_item, clickPoint) {
-                activeRemove(clickItem);
-
-                if (clickPoint.hasClass('l1') && clickPoint.hasClass('r1')) {
-                    $(`#${clickPointId + 1}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                } else if (clickPoint.hasClass('l1') && clickPoint.hasClass('r4')) {
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId + 1}`).addClass('active');
-                } else if (clickPoint.hasClass('l1')) {
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId + 1}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                }
-
-                if (clickPoint.hasClass('l3') && clickPoint.hasClass('r1')) {
-                    $(`#${clickPointId - 1}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                } else if (clickPoint.hasClass('l3') && clickPoint.hasClass('r4')) {
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId - 1}`).addClass('active');
-                } else if (clickPoint.hasClass('l3')) {
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId - 1}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                }
-
-                if (clickPoint.hasClass('l2') && clickPoint.hasClass('r1')) {
-                    $(`#${clickPointId - 1}`).addClass('active');
-                    $(`#${clickPointId + 1}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                } else if (clickPoint.hasClass('l2') && clickPoint.hasClass('r4')) {
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId - 1}`).addClass('active');
-                    $(`#${clickPointId + 1}`).addClass('active');
-                } else if (clickPoint.hasClass('l2')) {
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId - 1}`).addClass('active');
-                    $(`#${clickPointId + 1}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                }
-
-            }
-
-            //左上からを「1/1」・右下を「4/3」とする
-            function lionMove(player_item, clickPoint) {
-                activeRemove(clickItem);
-                // 1/1
-                if (clickPoint.hasClass('l1') && clickPoint.hasClass('r1')) {
-                    $(`#${clickPointId + 1}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                    $(`#${clickPointId + 4}`).addClass('active');
-                } else if (clickPoint.hasClass('l1') && clickPoint.hasClass('r4')) {
-                    // 4/1
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId - 2}`).addClass('active');
-                    $(`#${clickPointId + 1}`).addClass('active');
-                } else if (clickPoint.hasClass('l1')) {
-                    // 2/1 or 3/1
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId - 2}`).addClass('active');
-                    $(`#${clickPointId + 1}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                    $(`#${clickPointId + 4}`).addClass('active');
-                }
-
-                // 1/3
-                if (clickPoint.hasClass('l3') && clickPoint.hasClass('r1')) {
-                    $(`#${clickPointId - 1}`).addClass('active');
-                    $(`#${clickPointId + 2}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                } else if (clickPoint.hasClass('l3') && clickPoint.hasClass('r4')) {
-                    // 4/3
-                    $(`#${clickPointId - 4}`).addClass('active');
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId - 1}`).addClass('active');
-                } else if (clickPoint.hasClass('l3')) {
-                    // 2/3 or 3/3
-                    $(`#${clickPointId - 4}`).addClass('active');
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId - 1}`).addClass('active');
-                    $(`#${clickPointId + 2}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                }
-
-                // 1/2
-                if (clickPoint.hasClass('l2') && clickPoint.hasClass('r1')) {
-                    $(`#${clickPointId - 1}`).addClass('active');
-                    $(`#${clickPointId + 1}`).addClass('active');
-                    $(`#${clickPointId + 2}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                    $(`#${clickPointId + 4}`).addClass('active');
-                } else if (clickPoint.hasClass('l2') && clickPoint.hasClass('r4')) {
-                    // 4/2
-                    $(`#${clickPointId - 4}`).addClass('active');
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId - 2}`).addClass('active');
-                    $(`#${clickPointId - 1}`).addClass('active');
-                    $(`#${clickPointId + 1}`).addClass('active');
-                } else if (clickPoint.hasClass('l2')) {
-                    // 2/2 or 3/2
-                    $(`#${clickPointId - 4}`).addClass('active');
-                    $(`#${clickPointId - 3}`).addClass('active');
-                    $(`#${clickPointId - 2}`).addClass('active');
-                    $(`#${clickPointId - 1}`).addClass('active');
-                    $(`#${clickPointId + 1}`).addClass('active');
-                    $(`#${clickPointId + 2}`).addClass('active');
-                    $(`#${clickPointId + 3}`).addClass('active');
-                    $(`#${clickPointId + 4}`).addClass('active');
-                }
-            }
             //======= 駒の動き（関数) end=======//
 
-            //======= player1駒 =======//
-            if (clickItem.hasClass('player1_item')) {
-                if (turn === 1) {
-                    //======= player1ひよこ駒 =======//
-                    if (clickItem.hasClass('chick')) {
-                        activeRemove(clickItem);
-                        var removePoints = $('.td').find('.player1_item');
-                        $(`#${clickPointId - 3}`).addClass('active');
-                        for (i = 0; i < removePoints.length; i++) {
-                            var removePoint = $(removePoints[i]).parent('.td');
-                            removePoint.removeClass('active');
-                        }
-                    }
-
-                    //======= player1ニワトリ駒 =======//
-                    if (clickItem.hasClass('chicken')) {
-                        activeRemove(clickItem);
-                        var removePoints = $('.td').find('.player1_item');
-                        if ($(this).hasClass('l1') && $(this).hasClass('r1')) {
-                            $(`#${clickPointId + 1}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                        } else if ($(this).hasClass('l1') && $(this).hasClass('r4')) {
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId - 2}`).addClass('active');
-                            $(`#${clickPointId + 1}`).addClass('active');
-                        } else if ($(this).hasClass('l1')) {
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId - 2}`).addClass('active');
-                            $(`#${clickPointId + 1}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                        }
-
-                        if ($(this).hasClass('l3') && $(this).hasClass('r1')) {
-                            $(`#${clickPointId - 1}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                        } else if ($(this).hasClass('l3') && $(this).hasClass('r4')) {
-                            $(`#${clickPointId - 4}`).addClass('active');
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId - 1}`).addClass('active');
-                        } else if ($(this).hasClass('l3')) {
-                            $(`#${clickPointId - 4}`).addClass('active');
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId - 1}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                        }
-
-                        if ($(this).hasClass('l2') && $(this).hasClass('r1')) {
-                            $(`#${clickPointId - 1}`).addClass('active');
-                            $(`#${clickPointId + 1}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                        } else if ($(this).hasClass('l2') && $(this).hasClass('r4')) {
-                            $(`#${clickPointId - 4}`).addClass('active');
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId - 2}`).addClass('active');
-                            $(`#${clickPointId - 1}`).addClass('active');
-                            $(`#${clickPointId + 1}`).addClass('active');
-                        } else if ($(this).hasClass('l2')) {
-                            $(`#${clickPointId - 4}`).addClass('active');
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId - 2}`).addClass('active');
-                            $(`#${clickPointId - 1}`).addClass('active');
-                            $(`#${clickPointId + 1}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                        }
-                    }
-
-                    //======= player1キリン駒 =======//
-                    if (clickItem.hasClass('giraffe')) {
-                        giraffeMove('.player1_item', $(this));
-                    }
-
-                    //======= player1ゾウ駒 =======//
-                    if (clickItem.hasClass('elephant')) {
-                        elephantMove('.player1_item', $(this));
-                    }
-
-                    //======= player1ライオン駒 =======//
-                    if (clickItem.hasClass('lion')) {
-                        lionMove('.player1_item', $(this));
-                    }
-                }
-            }
-            //player1駒 end
-
-            //======= player2駒 =======//
-            if (clickItem.hasClass('player2_item')) {
-                if (turn === 2) {
-                    //======= player1ひよこ駒 =======//
-                    if (clickItem.hasClass('chick')) {
-                        activeRemove(clickItem);
-                        var removePoints = $('.td').find('.player2_item');
-                        $(`#${clickPointId + 3}`).addClass('active');
-                        for (i = 0; i < removePoints.length; i++) {
-                            var removePoint = $(removePoints[i]).parent('.td');
-                            removePoint.removeClass('active');
-                        }
-                    }
-
-                    //======= player2ニワトリ駒 =======//
-                    if (clickItem.hasClass('chicken')) {
-                        activeRemove(clickItem);
-                        var removePoints = $('.td').find('.player2_item');
-                        if ($(this).hasClass('l1') && $(this).hasClass('r1')) {
-                            $(`#${clickPointId + 1}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                            $(`#${clickPointId + 4}`).addClass('active');
-                        } else if ($(this).hasClass('l1') && $(this).hasClass('r4')) {
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId + 1}`).addClass('active');
-                        } else if ($(this).hasClass('l1')) {
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId + 1}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                            $(`#${clickPointId + 4}`).addClass('active');
-                        }
-
-                        if ($(this).hasClass('l3') && $(this).hasClass('r1')) {
-                            $(`#${clickPointId - 1}`).addClass('active');
-                            $(`#${clickPointId + 2}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                        } else if ($(this).hasClass('l3') && $(this).hasClass('r4')) {
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId - 1}`).addClass('active');
-                        } else if ($(this).hasClass('l3')) {
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId - 1}`).addClass('active');
-                            $(`#${clickPointId + 2}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                        }
-
-                        if ($(this).hasClass('l2') && $(this).hasClass('r1')) {
-                            $(`#${clickPointId - 1}`).addClass('active');
-                            $(`#${clickPointId + 1}`).addClass('active');
-                            $(`#${clickPointId + 2}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                            $(`#${clickPointId + 4}`).addClass('active');
-                        } else if ($(this).hasClass('l2') && $(this).hasClass('r4')) {
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId - 1}`).addClass('active');
-                            $(`#${clickPointId + 1}`).addClass('active');
-                        } else if ($(this).hasClass('l2')) {
-                            $(`#${clickPointId - 3}`).addClass('active');
-                            $(`#${clickPointId - 1}`).addClass('active');
-                            $(`#${clickPointId + 1}`).addClass('active');
-                            $(`#${clickPointId + 2}`).addClass('active');
-                            $(`#${clickPointId + 3}`).addClass('active');
-                            $(`#${clickPointId + 4}`).addClass('active');
-                        }
-                    }
-
-                    //======= player2キリン駒 =======//
-                    if (clickItem.hasClass('giraffe')) {
-                        giraffeMove('.player2_item', $(this));
-                    }
-
-                    //======= player2ゾウ駒 =======//
-                    if (clickItem.hasClass('elephant')) {
-                        elephantMove('.player2_item', $(this));
-                    }
-
-                    //======= player2ライオン駒 =======//
-                    if (clickItem.hasClass('lion')) {
-                        lionMove('.player2_item', $(this));
-                    }
-                }
-            }
-            //player2駒 end
-
-        }
+            // プレイヤーを確認
+            const clickedPlayer = clickItem.hasClass('player1_item') ? 1 : 2; // 駒のプレイヤー番号
+            if( clickedPlayer === turn ) {
+
+                // どの動物が当てはまるか確認
+                for( const animal in AnimalTerritories ) {
+                    if( clickItem.hasClass(animal) ) {
+                        activeRemove(clickItem); //
+
+                        // 選択駒の座標を計算
+                        const cpx = ( clickPointId - 1 ) % 3;
+                        const cpy = ( clickPointId - 1 ) / 3 |0;
+
+                        // 対象の動物のテリトリーリストを展開
+                        const territory = AnimalTerritories[animal];
+                        for( const {x, y} of territory ) {
+                            // 移動可能座標を計算
+                            const tx = cpx + x;
+                            const ty = cpy + y * (clickedPlayer === 1 ? 1 : -1); // プレイヤー2なら移動y座標を反転
+
+                            // 座標が盤の範囲外の場合は無視
+                            if( tx < 0 || tx > 2 || ty < 0 || ty > 3 )
+                                continue;
+
+                            // 移動範囲を表示
+                            $(`#${ty * 3 + tx + 1}`).addClass('active');
+                        } 
+                        break;
+                    } 
+                } 
+            } 
+        }
0Like

Comments

  1. @KLB686

    Questioner
    @mouseofmicky 様
    まさに実現したいことを回答いただき、ありがとうございます！

    動物の移動範囲をリスト、配列に入れて制御すると理解致しました。
    添付いただいた、jsfiddleと上記コードをしっかり確認してみようと思います！

  2. @mouseofmicky

    すいません、ちょっと急いで書いたためコメントなどが不十分だったと思うので少し修正しました。
KLB686
@KLB686

@mouseofmicky　様

追記、恐れ入ります。
コメントがとても分かりやすく、大変勉強になりました。
誠にありがとうございます。

回答いただいた内容、下記のように解釈し、
5*5将棋の制作に着手しております。

もし、お手すきでございましたら、①②【解釈】に
誤認している点等がないかご教示いただければ幸いでございます。

①動物の名前と移動可能範囲を定義する

const AnimalTerritories = {
    chick: [
        { x: 0, y: -1 }
    ],//中略　};

【解釈】
実際の将棋駒で考えると…

const KOMATATI = {
    //金
    KIN: [
        {x: -1, y: 0},
		{x: 0, y: -1},
		{x: 1, y: -1},
		{x: -1, y: 0},
		{x: 1, y: 0},
		{x: 0, y: 1},
    ],
   //香車 5*5将棋の場合
   KYO: [
          {x: 0, y: -1},
          {x: 0, y: -2},
          {x: 0, y: -3},
          {x: 0, y: -4},
    ]};

②クリックした駒と一致する配列を取り出す

           //「for in」で配列のプロパティを順に取得
            for (const animal in AnimalTerritories){

           //一致するプロパティがあればbreakする
            if (clickItem.hasClass(animal)) {

		 //「for of」で配列のvalue取得
            for (const { x, y } of territory) {

           // 座標が盤の範囲外の場合は無視
           if (tx < 0 || tx > 2 || ty < 0 || ty > 3)

【解釈】
実際の将棋駒で考えると…

           // 5*5よりも大きい座標になった時は除外
           if (tx < 5|| tx > 5 || ty < 5 || ty > 5)

上記となります。
改めて、丁寧なご回答、誠にありがとうございました。

0Like
mouseofmicky
@mouseofmicky

どうもこちらから返信はできないようなので新しいスレッドで失礼致します。

if (tx < 5|| tx > 5 || ty < 5 || ty > 5)

5*5の盤だとするなら、tx < 0|| tx > 4 || ty < 0 || ty > 4ですかね。

const cpx = ( clickPointId - 1 ) % 5;
const cpy = ( clickPointId - 1 ) / 5 |0;

cpx, cpyもこのようになり、取り得る値は0-4の範囲になる計算なので。

for (const { x, y } of territory) {

ちなみに、この変数の値の代入方法は分割代入と呼ばれます。オブジェクトや配列の値をダイレクトに取得できる便利な構文です。ご存じでしたらすみません。

ほぼHTMLのclass属性を操作するだけで将棋を再現できているのは素直に凄いですが、今のJavaScriptで同様のものを作るとするなら、たぶん大抵は座標や表示・移動の振る舞いなどを持った「駒クラス」を書き、各駒をオブジェクトとして盤データへ配置するというような方法が取られるのではないかと思います。クラスごとの役割を明確にすればコードは纏まり、1駒1オブジェクトとして扱う事で直観的にコードを書く事ができます。

根本から書き直す事になるのでこれをそうすべきというわけではありませんが、JavaScriptを学んでいればオブジェクト指向の理解は必ず必要になるので、ご興味があれば JavaScript, class, オブジェクト指向 などといったあたりを調べてみて下さい。

0Like

Comments

  1. @KLB686

    Questioner
    @mouseofmicky　様

    度々のご回答、誠にありがとうございました。

    分割代入
    > 勉強不足で全く知らない知識でした。解説いただきありがとうございます。

    オブジェクト指向
    >　アドバイスありがとうございます。
    白状してしまうと「javascript 将棋」のネット検索で出てきた中のどれにも「オブジェクト指向」が含まれていました。どうしても理解できず、このような形での実装になったという経緯がありました。

    今回いただいたたくさんのアドバイスに本当に感謝でいっぱいな一方で、オブジェクト指向については避けて通れないと実感しているところです。

    今一度、オブジェクト指向について学びなおして、知識を深めていきたいと思います。

    @mouseofmicky 様、改めて感謝を申し上げます。
    誠にありがとうございました。今回のお力添えを今後に活かせるよう頑張ります。

    また、こちらで質問させていただくことがあれば、その際はよろしくお願い申し上げます。

    当質問については一旦、クローズとさせていただきます。

    @mouseofmicky 様/ 最初に回答いただきました　@shiracamus　様/また閲覧いただいた方、ありがとうございました！

Your answer might help someone💌

LoginSign Up

Popular Questions