-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.js
125 lines (116 loc) · 3.25 KB
/
app.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
125
const boxes = document.querySelectorAll('.box');
const text = document.querySelector('#heading');
const strategy = document.querySelector('#strategy');
const restartBtn = document.querySelector('#restart');
const spaces = [];
const tick_circle = 'O';
const tick_x = 'X';
let currentPlayer = tick_circle;
const drawBoard = () => {
boxes.forEach((box, i) => {
let styleString = '';
if (i < 3) {
styleString += 'border-bottom: 3px solid var(--text);';
}
if (i % 3 === 0) {
styleString += 'border-right: 3px solid var(--text);';
}
if (i % 3 === 2) {
styleString += 'border-left: 3px solid var(--text);';
}
if (i > 5) {
styleString += 'border-top: 3px solid var(--text);';
}
box.style = styleString;
box.addEventListener('click', boxClicked);
});
};
const boxClicked = (e) => {
const id = e.target.id;
if (!spaces[id]) {
console.log(spaces[id]);
spaces[id] = currentPlayer;
e.target.innerText = currentPlayer;
if (playerWon()) {
text.innerText = `${currentPlayer} has won!`;
restart();
return;
}
if (playerDraw()) {
return;
}
currentPlayer = currentPlayer === tick_circle ? tick_x : tick_circle;
if (currentPlayer === tick_x) {
document.getElementById('plyr-2').setAttribute('class', 'active');
document.getElementById('plyr-1').setAttribute('class', '');
} else {
document.getElementById('plyr-1').setAttribute('class', 'active');
document.getElementById('plyr-2').setAttribute('class', '');
}
}
};
const playerWon = () => {
if (spaces[0] === currentPlayer) {
if (spaces[1] === currentPlayer && spaces[2] === currentPlayer) {
strategy.innerText = `${currentPlayer} wins up to top`;
return true;
}
if (spaces[3] === currentPlayer && spaces[6] === currentPlayer) {
strategy.innerText = `${currentPlayer} wins on the left`;
return true;
}
if (spaces[4] === currentPlayer && spaces[8] === currentPlayer) {
strategy.innerText = `${currentPlayer} wins diagonally`;
return true;
}
}
if (spaces[8] === currentPlayer) {
if (spaces[2] === currentPlayer && spaces[5] === currentPlayer) {
strategy.innerText = `${currentPlayer} wins on the right`;
return true;
}
if (spaces[6] === currentPlayer && spaces[7] === currentPlayer) {
strategy.innerText = `${currentPlayer} wins on the bottom`;
return true;
}
}
if (spaces[4] === currentPlayer) {
if (spaces[1] === currentPlayer && spaces[7] === currentPlayer) {
strategy.innerText = `${currentPlayer} wins vertically on middle`;
return true;
}
if (spaces[3] === currentPlayer && spaces[5] === currentPlayer) {
strategy.innerText = `${currentPlayer} wins horizontally on the middle`;
return true;
}
if (spaces[2] === currentPlayer && spaces[6] === currentPlayer) {
strategy.innerText = `${currentPlayer} wins diagonally`;
return true;
}
}
};
const playerDraw = () => {
let draw = 0;
spaces.forEach((space, i) => {
if (spaces[i] !== null) draw++;
});
if (draw === 9) {
text.innerText = `Draw`;
restart();
}
};
const restart = () => {
setTimeout(() => {
spaces.forEach((space, i) => {
spaces[i] = null;
});
boxes.forEach((box) => {
box.innerText = '';
});
text.innerText = `Play`;
strategy.innerText = ``;
}, 1000);
};
restartBtn.addEventListener('click', restart);
restart();
drawBoard();