Javascript入門。Tic-Tac-Toe(○×ゲーム）Webアプリを作成。 – その3 –
この記事はこちらの記事の続きです。
○と×を交互に入力できるようにする
前回までで、クリックしたマスに○を入力して、色を変更させることができるようになりました。
当たり前ですが、これだとゲームとして成り立たないので今回は、○と×を交互に入力できるようにしていきます。
今回のコードはこちらです。
// .table の中の要素がクリックされたらイベントが発火
document.querySelector('.table').addEventListener('click',function(e){
// ○か×が入力されていたら、処理を行わす中断する。
if(e.target.innerText !== '-'){return}
// クリックした部分に.active要素を当てるために、
// すでに.active要素の当たっている.pannelから
// .active要素を取り除く
const activatedPannel = document.querySelectorAll('.pannel.active')
// エラー回避のため要素が取得できた場合のみ、実行する。
if(activatedPannel[0]){activatedPannel[0].classList.remove("active")}
// くりっくされたボタンをactiveにして、
// 今のターンの印（ ○ or × )を入力する。
e.target.classList.add("active")
e.target.innerText = document.querySelector('.btn.active').text
// 順番を交代する。
toggleTurn()
})
// ○と×の切り替えメソッド
function toggleTurn(){
// すでに.activeがあてられている.btnを取得
const acitvated = document.querySelector('.btn.active')
// 一度両方のボタンをactiveにする
document.querySelectorAll('.btn').forEach(function( btn ) {
btn.classList.add("active")
})
// 最初の段階でactivateされていたものから
// .activeを取り除く
acitvated.classList.remove("active")
}toggleTurnメソッドを追加
今回のアプリでは◯のターンか×のターンかはマスの上のボタンで表しています。このボタンのクラスがactiveな方の記号（◯ or × )を次にマスがクリックされたときに使用します。
このターンは、マスがくりっくされ、記号の入力、色の変更が終わったあとに行われれば良いので、そこのタイミングにtoggleTurnというメソッドを追加します。
// .table の中の要素がクリックされたらイベントが発火
document.querySelector('.table').addEventListener('click',function(e){
// ○か×が入力されていたら、処理を行わす中断する。
if(e.target.innerText !== '-'){return}
// クリックした部分に.active要素を当てるために、
// すでに.active要素の当たっている.pannelから
// .active要素を取り除く
const activatedPannel = document.querySelectorAll('.pannel.active')
// エラー回避のため要素が取得できた場合のみ、実行する。
if(activatedPannel[0]){activatedPannel[0].classList.remove("active")}
// くりっくされたボタンをactiveにして、
// 今のターンの印（ ○ or × )を入力する。
e.target.classList.add("active")
e.target.innerText = document.querySelector('.btn.active').text
// 順番を交代する。
toggleTurn() // <-------------追加
})メソッドを追加しただけでは、まだメソッドが定義されていないので下の方でメソッドを追加してあげます。
// ○と×の切り替えメソッド
function toggleTurn(){
/* ここに処理を書く */
}toggleTurnメソッドを実装
メソッドが追加できたら、実際に処理を書いていきます。ここでやる処理は単純で◯と×のボタンのうち.activeの付いている方をはずし、付いていない方に.activeを追加するだけです。
コードは以下の通りです。 新しく使っているメソッドはquerySelectorAllとforEachです。
// ○と×の切り替えメソッド
function toggleTurn(){
// すでに.activeがあてられている.btnを取得
const acitvated = document.querySelector('.btn.active')
// 一度両方のボタンをactiveにする
document.querySelectorAll('.btn').forEach(function( btn ) {
btn.classList.add("active")
})
// 最初の段階でactivateされていたものから
// .activeを取り除く
acitvated.classList.remove("active")
}querySelectorAllはセレクタで指定した要素全てを配列で返却してくれます。querySelectorは最初にヒットしたもの一つを返すのに対してこちらは全ての要素を返してくるので今回はこちらを使用します。
forEachは配列に対して使えるメソッドで、配列の要素がなくなるまでループします。配列の要素すべてに対して処理を行いたい場合はこちらのメソッドを使用します。
交互に順番を変更する実装完了。次はゲームの結果を表示。
ここまででで交互に◯と×を入力できるようになりました。ここまでで実装すれば◯と×を入力することができるのでゲームとしては遊べます。
が、ここまでだと◯や×が三つそろった状態でもゲームを続けられたり、ゲームの結果が表示されることがありません。
次回以降はこの結果判定メソッドを実装していきます。