perborgen/tictactoe.html

## tictactoe.html
<!DOCTYPE HMTL>
<html>
<head>
<script type="text/javascript">

var canvas, ctx, index;
var o_img = new Image();
o_img.src = 'http://i.imgur.com/JxByHOT.png';
var x_img = new Image();
x_img.src = 'http://i.imgur.com/mgdXoSG.png';
var gameIsOn = true;
winner_declared = false;
var player = 1;
o_positions = [];
x_positions = [];
var moves = [];
winningNumbers = [[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],[1,5,9],[3,5,7],[1,2,3]];
allWinningCombinations = [[4,5,6],[4,6,5],[6,5,4],[7,8,9],[7,9,8],[9,8,7],[1,4,7],[1,7,4],[7,4,1],[2,5,8],[2,8,5],[8,5,2],[3,6,9],[3,9,6],[9,6,3],[1,5,9],[1,9,5],[9,5,1],[3,5,7],[3,7,5],[7,5,3],[1,2,3],[1,3,2],[3,2,1]];
corners = [1,3,7,9];
positions_left=[1,2,3,4,5,6,7,8,9];


window.onload = main;

function main(){
	canvas = document.createElement("canvas");
	canvas.width = 600;
	canvas.height = 600;
	ctx = canvas.getContext("2d");
	r1=ctx.rect(0,0,200,200);
	r2=ctx.rect(200,0,200,200);
	r3=ctx.rect(400,0,200,200);
	r4=ctx.rect(0,200,200,200);
	r5=ctx.rect(200,200,200,200);
	r6=ctx.rect(400,200,200,200);
	r7=ctx.rect(0,400,200,200);
	r8=ctx.rect(200,400,200,200);
	r9=ctx.rect(400,400,200,200);
	ctx.lineWidth = 3;
	ctx.stroke();
	document.body.appendChild(canvas);
	}


window.onclick = function (e){
	if (gameIsOn == true){
		if (e.pageX < 600 && e.pageY <600){
			cX = Math.floor(e.pageX/600*3);
			cY = Math.floor(e.pageY/600*3);
		}
		position = fetchPosition(cX,cY);
		avaibility = isAvailable(position);
			if (avaibility == false){
			}
			else if (avaibility == true) {
				makeMove(position);
			}
		}
		else if (gameIsOn == false){
			if (confirm("The game is over. Wanna play again?") == true){
				location.reload();
			}
			else {
				return;
		}
	}

}

// making the actual move
function makeMove(position) {
	index = positions_left.indexOf(position);
	positions_left.splice(index,1);
	addToPlayersList(position,player);
	fetchCoordinates(position);
	draw();
	checkResults();
}

// draw the latest move on the canvas
function draw(){
	size=200;
	if (player == 1){
		ctx.drawImage(o_img,cX*size,cY*size);
	}
	else if (player == -1) {
		ctx.drawImage(x_img,cX*size,cY*size);
	}
}


// trigger the computer's move if it's the computer's turn
function nextTurn(player){
	if (player == -1){
		computerMove();
	}
	else if (player== 1){
		return;
	}
}


// checking results after each move
function checkResults(){
		if (player==-1){
			player_check = x_positions;
		}
		else if (player==1){
			player_check = o_positions;
		}
		checkTwoInRow(player_check);
		checkForWin(player_check);
		player=player*-1; /* switch player turn */
		//checking if it's a tie
		if (positions_left.length>0 && winner_declared == false){
			nextTurn(player);
		}
		else if (positions_left.length==0 && winner_declared == false)
			{
			if (confirm("It's a tie! Want to play again?") == true)
			{
    			location.reload();
 			}
			else
			{
				gameIsOn= false;
			}
		}
}


//check if player has got 3 in a row
function checkForWin(player_check){
	for (x=0;x<winningNumbers.length; x++){
		count = 0;
		winner=winningNumbers[x];
		for (i=0;i<3;i++){
			for (j=0;j<player_check.length;j++){
				if (winner[i] == player_check[j]){
					count +=1;
					if (count==3){
						triggerConfirmBox(player);
						winner_declared= true;
						return;
					}
				}
			}
		}
	}
}


// check wether player has got two in a row
function checkTwoInRow(player_check){
		for (x=0; x < allWinningCombinations.length; x++){
			winner=allWinningCombinations[x];
			count = 0;
			for (i=0;i<2;i++){
				for (j=0;j<player_check.length;j++){
					if (winner[i] == player_check[j]){
						count += 1;
						if (count == 2){
							if (isAvailable(winner[2]) == true){
								// return the position for the final winning move
								return winner[2];
							}
						}
					}
				}
			}
		}
	}


// adding the latest position (1-9) to the player's array of positions
function addToPlayersList(position,player){
	if (player == -1){
		x_positions.push(position);
	}
	else if (player==1){
		o_positions.push(position);
	}
}

// fetch coordinates to enable the draw() function to draw properly on the canvas
function fetchCoordinates(num){
	switch(num){
		case 1:
			cX = 0;
			cY = 0;
			break;
		case 2:
			cX=1;
			cY=0;
			break;
		case 3:
			cX=2;
			cY=0;
			break;
		case 4:
			cX = 0;
			cY = 1;
			break;
		case 5:
			cX=1;
			cY=1;
			break;
		case 6:
			cX=2;
			cY=1;
			break;
		case 7:
			cX = 0;
			cY = 2;
			break;
		case 8:
			cX=1;
			cY=2;
			break;
		case 9:
			cX=2;
			cY=2;
			break;
	}
}


// get the position (from 1-9) of the current click, based upon the coordinates of the click
function fetchPosition(x,y){
	if (x == 0 && y==0){
		return 1;
	}
	else if (x==1 && y==0){
		return 2;
	}
	else if (x==2 && y==0){
		return 3;
	}
	else if (x==0 && y==1){
		return 4;
	}
	else if (x==1 && y==1){
		return 5;
	}
	else if (x==2 && y==1){
		return 6;
	}
	else if (x==0 && y==2){
		return 7;
	}
	else if (x==1 && y==2){
		return 8;
	}
	else if (x==2 && y==2){
		return 9;
	}
}


// checking if third position is available, on order to get 3 in a row
function isAvailable(pos){
	for (i = 0; i < x_positions.length; i ++){
		if (x_positions[i] == pos){
			return false;
		}
	}
	for (j = 0; j < o_positions.length; j ++){
		if (o_positions[j] == pos){
			return false;
		}
	}
	return true;
}

// checking if corners are available
function findAvailableCorners(){
	for (c = 0; i < positions_left.length; c ++){
		if (positions_left[c] == 1 || positions_left[c] == 3 || positions_left[c] == 7 ||positions_left[c] == 9){
	 		return positions_left[c];
	}
	return false;
	}
}


// the computer AI
function computerMove(){
	humans_last_spot_to_win = checkTwoInRow(o_positions);
	computers_last_spot_to_win = checkTwoInRow(x_positions);
	center = isAvailable(5);
	corner = findAvailableCorners();

	//check is there is a winning possibility
	if (computers_last_spot_to_win){
		makeMove(computers_last_spot_to_win);
	}

	//check if human player has a winning possibility that needs to be blocked
	else if (humans_last_spot_to_win){
		makeMove(humans_last_spot_to_win);
	}

	// check if center is available
	else if (center){
		makeMove(5);
	}

	// check if a corner is available
	else if (corner){
		makeMove(corner);
	}

	// choose a random position
	else {
		length = positions_left.length;
		random_position_in_array = Math.floor(Math.random()*length);
		random_position = positions_left[random_position_in_array];
		makeMove(random_position);
	}
}


// declare a winner and ask for a rematch
function triggerConfirmBox(winner) {
	if (winner == -1){
 		if (confirm("Computer won! Want a rematch?") == true){
    		location.reload();
 		}
 		else {
 			gameIsOn= false;
 		}

	}
	else if (winner == 1){
 		if (confirm("Congrats, you won! The computer wants a rematch. Are you down?") ){
	    		location.reload();
 		}
 		else{
 			gameIsOn= false;
 		}
	}

}
</script>
</head>
<body>
</body>
</html>
	<!DOCTYPE HMTL>
	<html>
	<head>
	<script type="text/javascript">

	var canvas, ctx, index;
	var o_img = new Image();
	o_img.src = 'http://i.imgur.com/JxByHOT.png';
	var x_img = new Image();
	x_img.src = 'http://i.imgur.com/mgdXoSG.png';
	var gameIsOn = true;
	winner_declared = false;
	var player = 1;
	o_positions = [];
	x_positions = [];
	var moves = [];
	winningNumbers = [[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],[1,5,9],[3,5,7],[1,2,3]];
	allWinningCombinations = [[4,5,6],[4,6,5],[6,5,4],[7,8,9],[7,9,8],[9,8,7],[1,4,7],[1,7,4],[7,4,1],[2,5,8],[2,8,5],[8,5,2],[3,6,9],[3,9,6],[9,6,3],[1,5,9],[1,9,5],[9,5,1],[3,5,7],[3,7,5],[7,5,3],[1,2,3],[1,3,2],[3,2,1]];
	corners = [1,3,7,9];
	positions_left=[1,2,3,4,5,6,7,8,9];


	window.onload = main;

	function main(){
	canvas = document.createElement("canvas");
	canvas.width = 600;
	canvas.height = 600;
	ctx = canvas.getContext("2d");
	r1=ctx.rect(0,0,200,200);
	r2=ctx.rect(200,0,200,200);
	r3=ctx.rect(400,0,200,200);
	r4=ctx.rect(0,200,200,200);
	r5=ctx.rect(200,200,200,200);
	r6=ctx.rect(400,200,200,200);
	r7=ctx.rect(0,400,200,200);
	r8=ctx.rect(200,400,200,200);
	r9=ctx.rect(400,400,200,200);
	ctx.lineWidth = 3;
	ctx.stroke();
	document.body.appendChild(canvas);
	}


	window.onclick = function (e){
	if (gameIsOn == true){
	if (e.pageX < 600 && e.pageY <600){
	cX = Math.floor(e.pageX/600*3);
	cY = Math.floor(e.pageY/600*3);
	}
	position = fetchPosition(cX,cY);
	avaibility = isAvailable(position);
	if (avaibility == false){
	}
	else if (avaibility == true) {
	makeMove(position);
	}
	}
	else if (gameIsOn == false){
	if (confirm("The game is over. Wanna play again?") == true){
	location.reload();
	}
	else {
	return;
	}
	}

	}

	// making the actual move
	function makeMove(position) {
	index = positions_left.indexOf(position);
	positions_left.splice(index,1);
	addToPlayersList(position,player);
	fetchCoordinates(position);
	draw();
	checkResults();
	}

	// draw the latest move on the canvas
	function draw(){
	size=200;
	if (player == 1){
	ctx.drawImage(o_img,cXsize,cYsize);
	}
	else if (player == -1) {
	ctx.drawImage(x_img,cXsize,cYsize);
	}
	}


	// trigger the computer's move if it's the computer's turn
	function nextTurn(player){
	if (player == -1){
	computerMove();
	}
	else if (player== 1){
	return;
	}
	}



	// checking results after each move
	function checkResults(){
	if (player==-1){
	player_check = x_positions;
	}
	else if (player==1){
	player_check = o_positions;
	}
	checkTwoInRow(player_check);
	checkForWin(player_check);
	player=player-1; / switch player turn */
	//checking if it's a tie
	if (positions_left.length>0 && winner_declared == false){
	nextTurn(player);
	}
	else if (positions_left.length==0 && winner_declared == false)
	{
	if (confirm("It's a tie! Want to play again?") == true)
	{
	location.reload();
	}
	else
	{
	gameIsOn= false;
	}
	}
	}


	//check if player has got 3 in a row
	function checkForWin(player_check){
	for (x=0;x<winningNumbers.length; x++){
	count = 0;
	winner=winningNumbers[x];
	for (i=0;i<3;i++){
	for (j=0;j<player_check.length;j++){
	if (winner[i] == player_check[j]){
	count +=1;
	if (count==3){
	triggerConfirmBox(player);
	winner_declared= true;
	return;
	}
	}
	}
	}
	}
	}


	// check wether player has got two in a row
	function checkTwoInRow(player_check){
	for (x=0; x < allWinningCombinations.length; x++){
	winner=allWinningCombinations[x];
	count = 0;
	for (i=0;i<2;i++){
	for (j=0;j<player_check.length;j++){
	if (winner[i] == player_check[j]){
	count += 1;
	if (count == 2){
	if (isAvailable(winner[2]) == true){
	// return the position for the final winning move
	return winner[2];
	}
	}
	}
	}
	}
	}
	}



	// adding the latest position (1-9) to the player's array of positions
	function addToPlayersList(position,player){
	if (player == -1){
	x_positions.push(position);
	}
	else if (player==1){
	o_positions.push(position);
	}
	}

	// fetch coordinates to enable the draw() function to draw properly on the canvas
	function fetchCoordinates(num){
	switch(num){
	case 1:
	cX = 0;
	cY = 0;
	break;
	case 2:
	cX=1;
	cY=0;
	break;
	case 3:
	cX=2;
	cY=0;
	break;
	case 4:
	cX = 0;
	cY = 1;
	break;
	case 5:
	cX=1;
	cY=1;
	break;
	case 6:
	cX=2;
	cY=1;
	break;
	case 7:
	cX = 0;
	cY = 2;
	break;
	case 8:
	cX=1;
	cY=2;
	break;
	case 9:
	cX=2;
	cY=2;
	break;
	}
	}


	// get the position (from 1-9) of the current click, based upon the coordinates of the click
	function fetchPosition(x,y){
	if (x == 0 && y==0){
	return 1;
	}
	else if (x==1 && y==0){
	return 2;
	}
	else if (x==2 && y==0){
	return 3;
	}
	else if (x==0 && y==1){
	return 4;
	}
	else if (x==1 && y==1){
	return 5;
	}
	else if (x==2 && y==1){
	return 6;
	}
	else if (x==0 && y==2){
	return 7;
	}
	else if (x==1 && y==2){
	return 8;
	}
	else if (x==2 && y==2){
	return 9;
	}
	}



	// checking if third position is available, on order to get 3 in a row
	function isAvailable(pos){
	for (i = 0; i < x_positions.length; i ++){
	if (x_positions[i] == pos){
	return false;
	}
	}
	for (j = 0; j < o_positions.length; j ++){
	if (o_positions[j] == pos){
	return false;
	}
	}
	return true;
	}

	// checking if corners are available
	function findAvailableCorners(){
	for (c = 0; i < positions_left.length; c ++){
	if (positions_left[c] == 1 \|\| positions_left[c] == 3 \|\| positions_left[c] == 7 \|\|positions_left[c] == 9){
	return positions_left[c];
	}
	return false;
	}
	}


	// the computer AI
	function computerMove(){
	humans_last_spot_to_win = checkTwoInRow(o_positions);
	computers_last_spot_to_win = checkTwoInRow(x_positions);
	center = isAvailable(5);
	corner = findAvailableCorners();

	//check is there is a winning possibility
	if (computers_last_spot_to_win){
	makeMove(computers_last_spot_to_win);
	}

	//check if human player has a winning possibility that needs to be blocked
	else if (humans_last_spot_to_win){
	makeMove(humans_last_spot_to_win);
	}

	// check if center is available
	else if (center){
	makeMove(5);
	}

	// check if a corner is available
	else if (corner){
	makeMove(corner);
	}

	// choose a random position
	else {
	length = positions_left.length;
	random_position_in_array = Math.floor(Math.random()*length);
	random_position = positions_left[random_position_in_array];
	makeMove(random_position);
	}
	}


	// declare a winner and ask for a rematch
	function triggerConfirmBox(winner) {
	if (winner == -1){
	if (confirm("Computer won! Want a rematch?") == true){
	location.reload();
	}
	else {
	gameIsOn= false;
	}

	}
	else if (winner == 1){
	if (confirm("Congrats, you won! The computer wants a rematch. Are you down?") ){
	location.reload();
	}
	else{
	gameIsOn= false;
	}
	}

	}
	</script>
	</head>
	<body>
	</body>
	</html>