index.js を修正します。マス目をクリックしたときの処理に以下の変更を加えます。
1.勝敗がついた時点で、どちらが勝ったかを表示する。
2.勝敗がついたあとにマス目をクリックしたら、画面のリロードを促すアラートを出す。
$(function() {
// 定数定義
const FIRST = 0
const MARU = "〇"
const BATSU = "×"
let now_attack = FIRST // 0: 先攻、1: 後攻
let got_match = false // 勝敗がついたか
$("td").click(function() {
// 勝敗がついたあとに空のセルをタップした場合
if (got_match) {
alert("決着がつきました。画面をリロードしてください")
} else {
// セルに入力する記号
let result_symbol = now_attack ? BATSU : MARU
// セルに入力
$(this).html(result_symbol)
// 先攻後攻入れ替え
now_attack = !now_attack
// 勝敗判定
if (check_complete()) {
got_match = true
alert(result_symbol + "の勝ち!")
}
}
})
})
alert() 関数を用いることで、ブラウザの上部にポップアップを出すことができます。
check_complete() 関数についてはこの後、作成します。
index.js を修正します。
マス目をクリックしたときに実行する check_complete() 関数を作成します。
先ほど付与したid(0~8)について、8通りのそろう組み合わせのidの並びを事前に定数として定義しておきます。
8通りの組み合わせを図でも示しておきます。
$(function() {
// 定数定義
︙
// そろうパターン
const complete_patterns = [
[0, 3, 6], // 1列目 (1)
[1, 4, 7], // 2列目 (2)
[2, 5, 8], // 3列目 (3)
[0, 1, 2], // 1行目 (4)
[3, 4, 5], // 2行目 (5)
[6, 7, 8], // 3行目 (6)
[0, 4, 8], // 斜め:左上から右下 (7)
[2, 4, 6] // 斜め:右上から左下 (8)
]
︙
$("td").click(function() {
︙
})
/**
* そろったか判定
*/
function check_complete() {
let results = $("td").get()
let completed = false
// そろう8パターンがあるかチェック
for (let cnt = 0; cnt < complete_patterns.length; cnt++) {
// 1つのパターンを抽出し、そのパターンのセル番号をさらに抽出
let pattern = complete_patterns[cnt]
// チェック対象の3つのセルを抽出
let cell1 = $(results[pattern[0]]).html()
let cell2 = $(results[pattern[1]]).html()
let cell3 = $(results[pattern[2]]).html()
// 3つのセルの内容が等しいか確認(undefined や "" で全て一致することを避けるため、cell1 だけ中身をチェック)
completed = cell1 && cell1 == cell2 && cell2 == cell3 && cell3 == cell1
// 1つでもそろった行・列がある場合はチェックを終了
if (completed) break
}
return completed
}
})
そろう条件としては、3つのマス目の内容が同じ かつ 〇か×であること、とする。
index.html ファイルを再度読み直してください。
勝負がついた際、またそのあとに入力を試みた際に、以下の挙動となっていれば問題ありません。
1.引き分けになった場合に、アラートで引き分けを通知してください。以下の挙動になれば問題ありません。
【ヒント】
・マス目は全部で9つあり、すべて入力が完了した際に通知をすればよい。
・また、すべて入力し終えたタイミングで勝負がつく場合があるので、勝負がついていないことも条件となる。
2.現在のコードでは、〇×が入っているマス目をクリックすると、記号が書き換えられる不具合があります。
入力済みのマス目をクリックした際に、以下のアラートを表示して入力をさせないようにしてください。
【ヒント】td要素に囲まれた部分に文字列を挿入するために .html(“htmlString”) 関数を利用してきましたが、.html() 関数は引数を指定しない場合、囲まれた部分の文字列を取得できる。