laurenzlong · July 10, 2015 02:37
diff --git a/game b/game
 <html>
 <head>	
 	<title>Tic Tac Toe</title>
 	<link rel="stylesheet" type="text/css" href="gameStyle.css">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 	<script src="gameScript.js"></script>
 </head>

 <body>
    <table id='board'>
  		<tbody>
 		</tbody>
 	</table>
 	
 	<p id='hint-text'></p>
 </body>
 </html>
diff --git a/gameScript b/gameScript
 var board = [];
 var currentPlayer = "X"; 
 var totalRows = 3;
 var totalCols = 3;
 var lines = [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6]]; // all the possible lines
 var winner = null;
 var totalMoves = 0; //total number of moves made this game

 $( document ).ready(function() {
    var boardElem = document.getElementById('board');
 	boardElem.addEventListener("click", boardClicked, false);
 	initBoard();
 });

 function initBoard(){
 	var i, j;
 	for (i=1; i<=totalRows; i++){
 		$('tbody').append('<tr></tr>');
 		for (j=1; j<=totalCols; j++){
 			board[index(i,j)] = null;
 			$('tbody tr:nth-child('+i+')').append('<td><div class="square"></div></td>');
 		}
 	}
 	$('#hint-text').text('Current Turn Belongs To: '+currentPlayer);
 	return 0;
 }

 function boardClicked(e){
 	var x = e.clientX;
    var y = e.clientY;

    var elementClicked = document.elementFromPoint(x, y);
    var index = $('.square').index(elementClicked);

    //console.log('clicked on index: ', index)

    if (board[index]!= null){
    	console.log('there is already a piece there')
    }
    else{
    	if (winner==null){
    		board[index]=currentPlayer;
    		updateBoardPic();
    		totalMoves++;
    		checkGameOver();
    		if (winner==null){
    			currentPlayer = getOtherPlayer();
    			$('#hint-text').text('Current Turn Belongs To: '+currentPlayer);
    		} 
    		else if (winner=="neither"){
    			$('#hint-text').text('Game Over. It is a draw');
    		}
    		else{
    			$('#hint-text').text('The Winner Is: '+winner);
    		}
    	}
    }
 }

 function checkGameOver(){
 	if (totalMoves==9)
 		winner = "neither";
 	for (var i=0; i<lines.length; i++){
 		var pos1 = (lines[i])[0];
 		var pos2 = (lines[i])[1];
 		var pos3 = (lines[i])[2];
 		if (board[pos1]!=null){
 			if ((board[pos1]==board[pos2]) && (board[pos2]==board[pos3])){
 				winner = board[pos1];
 				console.log("found winner: ", winner)
 				break;
 			}
 		}
 	}
 }

 function getOtherPlayer(){
 	if (currentPlayer == 'X')
 		return 'O';
 	else 
 		return 'X';
 }

 function index(row,col){
 	// gives index of element in board array, based on row and col numbers
 	if (row<1)
 		return null;
 	if (col<1)
 		return null;
 	var arrayIndex = (row-1)*totalRows+col-1;
 	return arrayIndex;
 }

 function updateBoardPic(){
 	for (var i=1; i<=totalRows; i++){
 		for (var j=1; j<=totalCols; j++){
 			if (board[index(i,j)]=="X"){
 				$('tbody tr:nth-child('+i+') :nth-child('+j+') :nth-child(1)').html('<div class="XnO">X</div>');
 			}
 			if (board[index(i,j)]=="O"){
 				$('tbody tr:nth-child('+i+') :nth-child('+j+') :nth-child(1)').html('<div class="XnO">O</div>');
 			}
 		}
 	}
 	return 0;
 }
diff --git a/gameStyle b/gameStyle
 body{
 	font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
 	text-align: center;
 }

 #board{
 	margin-left: auto;
    margin-right: auto;
    background-color:whitesmoke;
 }

 .square{
 	width: 54px;
 	height: 54px;
 	background-color: #999966;
 }

 .XnO{
 	font-size: 40;
 	text-align: center;
 }
	<html>
	<head>
	<title>Tic Tac Toe</title>
	<link rel="stylesheet" type="text/css" href="gameStyle.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="gameScript.js"></script>
	</head>

	<body>
	<table id='board'>
	<tbody>
	</tbody>
	</table>

	<p id='hint-text'></p>
	</body>
	</html>
	var board = [];
	var currentPlayer = "X";
	var totalRows = 3;
	var totalCols = 3;
	var lines = [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6]]; // all the possible lines
	var winner = null;
	var totalMoves = 0; //total number of moves made this game

	$( document ).ready(function() {
	var boardElem = document.getElementById('board');
	boardElem.addEventListener("click", boardClicked, false);
	initBoard();
	});

	function initBoard(){
	var i, j;
	for (i=1; i<=totalRows; i++){
	$('tbody').append('<tr></tr>');
	for (j=1; j<=totalCols; j++){
	board[index(i,j)] = null;
	$('tbody tr:nth-child('+i+')').append('<td><div class="square"></div></td>');
	}
	}
	$('#hint-text').text('Current Turn Belongs To: '+currentPlayer);
	return 0;
	}

	function boardClicked(e){
	var x = e.clientX;
	var y = e.clientY;

	var elementClicked = document.elementFromPoint(x, y);
	var index = $('.square').index(elementClicked);

	//console.log('clicked on index: ', index)

	if (board[index]!= null){
	console.log('there is already a piece there')
	}
	else{
	if (winner==null){
	board[index]=currentPlayer;
	updateBoardPic();
	totalMoves++;
	checkGameOver();
	if (winner==null){
	currentPlayer = getOtherPlayer();
	$('#hint-text').text('Current Turn Belongs To: '+currentPlayer);
	}
	else if (winner=="neither"){
	$('#hint-text').text('Game Over. It is a draw');
	}
	else{
	$('#hint-text').text('The Winner Is: '+winner);
	}
	}
	}
	}

	function checkGameOver(){
	if (totalMoves==9)
	winner = "neither";
	for (var i=0; i<lines.length; i++){
	var pos1 = (lines[i])[0];
	var pos2 = (lines[i])[1];
	var pos3 = (lines[i])[2];
	if (board[pos1]!=null){
	if ((board[pos1]==board[pos2]) && (board[pos2]==board[pos3])){
	winner = board[pos1];
	console.log("found winner: ", winner)
	break;
	}
	}
	}
	}

	function getOtherPlayer(){
	if (currentPlayer == 'X')
	return 'O';
	else
	return 'X';
	}

	function index(row,col){
	// gives index of element in board array, based on row and col numbers
	if (row<1)
	return null;
	if (col<1)
	return null;
	var arrayIndex = (row-1)*totalRows+col-1;
	return arrayIndex;
	}

	function updateBoardPic(){
	for (var i=1; i<=totalRows; i++){
	for (var j=1; j<=totalCols; j++){
	if (board[index(i,j)]=="X"){
	$('tbody tr:nth-child('+i+') :nth-child('+j+') :nth-child(1)').html('<div class="XnO">X</div>');
	}
	if (board[index(i,j)]=="O"){
	$('tbody tr:nth-child('+i+') :nth-child('+j+') :nth-child(1)').html('<div class="XnO">O</div>');
	}
	}
	}
	return 0;
	}
	body{
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	text-align: center;
	}

	#board{
	margin-left: auto;
	margin-right: auto;
	background-color:whitesmoke;
	}

	.square{
	width: 54px;
	height: 54px;
	background-color: #999966;
	}

	.XnO{
	font-size: 40;
	text-align: center;
	}