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

前回はコードを短くしようとして、動作がうまく行かずに終わりました。結局それ自体はとても簡単に解決しました・・・。

ということで前回の続きです。

for(i = 0; i < 9; i++){
    grid[i] = document.getElementById('grid' + i);
    grid[i].onclick = function() {
        this.value = '◯';
    }
}

これが前回のfor文を改善したものです。onclick時にthisを呼び出すことで、クリックした場所のvalueに◯を入れることに成功しました。これで前回の最後の三目並べと同じ動作を行えます。

次は白番と黒番を交互に入れ替える動作を作りたいのですが、その前に今のコードを整頓します。

var grid = new Array(),
    i;

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

function click(button) {
    button.value = '◯';
}

クリック時の動作をclick()という関数に格納しました。クリックされたボタンの情報（this）を関数clickに渡し、関数内ではその情報をbuttonという名前の引数として扱います。

これを利用して、白番黒番を実装していきます。

var grid = new Array(),
    i,
    white = "白",//白番のコマ
    black = "黒",//黒番のコマ
    times = 0;

/*〜中略〜*/

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

ゲームのターン数を表す変数timesと、白番と黒番それぞれのコマを表す変数white,blackを定義しました。white,blackの値を変えれば◯と●、◯と☓のコマを使用する設定を簡単にできます。

関数clickでは、ゲームのターンが偶数なら白、そうでなければ黒をそのボタンのvalueに入れるようにしています。関数clickの処理が終わった時、ゲームのターン数を1進める処理をします。





こうして交互に白と黒を置くことのできる盤面が出来ました。同じマスをクリックすると自分のコマを置くことができてしまいますが、プレイヤーがルールを守ればなんとか三目並べが成立する状態にはなりました・・・。

次回は上書き防止などの処理をしていく予定です。