質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16910questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9233questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

三目ならべの勝敗判定がうまく動作しません

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,952

tamachan

score 10

javascriptで三目ならべのプログラムを作ったのですが、勝敗判定がうまく動作しません。
どの部分が良くないのでしょうか。
教えてください。 
なお勝敗判定は省スペース化のため現在のところ、1行目に○がそろった時のみ勝利としたプログラムにしています。
うまくいかないというのは、1行目に○が3つそろってもアラートが発生せずに、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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/05/15 19:53 編集

    コードブロックは、質問文の編集ページでコードを選択し、編集ページにある「B I A」などのボタンのならびにある「</>」のボタンを押すことでコードブロック化できます。また、```(バッククオート3つ)をコードの前後行に入れることでもコードブロック化します。

    キャンセル

  • tamachan

    2016/05/15 20:20

    コードブロックというのはこれでよいのでしょうか・・・。

    キャンセル

  • kei344

    2016/05/15 20:27

    tamachan はい、大丈夫です。編集ありがとうございます。

    キャンセル

回答 3

checkベストアンサー

0

http://jsdo.it/katoy/a2kq
に作成してみました。
イメージ説明

html、css, javascript を示します。

html:

<table class="board">
    <tr>
        <td class="cell" id="C0" onclick="clickA(this);"></td>
        <td class="cell" id="C1" onclick="clickA(this);"></td>
        <td class="cell" id="C2" onclick="clickA(this);"></td>
    </tr>
    <tr>
        <td class="cell" id="C3" onclick="clickA(this);"></td>
        <td class="cell" id="C4" onclick="clickA(this);"></td>
        <td class="cell" id="C5" onclick="clickA(this);"></td>
    </tr>
    <tr>
        <td class="cell" id="C6" onclick="clickA(this);"></td>
        <td class="cell" id="C7" onclick="clickA(this);"></td>
        <td class="cell" id="C8" onclick="clickA(this);"></td>
    </tr>
</table>


css:

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #dfd;
}

table.board  {
    border: solid 1px #000000;
    border-collapse: collapse;
    margin: 2px;
}
td {
    border: solid 1px #000000;
    text-align: center;
}

.cell {
    width:  40px; 
    height: 40px;
    font-size: 24px;
}


javascript:

var count = 0;

function clickA(a) {
    if (a.innerText != "") {
        alert("既に埋まっています。");
        return;
    }

    var mark;
    if (count % 2 === 0) {
        mark = "◯";
    } else {
        mark = "✕";
    }
    a.innerText= mark;
    count ++ ;

    var ret = judge();
    if (ret) {
        alert(ret);
    }
}

function judge() {
    var c0 = document.getElementById("C0").innerText;
    var c1 = document.getElementById("C1").innerText;
    var c2 = document.getElementById("C2").innerText;
    var c3 = document.getElementById("C3").innerText;
    var c4 = document.getElementById("C4").innerText;
    var c5 = document.getElementById("C5").innerText;
    var c6 = document.getElementById("C6").innerText;
    var c7 = document.getElementById("C7").innerText;
    var c8 = document.getElementById("C8").innerText;

    winer = null;
    if (c0 == c1 && c1 == c2 && c0 != "") {
        winer = c0;
    } else if (c3 == c4 && c4 == c5 && c3 != "") {
        winer = c3;
    } else if (c6 == c7 && c7 == c8 && c6 != "") {
        winer = c6;
    } else if (c0 == c3 && c3 == c6 && c0 != "") {
        winer = c0;
    } else if (c1 == c4 && c4 == c7 && c1 != "") {
        winer = c1;
    } else if (c2 == c5 && c5 == c8 && c2 != "") {
        winer = c2;
    } else if (c0 == c4 && c4 == c8 && c0 != "") {
        winer = c0;
    } else if (c2 == c4 && c4 == c6 && c2 != "") {
        winer = c2;
    }
    var str;
    if (winer) {
        str = winer + "の勝ちです。";
    } else if (count == 9) {
        str = "引分けです。";
    } else {
        str = null;
    }
    return str;;
}

judge() の中身をもっと工夫して、シンプルなものにしてみてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/16 01:25

    ありがとうございます。
    判定の考え方がこんなにもコンパクトになるなんて、私にはまったく考え付きませんでした。
    ○の場合と×の場合で列挙しか考えてませんでした。
    とても勉強になりました。

    キャンセル

  • 2016/05/16 06:17

    9つの変数を使ってますが、配列を使うともっと短くできるはずです。

    キャンセル

0

まず function judge() の中で $["0"] などを参照してますが、
その前に document.getElementById('$0') のように
実態をとらえないとだめなのでは?

あと、function clickA(a) で count を参照してますが、
関数内で定義されたものでも、パラメタで与えられた
ものでもないですね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/15 22:21 編集

    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);
    ではだめなのでしょうか。実際ダメですけど。

    ソースとしてどういうふうに入れればよいのかわかりません。

    キャンセル

0

$[count] = document.getElementById('$'+count);
ではだめなのでしょうか。実際ダメですけど。

そこは問題ありません。


大きな問題は3つあります。

  1. インデントや要素間のスペースが無い
    デバックがしにくいので、インデントは必ず入れましょう。また、&&や==などの前後にはスペースを入れましょう。思わぬミスを呼ぶ結果になります。
  2. ○/×の判定用の変数を用意しましょう
    count 変数を○/×の判定に使う案は面白いですが、変数を別目的に使いまわすのは危険です。
  3. $["0"].value という呼び出し方は無い
    input タグ以外のほとんどのタグに value 属性はありません。ご自身のコードの中に答えがあります。

他にも○/×が入っている状態でクリックすると上書きできてしまう問題などありますが、実装途中ということでしょう。がんばってみてください!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/16 01:29

    ありがとうございます。
    強烈初心者なのがばれていますね。
    input以外にvalue属性はないんですね。今日覚えました!
    ありがとうございます。

    キャンセル

  • 2016/05/16 01:45

    > input以外にvalue属性はないんですね。
    「ほとんど」無いのですが、数個あります。下記URLに属性リストが有るので、困ったときは眺めてください。

    【属性 (HTML) - HTML | MDN】
    https://developer.mozilla.org/ja/docs/Web/HTML/Attributes

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16910questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9233questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。