-
Notifications
You must be signed in to change notification settings - Fork 2
/
TicTacToe.html
34 lines (34 loc) · 1.58 KB
/
TicTacToe.html
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
<!DOCTYPE html>
<html>
<style>
.cell {
width: 50px;
height: 50px;
display: inline-block;
border: 1px solid black;
font-size: 50px;
margin: 0px;
padding: 0px;
}
</style>
<body>
<div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>
<div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>
<div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>
</body>
<script>
(function (d){
player = true;
function clsCells(arr) {for(var i = 0, len = arr.length;i < len; i++) { arr[i].innerText = ""};};
d.onclick = function (e) {
if ((e.target.className == "cell") && (e.target.innerText == "")) {
if (player){ e.target.innerText = "X"; player = false; } else { e.target.innerText = "O"; player = true; }
var arr = d.querySelectorAll('.cell'), v = [], X="XXX", O="OOO";
for(var i = 0, len = arr.length;i < len; i++) { v[i] = arr[i].innerText };
if ((v[0] + v[1] + v[2] == X) || (v[3] + v[4] + v[5] == X) || (v[6] + v[7] + v[8] == X) || (v[0] + v[3] + v[6] == X) || (v[1] + v[4] + v[7] == X) || (v[2] + v[5] + v[8] == X) || (v[0] + v[4] + v[8] == X) || (v[2] + v[4] + v[6] == X)) {alert("X wins!"); clsCells(arr);}
if ((v[0] + v[1] + v[2] == O) || (v[3] + v[4] + v[5] == O) || (v[6] + v[7] + v[8] == O) || (v[0] + v[3] + v[6] == O) || (v[1] + v[4] + v[7] == O) || (v[2] + v[5] + v[8] == O) || (v[0] + v[4] + v[8] == O) || (v[2] + v[4] + v[6] == O)) {alert("O wins!"); clsCells(arr);}
}
};
})(document);
</script>
</html>