-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
101 lines (95 loc) · 3.64 KB
/
index.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
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
<!doctype html>
<html>
<head>
<style>
button {
width: 30%;
}
</style>
</head>
<body>
<h1>Tic-Tac-Toe</h1>
<p id="winner"></p>
<section class="board">
<button id="1"></button>
<button id="2"></button>
<button id="3"></button>
<button id="4"></button>
<button id="5"></button>
<button id="6"></button>
<button id="7"></button>
<button id="8"></button>
<button id="9"></button>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
jQuery(function($){
var socket = io.connect('http://localhost'),
$board = $(".board"),
ticTacToe = {
whoseTurn: "X",
changeWhoseTurn: function(){
if (this.whoseTurn === "X") {
this.whoseTurn = "O";
} else {
this.whoseTurn = "X";
}
},
findWinner: function(mark){
var buttons = $board.children( "button" )
winner = false;
if (buttons[0].innerHTML === mark && buttons[1].innerHTML === mark && buttons[2].innerHTML === mark) {
winner = true;
} else if (buttons[3].innerHTML === mark && buttons[4].innerHTML === mark && buttons[5].innerHTML === mark) {
winner = true;
} else if (buttons[6].innerHTML === mark && buttons[7].innerHTML === mark && buttons[8].innerHTML === mark) {
winner = true;
} else if (buttons[0].innerHTML === mark && buttons[3].innerHTML === mark && buttons[6].innerHTML === mark) {
winner = true;
} else if (buttons[1].innerHTML === mark && buttons[4].innerHTML === mark && buttons[7].innerHTML === mark) {
winner = true;
} else if (buttons[2].innerHTML === mark && buttons[5].innerHTML === mark && buttons[8].innerHTML === mark) {
winner = true;
} else if (buttons[0].innerHTML === mark && buttons[4].innerHTML === mark && buttons[8].innerHTML === mark) {
winner = true;
} else if (buttons[2].innerHTML === mark && buttons[4].innerHTML === mark && buttons[6].innerHTML === mark) {
winner = true;
}
return winner;
}
},
channel = "heyo";
socket.on("connect", function() {
socket.emit("joinChannel", {
channel: channel
});
});
socket.on("game over", function(data) {
console.log("game over");
var winner = data.winner;
$("#winner").html(winner + " WINS!");
});
socket.on("turn played", function(data){
var spotPlayed = data.spotPlayed,
whoPlayed = data.whoPlayed;
$("#" + spotPlayed).html(whoPlayed);
if (ticTacToe.findWinner("X") || ticTacToe.findWinner("O")) {
socket.emit("winner", whoPlayed);
} else {
ticTacToe.changeWhoseTurn();
}
});
$board.on( "click", "button", function(){
$(this).html(ticTacToe.whoseTurn);
socket.emit("turn played", { "whoPlayed": ticTacToe.whoseTurn, "spotPlayed": $(this).attr("id") });
if (ticTacToe.findWinner("X") || ticTacToe.findWinner("O")) {
socket.emit("winner", ticTacToe.whoseTurn);
} else {
ticTacToe.changeWhoseTurn();
}
});
});
</script>
</body>
</html>