A Pen by Melvin Davis on CodePen.
Last active
August 29, 2015 14:27
-
-
Save melvinodsa/395aace1568041153101 to your computer and use it in GitHub Desktop.
Tic tac
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='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'> | |
<div id="square" class=square> | |
<div id="littlesquare" onclick="HandleClick(this);" class="little-square v1-square h1-square"></div> | |
<div id="littlesquare" onclick="HandleClick(this);" class="little-square v1-square h2-square"></div> | |
<div id="littlesquare" onclick="HandleClick(this);" class="little-square v1-square h3-square"></div> | |
<div id="littlesquare" onclick="HandleClick(this);" class="little-square v2-square h1-square"></div> | |
<div id="littlesquare" onclick="HandleClick(this);" class="little-square v2-square h2-square"></div> | |
<div id="littlesquare" onclick="HandleClick(this);" class="little-square v2-square h3-square"></div> | |
<div id="littlesquare" onclick="HandleClick(this);" class="little-square v3-square h1-square"></div> | |
<div id="littlesquare" onclick="HandleClick(this);" class="little-square v3-square h2-square"></div> | |
<div id="littlesquare" onclick="HandleClick(this);" class="little-square v3-square h3-square"></div> | |
<div class="vertical-line vfirst-line"></div> | |
<div class="vertical-line vsecond-line"></div> | |
<div class="horizontal-line hfirst-line"></div> | |
<div class="horizontal-line hsecond-line"></div> | |
</div> | |
<div id="init-black" class="init-black"></div> | |
<div id="init-prompt" class="init-prompt"> | |
<div class="application-header"> | |
<p class="application-name">Tic Tac Toe Unbeatable | |
</p> | |
</div> | |
<button onclick="play();" class="play">Play</button> | |
</div> | |
<button id="replay" onclick="reeplay();" class="replay">Play again</button> |
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
function play(){ | |
document.getElementById("init-black").style.display = "none"; | |
document.getElementById("init-prompt").style.display = "none"; | |
document.getElementById("replay").style.display = "block"; | |
} | |
function reeplay(){ | |
var childNodes = document.getElementById("square").childNodes; | |
for(var i=childNodes.length-1;i >= 0;i--){ | |
var childNode = childNodes[i]; | |
childNode.innerHTML = ''; | |
} | |
} | |
var checker = false; | |
function HandleClick(elementThis) { | |
if (checker == false) { | |
checker = true; | |
elementThis.innerHTML = '<div id="circle" class="circle"></div>'; | |
} else { | |
checker = false; | |
elementThis.innerHTML = '<div class="cross"><div id="cross" class="cross-line1"</div><div class="cross-line2"></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
.replay { | |
font-size:40px; | |
font-family: 'Indie Flower', cursive; | |
margin-top:10px; | |
margin-left:325px; | |
display:none; | |
} | |
.play { | |
font-size:40px; | |
font-family: 'Indie Flower', cursive; | |
margin-top:200px; | |
margin-left:250px; | |
} | |
.application-name { | |
font-family: 'Indie Flower', cursive; | |
color: pink; | |
font-size: 50px; | |
margin: 25px; | |
position: absolute; | |
} | |
.application-header { | |
width: 550px; | |
height: 120px; | |
margin: 25px; | |
position: absolute; | |
background: black; | |
} | |
.init-prompt { | |
width: 600px; | |
height: 300px; | |
margin: auto; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 10; | |
background: white; | |
border-radius: 10px; | |
box-shadow: 5px 5px 20px 5px rgba(0, 0, 0, 0.5); | |
} | |
.init-black { | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 10; | |
background-color: rgba(0, 0, 0, .5); | |
/* Semi-transparent */ | |
} | |
.cross-line2 { | |
position: absolute; | |
background: yellow; | |
width: 2px; | |
height: 60px; | |
transform: rotate(90deg); | |
} | |
.cross-line1 { | |
position: absolute; | |
background: yellow; | |
width: 2px; | |
height: 60px; | |
transform: rotate(45deg); | |
} | |
.cross { | |
position: absolute; | |
margin-left: 75px; | |
margin-top: 45px; | |
} | |
.circle { | |
position: absolute; | |
background: red; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
margin-left: 50px; | |
margin-top: 50px; | |
} | |
.little-square { | |
width: 150px; | |
height: 150px; | |
background: #0a0b0c; | |
position: absolute; | |
} | |
.v1-square { | |
margin-top: 0px; | |
} | |
.v2-square { | |
margin-top: 150px; | |
} | |
.v3-square { | |
margin-top: 300px; | |
} | |
.h1-square { | |
margin-left: 0px; | |
} | |
.h2-square { | |
margin-left: 150px; | |
} | |
.h3-square { | |
margin-left: 300px; | |
} | |
.square { | |
width: 450px; | |
height: 450px; | |
background: black; | |
position: relative; | |
margin: auto; | |
} | |
.vertical-line { | |
position: absolute; | |
background: #FFFFAA; | |
width: 3px; | |
height: 430px; | |
margin-top: 10px; | |
} | |
.vfirst-line { | |
margin-left: 149px; | |
} | |
.vsecond-line { | |
margin-left: 299px; | |
} | |
.horizontal-line { | |
position: absolute; | |
background: #FFFFAA; | |
width: 430px; | |
height: 3px; | |
margin-left: 10px; | |
} | |
.hfirst-line { | |
margin-top: 149px; | |
} | |
.hsecond-line { | |
margin-top: 299px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Tic tac toe game