diff --git a/css/styles.css b/css/styles.css index ea88fc4..041dff5 100644 --- a/css/styles.css +++ b/css/styles.css @@ -93,6 +93,38 @@ body{ cursor: auto; } +.button-wrapper { + text-align: center; + padding-top: 20px; +} + +.moves { + display: inline-block; + color: white; + font-size: 20px; +} + +#moves { + display: inline-block; + color: white; + margin-left: 5px; + font-size: 20px; +} + +#reset { + background-color: blue; + color: white; + display: inline-block; + height: 40px; + line-height: 40px; + text-decoration: bold; + width: 80px; + text-align: center; + border-radius: 5%; + font-size: 20px; + margin-left: 20px; +} + @keyframes finish{ 0% {transform : scale(1) } 100% {transform: scale(0.3)} diff --git a/index.html b/index.html index 19e8479..419077f 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,12 @@
+
+
Moves:
+
0
+
Reset
+
+
- diff --git a/js/index.js b/js/index.js index 5d21d13..22be024 100644 --- a/js/index.js +++ b/js/index.js @@ -3,36 +3,41 @@ var first = null, second = null; var tiles = 0; var time = new Date().getTime(); var blockInput = false; - +var moves = 0; $(document).ready(function(){ - + var ul = document.querySelector('ul'); for (var i = ul.children.length; i >= 0; i--) { ul.appendChild(ul.children[Math.random() * i | 0]); } - + randomizeStartOffset(); transitionToStartPosition(); - + + $("#reset").click(function(){ + $('#moves').html(function(i, val) { return val = 0 }); + location.reload() + }) + $(".front").click(function(){ if(blockInput){ return; } - + if(first == null){ - first = $(this).parent(); + first = $(this).parent(); first.addClass("activated"); return; } - + if(first != second){ - second = $(this).parent(); + second = $(this).parent(); second.addClass("activated"); } - + if(first != null && second != null){ if(first.attr("id") == second.attr("id")){ - blockInput = true; + blockInput = true; first.removeClass("activated").addClass("match"); second.removeClass("activated").addClass("match"); setTimeout(function() { removeCorrectTiles(); }, 700); @@ -56,7 +61,6 @@ removeCorrectTiles = function(){ first.removeClass("match").addClass("done"); second.removeClass("match").addClass("done"); unblock(); - tiles += 2; checkWin(); } @@ -67,6 +71,7 @@ unblock = function(){ firstID = -1; secondID = -1; blockInput = false; + $('#moves').html(function(i, val) { return val*1+1 }); } checkWin = function(){ @@ -78,7 +83,7 @@ checkWin = function(){ randomizeStartOffset = function(){ $(".front").each(function( index ) {$( this ).css({ - top: (Math.random() * 2 - 1) * 550, + top: (Math.random() * 2 - 1) * 550, left: (Math.random() * 2 - 1) * 550}) }); } @@ -88,7 +93,7 @@ transitionToStartPosition = function(){ $(".front").each(function( index ) { var position = $( this ).position(); $( this ).css({ - top: position.top * .85, + top: position.top * .85, left: position.left * .85}); }); setTimeout(function() { transitionToStartPosition(); }, 16); @@ -96,5 +101,3 @@ transitionToStartPosition = function(){ $(".front").each(function( index ) {$( this ).css({top: 0, left: 0}) }); } } - -