超初心者がJavaScriptで作る三目並べ その3

予定を変更してバグには目をつむり、とりあえず五目並べがまともに成り立つ形を目指すことにしました。

 今回は勝ち負けを表すことのできる関数を作っていきます。

function click(button) {
    if(times % 2 === 0){
        button.value = white;
    } else{
        button.value = black;
    }
    times++;
    judge();
}

前回作った関数clickの終了直前にjudgeという関数を実行することにしました。コマを置いたあとに勝ちか負けかを判定するための動作です。

そのため関数judgeの中身は勝ち負け判定についてです。まず盤面の状態については、

for(i = 0; i < 9; i++){
    grid[i] = document.getElementById('grid' + i);//←これ
    grid[i].onclick = function() {
        click(this);
    }
}

初回に作った配列gridを利用します。配列gridの中身はそれぞれのボタンの状態です。例えば左上のマス目はIDがgrid0なので、配列grid[0]とすれば左上のマス目の今の状態を取得できます。

マス目に黒と白どちらのコマが置かれているかは、それぞれのボタンのvalueに格納されているので、grid[0].valueとすれば左上のマスに何が置かれているかを読み込むことができるわけです！

function judge() {
    if(grid[0].value === white && grid[1].value === white && grid[2].value ===white ||//上段横列
    grid[3].value === white && grid[4].value === white && grid[5].value ===white ||//中段横列
    grid[6].value === white && grid[7].value === white && grid[8].value ===white ||//下段横列
    grid[0].value === white && grid[3].value === white && grid[6].value ===white ||//左縦列
    grid[1].value === white && grid[4].value === white && grid[7].value ===white ||//中縦列
    grid[2].value === white && grid[5].value === white && grid[8].value ===white ||//右縦列
    grid[0].value === white && grid[4].value === white && grid[8].value ===white ||//斜め
    grid[2].value === white && grid[4].value === white && grid[6].value ===white ){//斜め
        alert("先行の勝ち");
        return;
    }

    if(grid[0].value === black && grid[1].value === black && grid[2].value ===black ||//上段横列
    grid[3].value === black && grid[4].value === black && grid[5].value ===black ||//中段横列
    grid[6].value === black && grid[7].value === black && grid[8].value ===black ||//下段横列
    grid[0].value === black && grid[3].value === black && grid[6].value ===black ||//左縦列
    grid[1].value === black && grid[4].value === black && grid[7].value ===black ||//中縦列
    grid[2].value === black && grid[5].value === black && grid[8].value ===black ||//右縦列
    grid[0].value === black && grid[4].value === black && grid[8].value ===black ||//斜め
    grid[2].value === black && grid[4].value === black && grid[6].value ===black ){//斜め
        alert("後攻の勝ち");
        gameStat = false;
        return;
    }
} 

ということでこれが自分の書いた関数judgeの中身です・・・。見た目は最悪ですがしっかりと動いてくれます。何をしているかというと、if文の中に勝ちと負けの全パターンを描いてorでつなげています。例えば2行目はIDがgrid0、grid1、grid2のボタンのvalueが白だったら、ということになり上一列に白で埋まっていると表しています。

条件に引っかかればアラートでどちらの勝ちかを教えてくれます。





これで何とか勝ち負けの判定ができて五目並べっぽくはなりました。まだ引き分けの判定ができていませんが、またその内つけていきます・・・。