Tic Tac Toe _ Alternate

Developer
Size
5,275 Kb
Views
6,072

How do I make an tic tac toe _ alternate?

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/adBpvw.. What is a tic tac toe _ alternate? How do you make a tic tac toe _ alternate? This script and codes were developed by Sam Koshy on 06 November 2022, Sunday.

Tic Tac Toe _ Alternate Previews

Tic Tac Toe _ Alternate - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tic Tac Toe _ Alternate</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<div class="container text-center"> <div class="wrapper"> <div class="title">Tic Tac Toe</div> <br> <div class="backgroundTile"></div> <div class="rows"> <span class="tL"><i class="fa fa-circle-o tL-o"></i><i class="fa fa-times tL-x"></i></span> <span class="tM"><i class="fa fa-circle-o tM-o"></i><i class="fa fa-times tM-x"></i></span> <span class="tR"><i class="fa fa-circle-o tR-o"></i><i class="fa fa-times tR-x"></i></span> </div> <div class="rows"> <span class="mL"><i class="fa fa-circle-o mL-o"></i><i class="fa fa-times mL-x"></i></span> <span class="mM"><i class="fa fa-circle-o mM-o"></i><i class="fa fa-times mM-x"></i></span> <span class="mR"><i class="fa fa-circle-o mR-o"></i><i class="fa fa-times mR-x"></i></span> </div> <div class="rows"> <span class="bL"><i class="fa fa-circle-o bL-o"></i><i class="fa fa-times bL-x"></i></span> <span class="bM"><i class="fa fa-circle-o bM-o"></i><i class="fa fa-times bM-x"></i></span> <span class="bR"><i class="fa fa-circle-o bR-o"></i><i class="fa fa-times bR-x"></i></span> </div> <div class="iconPrompt"> <h2>Choose one:</h2> <i class="fa fa-times icon-x"></i>&nbsp;<span class="or"> or </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-circle-o icon-o"></i></div> <div class="r1_line"></div> <div class="r2_line"></div> <div class="r3_line"></div> <div class="c1_line"></div> <div class="c2_line"></div> <div class="c3_line"></div> <div class="d1_line"></div> <div class="d2_line"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tic Tac Toe _ Alternate - Script Codes CSS Codes

.wrapper { position: fixed; top: 40%; left: 50%; margin-top: -200px; margin-left: -250px; //-184px; min-width: 500px;
}
.title{ font-family: 'Oswald', sans-serif; font-size:350%;
}
.or{ position:fixed; padding:10px; padding-bottom:10px; margin-top:25px;
}
.backgroundTile{ position:fixed; margin-top: -5px; margin-left: 20px; width: 450px; height: 410px; background-color:white; z-index:-1;
}
.r1_line { position:fixed; margin-left:77px; margin-top:-319px; width: 347px; height: 10px; background-color:rgb(100,100,100); border-radius:5px; z-index: -10;
}
.r2_line { position:fixed; margin-left:77px; margin-top:-194px; width: 347px; height: 10px; background-color:rgb(100,100,100); border-radius:5px; z-index: -10;
}
.r3_line { position:fixed; margin-left:77px; margin-top:-69px; width: 347px; height: 10px; background-color:rgb(100,100,100); border-radius:5px; z-index: -10;
}
.c1_line { position:fixed; margin-left:123px; margin-top:-363px; width: 10px; height: 347px; background-color:rgb(100,100,100); border-radius:5px; z-index: -10;
}
.c2_line { position:fixed; margin-left:247px; margin-top:-363px; width: 10px; height: 347px; background-color:rgb(100,100,100); border-radius:5px; z-index: -10;
}
.c3_line { position:fixed; margin-left:371px; margin-top:-363px; width: 10px; height: 347px; background-color:rgb(100,100,100); border-radius:5px; z-index: -10;
}
.d1_line { position:fixed; margin-left:247px; margin-top:-420px; width: 10px; height: 460px; background-color:rgb(100,100,100); border-radius:5px; transform: rotate(-45deg); z-index: -10;
}
.d2_line { position:fixed; margin-left:247px; margin-top:-420px; width: 10px; height: 460px; background-color:rgb(100,100,100); border-radius:5px; transform: rotate(45deg); z-index: -10;
}
/***************************************************/
.tL { display: inline-block; width: 120px; height: 120px; border: 2px solid black; background-color: gold;
}
.tM { display: inline-block; width: 120px; height: 120px; border: 2px solid black; background-color: gold;
}
.tR { display: inline-block; width: 120px; height: 120px; border: 2px solid black; background-color: gold;
}
/***************************************************/
.mL { display: inline-block; width: 120px; height: 120px; border: 2px solid black; background-color: gold;
}
.mM { display: inline-block; width: 120px; height: 120px; border: 2px solid black; background-color: gold;
}
.mR { display: inline-block; width: 120px; height: 120px; border: 2px solid black; background-color: gold;
}
/***************************************************/
.bL { display: inline-block; width: 120px; height: 120px; border: 2px solid black; background-color: gold;
}
.bM { display: inline-block; width: 120px; height: 120px; border: 2px solid black; background-color: gold;
}
.bR { display: inline-block; width: 120px; height: 120px; border: 2px solid black; background-color: gold;
}
.rows { margin-bottom: -58px;
}
.fa-circle-o { position: relative; font-size: 100px; top: 6%; left: 1%; z-index: -1;
}
.fa-times { position: relative; font-size: 90px; top: -76%; left: 2%; z-index: -1;
}
.iconPrompt { position: fixed; top: 40%; left: 50%; margin-top: -10px; margin-left: -160px; width: 320px; height: 170px; border-radius: 15px; border: 2px solid black; background-color: teal; opacity: 1; font-size: 200%; font-family: 'Oswald', sans-serif;
}
.iconPrompt h2{ margin-top:12px;
}
.icon-x { position: relative; top: 3%; cursor: pointer; z-index: 1;
}
.icon-o { cursor: pointer; z-index: 1;
}
/***********************************************/
/***********************************************/
/***********************************************/

Tic Tac Toe _ Alternate - Script Codes JS Codes

$(document).ready(function() { var currentClass, userIcon, computerIcon, userChoices = [], computerChoices = [], tileNames = [], computerTurn=false, chosenTile, winningCombo = [ ['tL', 'tM', 'tR'], ['mL', 'mM', 'mR'], ['bL', 'bM', 'bR'], ['tL', 'mL', 'bL'], ['tM', 'mM', 'bM'], ['tR', 'mR', 'bR'], ['tL', 'mM', 'bR'], ['bL', 'mM', 'tR'] ]; /********************** User chooses 'X' *************************/ $('.icon-x').on('click', function() { userIcon = "-x"; computerIcon = "-o"; userChoices = []; computerChoices = []; $('.iconPrompt').css('z-index', -10).css('opacity', 0); $('.fa').css('z-index', -1); $('.r1_line,.r2_line,.r3_line,.c1_line,.c2_line,.c3_line,.d1_line,.d2_line').css('z-index', -10); var firstTile_pos =Math.floor(Math.random() * 9);//1; tileNames = ['tL', 'tM', 'tR', 'mL','mM','mR', 'bL', 'bM', 'bR' ]; $('.' + tileNames[firstTile_pos] + '-o').css('z-index', 1); computerChoices.push(tileNames[firstTile_pos]); tileNames.splice(firstTile_pos, 1); }); /******************************************************************/ /********************** User chooses 'O' *************************/ $('.icon-o').on('click', function() { userIcon = "-o"; computerIcon = "-x"; userChoices = []; computerChoices = []; $('.iconPrompt').css('z-index', -10).css('opacity', 0); $('.fa').css('z-index', -1); $('.r1_line,.r2_line,.r3_line,.c1_line,.c2_line,.c3_line,.d1_line,.d2_line').css('z-index', -10); tileNames = ['tL', 'tM', 'tR', 'mL','mM','mR', 'bL', 'bM', 'bR' ]; }); /********************************************************************/ /********************************************************************/ /********************************************************************/ /********************** User selects a tile *************************/ $('.rows').children().on('click', function() { currentClass = '.' + this.className + userIcon; for (var i = 0; i < tileNames.length; i++) { if (tileNames[i] === this.className) { //only fills tile if unoccupied $(currentClass).css('z-index', 1); userChoices.push(this.className); tileNames.splice(i, 1); computerTurn = true; break; } } if (computerTurn) { var minMaxArray = [], tempComp = computerChoices.slice(0, computerChoices.length), tempUser = userChoices.slice(0, userChoices.length), tempTileNames = tileNames.slice(0, tileNames.length), tempMinMax = [], duplicatesIndex=[], tempWinningCombo, winningComboLeft=[], dupIndexMax, dupIndexMin; var depth=0; for (var h = 0; h < tempTileNames.length; h++) { depth = 0; //depth+=1; computerTurn = true; chosenTile = tempTileNames[h]; if (minMax(computerTurn, chosenTile, tempUser, tempComp) === 0) { depth += 1; tempComp.push(tempTileNames[h]); tempTileNames.splice(h, 1); tempMinMax = []; for (var a = 0; a < tempTileNames.length; a++) { chosenTile = tempTileNames[a]; computerTurn = false; tempMinMax.push(minMax(computerTurn, chosenTile, tempUser, tempComp)); } if (Math.min(...tempMinMax) === 0) { depth+=1; tempMinMax = []; for (var a = 0; a < tempTileNames.length; a++) { tempUser.push(tempTileNames[a]); tempTileNames.splice(a, 1); for (var b=0; b<tempTileNames.length; b++){ chosenTile = tempTileNames[b]; computerTurn = true; tempMinMax.push(minMax(computerTurn, chosenTile, tempUser, tempComp)); } tempUser.pop(); tempTileNames = tileNames.slice(0, tileNames.length); tempTileNames.splice(h, 1); } if(Math.max(...tempMinMax)===0){ depth+=1; tempMinMax = []; for (var a = 0; a < tempTileNames.length; a++) { tempUser.push(tempTileNames[a]); tempTileNames.splice(a, 1); for (var b=0; b<tempTileNames.length; b++){ tempComp.push(tempTileNames[b]); tempTileNames.splice(b,1); for (var c=0; c<tempTileNames.length; c++){ //delete //depth +=1; //delete chosenTile = tempTileNames[c]; computerTurn = false; tempMinMax.push(minMax(computerTurn, chosenTile, tempUser, tempComp)); } tempComp.pop(); tempTileNames = tileNames.slice(0, tileNames.length); tempTileNames.splice(h, 1); tempTileNames.splice(a, 1); } tempUser.pop(); tempTileNames = tileNames.slice(0, tileNames.length); tempTileNames.splice(h, 1); } minMaxArray.push(Math.min(...tempMinMax)+depth); }else{minMaxArray.push(Math.max(...tempMinMax)-depth);} }else{minMaxArray.push(Math.min(...tempMinMax)+depth);} }else{minMaxArray.push(minMax(computerTurn, chosenTile, tempUser, tempComp));} tempComp = computerChoices.slice(0, computerChoices.length); tempUser = userChoices.slice(0, userChoices.length); tempTileNames = tileNames.slice(0, tileNames.length); } //console.log(tileNames); //console.log(minMaxArray); for(var zz=0;zz<minMaxArray.length;zz++){ if(minMaxArray[zz]===-Infinity || minMaxArray[zz]===Infinity){ minMaxArray[zz]=0; } if(minMaxArray[zz]%Math.max(...minMaxArray)===0){ duplicatesIndex.push(zz); } } //console.log(duplicatesIndex); for(var aa=0;aa<duplicatesIndex.length;aa++){ tempComp = computerChoices.slice(0, computerChoices.length); tempComp.push(tileNames[duplicatesIndex[aa]]); tempWinningCombo = winningCombo.slice(0, winningCombo.length); for (var ad = 0; ad < tempComp.length; ad++ ){ for (var ab = tempWinningCombo.length-1; ab >= 0 ; ab--) { for (var ac = 0; ac < 3; ac++) { if (tempComp[ad] === tempWinningCombo[ab][ac]) { tempWinningCombo.splice(ab,1); break; } } } } winningComboLeft.push(tempWinningCombo.length); //console.log(tempComp,"$$$",tempWinningCombo); } dupIndexMax=duplicatesIndex[winningComboLeft.indexOf(Math.max(...winningComboLeft))]; dupIndexMin=duplicatesIndex[winningComboLeft.indexOf(Math.min(...winningComboLeft))]; //console.log(tileNames[duplicatesIndex[winningComboLeft.indexOf(Math.min(...winningComboLeft))]]);
//console.log(winningComboLeft); if(duplicatesIndex.length>1 && (Math.max(...minMaxArray)<0 || minMaxArray.length!==duplicatesIndex.length)){ $('.' + tileNames[dupIndexMin] + computerIcon).css('z-index', 1); computerChoices.push(tileNames[dupIndexMin]); tileNames.splice(dupIndexMin, 1); }else if(duplicatesIndex.length>1 && Math.max(...minMaxArray)>=0 && minMaxArray.length===duplicatesIndex.length){ $('.' + tileNames[dupIndexMax] + computerIcon).css('z-index', 1); computerChoices.push(tileNames[dupIndexMax]); tileNames.splice(dupIndexMax, 1); }else{ $('.' + tileNames[minMaxArray.indexOf(Math.max(...minMaxArray))] + computerIcon).css('z-index', 1); computerChoices.push(tileNames[minMaxArray.indexOf(Math.max(...minMaxArray))]); tileNames.splice(minMaxArray.indexOf(Math.max(...minMaxArray)), 1); } } if (isGameOver(computerChoices)[1]===3){ switch (isGameOver(computerChoices)[0]) { case (0): userCount = 0; computerCount = 0; $('.r1_line').css('z-index', 1); setTimeout(function() { $('.r1_line').css('z-index', -10); }, 100); setTimeout(function() { $('.r1_line').css('z-index', 1); }, 200); setTimeout(function() { $('.r1_line').css('z-index', -10); }, 300); setTimeout(function() { $('.r1_line').css('z-index', 1); }, 400); setTimeout(function() { $('.r1_line').css('z-index', -10); }, 500); setTimeout(function() { $('.r1_line').css('z-index', 1); }, 600); setTimeout(function() { tileNames.splice(0, tileNames.length); $('.iconPrompt').css('z-index', 10).css('opacity', 1); $('.icon-o').css('z-index', 1); $('.icon-x').css('z-index', 1); $('.r1_line').css('z-index', 1); }, 1200); break; case (1): userCount = 0; computerCount = 0; $('.r2_line').css('z-index', 1); setTimeout(function() { $('.r2_line').css('z-index', -10); }, 100); setTimeout(function() { $('.r2_line').css('z-index', 1); }, 200); setTimeout(function() { $('.r2_line').css('z-index', -10); }, 300); setTimeout(function() { $('.r2_line').css('z-index', 1); }, 400); setTimeout(function() { $('.r2_line').css('z-index', -10); }, 500); setTimeout(function() { $('.r2_line').css('z-index', 1); }, 600); setTimeout(function() { tileNames.splice(0, tileNames.length); $('.iconPrompt').css('z-index', 10).css('opacity', 1); $('.icon-o').css('z-index', 1); $('.icon-x').css('z-index', 1); $('.r2_line').css('z-index', 1); }, 1200); break; case (2): userCount = 0; computerCount = 0; $('.r3_line').css('z-index', 1); setTimeout(function() { $('.r3_line').css('z-index', -10); }, 100); setTimeout(function() { $('.r3_line').css('z-index', 1); }, 200); setTimeout(function() { $('.r3_line').css('z-index', -10); }, 300); setTimeout(function() { $('.r3_line').css('z-index', 1); }, 400); setTimeout(function() { $('.r3_line').css('z-index', -10); }, 500); setTimeout(function() { $('.r3_line').css('z-index', 1); }, 600); setTimeout(function() { tileNames.splice(0, tileNames.length); $('.iconPrompt').css('z-index', 10).css('opacity', 1); $('.icon-o').css('z-index', 1); $('.icon-x').css('z-index', 1); $('.r3_line').css('z-index', 1); }, 1200); break; case (3): userCount = 0; computerCount = 0; $('.c1_line').css('z-index', 1); setTimeout(function() { $('.c1_line').css('z-index', -10); }, 100); setTimeout(function() { $('.c1_line').css('z-index', 1); }, 200); setTimeout(function() { $('.c1_line').css('z-index', -10); }, 300); setTimeout(function() { $('.c1_line').css('z-index', 1); }, 400); setTimeout(function() { $('.c1_line').css('z-index', -10); }, 500); setTimeout(function() { $('.c1_line').css('z-index', 1); }, 600); setTimeout(function() { tileNames.splice(0, tileNames.length); $('.iconPrompt').css('z-index', 10).css('opacity', 1); $('.icon-o').css('z-index', 1); $('.icon-x').css('z-index', 1); $('.c1_line').css('z-index', 1); }, 1200); break; case (4): userCount = 0; computerCount = 0; $('.c2_line').css('z-index', 1); setTimeout(function() { $('.c2_line').css('z-index', -10); }, 100); setTimeout(function() { $('.c2_line').css('z-index', 1); }, 200); setTimeout(function() { $('.c2_line').css('z-index', -10); }, 300); setTimeout(function() { $('.c2_line').css('z-index', 1); }, 400); setTimeout(function() { $('.c2_line').css('z-index', -10); }, 500); setTimeout(function() { $('.c2_line').css('z-index', 1); }, 600); setTimeout(function() { tileNames.splice(0, tileNames.length); $('.iconPrompt').css('z-index', 10).css('opacity', 1); $('.icon-o').css('z-index', 1); $('.icon-x').css('z-index', 1); $('.c2_line').css('z-index', 1); }, 1200); break; case (5): userCount = 0; computerCount = 0; $('.c3_line').css('z-index', 1); setTimeout(function() { $('.c3_line').css('z-index', -10); }, 100); setTimeout(function() { $('.c3_line').css('z-index', 1); }, 200); setTimeout(function() { $('.c3_line').css('z-index', -10); }, 300); setTimeout(function() { $('.c3_line').css('z-index', 1); }, 400); setTimeout(function() { $('.c3_line').css('z-index', -10); }, 500); setTimeout(function() { $('.c3_line').css('z-index', 1); }, 600); setTimeout(function() { tileNames.splice(0, tileNames.length); $('.iconPrompt').css('z-index', 10).css('opacity', 1); $('.icon-o').css('z-index', 1); $('.icon-x').css('z-index', 1); $('.c3_line').css('z-index', 1); }, 1200); break; case (6): userCount = 0; computerCount = 0; $('.d1_line').css('z-index', 1); setTimeout(function() { $('.d1_line').css('z-index', -10); }, 100); setTimeout(function() { $('.d1_line').css('z-index', 1); }, 200); setTimeout(function() { $('.d1_line').css('z-index', -10); }, 300); setTimeout(function() { $('.d1_line').css('z-index', 1); }, 400); setTimeout(function() { $('.d1_line').css('z-index', -10); }, 500); setTimeout(function() { $('.d1_line').css('z-index', 1); }, 600); setTimeout(function() { tileNames.splice(0, tileNames.length); $('.iconPrompt').css('z-index', 10).css('opacity', 1); $('.icon-o').css('z-index', 1); $('.icon-x').css('z-index', 1); $('.d1_line').css('z-index', 1); }, 1200); break; case (7): userCount = 0; computerCount = 0; $('.d2_line').css('z-index', 1); setTimeout(function() { $('.d2_line').css('z-index', -10); }, 100); setTimeout(function() { $('.d2_line').css('z-index', 1); }, 200); setTimeout(function() { $('.d2_line').css('z-index', -10); }, 300); setTimeout(function() { $('.d2_line').css('z-index', 1); }, 400); setTimeout(function() { $('.d2_line').css('z-index', -10); }, 500); setTimeout(function() { $('.d2_line').css('z-index', 1); }, 600); setTimeout(function() { tileNames.splice(0, tileNames.length); $('.iconPrompt').css('z-index', 10).css('opacity', 1); $('.icon-o').css('z-index', 1); $('.icon-x').css('z-index', 1); $('.d2_line').css('z-index', 1); }, 1200); break; }
} isBoardFull(tileNames); }); //////////////////////////////////////////////////////////////// /********************************************************************/ /********************************************************************/ function isBoardFull(tileNames_psuedo) { if (tileNames_psuedo.length === 0) { setTimeout(function() { $('.iconPrompt').css('z-index', 1).css('opacity', 1); $('.icon-o').css('z-index', 1); $('.icon-x').css('z-index', 1); }, 1200); userCount = 0; computerCount = 0; } } /********************************************************************/ /********************************************************************/ function isGameOver(checkArray) { var count, maxCount = 1, maxJ = 0; for (var j = 0; j < winningCombo.length; j++) { count = 0; for (var k = 0; k < winningCombo[j].length; k++) { for (var l = 0; l < checkArray.length; l++) { if (checkArray[l] === winningCombo[j][k]) { count += 1; } } } if (maxCount < count) { maxCount = count; maxJ = j; } } return [maxJ, maxCount]; } /********************************************************************/ /********************************************************************/ /********************************************************************/ function minMax(isItCompTurn, pickedTile, userArray, computerArray) { computerArray = computerArray.slice(0, computerArray.length); //slice creates a new array so we're avoiding changing computerChoices userArray = userArray.slice(0, userArray.length); if (isItCompTurn) { computerArray.push(pickedTile); if (isGameOver(computerArray)[1] === 3) { return 10; } else { return 0; } } else { userArray.push(pickedTile); if (isGameOver(userArray)[1] === 3) { return -10; } else { return 0; } } }
});
Tic Tac Toe _ Alternate - Script Codes
Tic Tac Toe _ Alternate - Script Codes
Home Page Home
Developer Sam Koshy
Username codinger
Uploaded November 06, 2022
Rating 3
Size 5,275 Kb
Views 6,072
Do you need developer help for Tic Tac Toe _ Alternate?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sam Koshy (codinger) Script Codes
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!