【javascript】将棋の駒の動きを再現したい【jquery】
Q&A
Closed
解決したいこと
・以下①②を、駒の数や動きが増えても追加しやすいコードに修正したい
①駒の動きを盤面に表示する
②移動可能な範囲をクリックするとその場所に移動できる
発生している問題
・上記①②を実装する為のコードがとても長くなってしまった。
特定の駒が特定の場所にいる時に移動可能な範囲を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
