Q&A
プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）
###前提・実現したいこと
初心者が将棋のルールを学べるプログラムを作りたいと思っています。
その初期段階で、駒の動きを書いているのですが、
jqueryが上手く作れないので質問させてください。
私自身プログラミングの経験が浅く、的を得ていない質問かと思いますが、
ご容赦ください。
###発生している問題・エラーメッセージ
将棋は先手番と後手番が交互に来るので、
クリックの段階を４つに分けています。
tebanという変数が0,1,2,3まであり、
teban = 0の時、先手の駒のみ選択できる
teban = 1の時、盤のどこかをクリックして、そのマスに駒が移動する
選択解除
teban = 2の時、後手の駒のみ選択できる
teban = 3の時、盤のどこかをクリックして、そのマスに駒が移動する
選択解除
teban＝0に戻る
という流れを繰り返す形にしたいのですが、
先手の駒のみ選択できる状態から進みません。
おそらくjqueryが論理的に破たんしているのだと思いますが、
私の力ではわからず、今朝からずっと悩んでおりました。
どなたかお助け頂けるとありがたいです。
よろしくお願いいたします。
###該当のソースコード
jquery
1(function($){ 2 3 4 5 6$('#ban').each(function(){ 7 8var ban1 = $(".ban1"); 9var komadate; //駒のデータを格納 10var preclick = 0; //一回前にクリック 11var komain = 0; //駒のデータに、駒が中に入っている1入っていない0チェック 12var kifu = 0; //クリックされた位置のデータ 13 14 15 16var teban = 0; 17 18var gotekoma = $(".gotekoma"); 19var sentekoma = $(".sentekoma"); 20 21 22 23 24 25 26if ( teban == 0 ) { 27 28 29 30sentekoma.click( function() { 31$(this).addClass("selected"); 32komadate = $(this); 33preclick = $(this); 34 35 teban = 1; 36 37}); 38 39} 40 41else if ( teban == 1 ){ 42 43 ban1.click( function() { 44 $(this).append(komadate); 45 preclick.removeClass("selected"); 46 komadate = null; 47 48 teban = 2; 49 50 $(".tebanhyouji").text("後手番"); 51 }); 52} 53 54 55 56 57 else if (teban == 2) { 58 59 60 61gotekoma.click( function() { 62$(this).addClass("selected"); 63komadate = $(this); 64preclick = $(this); 65 66 teban = 3; 67 68}); 69 70} 71 72else if ( teban == 3 ){ 73 74 ban1.click( function() { 75 $(this).append(komadate); 76 preclick.removeClass("selected"); 77 komadate = null; 78 79 teban = 0; 80 81 $(".tebanhyouji").text("先手番"); 82 }); 83} 84 85 86 87}); 88})(jQuery); 89
＝＝＝＝＝＝＝＝以下html＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>syougi</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 7 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 8 <link rel="stylesheet" href="css/styles.css"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 10 </head> 11 <body> 12 13 14<table id="ban"> 15 <tbody> 16 <tr><th class="komadai" ></th><th class=komadai ></th><th class=komadai ></th><th class="ban1" id="k91"><div class="gotekoma"> 17 <img src="gazou/gote.gif/koma.kyou.g.gif"></div></th><th class="ban1" id="k81"><div class="gotekoma"><img src="gazou/gote.gif/koma.kei.g.gif"></div></th><th class="ban1" id="k71"> 18 <div class="gotekoma"><img src="gazou/gote.gif/koma.gin.g.gif"></div></th> 19 <th class="ban1" id="k61"><div class="gotekoma"><img src="gazou/gote.gif/koma.kin.g.gif"></div></th><th class="ban1" id="k51"> 20 <div class="gotekoma"><img src="gazou/gote.gif/koma.ou.g.gif"></div></th><th class="ban1" id="k41"><div class="gotekoma"><img src="gazou/gote.gif/koma.kin.g.gif"></div></th> 21 <th class="ban1" id="k31"><div class="gotekoma"><img src="gazou/gote.gif/koma.gin.g.gif"></div></th> 22 <th class="ban1" id="k21"><div class="gotekoma"><img src="gazou/gote.gif/koma.kei.g.gif"></div></th> 23 <th class="ban1" id="k11"><div class="gotekoma"><img src="gazou/gote.gif/koma.kyou.g.gif"></div></th><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th></tr> 24 25 <tr><th class="komadai" ></th><th class=komadai ></th><th class=komadai ></th><th class="ban1" id="k92"></th><th class="ban1"id="k82"><div class="gotekoma"><img src="gazou/gote.gif/koma.hi.g.gif"></div></th> 26 <th class="ban1" id="k72"></th><th class="ban1" id="k62"></th><th class="ban1" id="k52"> 27 </th><th class="ban1" id="k42"></th><th class="ban1" id="k32"></th><th class="ban1" id="k22"><div class="gotekoma"><img src="gazou/gote.gif/koma.kaku.g.gif"></div></th> 28 <th class="ban1" id="k12"></th><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th></tr> 29 30 <tr><th class="komadai" ></th><th class=komadai ></th><th class=komadai ></th><th class="ban1" id="k93"><div class="gotekoma"><img src="gazou/gote.gif/koma.hu.g.gif"></div></th><th class="ban1" id="k83"><div class="gotekoma"><img src="gazou/gote.gif/koma.hu.g.gif"></div></th> 31 <th class="ban1" id="k73"><div class="gotekoma"><img src="gazou/gote.gif/koma.hu.g.gif"></div></th><th class="ban1" id="k63"><div class="gotekoma"><img src="gazou/gote.gif/koma.hu.g.gif"></div></th> 32 <th class="ban1" id="k53"><div class="gotekoma"><img src="gazou/gote.gif/koma.hu.g.gif"></div> 33 </th><th class="ban1" id="k43"><div class="gotekoma"><img src="gazou/gote.gif/koma.hu.g.gif"></div></th><th class="ban1" id="k33"><div class="gotekoma"><img src="gazou/gote.gif/koma.hu.g.gif"></div></th> 34 <th class="ban1" id="k23"><div class="gotekoma"><img src="gazou/gote.gif/koma.hu.g.gif"></div></th><th class="ban1" id="k13"><div class="gotekoma"><img src="gazou/gote.gif/koma.hu.g.gif"></div></th><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th></tr> 35 36 <tr><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th><th class="ban1" id="k94"></th><th class="ban1" id="k84"></th><th class="ban1" id="k74"></th><th class="ban1" id="k64"></th><th class="ban1" id="k54"> 37 </th><th class="ban1" id="k44"></th><th class="ban1" id="k34"></th><th class="ban1" id="k24"></th><th class="ban1" id="k14"></th><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th></tr> 38 39 <tr><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th><th class="ban1" id="k95"></th><th class="ban1" id="k85"></th><th class="ban1" id="k75"></th><th class="ban1" id="k65"></th> 40 <th class="ban1" id="k55"></th><th class="ban1" id="k45"></th><th class="ban1" id="k35"></th> 41 <th class="ban1" id="k25"></th><th class="ban1" id="k15"></th><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th></tr> 42 <tr><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th><th class="ban1" id="k96"></th><th class="ban1" id="k86"></th><th class="ban1" id="k76"></th><th class="ban1" id="k66"></th><th class="ban1" id="k56"> 43 </th><th class="ban1" id="k46"></th><th class="ban1" id="k36"></th><th class="ban1" id="k26"></th><th class="ban1" id="k16"></th><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th></tr> 44 <tr><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th><th class="ban1" id="k97"><div class="sentekoma"><img src="gazou/sente.gif/koma.hu.gif"></div></th><th class="ban1" id="k87"><div class="sentekoma"><img src="gazou/sente.gif/koma.hu.gif"></div></th> 45 <th class="ban1" id="k77"><div class="sentekoma"><img src="gazou/sente.gif/koma.hu.gif"></div></th><th class="ban1" id="k67"><div class="sentekoma"><img src="gazou/sente.gif/koma.hu.gif"></div></th> 46 <th class="ban1" id="k57"><div class="sentekoma"><img src="gazou/sente.gif/koma.hu.gif"></div></th><th class="ban1" id="k47"><div class="sentekoma"><img src="gazou/sente.gif/koma.hu.gif"></div></th> 47 <th class="ban1" id="k37"><div class="sentekoma"><img src="gazou/sente.gif/koma.hu.gif"></div></th><th class="ban1" id="k27"><div class="sentekoma"><img src="gazou/sente.gif/koma.hu.gif" class="komag"></div></th> 48 <th class="ban1" id="k17"><div class="sentekoma"><img src="gazou/sente.gif/koma.hu.gif"></div></th><th class="komadai" ></th><th class=komadai ></th><th class=komadai ></th></tr> 49 <tr><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th><th class="ban1" id="k98"></th><th class="ban1" id="k88"><div class="sentekoma"><img src="gazou/sente.gif/koma.kaku.gif"></div></th><th class="ban1" id="k78"></th><th class="ban1" id="k68"></th><th class="ban1" id="k58"> 50 </th><th class="ban1" id="k48"></th><th class="ban1" id="k38"></th><th class="ban1" id="k28"><div class="sentekoma"><img src="gazou/sente.gif/koma.hi.gif"></div></th><th class="ban1" id="k18"></th><th class="komadai" ></th><th class=komadai ></th><th class=komadai ></th></tr> 51 <tr><th class="bangai" ></th><th class="bangai" ></th><th class="bangai" ></th><th class="ban1" id="k99"><div class="sentekoma"><img src="gazou/sente.gif/koma.kyou.gif"></div></th><th class="ban1" id="k89"><div class="sentekoma"><img src="gazou/sente.gif/koma.kei.gif"></div></th> 52 <th class="ban1" id="k79"><div class="sentekoma"><img src="gazou/sente.gif/koma.gin.gif"></div></th><th class="ban1" id="k69"><div class="sentekoma"><img src="gazou/sente.gif/koma.kin.gif"></div></th> 53 <th class="ban1" id="k59"><div class="sentekoma"><img src="gazou/sente.gif/koma.ou.gif"></div></th><th class="ban1" id="k49"><div class="sentekoma"><img src="gazou/sente.gif/koma.kin.gif"></div></th> 54 <th class="ban1" id="k39"><div class="sentekoma"><img src="gazou/sente.gif/koma.gin.gif"></div></th><th class="ban1" id="k29"><div class="sentekoma"><img src="gazou/sente.gif/koma.kei.gif"></div></th> 55 <th class="ban1" id="k19"><div class="sentekoma"><img src="gazou/sente.gif/koma.kyou.gif"></div></th><th class="komadai" ></th><th class=komadai ></th><th class=komadai ></th></tr> 56</tbody> 57</table> 58<div class="tebanhyouji"> 59 先手番 60</div> 61 62<script src="js/main.js"> 63 64 65</script> 66 </body> 67</html>
css
1.ban1{ 2 background-color:#a0522d; 3 height:50px; 4 width:50px; 5 border-color:#000000; 6 7 8} 9.komadai{ 10 background-color:#006400; 11 height:50px; 12 width:50px; 13 border:1px; 14 border-color:#006400; 15 16 17} 18.bangai{ 19 background-color:#ffffff; 20 height:50px; 21 width:50px; 22 border:none; 23 24} 25 26.selected{ 27 background-color:#adff2f; 28 29} 30 31.noselect img { 32 pointer-events: none; 33} 34
また、タイトルには要件を書いてください。 https://teratail.com/help/question-tips#questionTips3-1
念のためcssもご提示ください。
css追加いたしました
回答1件
0
ベストアンサー
.each()メソッドは、jQueryオブジェクトの要素の数だけ処理を繰り返すものです。
この件のjQueryオブジェクトとは$('#ban')ですから1回しか実行されないはずです。
また、functionはスコープを作り、var宣言はそのスコープのみで有効ですから、たとえ繰り返されても変数tebanはずっと0のままです。
基本的知識が不足しているように思えますので、もう少し単純なものから始めてみてはいかがでしょうか。
投稿2017/09/26 05:07
総合スコア36142
あなたの回答
tips
プレビュー
