//some enums var AIDifficulty = { EASY : 4, MEDIUM : 6, HARD : 8 } var FieldState = { EMPTY : 0, X : 1, O : -1 } var FieldLine = { HORIZONTAL : 0, VERTICAL : 1, DIAGONAL : 2, } //here I'm going to insert the Tic-Tac-Toe data structure function TicTacToe(dimension) { this.dim = dimension; this.fields = []; for(var y=0; y 0? FieldState.X : FieldState.O; winline = FieldLine.HORIZONTAL; winidx = y; break; } else if(Math.abs(ver)==this.dim) { state = ver > 0? FieldState.X : FieldState.O; winline = FieldLine.VERTICAL; winidx = y; break; } dia1+= this.fields[y][y]; dia2+= this.fields[this.dim-1-y][y]; ver = 0; hor = 0; } if(state === FieldState.EMPTY) { //check diagonal if(Math.abs(dia1) == this.dim) { state = dia1 > 0? FieldState.X : FieldState.O; winline = FieldLine.DIAGONAL; winidx = 0; } else if(Math.abs(dia2) == this.dim) { state = dia2 > 0? FieldState.X : FieldState.O; winline = FieldLine.DIAGONAL; winidx = 1; } } var winState = { winner : state, line : winline, idx : winidx, countEmpty : countEmpty } return winState; } } //next the AI stuff... function TicAI(difficulty) { this.difficulty = difficulty; this.doNextMove = function(tic, player) { //recursion start var t0 = performance.now(); var bestMove = this.getBestMove(tic, player); var dt = (performance.now() - t0).toFixed(2); return bestMove; } this.getBestMove = function(field, aiPlayer) { function Rating(points, x = -1, y = -1) { this.points = points; this.x = x; this.y = y; } var state = field.evaluate(); if(state.countEmpty == field.dim*field.dim) { //return a random corner return new Rating(0, Math.floor(Math.random()+0.5) * (field.dim-1), Math.floor(Math.random()+0.5) * (field.dim-1)); } else { var ratings = []; for(var x = 0; x < field.dim; ++x) { for(var y = 0; y < field.dim; ++y) { if(field.fields[x][y] === FieldState.EMPTY) { var nfield = field.clone(); nfield.fields[x][y] = aiPlayer; ratings.push(new Rating(this.rateField(nfield, aiPlayer*(-1), aiPlayer, 1), x, y)); } } } var bestFields = []; //get the highest points var max = ratings[0].points; for(var i=1; i< ratings.length; ++i) { if(ratings[i].points > max) max = ratings[i].points; } //get all the fields equally good to the best rated for(var i=0; i< ratings.length; ++i) { if(ratings[i].points == max) { bestFields.push(ratings[i]); } } //only when difficulty is higher than 1 if(this.difficulty > 1) { var prevFields = []; //check win condition for(var i=0; i< bestFields.length; ++i) { var bestField = bestFields[i]; var nfield = field.clone(); nfield.fields[bestField.x][bestField.y] = aiPlayer*(-1); if(nfield.evaluate().winner === aiPlayer*(-1)) prevFields.push(bestField); } if(prevFields.length > 0) bestFields = prevFields; } return bestFields[Math.floor(bestFields.length * Math.random())]; } } this.rateField = function(currField, currPlayer, aiPlayer, level) { var state = currField.evaluate(); if(state.winner != FieldState.EMPTY) { //end of the recursive function return 10*state.winner * aiPlayer - level*state.winner* aiPlayer; } else if(level === this.difficulty) { return level - 10; } else if(state.countEmpty === 0) return 0; else { //for every empty place, create a new field, then rate every field var ratings = []; for(var x = 0; x < currField.dim; ++x) { for(var y = 0; y < currField.dim; ++y) { if(currField.fields[x][y] === FieldState.EMPTY) { var nfield = currField.clone(); nfield.fields[x][y] = currPlayer; ratings.push(this.rateField(nfield, currPlayer*(-1), aiPlayer, level +1)); } } } if(currPlayer === aiPlayer) { //max var max = ratings[0]; for(var i= 1; i max) max = ratings[i]; } return max; } else { //min var min = ratings[0]; for(var i=1; i< ratings.length; ++i) { if(ratings[i] < min) min = ratings[i]; } return min; } } } } //game.js var game; function Game(){ function Player(fieldValue, ai, aiEnabled) { this.points = 0; this.fieldValue = fieldValue; this.ai = ai; this.aiEnabled = aiEnabled; this.aiDelay = 1000; } this.turn = FieldState.X; if(this.turn === FieldState.X) { $("#crossSymbol").addClass("turn"); } else { $("#circleSymbol").addClass("turn"); } this.nextRound = function() { adjustCircleBorders(); this.nextRoundAnimation(); this.tictactoe.clear(); this.doAIStuff(); } this.click = function(y,x,aiClicked) { if((this.isAI(this.turn) && aiClicked || !this.isAI(this.turn) && !aiClicked) && !this.gameOver) { var field = $("#field_"+y+x); if(this.tictactoe.fields[y][x] === FieldState.EMPTY) { this.tictactoe.fields[y][x] = this.turn; if(this.turn === FieldState.X) { $(field).children(".cross").show().removeClass('small'); } else { $(field).children(".circle").show().removeClass('small'); } //evaluate board var eval = this.tictactoe.evaluate(); if(eval.winner !== FieldState.EMPTY || eval.countEmpty === 0) { this.gameOver = true; this.endAnimation(eval); //next player this.nextPlayer(); } else{ //next player this.nextPlayer(); //next move this.doAIStuff(); } } } } this.doAIStuff = function() { if(this.isAI(this.turn)) { var nextMove = 0; if(this.turn == FieldState.X) nextMove = this.playerX.ai.doNextMove(this.tictactoe, FieldState.X); else nextMove = this.playerO.ai.doNextMove(this.tictactoe, FieldState.O); setTimeout(function(game){ game.click(nextMove.x, nextMove.y, true); },this.playerO.aiDelay, this); } } this.isAI = function(symbol) { return (symbol === FieldState.X && this.playerX.aiEnabled) || (symbol === FieldState.O && this.playerO.aiEnabled); } this.nextPlayer = function() { this.turn*=-1; if(!this.gameOver) $("#crossSymbol, #circleSymbol").toggleClass("turn"); else $("#crossSymbol, #circleSymbol").removeClass("turn"); } this.endAnimation = function(eval) { function getWholeAnimationTime(element) { return getDelayTime(element) + getDurationTime(element); } function getDelayTime(element) { return parseFloat(element.css("animation-delay"))*1000; } function getDurationTime(element) { return parseFloat(element.css("animation-duration"))*1000; } if(eval.winner != FieldState.EMPTY) { var color = eval.winner == FieldState.X?"#0056ff":"#ff0056"; var winline = 0; var winFields = {}; if(eval.line === FieldLine.HORIZONTAL){ var winline = $("#win_line_hor_"+eval.idx); winFields.outside = $("#field_"+eval.idx+"0,#field_"+eval.idx+"2"); winFields.mid = $("#field_"+eval.idx+"1"); } else if(eval.line === FieldLine.VERTICAL){ var winline = $("#win_line_ver_"+eval.idx); winFields.outside = $("#field_0"+eval.idx+",#field_2"+eval.idx); winFields.mid = $("#field_1"+eval.idx); } else{ var winline = $("#win_line_dia_"+eval.idx); if(eval.idx===0) winFields.outside = $("#field_00, #field_22"); else winFields.outside = $("#field_02, #field_20"); winFields.mid = $("#field_11"); } //start animation winline.css("background-color",color).addClass("start").show(); //set here the total duration setTimeout(function() { //next animation step winline.removeClass("start edge"); winline.addClass("center shrink"); setTimeout(function() { //outside fields go to center $.when(winFields.outside.animate({ left: winFields.mid.css("left"), top: winFields.mid.css("top"), }, getDurationTime(winline))).then(function() { $(".field").not(winFields.mid).children().addClass("small").animate({opacity:0},600); $(".line.border").fadeOut(500); winFields.mid.children().addClass("big"); winFields.mid.animate({ left: "50%", top: "40%", }, 1000); $("#end_container").fadeIn(1000); $("#win_note").text("wins").fadeIn(1000); if(eval.winner === FieldState.X) $("#scoreX").text(++game.playerX.points); else $("#scoreO").text(++game.playerO.points); }); }, getDelayTime(winline)) }, getWholeAnimationTime(winline)); } else{ //draw animation var left_field = 0; var right_field = 0; if(this.tictactoe.fields[0][0]!==this.tictactoe.fields[2][2]) { if(this.tictactoe.fields[0][0] == FieldState.X) { left_field = $("#field_00"); right_field = $("#field_22"); } else{ left_field = $("#field_22"); right_field = $("#field_00"); } } else if(this.tictactoe.fields[0][2]!==this.tictactoe.fields[2][0]) { if(this.tictactoe.fields[0][2] == FieldState.X) { left_field = $("#field_02"); right_field = $("#field_20"); } else{ left_field = $("#field_20"); right_field = $("#field_02"); } } setTimeout(function () { left_field.animate({ left:"36%", top: "40%", },1000); right_field.animate({ left:"64%", top: "40%", },1000); $(".line.border").fadeOut(500); $(".field").not(left_field).not(right_field).children().addClass("small").animate({opacity:0},600); $("#win_note").text("It's a draw.").fadeIn(1000); $("#end_container").fadeIn(1000); $("#scoreDraw").text(++game.countDraw); },500); } } this.nextRoundAnimation = function() { //distinguish between the user comes from the menu or from last round if(!this.first) { //we need to fade out the end screen, tidy up and bring the board back in playable form $("#win_note, #end_container").fadeOut(500, function(){ $(".win.line").removeClass("center shrink").addClass("edge").hide().css("opacity", 1); for(var y=0;y<3;++y) { var posTop = (100+200*y)/6.0 +"%"; for(var x=0;x<3;++x) { var posLeft = (100+200*x)/6.0+"%"; $("#field_"+y.toString()+x).css("top",posTop).css("left",posLeft); } } }); } $(".field").children().hide(); $(".field").children().css("opacity", 1); $(".field").children().removeClass("big").addClass("small"); $(".line.border").fadeIn(500); this.first = false; this.gameOver = false; if(this.turn === FieldState.X) $("#crossSymbol").addClass("turn"); else $("#circleSymbol").addClass("turn"); } this.startGame = function() { this.turn = FieldState.X; this.playerO.points = 0; this.playerX.points = 0; this.countDraw = 0; $("#scoreX,#scoreO,#scoreDraw").text("0"); var optionX = document.getElementById("option_playerX"); document.getElementById("descr_X").innerHTML = optionX[optionX.selectedIndex].innerHTML; var valX = parseInt(optionX.value); if(valX > 0) { this.playerX.ai.difficulty = valX; this.playerX.aiEnabled = true; } else { this.playerX.aiEnabled = false; } var optionO = document.getElementById("option_playerO"); document.getElementById("descr_O").innerHTML = optionO[optionO.selectedIndex].innerHTML; var valO = parseInt(optionO.value); if(valO> 0) { this.playerO.ai.difficulty = valO; this.playerO.aiEnabled = true; } else { this.playerO.aiEnabled = false; } this.nextRound(); $("#game_section").css("opacity", 0).show(); adjustCircleBorders(); $("#game_section").css("opacity", 1).hide(); $("#menu").fadeOut(500, function () { $("#game_section").fadeIn(500); adjustCircleBorders(); }); } this.backToMenu = function(){ $("#game_section").fadeOut(500, function() { $("#menu").fadeIn(500); }); } this.constructGameObjects = function() { var gameField = $("#tictacfield"); for(var y=0; y<3; ++y) { var pos1 = (100+200*y)/6.0+"%"; //create win lines gameField.append($("

")); gameField.append($("

")); if(y<2) { var borPos = (1/3)*(y+1)*100+"%"; //create border gameField.append($("

")); gameField.append($("

")); } for(var x=0; x<3;++x) { var pos2 = (100+200*x)/6.0+"%"; //create the fields var field = $("

"); gameField.append(field); } } //create the two diagonal win lines gameField.append($("

")); gameField.append($("

")); $(".field").append($("

")); $(".win.line").hide(); $(".line.border").hide(); } //when the game is created this.constructGameObjects(); this.first = true; this.countDraw = 0; this.tictactoe = new TicTacToe(3); this.playerX = new Player(FieldState.X, new TicAI(AIDifficulty.MEDIUM), false); this.playerO = new Player(FieldState.O, new TicAI(AIDifficulty.MEDIUM), true); this.gameOver = false; } function adjustCircleBorders() { $(".circle").each(function () { var width = this.parentElement.clientWidth*0.1+"px"; $(this).css("border-top-width", width); $(this).css("border-left-width", width); $(this).css("border-right-width", width); $(this).css("border-bottom-width", width); }); } $(window).resize(function () { adjustCircleBorders(); });

TicTacToe with AI 💻 😯