Skip to content

Instantly share code, notes, and snippets.

@srini5

srini5/index.html

Created January 10, 2017 01:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save srini5/abec1c12f7eae347d87da680caab3201 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save srini5/abec1c12f7eae347d87da680caab3201 to your computer and use it in GitHub Desktop.
Download ZIP
Tic Tac Toe
Raw
index.html
<html>
<body>
<br>
<div class="container-fluid">
<div class= "row">
<div class="col-md-4 col-s-3 col-xs-2"></div>
<div class= "well col-md-4 col-s-6 col-xs-8">
<h1 class="text-center">Tic Tac Toe</h1>
<div class="initial">
<h3 class="text-center"> Welcome to Tic Tac Toe </h3>
<h4 class="text-center"> To start, please select if you would like to play as 'X' or as 'O', by clicking the corresponding button below. </h4>
<div class="col-md-4 col-sm-3 col-xs-2"></div>
<div class="initial-buttons">
<button id="btnX" class="btn btn-primary"> Play as X </button>
<button id="btnO" class="btn btn-primary"> Play as O </button>
</div>
<div class= "col-md-4 col-sm-3 col-xs-2"></div>
</div>
<div class = "later">
<button class="button hidden" id="btnReset">Reset</button>
<h2> Current Scores: </h2>
<table>
<tr>
<td class="simple"><h3> Comp <div id="compScore"></div></h3></td>
<td class="simple"><h3> Human: <div id="humanScore"></div></h3></td>
</tr>
</table>
<h4 id= "message"></h4>
<div class= "well mainTicTacToeGrid" >
<table id="tab">
<tr>
<td id="box0" name="0"></td>
<td id="box1" name="1"></td>
<td id="box2" name="2"></td>
</tr>
<tr>
<td id="box3" name="3"></td>
<td id="box4" name="4"></td>
<td id="box5" name="5"></td>
</tr>
<tr>
<td id="box6" name="6"></td>
<td id="box7" name="7"></td>
<td id="box8" name="8"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-4 col-s-3 col-xs-2"></div>
</div>
</body>
</html>
Raw
script.js
var arrX = [];
var arrO = [];
var counter = 0;
var humanScore =0 ;
var compScore = 0;
var arr = {};
var remMoves = {0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8};
var userClass = "darkX";
var compClass = "brightO";
function resetBoard(){
arr = {};
arrX = [];
arrO = [];
counter = 0;
$(".brightO").removeClass("brightO");
$(".darkX").removeClass("darkX");
remMoves = {0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8};
}
$(document).ready(function(){
resetBoard();
$("#btnX").click(function(){
userClass = "darkX";
compClass = "brightO";
resetBoard();
$(".later").removeClass("later");
$(".initial").addClass("later");
});
$("#btnO").click(function(){
compClass = "darkX";
userClass = "brightO";
resetBoard();
$(".later").removeClass("later");
$(".initial").addClass("later");
});
$("#humanScore").html("" + humanScore);
$("#compScore").html("" + compScore);
$("#btnReset").click(function(){
resetBoard();
});
$("#tab tr td").click(function(){
//console.log(event.currentTarget.getAttribute("name"));
var boxNo = event.currentTarget.getAttribute("name");
var clicked = "#box" + boxNo;
if(!arr.hasOwnProperty(boxNo)){ // i.e. if current box is empty
counter ++;
$(clicked).addClass (userClass);
$(clicked).html = "X";
arr[boxNo] = "X"
arrX.push(boxNo);
delete remMoves[boxNo];
checkPos(arr);
if(counter <9){
playMove(arr); // make computer move
}
}
});
});
function playMove(arr){
console.log("Computer thinking");
var compM = -1;
var opts = Object.keys(remMoves);
var num = Math.floor(Math.random()*opts.length); // 'num'th element out of the remaining moves to be choosen
console.log("num chosen: "+ num + "...opts.length:"+opts.length);
//console.log("...."+opts);
//console.log("****"+opts[num]);
arr[opts[num]] = "O";
compM = opts[num];
delete remMoves[compM];
counter++;
arrO.push(compM);
$("#box"+compM).addClass(compClass);
checkPos(arr);
}
function checkPos(arr){
var dispMsg = "";
// To check if either "X" or "O" has won
// possible wins are as follows:
// 012, 345, 678, 036, 147, 258, 048, 246
var wins = ["012", "345", "678", "036", "147", "258", "048", "246"];
var xpos = arrX.join("");
var wonX = wins.reduce(function(won, val){
if(won){
return true;
}else{
var curr = val.split("");
for (var i=0; i<3; i++){
if(xpos.indexOf(curr[i]) === -1){
return false;
}
}
return true;
}
}, false);
if (wonX){ // X wins
humanScore++;
$("#humanScore").html("" + humanScore);
dispMsg = "Human (X) wins"; counter = 9;
alert("Congratulations. You win. To continue, please press OK. To exit, please press OK, and then close this window.");
resetBoard();
}else{ // check if O wins
var opos = arrO.join("");
var wonO = wins.reduce(function(won, val){
if(won){
return true;
}else{
var curr = val.split("");
for (var i=0; i<3; i++){
if(opos.indexOf(curr[i]) === -1){
return false;
}
}
return true;
}
}, false);
if(wonO){
compScore ++;
$("#compScore").html("" + compScore);
dispMsg = "Computer (O) wins"; counter = 9;
alert("Sorry, you lose. To continue, please press OK. To exit, please press OK, and then close this window.");
resetBoard();
}else if (counter === 9){
dispMsg = "Game drawn"; counter = 9; resetBoard();
}else {
dispMsg = "Your turn. Please make your move.";
}
}
$("#message").html(dispMsg);
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.css
body{
background-color: black;
color: white;
}
.well{
background-color: black;
}
.later{
display: none;
}
.simple{
text-align: center;
background-color: cyan;
}
.brightO:after{
content: "O";
}
.brightO {
background-color: yellow;
}
.darkX:after{
content: "X";
}
.darkX{
background-color: green;
}
table tr td{
background-color: white;
color: black;
border: solid black;
width: 100px;
height: 100px;
font-size: 72px;
}
.initial-buttons{
display: block;
margin: 0 auto;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment