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

HTMLを勉強し始めて早一ヶ月。基本中の基本だけですがJavaScriptも学んだ"つもり"です。実際にコードを書いたことはあまりないのでここで一旦練習することにします。

解説もしたいところですが、生半可な知識では正確な情報を伝えられないと思うので、それはまたいずれ・・・。今回は簡単に説明を付ける程度にしておきます。


全く未経験の人はトッドインストールのHTMLとCSS、JavaScriptの項目をひと通り見ると、この記事の内容が理解しやすいかもしれません。

まずはHTMLでボタンを作ります。





HTMLは以下の様な感じで書いています。

<input type="button" value="" id="grid0" style="width:50px; height:50px; margin:1px; background:green; font-size:25px; color:white; border:none;">
<input type="button" value="" id="grid1" style="width:50px; height:50px; margin:1px; background:green; font-size:25px; color:white; border:none;">
<input type="button" value="" id="grid2" style="width:50px; height:50px; margin:1px; background:green; font-size:25px; color:white; border:none;"><br>
<input type="button" value="" id="grid3" style="width:50px; height:50px; margin:1px; background:green; font-size:25px; color:white; border:none;">
<input type="button" value="" id="grid4" style="width:50px; height:50px; margin:1px; background:green; font-size:25px; color:white; border:none;">
<input type="button" value="" id="grid5" style="width:50px; height:50px; margin:1px; background:green; font-size:25px; color:white; border:none;"><br>
<input type="button" value="" id="grid6" style="width:50px; height:50px; margin:1px; background:green; font-size:25px; color:white; border:none;">
<input type="button" value="" id="grid7" style="width:50px; height:50px; margin:1px; background:green; font-size:25px; color:white; border:none;">
<input type="button" value="" id="grid8" style="width:50px; height:50px; margin:1px; background:green; font-size:25px; color:white; border:none;">

HTMLのinput要素のボタンを9個作ります。それぞれにidをgrid0〜grid8を当てています（gridはマス目という意味でつけました）。value属性には何も入れていませんが、後々ここに「◯」と「●」をJavaScriptで挿入して三目並べっぽくする予定です。

3個ごとにbrタグを使って改行して3x3の盤面っぽく見せています。style属性を使って適当に見た目を整えていますが、別にしなくても動くはずです。

ボタンができたら早速JavaScriptを書いていきます。まずはボタンクリックで◯を表示できるようにします。

var grid0 = document.getElementById('grid0');
grid0.onclick = function() {
    grid0.value = "◯";
}

超基本的なプログラムはこれです。grid0という変数とid：grid0を関連付けて、grid0が押されたらvalueに◯を入れる、という流れです。これを他のボタンも同様に書いていくと、




※なぜかブログに乗せると○の表示がおかしくなったため、丸に置き換えています。
このようにそれぞれのボタンを押すと◯と表示してくれるようになりました！しかしこれでは非常に冗長です。これを短くするためにfor文を使うことにしました。

var grid = new Array(),
    i;

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

ということで配列を作り、その中にそれぞれのidの情報を詰めていくことにしました。for文で順々に先ほどと同じようにクリック時の動作を作っていきます。よし、これでできた！と思ったのですが、このままではうまく動作しませんでした。

 配列grid[i]自体は狙い通りそれぞれのidの情報が格納されていました。しかしonclick時の動作がおかしくなりました。javascriptはすべての動作をし終えているため、実際にクリックする瞬間には変数iの値が9になっています。その為度のボタンをクリックしてもgrid[9]という存在しない値のvalueを変更しようとするため、エラーが発生したようです。

ということで次回はこれを改善する方法を模索していきます・・・。