forked from version1-workspace/ws-0300-js-tic-tac-toe
/
function.js
108 lines (93 loc) · 2.49 KB
/
function.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
const itemsItem = document.querySelectorAll(".items-item");
const board = document.querySelector(".l-board");
const jsCell = document.querySelectorAll(".js-cell");
const state = document.querySelector(".js-state");
const jsReset = document.querySelector(".btn-restart");
let done = false;
const winPatterns = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
const cells = ["", "", "", "", "", "", "", "", ""];
const countFunc = (() => {
let count = 0;
return {
inner: () => {
return count++;
},
};
})();
// イベントの登録
jsCell.forEach(function (cell, index) {
cell.addEventListener("click", () => {
// セルの中身がある、もしくはdoneがtrueだったら処理せずそのまま
if (cells[index] || done) {
return;
}
// countFunc関数をcountへ代入
const count = countFunc.inner();
// countの値の奇数判定
const circleTurn = count % 2 === 0;
// 奇数だったら⚪︎そうでなければ×
const inputValue = circleTurn ? "○" : "×";
cell.innerHTML = inputValue;
// 判定結果をinnerHTMLで出力
cells[index] = inputValue;
// itemsItemにtoggleTurn関数を実行
toggleTurn(itemsItem);
// cellsを引数にしたjudgeをjudgedに代入
const judged = judge(cells);
// judgedの結果で判定
if (judged) {
message(inputValue);
done = true;
} else if (count === 8) {
// 揃わずに全てのセルが埋まったら メッセージをdrawに
state.innerHTML = "draw";
}
});
});
// 判定
const judge = (judgeCell) => {
const judgeInner = winPatterns.some((line) => {
if (
judgeCell[line[0]] === "○" &&
judgeCell[line[1]] === "○" &&
judgeCell[line[2]] === "○"
) {
return true;
}
if (
judgeCell[line[0]] === "×" &&
judgeCell[line[1]] === "×" &&
judgeCell[line[2]] === "×"
) {
return true;
}
});
return judgeInner;
};
// セルをクリックするごとにitemsのactiveを切り替える
const toggleTurn = (items) => {
for (let item of items) {
item.classList.toggle("is-active");
}
};
// const doneFunc = (target) => {
// debugger;
// target.classList.add("set");
// };
// どちらかが揃ったら メッセージをwinに
const message = (mark) => {
state.innerHTML = `${mark} win`;
};
//リセットボタンでリロード
jsReset.addEventListener("click", () => {
location.reload();
});