<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
});
Moreover, the process of mobile application development is a fascinating journey of collaboration and discovery. Behind every successful app lies a team of dedicated developers, designers, and strategists who work tirelessly to bring ideas to life. From conceptualization and prototyping to testing and launch, each phase is marked by creativity, iteration, and a relentless pursuit of excellence.
ReplyDelete