-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
126 lines (80 loc) · 2.06 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
126
const items = document.getElementsByTagName('span');
const board = document.querySelector('.board');
const button = document.getElementsByTagName('button')[0];
const winStatus = document.getElementsByTagName('h1')[0];
let turn = 0;
let boardItems = [];
const winConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
class Tile {
// constructor is used for setting up the variables
constructor (domNode, index) {
// set initial content as empty
this.content = '';
// this is the node itself
this.container = domNode;
this.index = index;
this.initialize();
}
addContent () {
this.container.innerHTML = this.content;
}
clickHandler () {
if ( this.content === '' ) {
if ( turn === 0 ) {
this.content = 'X';
turn = 1;
} else {
this.content = 'O';
turn = 0;
}
boardItems[this.index] = turn;
}
return this.addContent();
}
initialize () {
this.container.addEventListener('click', this.clickHandler.bind(this));
}
}
for (let i = 0; i < items.length; i++) {
// pass in the node and index
items[i] = new Tile(items[i], i);
}
function checkWin() {
let winner;
for ( let condition of winConditions ) {
if ( boardItems[condition[0]] === boardItems[condition[1]]
&& boardItems[condition[0]] === boardItems[condition[2]]
&& boardItems[condition[0]] !== undefined ) {
if ( turn === 0 ) {
winner = 'O';
} else {
winner = 'X';
}
board.classList.add('finished');
winStatus.innerHTML = `${winner} Wins!`;
}
}
}
board.addEventListener('click', checkWin);
function resetGame() {
turn = 0;
boardItems = [];
board.classList.remove('finished');
winStatus.innerHTML = '';
for (let i = 0; i < items.length; i++) {
let newItem = document.createElement('span');
items[i].parentNode.replaceChild(newItem, items[i]);
// pass in the node and index
items[i] = new Tile(items[i], i);
}
}
button.addEventListener('click', resetGame, false);