diff --git a/base.css b/base.css index 1d7ef14..e4ce861 100644 --- a/base.css +++ b/base.css @@ -1,5 +1,10 @@ @import url('https://fonts.googleapis.com/css?family=Quicksand'); +@keyframes change { + from { opacity: 1.0;} + to { opacity: 0;} +} + body { font-family: 'Quicksand', sans-serif; font-size: 32px; @@ -19,6 +24,7 @@ div[id*="ib"] { width: 180px; height: 180px; position: absolute; + cursor: pointer; } #ib1 { @@ -71,7 +77,7 @@ div[id*="ib"] { height: 140px; margin-left: 93px; margin-top: 23px; - opacity: 1; + cursor: default; } .cross:before, @@ -135,27 +141,70 @@ div[id^="ci"] { display: none; } + +#status { + padding-top: 10px; + width: 400px; + height: 60px; + margin: 0 auto; + font-size: 48px; + text-align: center; + font-weight: bold; +} + +.change { + animation: change 2s 1; + animation-fill-mode: forwards; +} + +.score1, .score2{ + position: absolute; + width: auto; + height: 140px; + text-align: center; + border-radius: 10px; + border-bottom: 2px solid black; + margin: 0 10px; + padding: 0 10px; +} + +.score2{ + right: 0; +} + +.btn { + position: absolute; + width: auto; + height: 40px; + text-align: center; + border-radius: 5px; + border: 2px solid #333; + margin: 10px 10px; + bottom: 0; + right: 0; + padding: 0 10px; + cursor: pointer; +} + + + .player { - width: 180px; + font-size: 32px; + width: 100%; height: 40px; text-align: center; background-color: #000; - opacity: 0.2; + opacity: 1.0; + margin-left: -10px; border-radius: 10px; - float: right; color: white; - padding: 10px; + padding: 5px 10px; } -#p1 { - opacity: 1.0; - float: left; +#p2 { + opacity: 0.2; } -#status { - padding-top: 10px; - width: 250px; - height: 60px; - margin: 0 auto; - text-align: center; -} \ No newline at end of file +.sp { + font-size: 64px; +} diff --git a/index.html b/index.html index 497de77..16c6f82 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,22 @@ - Tic-Tac-Toe + Tic`Tac`Toe
-
Player 1
-
Player 2
-
+
+
Player 1
+
0
+
+
+
Player 2
+
0
+
+
Tic`Tac`Toe
+
Reset
+
+
diff --git a/ttt.js b/ttt.js index f319fb3..601099b 100644 --- a/ttt.js +++ b/ttt.js @@ -1,6 +1,6 @@ var x = 'Player 2'; var placed = ['','','','','','','','','','']; - var gOver = 0; + var gOver = 0, score1 = 0, score2 = 0; function place(i) { if (gOver != 1){ @@ -49,6 +49,14 @@ function declare(x){ document.getElementById("status").innerHTML = x + " Wins!"; + if (x == 'Player 1') { + score1++; + document.getElementById("sp1").innerHTML = score1; + } + else { + score2++; + document.getElementById("sp2").innerHTML = score2; + } gOver = 1; document.getElementById("p1").style.opacity='0.2'; document.getElementById("p2").style.opacity='0.2'; @@ -71,7 +79,7 @@ function checkTie(){ } function enhance(a,b,c,x){ - if (x == 'Player 1') { + 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"); @@ -81,4 +89,17 @@ function enhance(a,b,c,x){ document.getElementById('ci'+b).style.borderColor="#0dd"; document.getElementById('ci'+c).style.borderColor="#0dd"; } +} + +function reset(){ + placed[0]=''; + for (var i = 1; i<=9; i++){ + document.getElementById("cr"+i).style.display='none'; + document.getElementById('ci'+i).style.display='none'; + document.getElementById('cr'+i).setAttribute("class", "cross"); + document.getElementById('ci'+i).style.borderColor="#333"; + placed[i]=''; + } + gOver = 0; + document.getElementById("status").innerHTML = "Tic`Tac`Toe"; } \ No newline at end of file