Reactチュートリアルをやっていってみるその11
これは
Reactチュートリアルをやっていく記事です。
参考
ゲーム勝者の判定
いよいよ勝者を判定できるように作っていきます。
チュートリアル側でヘルパー関数として用意されているcalulateWinner関数を末尾に追加する。
function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; }
render関数内にヘルパー関数を呼ぶように追加する。
handleClickでゲーム決着がついている場合、マス目が埋まっている場合早期returnするように修正をくわえます。
ここまでで一通りのゲームは完成になりました。
明日は途中少し触れたタイムトラベル機能の追加です。
今日はここまで。