emohamed/tictactoe.html

## tictactoe.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tic Tac Toe</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
	<script>
		"use strict"
		$(function() {
			var game = {
				board: null,
				board_size: 4,
				init: function() {
					game.board = game._get_empty_board();
				},

				_get_empty_board: function () {
					var board = [];
					for (var row_index = 0; row_index < game.board_size; row_index++) {
						var row = [];
						for (var col_index = 0; col_index < game.board_size; col_index++) {
							row.push(0);
						}
						board.push(row);
					}
					return board;
				},

				make_move: function(player_number, x, y) {
					game.board[x][y] = player_number;
				},

				has_winning_rows: function (board) {
					var row;
					var is_winning_row;

					for (var row_index = 0; row_index < game.board_size; row_index++) {
						row = board[row_index];
						if (row[0] == 0) {
							continue;
						}

						is_winning_row = true;

						for (var col_index = 1; col_index < game.board_size; col_index++) {
							if (row[col_index] !== row[0]) {
								is_winning_row = false;
								break;
							}
						}
						if (is_winning_row) {
							game.winner = row[0];
							return true;
						}
					}
					// we didn't get a winning row
					return false;
				},
				// Returns new board, rotated at 90 degrees.
				get_rotated_board: function (board) {
					var rotated_board = game._get_empty_board();
					for (var row_index = 0; row_index < game.board_size; row_index++) {
						for (var col_index = 0; col_index < game.board_size; col_index++) {
							rotated_board[col_index][row_index] = board[row_index][col_index];
						}
					}
					return rotated_board;
				},

				has_winning_straight_lines: function () {
					var rotated_board = game.get_rotated_board(game.board);
					return game.has_winning_rows(game.board) || game.has_winning_rows(rotated_board);
				},

				has_winning_left_to_right_diagonal: function (board) {
					var first_cell = board[0][0];
					if (first_cell == 0) {
						return false;
					}
					for (var i = 1; i < game.board_size; i++) {
						if (board[i][i] !== first_cell) {
							return false;
						}
					}
					game.winner = first_cell;
					return true;
				},

				has_winning_diagonals: function () {
					var rotated_board = game.get_rotated_board(game.board);
					return game.has_winning_left_to_right_diagonal(game.board) ||
						game.has_winning_left_to_right_diagonal(rotated_board);

				},

				has_winner: function () {
					return game.has_winning_straight_lines() || game.has_winning_diagonals();
				},
				end: function(winner) {
					alert("Player " + winner + " won. ");
				}
			}
			game.init();
			var PLAYER_1 = "X", PLAYER_2 = "O";
			var current_player = PLAYER_1;

			$('#board td').click(function() {
				var $td = $(this);
				var $tr = $td.parent();

				if ($.trim($td.text()) !== '') {
					alert("You can't play there. ");
					return;
				}

				game.make_move(current_player, $tr.index(), $td.index());
				$td.text(current_player);

				if (game.has_winner()) {
					alert("Game winner is " + game.winner);
				}

				if (current_player == PLAYER_1) {
					current_player = PLAYER_2;
				} else {
					current_player = PLAYER_1;
				}

			});
			window.game = game;
		})
	</script>
	<style>
		td { width: 20px; height: 20px; text-align: center; vertical-align: middle; }
	</style>
</head>
<body>
	<div class="shell">
		<table id="board" border="1">
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</div>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Tic Tac Toe</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
	<script>
	"use strict"
	$(function() {
	var game = {
	board: null,
	board_size: 4,
	init: function() {
	game.board = game._get_empty_board();
	},

	_get_empty_board: function () {
	var board = [];
	for (var row_index = 0; row_index < game.board_size; row_index++) {
	var row = [];
	for (var col_index = 0; col_index < game.board_size; col_index++) {
	row.push(0);
	}
	board.push(row);
	}
	return board;
	},

	make_move: function(player_number, x, y) {
	game.board[x][y] = player_number;
	},

	has_winning_rows: function (board) {
	var row;
	var is_winning_row;

	for (var row_index = 0; row_index < game.board_size; row_index++) {
	row = board[row_index];
	if (row[0] == 0) {
	continue;
	}

	is_winning_row = true;

	for (var col_index = 1; col_index < game.board_size; col_index++) {
	if (row[col_index] !== row[0]) {
	is_winning_row = false;
	break;
	}
	}
	if (is_winning_row) {
	game.winner = row[0];
	return true;
	}
	}
	// we didn't get a winning row
	return false;
	},
	// Returns new board, rotated at 90 degrees.
	get_rotated_board: function (board) {
	var rotated_board = game._get_empty_board();
	for (var row_index = 0; row_index < game.board_size; row_index++) {
	for (var col_index = 0; col_index < game.board_size; col_index++) {
	rotated_board[col_index][row_index] = board[row_index][col_index];
	}
	}
	return rotated_board;
	},

	has_winning_straight_lines: function () {
	var rotated_board = game.get_rotated_board(game.board);
	return game.has_winning_rows(game.board) \|\| game.has_winning_rows(rotated_board);
	},

	has_winning_left_to_right_diagonal: function (board) {
	var first_cell = board[0][0];
	if (first_cell == 0) {
	return false;
	}
	for (var i = 1; i < game.board_size; i++) {
	if (board[i][i] !== first_cell) {
	return false;
	}
	}
	game.winner = first_cell;
	return true;
	},

	has_winning_diagonals: function () {
	var rotated_board = game.get_rotated_board(game.board);
	return game.has_winning_left_to_right_diagonal(game.board) \|\|
	game.has_winning_left_to_right_diagonal(rotated_board);

	},

	has_winner: function () {
	return game.has_winning_straight_lines() \|\| game.has_winning_diagonals();
	},
	end: function(winner) {
	alert("Player " + winner + " won. ");
	}
	}
	game.init();
	var PLAYER_1 = "X", PLAYER_2 = "O";
	var current_player = PLAYER_1;

	$('#board td').click(function() {
	var $td = $(this);
	var $tr = $td.parent();

	if ($.trim($td.text()) !== '') {
	alert("You can't play there. ");
	return;
	}

	game.make_move(current_player, $tr.index(), $td.index());
	$td.text(current_player);

	if (game.has_winner()) {
	alert("Game winner is " + game.winner);
	}

	if (current_player == PLAYER_1) {
	current_player = PLAYER_2;
	} else {
	current_player = PLAYER_1;
	}

	});
	window.game = game;
	})
	</script>
	<style>
	td { width: 20px; height: 20px; text-align: center; vertical-align: middle; }
	</style>
	</head>
	<body>
	<div class="shell">
	<table id="board" border="1">
	<tr>
	<td> </td>
	<td> </td>
	<td> </td>
	<td> </td>
	</tr>
	<tr>
	<td> </td>
	<td> </td>
	<td> </td>
	<td> </td>
	</tr>
	<tr>
	<td> </td>
	<td> </td>
	<td> </td>
	<td> </td>
	</tr>
	<tr>
	<td> </td>
	<td> </td>
	<td> </td>
	<td> </td>
	</tr>
	</table>
	</div>
	</body>
	</html>