-
Notifications
You must be signed in to change notification settings - Fork 0
/
tic.js
124 lines (109 loc) · 3.24 KB
/
tic.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
const player = "O";
const computer = "X";
let board_full = false;
let play_board = ["", "", "", "", "", "", "", "", ""];
const board_container = document.querySelector(".play-area");
const winner_statement = document.getElementById("winner");
check_board_complete = () => {
let flag = true;
play_board.forEach(element => {
if (element != player && element != computer) {
flag = false;
}
});
board_full = flag;
};
const check_line = (a, b, c) => {
return (
play_board[a] == play_board[b] &&
play_board[b] == play_board[c] &&
(play_board[a] == player || play_board[a] == computer)
);
};
const check_match = () => {
for (i = 0; i < 9; i += 3) {
if (check_line(i, i + 1, i + 2)) {
document.querySelector(`#block_${i}`).classList.add("win");
document.querySelector(`#block_${i + 1}`).classList.add("win");
document.querySelector(`#block_${i + 2}`).classList.add("win");
return play_board[i];
}
}
for (i = 0; i < 3; i++) {
if (check_line(i, i + 3, i + 6)) {
document.querySelector(`#block_${i}`).classList.add("win");
document.querySelector(`#block_${i + 3}`).classList.add("win");
document.querySelector(`#block_${i + 6}`).classList.add("win");
return play_board[i];
}
}
if (check_line(0, 4, 8)) {
document.querySelector("#block_0").classList.add("win");
document.querySelector("#block_4").classList.add("win");
document.querySelector("#block_8").classList.add("win");
return play_board[0];
}
if (check_line(2, 4, 6)) {
document.querySelector("#block_2").classList.add("win");
document.querySelector("#block_4").classList.add("win");
document.querySelector("#block_6").classList.add("win");
return play_board[2];
}
return "";
};
const check_for_winner = () => {
let res = check_match()
if (res == player) {
winner.innerText = "Winner is player!!";
winner.classList.add("playerWin");
board_full = true
} else if (res == computer) {
winner.innerText = "Winner is computer";
winner.classList.add("computerWin");
board_full = true
} else if (board_full) {
winner.innerText = "Draw!";
winner.classList.add("draw");
}
};
const render_board = () => {
board_container.innerHTML = ""
play_board.forEach((e, i) => {
board_container.innerHTML += `<div id="block_${i}" class="block" onclick="addPlayerMove(${i})">${play_board[i]}</div>`
if (e == player || e == computer) {
document.querySelector(`#block_${i}`).classList.add("occupied");
}
});
};
const game_loop = () => {
render_board();
check_board_complete();
check_for_winner();
}
const addPlayerMove = e => {
if (!board_full && play_board[e] == "") {
play_board[e] = player;
game_loop();
addComputerMove();
}
};
const addComputerMove = () => {
if (!board_full) {
do {
selected = Math.floor(Math.random() * 9);
} while (play_board[selected] != "");
play_board[selected] = computer;
game_loop();
}
};
const reset_board = () => {
play_board = ["", "", "", "", "", "", "", "", ""];
board_full = false;
winner.classList.remove("playerWin");
winner.classList.remove("computerWin");
winner.classList.remove("draw");
winner.innerText = "";
render_board();
};
//initial render
render_board();