laurenzlong/game

## 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>

## 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;
}

## 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;
	}