<html>
02
03
<head>
04
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
05
<script src="tictactoe.js"></script>
06
07
<style>
08
09
table.board {
10
border: 1px solid green;
11
height: 600px;
12
width: 600px;
13
}
14
15
body {
16
text-align: center;
17
align: center;
18
}
19
20
td {
21
height: 200px;
22
width: 200px;
23
text-align: center;
24
vertical-align: middle;
25
font-size: 100px;
26
font-weight: bold;
27
font-color: green;
28
font-family: geniva, verdana, helvetica;
29
border: 1px solid green;
30
}
31
32
#menu {
33
text-align: center;
34
position: absolute;
35
width: 400;
36
height: 400;
37
margin-left: 100px;
38
margin-top: 100px;
39
border: 5px double red;
40
display: none;
41
vertical-align: middle;
42
background-color: white;
43
}
44
45
#play_again {
46
font-size: 20px;
47
color: green;
48
}
49
50
</style>
51
52
53
</head>
54
<body>
55
56
<table border="0px" align="center">
57
<tr><td>
58
<div id="menu"></div>
59
<div id="board"></div>
60
</td></tr>
61
</table>
62
63
</body>
tictactoe.js
view sourceprint?
01
/* Main Game Handling class */
02
var TicTacToe = {
03
turn: "O", // Keeps a record of who's turn it is
04
board: ["", "", "", "", "", "", "", "", "", ""], // Keeps a record of the TicTacToe Board
05
win: false, // records who won if the game is over
06
07
/* Clears and starts a new game with a new board */
08
restartGame: function() {
09
// Draw the board
10
var board_table = '<table class="board" border="0px" cellpadding="0px" cellspacing="0px" align="center"><tr><td id="ttt0"> </td><td id="ttt1"> </td><td id="ttt2"> </td></tr><tr><td id="ttt3"> </td><td id="ttt4"> </td><td id="ttt5"> </td></tr><tr><td id="ttt6"> </td><td id="ttt7"> </td><td id="ttt8"> </td></tr></table>';
11
$("#board").html(board_table);
12
$("#menu").hide();
13
14
// clear the board
15
this.board = ["", "", "", "", "", "", "", "", "", ""];
16
17
// Add on-click events to each of the boxes of the board
18
$("#board td").click(function(e) {
19
TicTacToe.move( e.target.id );
20
});
21
22
},
23
24
/* Handles clicks spaces on the board */
25
move: function(id) {
26
var space = $("#" + id); // Board space table element
27
var num = id.replace("ttt", ""); // # representing the space on the board
28
29
// If no one's gone there, and the game isn't over, go there!
30
if (!this.board[num] && !this.win) {
31
space.html( this.turn );
32
this.board[num] = this.turn;
33
this.nextTurn(); // End turn
34
}
35
},
36
37
/* Iterate turn and check if anyone one yet */
38
nextTurn: function() {
39
this.turn = (this.turn == "O") ? "X" : "O";
40
this.win = this.check4Win();
41
if (this.win) {
42
this.endGame();
43
}
44
},
45
46
/* Display who won and options for new games */
47
endGame: function() {
48
49
if (this.win == "Cat") {
50
$("#menu").html("Cats Game.");
51
} else {
52
$("#menu").html(this.win + " wins!");
53
}
54
$("#menu").append("<div id='play_again'>Play Again</div>");
55
56
// Button for playing again.
57
$("#play_again").click(function () { TicTacToe.restartGame(); });
58
$("#menu").show();
59
this.win = false;
60
61
},
62
63
// If any of these patters of board spaces have all X's or all O's somebody won!
64
wins: [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [6,4,2]],
65
66
/* Check for whether someone won the game of it was a Cat's game. */
67
check4Win: function() {
68
69
// Loop through all possible winning combinations
70
for (k in this.wins){
71
var pattern = this.wins[k];
72
var p = this.board[pattern[0]] + this.board[pattern[1]] + this.board[pattern[2]];
73
if (p == "XXX") {
74
return "X"; // X Won!
75
} else if (p == "OOO") {
76
return "O"; // O Won!
77
}
78
}
79
80
// Check if all spaces in the board are filled, then its a Cat's game
81
var cnt = 0;
82
for (s in this.board) {
83
if (this.board[s]) { cnt+=1; }
84
}
85
if (cnt == 9) {
86
return "Cat"; // Cat's game!
87
}
88
}
89
};
90
91
$(document).ready(function() {
92
93
// Start a game!
94
TicTacToe.restartGame();
95
});
