The impossible letter game
HTML
<div class="container">
<h1>The impossible letter GAME</h1>
<h4>find the <span style="text-decoration: line-through"> mismatched</span> letter</h4>
<button class="start">Start game</button>
<div id="frame">
</div>
<div class="layer">></div>
<div class="info">
score :
<span class="score">
0
</span>
time :
<span class="time">
60
</span>
s
<br />
<a class="link" href="http://men3m.xyz">men3m.xyz</a>
</div>
<div class="board">
<h1>
Awesome
</h1>
<h1>
☻☻
</h1>
<h1>
your score
</h1>
<h1 class="final-score">
0
</h1>
<a class="new" href="https://codepad.co/snippet/x6CPckSE" target="_blank">► New game ◄</a>
<h4>
thanks alot for playing my simple game
</h4>
<h1>
the game by
</h1>
<h1>
<a href="http://men3m.xyz">Men'm Elkatan</a>
</h1>
<h4>
using : html , css , jquery and <span style="color: red; font-size: 20px">♥</span>
</h4>
</div>
</div>
SASS
*
margin: 0
padding: 0
box-sizing: border-box
font-family: sans-serif
.container
position: absolute
top: 0
left: 0
right: 0
bottom: 0
text-alighn: center
h1, h4
padding: 10px
text-align: center
margin: 0 auto
letter-spacing: 5px
text-transform: uppercase
.start
margin-left: calc(50% - 75px)
width: 150px
line-height: 40px
border: none
outline: none
cursor: pointer
font-size: 13px
font-weight: bold
background: transparent
border: 2px solid black
transition: 0.3s ease-in-out all
letter-spacing: 2px
text-transform: uppercase
&:hover
color: white
background: black
#frame
position: relative
margin: 0 auto
width: 400px
padding: 10px
letter-spacing: 20px
transition: 0.3s ease-in-out all
.layer
position: absolute
top: 240px
margin-left: calc(50% - 55px)
font-size: 100px
cursor: pointer
display: none
background: black
color: white
height: 110px
width: 110px
text-align: center
border-radius: 7px
transition: 0.2s ease all
&:hover
opacity: 0.8
.blur-it
filter: blur(5px)
-webkit-filter: blur(5px)
-moz-filter: blur(5px)
.letter
position: relative
float: left
text-align: center
cursor: pointer
font-size: 17px
height: 22px
width: 22px
transition: 0.5s all cubic-bezier(.3,1.55,.83,-0.57)
.info
position: absolute
display: block
background: black
clear: both
color: white
padding-top: 10px
text-align: center
bottom: 0
width: 100%
font-size: 27px
letter-spacing: 2px
text-transform: uppercase
.score
margin-right: 210px
.link
background: white
color: black
padding: 0px 10px
text-decoration: none
.board
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background: #222
color: white
text-align: center
display: none
.new
background: white
color: #222
padding: 10px
position: absolute
bottom: 0
left: 0
opacity: 0.5
width: 100%
font-size: 20px
a
color: white
text-decoration: none
opacity: 0.8
.final-score
border: 2px solid white
width: 200px
margin: 20px auto
.focus-it
filter: blur(0px)
-webkit-filter: blur(0px)
-moz-filter: blur(0px)
transition-delay: 1s
JAVASCRIPT
var same_letter = "h",
i = 221,
count_score = 0,
count_time = 60,
ran = Math.floor((Math.random() * i));
for(h = 0; h < i; h++){
$('#frame').prepend('<p class="letter" > g <p>');
}
$('.letter').eq(ran).text('q');
$('#frame').addClass('blur-it');
$('.start').on('click', function(){
$(this).attr('disabled', 'disabled')
setInterval(function(){
count_time--;
if(count_time >= 0){
$('.time').text(count_time);
}
if(count_time == 0){
$('.board').fadeIn(500);
}
}, 1000);
$('#frame').removeClass('blur-it');
$('.layer').fadeOut(500);
});
$(".letter:contains('q')").on('click', function(){
count_score++;
$('.final-score').text(count_score);
$('.score').text(count_score);
$('#frame').addClass('blur-it');
$('.layer').fadeIn(500);
});
$(".letter:contains('g')").on('click', function(){
if($('#frame').hasClass('blur-it')){
$('.layer').fadeIn();
}
else{
$('.layer').fadeOut();
}
});
$('.layer').on('click',function(){
$(this).fadeOut(500);
$('#frame').removeClass('blur-it');
$('.letter').text('g').css('transform','scale(1)');
$('.letter').eq(Math.floor((Math.random() * i))).text('q');
$(".letter:contains('q')").on('click', function(){
count_score++;
$('.final-score').text(count_score);
$('.score').text(count_score);
$('#frame').addClass('blur-it');
$('.layer').fadeIn(500);
});
$(".letter:contains('g')").on('click', function(){
if($('#frame').hasClass('blur-it')){
$('.layer').fadeIn();
}
else{
$('.layer').fadeOut();
}
});
});
