A Pen by Jubin Ayoob N V on CodePen.
Created
April 1, 2018 07:48
-
-
Save Jubin369/bae1c4b3a6db105c2089afafbc0729d9 to your computer and use it in GitHub Desktop.
FCC: Tic Tac Toe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="head"><h1 class="curs">Tic Tac Toe</h1></div> | |
<div class="wrap"> | |
<div class="row r0"> | |
<div id='n0' class="el c0 d1"></div> | |
<div id='n1' class="el c1"></div> | |
<div id='n2' class="el c2 d2"></div> | |
</div> | |
<div class="row r1"> | |
<div id='n3' class="el c0"></div> | |
<div id='n4' class="el c1 d1 d2"></div> | |
<div id='n5' class="el c2"></div> | |
</div> | |
<div class="row r2"> | |
<div id='n6' class="el c0 d2"></div> | |
<div id='n7' class="el c1"></div> | |
<div id='n8' class="el c2 d1"></div> | |
</div> | |
</div> | |
<div class="screen"></div> | |
<div class="console pop-up"> | |
<div class="row"> | |
<div class="el-o"></i></div> | |
<h3 class="big inline out">WINS!</h3> | |
</div> | |
<h3 id="sub">click inside to play again</h3> | |
</div> | |
<div class="select pop-up"> | |
<h3>PLEASE SELECT:</h3> | |
<div class="row"> | |
<div id='x' class="el-s free"><i class="fa fa-times txt"></i></div> | |
<h3 class='inline'>OR</h3> | |
<div id ='o' class="el-s free"><i class="fa fa-circle-o txt"></i></div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
var active; | |
var enabled; | |
var symbols ={'x' : '<i class="fa fa-times txt"></i>', | |
'o' : '<i class="fa fa-circle-o txt"></i>', | |
'?' : '<i class="fa fa-question txt"></i>' }; | |
var human; | |
var board; | |
var moves; | |
function toggleState(act){ | |
if (act === 'o') | |
act = 'x'; | |
else | |
act = 'o' | |
return act; | |
} | |
function checkPatterns(pos){ | |
var row = Math.floor(pos/3); | |
var col = pos%3; | |
var diag = (col === row) ? 1 : ((col === 0 || col === 2) && (row === 2 || row === 0)) ? 2 : 0; | |
var base = board[pos]; | |
if(board[row*3] === board[row*3 +1 ] && board[row*3] === board[row*3 + 2]) | |
return {pattern : 'r', number : row , symbol : base}; | |
if(board[col] === board[col + 3] && board[col] === board[col+6]) | |
return {pattern : 'c', number : col , symbol : base}; | |
if(diag === 1){ | |
if(board[0] === board[4] && board[0] === board[8]) | |
return {pattern : 'd', number : 1 , symbol : base}; | |
if(row == 1 && col == 1){ | |
if(board[2] === board[4] && board[4] === board[6]) | |
return {pattern : 'd', number : 2 , symbol : base}; | |
} | |
}else if(diag ===2){ | |
if(board[2] === board[4] && board[4] === board[6]) | |
return {pattern : 'd', number : 2 , symbol : base}; | |
} | |
return false; | |
} | |
function minimax(symbol,pos,level){ | |
var i, res; | |
var w = checkPatterns(pos); | |
if(w){ | |
if(w.symbol === active) | |
return 100 + level; | |
else | |
return -100 - level; | |
} else if (level === 0 || moves === 9) { | |
return 0; | |
} | |
if(symbol !== active){ | |
res = 1000; | |
for(i=0;i<9;i++){ | |
if(board[i]==undefined) | |
{ | |
board[i]=symbol; | |
moves++; | |
res = Math.min(res, minimax(toggleState(symbol),i,level-1)); | |
moves--; | |
board[i]=undefined; | |
} | |
} | |
}else{ | |
res = -1000; | |
for(i=0;i<9;i++){ | |
if(board[i]==undefined) | |
{ | |
board[i]=symbol; | |
moves++; | |
res = Math.max(res, minimax(toggleState(symbol),i,level-1)); | |
board[i]=undefined; | |
moves--; | |
} | |
} | |
} | |
return res; | |
} | |
function computerMove(){ | |
var i; | |
var max=-1000; | |
var mi=4; | |
var t; | |
for(i=0;i<9;i++) | |
if(board[i]==undefined) | |
{ | |
board[i]=active; | |
moves++ | |
t=minimax(toggleState(active),i,7); | |
if(t>max) | |
{ | |
max=t; | |
mi=i; | |
} | |
board[i]=undefined; | |
moves--; | |
} | |
return mi; | |
} | |
function displayTie(){ | |
// TODO | |
$('.out').text("TIE!"); | |
$('.el-o').append($(symbols['?'])).addClass('tie'); | |
} | |
function boardClick(){ | |
if(enabled && moves < 9){ | |
$(this).append($(symbols[active])).off('click').removeClass('free'); | |
var pos = parseInt($(this).attr('id').slice(1)); | |
board[pos] = active; | |
active = toggleState(active); | |
moves++; | |
var w = checkPatterns(pos); | |
// game ends | |
if (w){ | |
displayWin(w); | |
enabled = false; | |
setTimeout(function(){ | |
$('.screen').fadeIn(); | |
$('.console').fadeIn(); | |
},500); | |
return; | |
} else if (moves === 9){ | |
enabled = false; | |
displayTie(); | |
setTimeout(function(){ | |
$('.screen').fadeIn(); | |
$('.console').fadeIn(); | |
},500); | |
return; | |
} else { | |
human = !human; | |
if(!human){ | |
enabled=false; | |
setTimeout(function(){ | |
enabled=true; | |
$('#n'+computerMove()).click(); | |
},500); | |
} | |
return; | |
} | |
} | |
} | |
function displayWin(obj){ | |
$('.el').removeClass('free').off('click'); | |
switch (obj.pattern) { | |
case 'r' : | |
$('div.r'+obj.number+' div').addClass('win'); | |
break; | |
case 'c' : | |
$('.c'+obj.number).addClass('win'); | |
break; | |
case 'd' : | |
$('.d'+obj.number).addClass('win'); | |
break; | |
} | |
$('.out').text('WINS!') | |
$('.el-o').append($(symbols[obj.symbol])).addClass('win'); | |
} | |
$('.el-s').click(function(){ | |
$('.screen').fadeOut(); | |
$('.select').fadeOut(); | |
if($(this).attr('id') === 'o'){ | |
human = false; | |
enabled = false; | |
setTimeout(function(){ | |
enabled = true; | |
$('#n'+computerMove()).click(); | |
},500); | |
} | |
}); | |
function init(){ | |
$('.el').empty().off('click').click(boardClick).removeClass('win').addClass('free'); | |
$('.el-o').empty().removeClass('win tie'); | |
active = 'x'; | |
board = new Array(9); | |
enabled = true; | |
human = true; | |
moves = 0; | |
$('.screen').fadeIn(); | |
$('.select').fadeIn(); | |
$('.console').fadeOut(); | |
} | |
$('.console').click(init).click(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Pacifico|Lato); | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: middle; | |
-webkit-user-select: none; /* Chrome/Safari */ | |
-moz-user-select: none; /* Firefox */ | |
-ms-user-select: none; /* IE10+ */ | |
/* Rules below not implemented in browsers yet */ | |
-o-user-select: none; | |
user-select: none; | |
} | |
body{ | |
font-family : lato,sans; | |
} | |
div.head h1{ | |
color:#444; | |
font-size : 4em; | |
margin : 30px auto; | |
text-align : center; | |
} | |
.curs{ | |
font-family: 'Pacifico',serif; | |
} | |
.wrap{ | |
position:relative; | |
margin:auto; | |
margin-top: 40px; | |
width : 400px; | |
} | |
.row{ | |
text-align:center; | |
margin : 10px auto; | |
} | |
div.pop-up h3{ | |
text-align:center; | |
padding-top: 5px; | |
color: #444; | |
} | |
.inline{ | |
display:inline-block; | |
margin:10px 5px; | |
text-align:center; | |
} | |
.big{ | |
font-size:2em; | |
margin : 30px auto; | |
} | |
#sub{ | |
color: #888; | |
} | |
.el,.el-s,.el-o{ | |
display: inline-block; | |
height:110px; | |
width:110px; | |
font-size : 4.5em; | |
background-color : #61b2a3; | |
border-radius:20px; | |
margin: auto 5px; | |
color: #f8f8f8; | |
} | |
.el i,.el-s i,.el-o i{ | |
padding-bottom: 8px; | |
} | |
.el-o{ | |
margin-right: 20px; | |
} | |
.screen{ | |
display:none; | |
background-color:rgba(10,10,10,0.6); | |
position:fixed; | |
width: 100%; | |
height : 100%; | |
top : 0; | |
} | |
.pop-up{ | |
position:absolute; | |
width : 400px; | |
height : 175px; | |
border-radius: 20px; | |
background-color:#fff; | |
margin: 0 auto; | |
top : 250px; | |
left : 50%; | |
margin-left: -200px; | |
box-shadow: 0px 5px 5px -2px rgba(20,20,20, 0.4); | |
display:none; | |
} | |
.win{ | |
background-color: #E6382B; | |
} | |
.tie{ | |
background-color: #a5bcae; | |
} | |
.free{ | |
cursor : pointer; | |
background-color: #71A299; | |
} | |
.free:hover{ | |
background-color : #61b2a3; | |
} | |
/* Scaling for Mobile */ | |
@media screen and (max-width: 450px){ | |
.head { | |
display:none; | |
} | |
.wrap { | |
top: 30px; | |
-moz-transform: scale(0.7); | |
-webkit-transform: scale(0.7); | |
transform: scale(0.7); | |
-webkit-transform-origin: 0 0; | |
-moz-transform-origin: 0 0; | |
transform-origin: 0 0; | |
left: 50%; | |
margin-left: -140px; | |
} | |
.pop-up { | |
top: 100px; | |
-moz-transform: scale(0.7); | |
-webkit-transform: scale(0.7); | |
transform: scale(0.7); | |
-webkit-transform-origin: 0 0; | |
-moz-transform-origin: 0 0; | |
transform-origin: 0 0; | |
left: 50%; | |
margin-left: -140px; | |
} | |
} | |
.txt { | |
position: relative; | |
top: 5px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment