$(document).ready(function() {
var ticker;
var scoreNaught = 0;
var scoreCross = 0;
var initialState = true;
var initialBoard = [0,1,2,3,4,5,6,7,8];
var huPlayer = "O";
var aiPlayer = "X";
var arrFunctions = [sq1Function, sq2Function, sq3Function,
sq4Function, sq5Function, sq6Function,
sq7Function, sq8Function, sq9Function];
var nextPlayer;
var count = 1;
var count2 = 0;
crossTurn();
drawGameBoard();
function drawGameBoard() {
$("#step").html("Start game or select player");
$(".vLine").css("height", "0");
$(".hLine").css("width", "0");
$("#midContainer").css("cursor", "");
$("#sqr1").html("");
$("#sqr2").html("");
$("#sqr3").html("");
$("#sqr4").html("");
$("#sqr5").html("");
$("#sqr6").html("");
$("#sqr7").html("");
$("#sqr8").html("");
$("#sqr9").html("");
ticker = 1;
$("#line1").animate({height: '220px'}, "fast", function() {
$("#line2").animate({height: '220px'}, "fast", function() {
$("#line3").animate({width: '220px'}, "fast", function() {
$("#line4").animate({width: '220px'}, "fast");
});
});
});
}
function drawCross(position) {
var id1 = position + "1";
var id2 = position + "2";
$("#"+position).html('<div class = "cross" id ='+id1+'></div><div class = "cross cross2" id = '+id2+'></div>');
$("#"+id1).fadeIn("fast", function() {
$("#"+id2).fadeIn("fast");
});
initialState = false;
$("#playerNaught").off("click");
}
function drawNaught(position) {
var id1 = position + "1";
$("#"+position).html('<div class = "naught" id = '+id1+'></div>');
$("#"+id1).slideDown("normal");
}
function crossTurn() {
ticker = 1;
setTimeout(function() {
if(!initialState) {
$("#step").html("✖ Turn");
}
$("#playerCross").css('border-bottom', '3px solid #885ead');
$("#playerCross").css('box-shadow', '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)');
$("#playerNaught").css('border-bottom', '');
$("#playerNaught").css('box-shadow', '0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19)');
}, 400);
}
function naughtTurn() {
ticker = 2;
setTimeout(function() {
$("#step").html("⚪ Turn");
$("#playerNaught").css('border-bottom', '3px solid #885ead');
$("#playerNaught").css('box-shadow', '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)');
$("#playerCross").css('border-bottom', '');
$("#playerCross").css('box-shadow', '0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19)');
}, 400);
}
function displayEndGame(player) {
console.log("Winner");
setTimeout(function() {
$("#midContainer").css('cursor', 'pointer');
$("#midContainer").on("click", restartGame);
$("#step").html("Game Over");
$("#sqr1").html("");
$("#sqr2").html("");
$("#sqr3").html("");
$("#sqr4").html("");
$("#sqr5").html("");
$("#sqr6").html("");
$("#sqr7").html("");
$("#sqr8").html("");
$("#sqr9").html("");
$(".vLine").css("height", "0");
$(".hLine").css("width", "0");
}, 1000);
setTimeout(function() {
if(player === huPlayer){
scoreNaught++;
$(".bigNaught").slideDown("normal");
$("#nScore").html(scoreNaught);
$(".endGame").html("Winner winner, chicken dinner!");
}
else if(player === aiPlayer) {
scoreCross++;
$(".bigCross").slideDown("normal");
$(".bigCross cross2").slideDown("normal");
$("#cScore").html(scoreCross);
$(".endGame").html("Winner winner, chicken dinner!");
}
else if(player === "draw") {
$(".medCross").slideDown("normal");
$(".medCross cross2").slideDown("normal");
$(".medNaught").slideDown("normal");
$(".endGame").html("Draw!");
}
$(".endGame").slideDown("normal");
}, 1500)
}
$("#playerNaught").on("click", naughtFunction);
function naughtFunction() {
$("#playerNaught").off("click");
count++;
initialState = false;
if(count2 == 0) {
var aiMove = minimax(initialBoard, aiPlayer).index;
count2 = 1;
return arrFunctions[aiMove]();
}
}
//----------------------------------------------------------------------------
$("#sqr1").on("click", sq1Function);
function sq1Function() {
if(initialBoard[0] != 0) {
return;
}
if(ticker == 1) {
drawCross("sqr1");
naughtTurn();
initialBoard[0] = aiPlayer;
nextPlayer = huPlayer;
if(checkWin(initialBoard, aiPlayer)) {
displayEndGame(aiPlayer);
}
}
else {
drawNaught("sqr1");
crossTurn();
initialBoard[0] = huPlayer;
nextPlayer = aiPlayer;
if(checkWin(initialBoard, huPlayer)) {
displayEndGame(huPlayer);
}
}
console.log(count);
count++;
if(count%2 === 0) {
setTimeout(function() {
aiMove = minimax(initialBoard, nextPlayer).index;
return arrFunctions[aiMove]();
}, 500);
}
console.log("look");
if(emptySquares(initialBoard).length === 0) {
displayEndGame("draw");
}
}
$("#sqr2").on("click", sq2Function);
function sq2Function() {
if(initialBoard[1] != 1) {
return;
}
if(ticker == 1) {
drawCross("sqr2");
naughtTurn();
initialBoard[1] = aiPlayer;
nextPlayer = huPlayer;
if(checkWin(initialBoard, aiPlayer)) {
displayEndGame(aiPlayer);
}
}
else {
drawNaught("sqr2");
crossTurn();
initialBoard[1] = huPlayer;
nextPlayer = aiPlayer;
if(checkWin(initialBoard, huPlayer)) {
displayEndGame(huPlayer);
}
}
count++;
if(count%2 === 0) {
setTimeout(function() {
var aiMove = minimax(initialBoard, nextPlayer).index;
return arrFunctions[aiMove]();
}, 500);
}
if(emptySquares(initialBoard).length === 0) {
displayEndGame("draw");
}
}
$("#sqr3").on("click", sq3Function);
function sq3Function() {
if(initialBoard[2] != 2) {
return;
}
if(ticker == 1) {
drawCross("sqr3");
naughtTurn();
initialBoard[2] = aiPlayer;
nextPlayer = huPlayer;
if(checkWin(initialBoard, aiPlayer)) {
displayEndGame(aiPlayer);
}
}
else {
drawNaught("sqr3");
crossTurn();
initialBoard[2] = huPlayer;
nextPlayer = aiPlayer;
if(checkWin(initialBoard, huPlayer)) {
displayEndGame(huPlayer);
}
}
count++;
if(count%2 === 0) {
setTimeout(function() {
var aiMove = minimax(initialBoard, nextPlayer).index;
return arrFunctions[aiMove]();
}, 500);
}
if(emptySquares(initialBoard).length === 0) {
displayEndGame("draw");
}
}
$("#sqr4").on("click", sq4Function);
function sq4Function() {
if(initialBoard[3] != 3) {
return;
}
if(ticker == 1) {
drawCross("sqr4");
naughtTurn();
initialBoard[3] = aiPlayer;
nextPlayer = huPlayer;
if(checkWin(initialBoard, aiPlayer)) {
displayEndGame(aiPlayer);
}
}
else {
drawNaught("sqr4");
crossTurn();
initialBoard[3] = huPlayer;
nextPlayer = aiPlayer;
if(checkWin(initialBoard, huPlayer)) {
displayEndGame(huPlayer);
}
}
count++;
if(count%2 === 0) {
setTimeout(function() {
var aiMove = minimax(initialBoard, nextPlayer).index;
return arrFunctions[aiMove]();
}, 500);
}
if(emptySquares(initialBoard).length === 0) {
displayEndGame("draw");
}
}
$("#sqr5").on("click", sq5Function);
function sq5Function() {
if(initialBoard[4] != 4) {
return;
}
if(ticker == 1) {
drawCross("sqr5");
naughtTurn();
initialBoard[4] = aiPlayer;
nextPlayer = huPlayer;
if(checkWin(initialBoard, aiPlayer)) {
displayEndGame(aiPlayer);
}
}
else {
drawNaught("sqr5");
crossTurn();
initialBoard[4] = huPlayer;
nextPlayer = aiPlayer;
if(checkWin(initialBoard, huPlayer)) {
displayEndGame(huPlayer);
}
}
count++;
if(count%2 === 0) {
setTimeout(function() {
var aiMove = minimax(initialBoard, nextPlayer).index;
return arrFunctions[aiMove]();
}, 500);
}
if(emptySquares(initialBoard).length === 0) {
displayEndGame("draw");
}
}
$("#sqr6").on("click", sq6Function);
function sq6Function() {
if(initialBoard[5] != 5) {
return;
}
if(ticker == 1) {
drawCross("sqr6");
naughtTurn();
initialBoard[5] = aiPlayer;
nextPlayer = huPlayer;
if(checkWin(initialBoard, aiPlayer)) {
displayEndGame(aiPlayer);
}
}
else {
drawNaught("sqr6");
crossTurn();
initialBoard[5] = huPlayer;
nextPlayer = aiPlayer;
if(checkWin(initialBoard, huPlayer)) {
displayEndGame(huPlayer);
}
}
count++;
if(count%2 === 0) {
setTimeout(function() {
var aiMove = minimax(initialBoard, nextPlayer).index;
return arrFunctions[aiMove]();
}, 500);
}
if(emptySquares(initialBoard).length === 0) {
displayEndGame("draw");
}
}
$("#sqr7").on("click", sq7Function);
function sq7Function() {
if(initialBoard[6] != 6) {
return;
}
if(ticker == 1) {
drawCross("sqr7");
naughtTurn();
initialBoard[6] = aiPlayer;
nextPlayer = huPlayer;
if(checkWin(initialBoard, aiPlayer)) {
displayEndGame(aiPlayer);
}
}
else {
drawNaught("sqr7");
crossTurn();
initialBoard[6] = huPlayer;
nextPlayer = aiPlayer;
if(checkWin(initialBoard, huPlayer)) {
displayEndGame(huPlayer);
}
}
count++;
if(count%2 === 0) {
setTimeout(function() {
var aiMove = minimax(initialBoard, nextPlayer).index;
return arrFunctions[aiMove]();
}, 500);
}
if(emptySquares(initialBoard).length === 0) {
displayEndGame("draw");
}
}
$("#sqr8").on("click", sq8Function);
function sq8Function() {
if(initialBoard[7] != 7) {
return;
}
if(ticker == 1) {
drawCross("sqr8");
naughtTurn();
initialBoard[7] = aiPlayer;
nextPlayer = huPlayer;
if(checkWin(initialBoard, aiPlayer)) {
displayEndGame(aiPlayer);
}
}
else {
drawNaught("sqr8");
crossTurn();
initialBoard[7] = huPlayer;
nextPlayer = aiPlayer;
if(checkWin(initialBoard, huPlayer)) {
displayEndGame(huPlayer);
}
}
count++;
if(count%2 === 0) {
setTimeout(function() {
var aiMove = minimax(initialBoard, nextPlayer).index;
return arrFunctions[aiMove]();
}, 500);
}
if(emptySquares(initialBoard).length === 0) {
displayEndGame("draw");
}
}
$("#sqr9").on("click", sq9Function);
function sq9Function() {
if(initialBoard[8] != 8) {
return;
}
if(ticker == 1) {
drawCross("sqr9");
naughtTurn();
initialBoard[8] = aiPlayer;
nextPlayer = huPlayer;
if(checkWin(initialBoard, aiPlayer)) {
displayEndGame(aiPlayer);
}
}
else {
drawNaught("sqr9");
crossTurn();
initialBoard[8] = huPlayer;
nextPlayer = aiPlayer;
if(checkWin(initialBoard, huPlayer)) {
displayEndGame(huPlayer);
}
}
count++;
if(count%2 === 0) {
setTimeout(function() {
var aiMove = minimax(initialBoard, nextPlayer).index;
return arrFunctions[aiMove]();
}, 500);
}
if(emptySquares(initialBoard).length === 0) {
displayEndGame("draw");
}
}
//----------------------------------------------------------------------------
$("#restartBtn").on("click", restartGame);
function restartGame() {
initialState = true;
crossTurn();
drawGameBoard();
initialBoard = [0,1,2,3,4,5,6,7,8];
count = 1;
count2 = 0;
$("#midContainer").off("click", restartGame);
$(".bigNaught").fadeOut("normal");
$(".bigCross").fadeOut("normal");
$(".bigCross cross2").fadeOut("normal");
$(".medCross").fadeOut("normal");
$(".medCross cross2").fadeOut("normal");
$(".medNaught").fadeOut("normal");
$(".endGame").fadeOut("normal");
$("#playerNaught").on("click", naughtFunction);
}
//-----------------------------------------------------------------------------
//Credit to Ahmad Abdolsaheb in helping me figure the minimax algo .
//Thanks buddy.
function checkWin(board, player) {
if(board[0] == player && board[1] == player && board[2] == player ||
board[3] == player && board[4] == player && board[5] == player ||
board[6] == player && board[7] == player && board[8] == player ||
board[0] == player && board[3] == player && board[6] == player ||
board[1] == player && board[4] == player && board[7] == player ||
board[2] == player && board[5] == player && board[8] == player ||
board[0] == player && board[4] == player && board[8] == player ||
board[2] == player && board[4] == player && board[6] == player) {
return true;
}
return false;
}
function emptySquares(board) {
return board.filter(s => s != huPlayer && s != aiPlayer);
}
function minimax(newBoard, player) {
var openSquare = emptySquares(newBoard);
if(checkWin(newBoard, aiPlayer)) {
return {score:10};
}
else if(checkWin(newBoard, huPlayer)) {
return {score:-10};
}
else if(openSquare.length === 0) {
return {score:0};
}
var moves = [];
for(var i = 0; i < openSquare.length; i++) {
var move = {};
move.index = newBoard[openSquare[i]];
newBoard[openSquare[i]] = player;
if(player === aiPlayer) {
var result = minimax(newBoard, huPlayer);
move.score = result.score;
}
else {
var result = minimax(newBoard, aiPlayer);
move.score = result.score;
}
newBoard[openSquare[i]] = move.index;
moves.push(move);
}
var bestMove;
if(player === aiPlayer) {
var bestScore = -10000;
for(var i = 0; i < moves.length; i++) {
if(moves[i].score > bestScore) {
bestScore = moves[i].score;
bestMove = i;
}
}
} else {
var bestScore = 10000;
for(var i = 0; i < moves.length; i++) {
if(moves[i].score < bestScore) {
bestScore = moves[i].score;
bestMove = i;
}
}
}
return moves[bestMove];
}
});
!
