Q&A
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、「うまく動作しません」とはどのような状況でしょうか。出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
javascriptで三目ならべのプログラムを作ったのですが、勝敗判定がうまく動作しません。
どの部分が良くないのでしょうか。
教えてください。
なお勝敗判定は省スペース化のため現在のところ、1行目に○がそろった時のみ勝利としたプログラムにしています。
うまくいかないというのは、1行目に○が３つそろってもアラートが発生せずに、9マス最後まで三目並べができてしまうことです。
<DOCTYPE html> <html lang-"ja"> <head> <style> .cell{width:50px; height:50px; font-size:30pt;} </style> </head> <body> <script type="text/javascript" language="JavaScript"> function clickA(a) { if(count++%2==0){a.textContent="○";} else {a.textContent="×";} judge(); } for(count=0; count< 9; count++) { $[count] = document.getElementById('$'+count); $[count].onclick = function(){clickA(this);} } function judge() { if($["0"].value=="○"&&$["1"].value=="○"&&$["2"].value=="○" ) {alert("○の勝ち");} return; } </script> <table border="1"> <tr> <td class="cell" id="$0" onclick="clickA(this);"> </td> <td class="cell" id="$1" onclick="clickA(this);"> </td> <td class="cell" id="$2" onclick="clickA(this);"> </td> </tr> <tr> <td class="cell" id="$3" onclick="clickA(this);"> </td> <td class="cell" id="$4" onclick="clickA(this);"> </td> <td class="cell" id="$5" onclick="clickA(this);"> </td> </tr> <tr> <td class="cell" id="$6" onclick="clickA(this);"> </td> <td class="cell" id="$7" onclick="clickA(this);"> </td> <td class="cell" id="$8" onclick="clickA(this);"> </td> </tr> </table> </body> </html>
すみません、コードブロックというのが調べてもよくわからず、コードブロックできていません。
また、うまくいかないというのは、1行目に○が３つそろってもアラートが発生せずに、9マス最後まで三目並べができてしまうことです。
コードブロックは、質問文の編集ページでコードを選択し、編集ページにある「B I A」などのボタンのならびにある「</>」のボタンを押すことでコードブロック化できます。また、```（バッククオート3つ）をコードの前後行に入れることでもコードブロック化します。
コードブロックというのはこれでよいのでしょうか・・・。
tamachan
はい、大丈夫です。編集ありがとうございます。
回答3件
0
ベストアンサー
http://jsdo.it/katoy/a2kq
に作成してみました。
html、css, javascript を示します。
html:
html
1<table class="board"> 2 <tr> 3 <td class="cell" id="C0" onclick="clickA(this);"></td> 4 <td class="cell" id="C1" onclick="clickA(this);"></td> 5 <td class="cell" id="C2" onclick="clickA(this);"></td> 6 </tr> 7 <tr> 8 <td class="cell" id="C3" onclick="clickA(this);"></td> 9 <td class="cell" id="C4" onclick="clickA(this);"></td> 10 <td class="cell" id="C5" onclick="clickA(this);"></td> 11 </tr> 12 <tr> 13 <td class="cell" id="C6" onclick="clickA(this);"></td> 14 <td class="cell" id="C7" onclick="clickA(this);"></td> 15 <td class="cell" id="C8" onclick="clickA(this);"></td> 16 </tr> 17</table>
css:
css
1* { 2 margin: 0; 3 padding: 0; 4 border: 0; 5} 6 7body { 8 background: #dfd; 9} 10 11table.board { 12 border: solid 1px #000000; 13 border-collapse: collapse; 14 margin: 2px; 15} 16td { 17 border: solid 1px #000000; 18 text-align: center; 19} 20 21.cell { 22 width: 40px; 23 height: 40px; 24 font-size: 24px; 25}
javascript:
javascript
1var count = 0; 2 3function clickA(a) { 4 if (a.innerText != "") { 5 alert("既に埋まっています。"); 6 return; 7 } 8 9 var mark; 10 if (count % 2 === 0) { 11 mark = "◯"; 12 } else { 13 mark = "✕"; 14 } 15 a.innerText= mark; 16 count ++ ; 17 18 var ret = judge(); 19 if (ret) { 20 alert(ret); 21 } 22} 23 24function judge() { 25 var c0 = document.getElementById("C0").innerText; 26 var c1 = document.getElementById("C1").innerText; 27 var c2 = document.getElementById("C2").innerText; 28 var c3 = document.getElementById("C3").innerText; 29 var c4 = document.getElementById("C4").innerText; 30 var c5 = document.getElementById("C5").innerText; 31 var c6 = document.getElementById("C6").innerText; 32 var c7 = document.getElementById("C7").innerText; 33 var c8 = document.getElementById("C8").innerText; 34 35 winer = null; 36 if (c0 == c1 && c1 == c2 && c0 != "") { 37 winer = c0; 38 } else if (c3 == c4 && c4 == c5 && c3 != "") { 39 winer = c3; 40 } else if (c6 == c7 && c7 == c8 && c6 != "") { 41 winer = c6; 42 } else if (c0 == c3 && c3 == c6 && c0 != "") { 43 winer = c0; 44 } else if (c1 == c4 && c4 == c7 && c1 != "") { 45 winer = c1; 46 } else if (c2 == c5 && c5 == c8 && c2 != "") { 47 winer = c2; 48 } else if (c0 == c4 && c4 == c8 && c0 != "") { 49 winer = c0; 50 } else if (c2 == c4 && c4 == c6 && c2 != "") { 51 winer = c2; 52 } 53 var str; 54 if (winer) { 55 str = winer + "の勝ちです。"; 56 } else if (count == 9) { 57 str = "引分けです。"; 58 } else { 59 str = null; 60 } 61 return str;; 62}
judge() の中身をもっと工夫して、シンプルなものにしてみてください。
投稿2016/05/15 15:05
編集2016/05/15 21:14
総合スコア22324
ありがとうございます。
判定の考え方がこんなにもコンパクトになるなんて、私にはまったく考え付きませんでした。
○の場合と×の場合で列挙しか考えてませんでした。
とても勉強になりました。
９つの変数を使ってますが、配列を使うともっと短くできるはずです。
0
$[count] = document.getElementById('$'+count);
ではだめなのでしょうか。実際ダメですけど。
そこは問題ありません。
大きな問題は3つあります。
0. インデントや要素間のスペースが無い
デバックがしにくいので、インデントは必ず入れましょう。また、&&や==などの前後にはスペースを入れましょう。思わぬミスを呼ぶ結果になります。
0. ○/×の判定用の変数を用意しましょう
count 変数を○/×の判定に使う案は面白いですが、変数を別目的に使いまわすのは危険です。
0. $["0"].value という呼び出し方は無い
input タグ以外のほとんどのタグに value 属性はありません。ご自身のコードの中に答えがあります。
他にも○/×が入っている状態でクリックすると上書きできてしまう問題などありますが、実装途中ということでしょう。がんばってみてください！
投稿2016/05/15 14:22
総合スコア69400
ありがとうございます。
強烈初心者なのがばれていますね。
input以外にvalue属性はないんですね。今日覚えました！
ありがとうございます。
> input以外にvalue属性はないんですね。
「ほとんど」無いのですが、数個あります。下記URLに属性リストが有るので、困ったときは眺めてください。
【属性 (HTML) - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes
0
まず function judge() の中で $["0"] などを参照してますが、
その前に document.getElementById('$0') のように
実態をとらえないとだめなのでは?
あと、function clickA(a) で count を参照してますが、
関数内で定義されたものでも、パラメタで与えられた
ものでもないですね。
投稿2016/05/15 11:05
編集2016/05/15 11:06
総合スコア7458
var $=new Array();
var count=0;
を付けたし、
＊＊＊＊＊＊
var $=new Array();
var count=0;
for(count=0; count< 9; count++)
{
$[count] = document.getElementById('$'+count);
$[count].onclick = function(){clickA(this);}
}
function clickA(a)
{
if(count++%2==0){a.textContent="○";}
else {a.textContent="×";}
judge();
}
function judge()
{
if($["0"].value=="○"&&$["1"].value=="○"&&$["2"].value=="○" )
{alert("○の勝ち");}
return;
}
＊＊＊＊＊
のようにしました。
途中に挿入している
$[count] = document.getElementById('$'+count);
ではだめなのでしょうか。実際ダメですけど。
ソースとしてどういうふうに入れればよいのかわかりません。
あなたの回答
tips
プレビュー
