Created
May 20, 2017 07:37
-
-
Save mritunjayupadhyay/f71cd1576fafcacf9720a1199197ee71 to your computer and use it in GitHub Desktop.
It is basic tic tac toe game.
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Tic Tac Toe</title> | |
<link rel="stylesheet" href="main.css" media="screen" title="no title"> | |
</head> | |
<body> | |
<div class="container"> | |
<!-- <div class=""> | |
Computer Point: <span class="computer-point"></span> | |
</div> | |
<div class=""> | |
Your Point: <span class="your-point"></span> | |
</div> --> | |
<div class="tic-tac-toe"> | |
<div class="game"> | |
<span class="your-turn">Your Turn</span> | |
<span class="computer-turn">Computer Turn</span> | |
<span class="you-win-lose"></span> | |
</div> | |
<div class="game-board"> | |
<div class="no-of-player"> | |
<button type="button" name="button" class="start">start</button> | |
</div> | |
<div class="new-game-notification no-show"> | |
<button type="button" name="button" class="new-game">new game</button> | |
</div> | |
<div class="choose-x-o no-show"> | |
<p> | |
Choose X or O | |
</p> | |
<div class=""> | |
<button type="button" name="button" class="myX"> X </button> | |
<button type="button" name="button" class="myO"> O </button> | |
</div> | |
</div> | |
<span class="vertical-line vertical-line1"></span> | |
<span class="horizontal-line horizontal-line1"></span> | |
<span class="vertical-line vertical-line2"></span> | |
<span class="horizontal-line horizontal-line2"></span> | |
<div class="box" id="1" data-key="1"> | |
</div> | |
<div class="box" id="2" data-key="2"> | |
</div> | |
<div class="box" id="3" data-key="3"> | |
</div> | |
<div class="box" id="4" data-key="4"> | |
</div> | |
<div class="box" id="5" data-key="5"> | |
</div> | |
<div class="box" id="6" data-key="6"> | |
</div> | |
<div class="box" id="7" data-key="7"> | |
</div> | |
<div class="box" id="8" data-key="8"> | |
</div> | |
<div class="box" id="9" data-key="9"> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript" src="main.js"></script> | |
</body> | |
</html> |
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
*{ | |
padding: 0; | |
margin: 0; | |
} | |
.container{ | |
width: 100%; | |
height: 100vh; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
/*background-image: url("http://i.imgur.com/1MycyuK.png");*/ | |
background-size: cover; | |
font-family: 'Architects Daughter', Helvetica, sans-serif; | |
} | |
.game-board{ | |
width: 300px; | |
height: 300px; | |
position: relative; | |
background-color: purple; | |
color: #fff; | |
margin-top: -100px; | |
padding: 10px; | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: space-around; | |
box-shadow: inset -1px 1px 7px rgba(0,0,0,.2), inset 1px -1px 7px rgba(0,0,0,.2), 1px 12px 5px rgba(0,0,0,.4), 4px 3px 8px rgba(0,0,0,.4), 5px 10px 10px rgba(0,0,0,.2), -5px 10px 10px rgba(0,0,0,.4); | |
} | |
.box{ | |
width: 30%; | |
height: 30%; | |
min-width: 80px; | |
min-height: 80px; | |
font-size: 50px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.vertical-line{ | |
position: absolute; | |
width: 3px; | |
top: 20px; | |
bottom: 20px; | |
background-color: #fff; | |
display: inline-block; | |
z-index: 100px; | |
} | |
.vertical-line1{ | |
left: 33%; | |
} | |
.vertical-line2{ | |
left: 66%; | |
} | |
.vertical-line3{ | |
left: 99%; | |
} | |
.horizontal-line1{ | |
top: 33%; | |
} | |
.horizontal-line2{ | |
top: 66%; | |
} | |
.horizontal-line3{ | |
top: 99%; | |
} | |
.horizontal-line{ | |
position: absolute; | |
height: 3px; | |
display: inline-block; | |
background-color: #fff; | |
left: 20px; | |
right: 20px; | |
} | |
.choose-x-o{ | |
display: none; | |
} | |
.no-of-player, .new-game-notification, .choose-x-o{ | |
position: absolute; | |
z-index: 500; | |
top:0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
background-color: rgba(0, 0, 0, 0.7); | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.choose-x-o{ | |
flex-direction: column; | |
} | |
.start, .new-game, .myX, .myO{ | |
background-color: transparent; | |
text-transform: uppercase; | |
font-size: 20px; | |
letter-spacing: 1.5; | |
color: #fff; | |
border: 0; | |
padding:5px 15px; | |
border-radius: 30px; | |
margin: 0 10px; | |
} | |
.start:hover, .new-game{ | |
border: 2px dashed #ddd; | |
color: #ddd; | |
} | |
.active{ | |
display: inline-block; | |
} | |
.your-turn, .computer-turn{ | |
display: none; | |
} | |
.no-show{ | |
display: none; | |
} |
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
var allbox = document.querySelectorAll('.box'); | |
var count = 0; | |
var game = { | |
moves: [], | |
scores: [], | |
activeTurn: true, | |
xPoint: 0, | |
oPoint: 0, | |
xSequence: [], | |
oSequence: [], | |
winningSequence: ['147', '123', '159', '456', '789', '258', '369', '357'], | |
availableMoves: [], | |
choice: null, | |
winner: null, | |
inState: null, | |
computer: null, | |
user: null | |
} | |
function newGame() { | |
game.xPoint = 0; | |
game.oPoint = 0; | |
game.activeTurn = false; | |
setTimeout(function(){ chooseYourCharacter(); }, 500); | |
setTimeout(function() { clearGame(); }, 1000); | |
} | |
function chooseYourCharacter(){ | |
document.querySelector('.choose-x-o').classList.remove('no-show'); | |
document.querySelector('.myX').addEventListener('click',function(){ | |
game.computer = 'O'; | |
game.user = 'X'; | |
document.querySelector('.choose-x-o').classList.add('no-show'); | |
}); | |
document.querySelector('.myO').addEventListener('click',function(){ | |
game.computer = 'X'; | |
game.user = 'O'; | |
document.querySelector('.choose-x-o').classList.add('no-show'); | |
}); | |
} | |
function clearGame() { | |
game.xSequence = []; | |
game.oSequence = []; | |
game.availableMoves = [1, 2, 3, 4, 5, 6, 7, 8, 9]; | |
game.moves = []; | |
game.scores = []; | |
game.choice = null; | |
game.winner = null; | |
document.getElementById("1").innerHTML = ''; | |
document.getElementById("2").innerHTML = ''; | |
document.getElementById("3").innerHTML = ''; | |
document.getElementById("4").innerHTML = ''; | |
document.getElementById("5").innerHTML = ''; | |
document.getElementById("6").innerHTML = ''; | |
document.getElementById("7").innerHTML = ''; | |
document.getElementById("8").innerHTML = ''; | |
document.getElementById("9").innerHTML = ''; | |
document.querySelector('.new-game').classList.remove('no-show'); | |
setTimeout(function() { | |
document.querySelector('.new-game').classList.add('no-show'); | |
}, 1000); | |
setTimeout(function() { | |
startGame(); | |
}, 2000); | |
} | |
function startGame() { | |
if (game.activeTurn) { | |
computerTurn(); | |
} | |
} | |
function computerTurn() { | |
var arr = game.availableMoves; | |
var mychoice; | |
var cloneOfA = JSON.parse(JSON.stringify(game)); | |
console.log(cloneOfA); | |
if(game.availableMoves.length === 9){ | |
mychoice = Math.floor(Math.random() * 9) + 1; | |
} | |
else{ | |
miniMax(cloneOfA); | |
mychoice = game.choice; | |
} | |
console.log(mychoice); | |
document.getElementById(`${mychoice}`).innerHTML = game.computer; | |
updateAvailableMoves(mychoice, game); | |
updateXSequence(mychoice, game); | |
console.log("Compuer Sequence" + game.xSequence); | |
checkWin(game.computer, game); | |
if (game.winner === game.computer) { | |
game.xPoint = game.xPoint + 1; | |
setTimeout(function() { | |
alert('You lost'); | |
}, 1000); | |
setTimeout(function() { | |
clearGame(); | |
}, 2000); | |
} | |
if (game.availableMoves.length === 0) { | |
setTimeout(function() { | |
alert('The draw'); | |
}, 1000); | |
setTimeout(function() { | |
clearGame(); | |
}, 2000); | |
} | |
game.activeTurn = false; | |
} | |
function score(p) { | |
if (p.winner === game.computer) { | |
return 10; | |
} else if (p.winner === game.user) { | |
return -10; | |
} else { | |
return 0; | |
} | |
} | |
function getNewState(pGame, move) { | |
var nPgame = JSON.parse(JSON.stringify(pGame)); | |
var aMoves = nPgame.availableMoves.filter(d => { | |
if (d === move) { | |
return false; | |
} | |
return true; | |
}); | |
nPgame.availableMoves = aMoves; | |
if (nPgame.inState % 2 === 0) { | |
updateXSequence(move, nPgame); | |
nPgame.activeTurn = true; | |
} else { | |
updateOSequence(move, nPgame); | |
nPgame.activeTurn = false; | |
} | |
return nPgame; | |
} | |
function giveIndexOfMax(arr) { | |
var max = 0; | |
for (var i = 1; i < arr.length; i++) { | |
if (arr[max] < arr[i]) { | |
max = i; | |
} | |
} | |
return max; | |
} | |
function giveIndexOfMin(arr) { | |
var min = 0; | |
for (var i = 1; i < arr.length; i++) { | |
if (arr[min] > arr[i]) { | |
min = i; | |
} | |
} | |
return min; | |
} | |
function miniMax(possiblegame) { | |
count++; | |
var newPossibleGame; | |
var arr = []; | |
var cloneOfGame = JSON.parse(JSON.stringify(possiblegame)); | |
if(cloneOfGame.inState === null){ | |
cloneOfGame.inState = 0; | |
} | |
else{ | |
cloneOfGame.inState = cloneOfGame.inState + 1; | |
} | |
checkForX(cloneOfGame); | |
checkForO(cloneOfGame); | |
if(cloneOfGame.winner === game.computer || cloneOfGame.winner === game.user || cloneOfGame.availableMoves.length === 0) { | |
return score(cloneOfGame); | |
} | |
var moves = []; | |
var scores = []; | |
var allState = []; | |
var indexOfMax; | |
var indexOfMin; | |
cloneOfGame.availableMoves.forEach(move => { | |
arr.push(move); | |
}); | |
arr.forEach(key => { | |
newPossibleGame = getNewState(cloneOfGame, key); | |
allState.push(newPossibleGame); | |
scores.push(miniMax(newPossibleGame)); | |
moves.push(key); | |
}); | |
console.log("this is score:",cloneOfGame.xSequence,cloneOfGame.oSequence,allState,arr,moves,scores); | |
if (allState[0].activeTurn === true) { | |
indexOfMax = giveIndexOfMax(scores); | |
console.log(indexOfMax); | |
console.log(moves[indexOfMax]); | |
game.choice = moves[indexOfMax]; | |
return scores[indexOfMax]; | |
} else { | |
indexOfMin = giveIndexOfMin(scores); | |
game.choice = moves[indexOfMin]; | |
return scores[indexOfMin]; | |
} | |
} | |
function updateAvailableMoves(mychoice, obj) { | |
var arr = obj.availableMoves.filter(function(d) { | |
if (d === mychoice) { | |
return false; | |
} | |
return true; | |
}); | |
obj.availableMoves = arr; | |
} | |
function updateOSequence(mychoice, obj) { | |
var m = []; | |
if (obj.oSequence.length === 0) { | |
m.push(mychoice.toString()); | |
} | |
for (var i = 0; i < obj.oSequence.length; i++) { | |
var str = obj.oSequence[i]; | |
for (var j = 0; j <= str.length; j++) { | |
var a = str.substr(0, j); | |
var b = mychoice.toString(); | |
var c = str.substr(j); | |
var d = a.concat(b, c); | |
m.push(d); | |
} | |
} | |
obj.oSequence = m; | |
} | |
function updateXSequence(mychoice, obj) { | |
var m = []; | |
if (obj.xSequence.length === 0) { | |
m.push(mychoice.toString()); | |
} | |
for (var i = 0; i < obj.xSequence.length; i++) { | |
var str = obj.xSequence[i]; | |
for (var j = 0; j <= str.length; j++) { | |
var a = str.substr(0, j); | |
var b = mychoice.toString(); | |
var c = str.substr(j); | |
var d = a.concat(b, c); | |
m.push(d); | |
} | |
} | |
obj.xSequence = m; | |
} | |
function checkWin(d, obj) { | |
var win = false; | |
if (d === game.computer) { | |
win = checkForX(obj); | |
} else { | |
win = checkForO(obj); | |
} | |
return win; | |
} | |
function checkForO(obj) { | |
obj.oSequence.forEach(key => { | |
obj.winningSequence.forEach(d => { | |
if (key.includes(d)) { | |
obj.winner = game.user; | |
return true; | |
} | |
}); | |
}); | |
return false; | |
} | |
function checkForX(obj) { | |
obj.xSequence.forEach(key => { | |
obj.winningSequence.forEach(d => { | |
if (key.includes(d)) { | |
obj.winner = game.computer; | |
return true; | |
} | |
}); | |
}); | |
return false; | |
} | |
function yourTurn(mychoice) { | |
updateAvailableMoves(mychoice, game); | |
updateOSequence(mychoice, game); | |
checkWin(game.user, game); | |
game.activeTurn = true; | |
if (game.winner === game.user) { | |
game.oPoint++; | |
setTimeout(function() { | |
alert('You win'); | |
}, 1000); | |
setTimeout(function() { | |
clearGame(); | |
}, 2000); | |
} else { | |
if (game.availableMoves.length === 0) { | |
setTimeout(function() { | |
alert('The draw'); | |
}, 1000); | |
setTimeout(function() { | |
clearGame(); | |
}, 2000); | |
} else { | |
startGame(); | |
} | |
} | |
} | |
document.querySelector('.start').addEventListener('click', function() { | |
document.querySelector('.no-of-player').style.display = 'none'; | |
newGame(); | |
}); | |
document.getElementById("1").addEventListener('click', function(e) { | |
e.preventDefault(); | |
console.log('clicked'); | |
console.log(this.innerHTML); | |
if (game.activeTurn === false) { | |
if (this.innerHTML !== game.computer || this.innerHTML !== game.user) { | |
this.innerHTML = game.user; | |
setTimeout(function() { | |
yourTurn(1); | |
}, 1000); | |
} | |
} | |
}); | |
document.getElementById('2').addEventListener('click', function(e) { | |
e.preventDefault(); | |
if (game.activeTurn === false) { | |
if (this.innerHTML !== game.computer || this.innerHTML !== game.user) { | |
this.innerHTML = game.user; | |
setTimeout(function() { | |
yourTurn(2); | |
}, 1000); | |
} | |
} | |
}); | |
document.getElementById('3').addEventListener('click', function(e) { | |
e.preventDefault(); | |
if (game.activeTurn === false) { | |
if (this.innerHTML !== game.computer || this.innerHTML !== game.user) { | |
this.innerHTML = game.user; | |
setTimeout(function() { | |
yourTurn(3); | |
}, 1000); | |
} | |
} | |
}); | |
document.getElementById('4').addEventListener('click', function(e) { | |
e.preventDefault(); | |
if (game.activeTurn === false) { | |
if (this.innerHTML !== game.computer || this.innerHTML !== game.user) { | |
this.innerHTML = game.user; | |
setTimeout(function() { | |
yourTurn(4); | |
}, 1000); | |
} | |
} | |
}); | |
document.getElementById('5').addEventListener('click', function(e) { | |
e.preventDefault(); | |
if (game.activeTurn === false) { | |
if (this.innerHTML !== game.computer || this.innerHTML !== game.user) { | |
this.innerHTML = game.user; | |
setTimeout(function() { | |
yourTurn(5); | |
}, 1000); | |
} | |
} | |
}); | |
document.getElementById('6').addEventListener('click', function(e) { | |
e.preventDefault(); | |
if (game.activeTurn === false) { | |
if (this.innerHTML !== game.computer || this.innerHTML !== game.user) { | |
this.innerHTML = game.user; | |
setTimeout(function() { | |
yourTurn(6); | |
}, 1000); | |
} | |
} | |
}); | |
document.getElementById('7').addEventListener('click', function(e) { | |
e.preventDefault(); | |
if (game.activeTurn === false) { | |
if (this.innerHTML !== game.computer || this.innerHTML !== game.user) { | |
this.innerHTML = game.user; | |
setTimeout(function() { | |
yourTurn(7); | |
}, 1000); | |
} | |
} | |
}); | |
document.getElementById('8').addEventListener('click', function(e) { | |
e.preventDefault(); | |
if (game.activeTurn === false) { | |
if (this.innerHTML !== game.computer || this.innerHTML !== game.user) { | |
this.innerHTML = game.user; | |
setTimeout(function() { | |
yourTurn(8); | |
}, 1000); | |
} | |
} | |
}); | |
document.getElementById('9').addEventListener('click', function(e) { | |
e.preventDefault(); | |
if (game.activeTurn === false) { | |
if (this.innerHTML !== game.computer || this.innerHTML !== game.user) { | |
this.innerHTML = game.user; | |
setTimeout(function() { | |
yourTurn(9); | |
}, 1000); | |
} | |
} | |
}); | |
// | |
// document.querySelector('.computer-point').innerHTML = game.xPoint; | |
// document.querySelector('.your-point').innerHTML = game.oPoint; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment