Skip to content

Commit

Permalink
Initial Commit
Browse files Browse the repository at this point in the history 
"Cross"ed My First Commit
  • Loading branch information
@HJain13
HJain13 authored Apr 5, 2017
1 parent 22ecfd4 commit 466e586
Show file tree
Hide file tree
Showing 3 changed files with 302 additions and 0 deletions.
161 changes: 161 additions & 0 deletions base.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
@import url('https://fonts.googleapis.com/css?family=Quicksand');

body {
font-family: 'Quicksand', sans-serif;
font-size: 32px;
}

.container {
width: 100%;
}

#tttArea{
width: 542px;
height: 542px;
margin: 60px auto;
}

div[id*="ib"] {
width: 180px;
height: 180px;
position: absolute;
}

#ib1 {
border-right: 1px solid #888;
border-bottom: 1px solid #888;
}

#ib2 {
margin-left:181px;
}

#ib3 {
border-left: 1px solid #888;
border-bottom: 1px solid #888;
margin: 0 0 360px 361px;
}

#ib4 {
margin-top: 181px;
}

#ib5 {
border: 1px solid #888;
margin: 180px 0 0 180px;
}

#ib6 {
margin: 181px 0 0 361px;
}

#ib7 {
border-top: 1px solid #888;
border-right: 1px solid #888;
margin: 361px 360px 0 0;
}

#ib8 {
margin: 361px 0 0 181px;
}

#ib9 {
border-top: 1px solid #888;
border-left: 1px solid #888;
margin: 361px 0 0 361px;
}

.cross {
position: absolute;
width: 140px;
height: 140px;
margin-left: 93px;
margin-top: 23px;
opacity: 1;
}

.cross:before,
.cross:after {
position: absolute;
content: ' ';
height: 141px;
width: 3px;
background-color: #333;
}

.cross:before {
transform: rotate(45deg);
}

.cross:after {
transform: rotate(-45deg);
}

.crossE {
position: absolute;
width: 140px;
height: 140px;
margin-left: 93px;
margin-top: 23px;
opacity: 1;
}

.crossE:before,
.crossE:after {
position: absolute;
content: ' ';
height: 141px;
width: 3px;
background-color: #0dd;
}

.crossE:before {
transform: rotate(45deg);
}

.crossE:after {
transform: rotate(-45deg);
}

.circle {
position: absolute;
height: 110px;
width: 110px;
margin: 35px 35px;
background-color: transparent;
border: 3px solid #333;
border-radius:50%;
}

div[id^="cr"] {
display: none;
}

div[id^="ci"] {
display: none;
}

.player {
width: 180px;
height: 40px;
text-align: center;
background-color: #000;
opacity: 0.2;
border-radius: 10px;
float: right;
color: white;
padding: 10px;
}

#p1 {
opacity: 1.0;
float: left;
}

#status {
padding-top: 10px;
width: 250px;
height: 60px;
margin: 0 auto;
text-align: center;
}
57 changes: 57 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="base.css">
<title>Tic-Tac-Toe</title>
</head>
<body>
<div class="container">
<div class="player" id="p1">Player 1</div>
<div class="player" id="p2">Player 2</div>
<div id="status"></div>
<div id="tttArea">
<div id="ib1" onclick="place('1')">
<div class="circle" id="ci1"></div>
<div class="cross" id="cr1"></div>
</div>
<div id="ib2" onclick="place('2')">
<div class="circle" id="ci2"></div>
<div class="cross" id="cr2"></div>
</div>
<div id="ib3" onclick="place('3')">
<div class="circle" id="ci3"></div>
<div class="cross" id="cr3"></div>
</div>
<div id="ib4" onclick="place('4')">
<div class="circle" id="ci4"></div>
<div class="cross" id="cr4"></div>
</div>
<div id="ib5" onclick="place('5')">
<div class="circle" id="ci5"></div>
<div class="cross" id="cr5"></div>
</div>
<div id="ib6" onclick="place('6')">
<div class="circle" id="ci6"></div>
<div class="cross" id="cr6"></div>
</div>
<div id="ib7" onclick="place('7')">
<div class="circle" id="ci7"></div>
<div class="cross" id="cr7"></div>
</div>
<div id="ib8" onclick="place('8')">
<div class="circle" id="ci8"></div>
<div class="cross" id="cr8"></div>
</div>
<div id="ib9" onclick="place('9')">
<div class="circle" id="ci9"></div>
<div class="cross" id="cr9"></div>
</div>
</div>
</div>
<script src="ttt.js"></script>

</body>
</html>
84 changes: 84 additions & 0 deletions ttt.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
var x = 'Player 2';
var placed = ['','','','','','','','','',''];
var gOver = 0;

function place(i) {
if (gOver != 1){
if ((x == 'Player 1')&&(placed[i]=='')) {
document.getElementById("ci"+i).style.display='block';
document.getElementById("p2").style.opacity='0.2';
document.getElementById("p1").style.opacity='1';
placed[i] = 'ci';
x = 'Player 2';
}
else if ((x == 'Player 2')&&(placed[i]=='')){
document.getElementById("cr"+i).style.display='block';
document.getElementById("p1").style.opacity='0.2';
document.getElementById("p2").style.opacity='1';
placed[i] = 'cr';
x = 'Player 1';
}
}
if (placed[1]==placed[2]&&placed[2]==placed[3]&&placed[1]!='') {
declare(x);
enhance(1,2,3,x);
} else if (placed[1]==placed[4]&&placed[4]==placed[7]&&placed[1]!='') {
declare(x);
enhance(1,4,7,x);
} else if (placed[1]==placed[5]&&placed[5]==placed[9]&&placed[1]!='') {
declare(x);
enhance(1,5,9,x);
} else if (placed[2]==placed[5]&&placed[5]==placed[8]&&placed[2]!='') {
declare(x);
enhance(2,5,8,x);
} else if (placed[3]==placed[5]&&placed[5]==placed[7]&&placed[3]!='') {
declare(x);
enhance(3,5,7,x);
} else if (placed[3]==placed[6]&&placed[6]==placed[9]&&placed[3]!='') {
declare(x);
enhance(3,6,9,x);
} else if (placed[4]==placed[6]&&placed[6]==placed[5]&&placed[4]!='') {
declare(x);
enhance(4,5,6,x);
} else if (placed[7]==placed[9]&&placed[9]==placed[8]&&placed[9]!='') {
declare(x);
enhance(7,8,9,x)
}
checkTie();
}

function declare(x){
document.getElementById("status").innerHTML = x + " Wins!";
gOver = 1;
document.getElementById("p1").style.opacity='0.2';
document.getElementById("p2").style.opacity='0.2';
}

function checkTie(){
var i, flag = 0;
for (i = 1; i<=9; i++){
if (placed[i]==''){
flag = 1;
break;
}
}
if (flag==0) {
document.getElementById("status").innerHTML = "It's A Draw";
gOver = 1;
document.getElementById("p1").style.opacity='0.2';
document.getElementById("p2").style.opacity='0.2';
}
}

function enhance(a,b,c,x){
if (x == 'Player 1') {
document.getElementById('cr'+a).setAttribute("class", "crossE");
document.getElementById('cr'+b).setAttribute("class", "crossE");
document.getElementById('cr'+c).setAttribute("class", "crossE");
window.getComputedStyle
} else {
document.getElementById('ci'+a).style.borderColor="#0dd";
document.getElementById('ci'+b).style.borderColor="#0dd";
document.getElementById('ci'+c).style.borderColor="#0dd";
}
}

0 comments on commit 466e586

Please sign in to comment.