<ul class="holder"></ul>
@import url(https://fonts.googleapis.com/css?family=Alfa+Slab+One);
.console{
color:white;
}
*{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
@font-face {
font-family: 'Digital';
src: url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.eot');
src: url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.eot?#iefix') format('embedded-opentype'), url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.woff') format('woff'), url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.ttf') format('truetype'), url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.svg#https://jonathanfelipe.com.br/css3-calculator/font/Digital-7Italic') format('svg');
}
body {
font-family: 'Alfa Slab One', cursive;
background:url('http://www.webtexture.net/wp-content/uploads/2011/07/8-Seamless-Dark-Metal-Grid-Patterns_thumb02.jpg');
}
h1 {
text-align:center;
color:#101010;
font-size:2em;
}
.clear{
clear:both;}
.holder{
font-family:Digital;
width:270px;
height:270px;
border-radius:10px;
box-shadow:2px 2px 2px rgba(0,0,0,.5);
padding:10px;
background:#2e2e2e;
}
.holder li {
display:inline-block;
list-style:none;
cursor:pointer;
background:white;
border:1px solid #efefef;
width:50px;
height:50px;
text-align:center;
line-height:50px;}
li.pushed {
transition: background-color 0.5s ease;
background-color:#c2c2c2;
}
li.restore {
transition: background-color 2s ease;
background-color:white;
}
.correctBord {
background-color:#177d0a;
}
.wrongBord {
background-color:#7d0a0a;
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"],
btns = '',
codeword = ['c','o','d','e'],
correctArr = '',
prev = 0,
allcoords = [],
rf = (Math.floor(Math.random() * 25))
$body=$('body');
for(i=0;i<25;i++){
rndm = Math.floor(Math.random() * alphabet.length)
btns+='<li>'+alphabet[rndm]+'</li>';
}
$('.holder').empty().append(btns);
//первый ряд $('.holder li:nth-child(-n+5)').css('color','red');
// Последний столбец $('.holder li:nth-child(5n)').css('color','red');
// Первый столбец $('.holder li:nth-last-child(5n)').css('color','red');
// Последний ряд $('.holder li:nth-last-child(-n+5)').css('color','red');
$.each(codeword,function(i,v){
rndarr = [];
next = prev;
if((!((next%4)===0)||(next===20)||(next===0))&&(allcoords.indexOf(next+1)===-1)) rndarr.push((next+1));
if(!((next%5)===0)&&(allcoords.indexOf(next-1)===-1)) rndarr.push((next-1))
if(!(next<5)&&(allcoords.indexOf(next-5)===-1)) rndarr.push((next-5))
if(!((next>=20)&&(next<=24))&&(allcoords.indexOf(next+5)===-1)) rndarr.push((next+5))
coord = rndarr[(Math.floor(Math.random() * rndarr.length))];
allcoords.push(coord);
prev = coord;
$('.holder li').eq(coord).empty().append(codeword[i])
})
$body.on('mousedown','li',function(e){
cleanUp();
$body.on('mousemove','li',function(e){
$(this).addClass('pushed');
});
});
$body.on('mouseup','li',function(e){
$('.pushed').addClass('restore');
$body.off('mousemove');
finishTouch();
});
$('.holder').on('mouseleave',function(e){
$('.pushed').addClass('restore');
$body.off('mousemove');
})
window.addEventListener('touchstart', function(e) {
e.preventDefault();
e.stopPropagation();
cleanUp();
touchedThis(e.touches[0]).addClass('pushed')
}, false);
window.addEventListener('touchmove', function(e) {
e.preventDefault();
touchedThis(e.touches[0]).addClass('pushed')
}, false);
window.addEventListener('touchend', function(e) {
e.preventDefault();
finishTouch();
}, false);
function cleanUp(){
$('.unlocked').removeClass('unlocked')
$('.locked').removeClass('locked');
$('.pushed').removeClass('pushed'); $('.holder').removeClass('correctBord').removeClass('wrongBord');
}
function finishTouch(){
finish = []
$.each($('.pushed'),function(){
finish.push($(this).html())
})
if(finish.sort().join('')==codeword.sort().join('')) {
$('.lock').addClass('unlocked');
$('.holder').addClass('correctBord')
} else {
$('.lock').addClass('locked');
$('.holder').addClass('wrongBord')
};
}
function touchedThis(data){
return $(document.elementFromPoint(data.clientX, data.clientY));
}
This Pen doesn't use any external CSS resources.