МЕМО - НАЙДИ ПАРУ!
Дамы и господа! Предлагаю нам немного развеяться и поиграть в легенькую (хехехе) игру! Она максимально проста - тыкаете на ячейки, получаете изображение и ищите ему пару. Первый уровень 20 пар. Скажете легко? Хрень?! Тогда соберите двадцать пар и переходите к среднему уровню - 30 пар! Все еще плюнуть и растереть? Тогда 40 пар ждут вас!
Суть, конечно, не в наградах, ведь главное игра. Но и награды есть:
Уровень: изи катка - 50 монет.
Уровень: легкая мигрень - 100 монет.
Уровень: чёувасздесьпроисходит?! - 150 монет в профиль!
Делайте скриншот и присылайте ниже!
[removeprofile][html]
<style>
.memo{
--tile:98px;
--gap:14px;
--radius:16px;
--cols:8;
--main: #763c38;
--secondary: #918f82;
--front: #5c2f2a;
--back: #918f82;
--accent: #763c38;
--ok: #c4a38a;
--text: #f5e9d8;
--muted: #d4c4b0;
font-family: "American Typewriter", "Georgia", "Times New Roman", serif;
max-width: 1000px;
margin: 20px auto;
padding: 18px;
background: linear-gradient(180deg, #3f2a26, #52423d);
border-radius: 24px;
box-shadow: 0 12px 32px rgba(0,0,0,.55);
color: var(--text);
}
.memo h3{margin:0 0 .6rem; font-size:22px; color:var(--text)}
.memo .memo__controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.memo .memo__btn{
appearance:none;
border:1px solid #a16e64;
background:#3f2a26;
color:var(--text);
padding:7px 12px;
border-radius:12px;
cursor:pointer;
font-size:13.5px;
}
.memo .memo__btn:hover{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(118,60,56,.3) inset;
}
.memo .memo__status{font-size:14px;color:var(--muted)}
.memo .grid{
display:grid;
grid-template-columns:repeat(var(--cols),var(--tile));
gap:var(--gap);
justify-content:center;
}
/* Адаптив */
@media (max-width:920px){.memo{--tile:88px}}
@media (max-width:780px){.memo{--cols:7;--tile:82px}}
@media (max-width:680px){.memo{--cols:6;--tile:76px}}
@media (max-width:560px){.memo{--cols:5;--tile:68px}}
.memo input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.memo .memo-card{width:var(--tile);height:var(--tile);border-radius:var(--radius);position:relative;perspective:1000px}
.memo .memo-face{
position:absolute; inset:0; border-radius:var(--radius);
transition:transform .55s cubic-bezier(0.23,1,0.32,1);
backface-visibility:hidden;
display:grid; place-items:center;
user-select:none;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.memo .memo-front{
background:var(--front);
border:2px solid #8a5a52;
}
.memo .memo-back{
background:var(--back);
border:2px solid var(--main);
transform:rotateY(180deg);
overflow:hidden;
}
.memo .memo-back img{
width:100%; height:100%; object-fit:cover;
}
.memo input:checked + label .memo-front{transform:rotateY(180deg)}
.memo input:checked + label .memo-back{transform:rotateY(360deg)}
.memo label{display:block;width:100%;height:100%;cursor:pointer}
.memo label:focus-visible .memo-front{box-shadow:0 0 0 4px rgba(118,60,56,.6)}
.memo label:hover .memo-front{box-shadow:0 0 0 3px rgba(118,60,56,.35) inset}
.memo label[data-locked]{pointer-events:none}
.memo label[data-locked] .memo-back{
box-shadow:0 0 0 3px rgba(196,163,138,.7) inset;
filter: brightness(1.1);
}
</style>
<div class="memo" id="memo40">
<form>
<h3>MEMO — найди пары</h3>
<div class="memo__controls">
<small>Открывай по две карточки</small>
<div class="memo__status">Найдено: <b class="memo__found">0</b> / 20</div>
<button class="memo__btn" type="reset">НОВАЯ ИГРА</button>
</div>
<div class="grid" id="memo-grid"></div>
</form>
</div>
<script>
(() => {
const root = document.getElementById('memo40');
if (!root) return;
const grid = root.querySelector('#memo-grid');
const foundEl = root.querySelector('.memo__found');
const imageUrls = [
"https://upforme.ru/uploads/001c/a5/42/2/928103.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/796942.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/920791.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/210253.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/539522.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/570476.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/142848.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/792870.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/364056.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/940122.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/216561.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/193804.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/313646.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/539420.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/498050.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/805098.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/84622.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/958212.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/592960.jpg",
"https://upforme.ru/uploads/001c/a5/42/2/387049.jpg"
];
let opened = [];
let lock = false;
let found = 0;
function rndInt(max) {
if (window.crypto?.getRandomValues) {
const buf = new Uint32Array(1);
crypto.getRandomValues(buf);
return buf[0] % max;
}
return Math.floor(Math.random() * max);
}
function shuffle(arr) {
for (let m = arr.length; m; ) {
const i = rndInt(m--);
[arr[m], arr[i]] = [arr[i], arr[m]];
}
return arr;
}
function buildDeck() {
grid.innerHTML = '';
const deck = shuffle([...imageUrls, ...imageUrls]);
deck.forEach((imgUrl, idx) => {
const card = document.createElement('div'); card.className = 'memo-card';
const input = document.createElement('input'); input.type='checkbox'; input.id = `mc${idx}`;
const label = document.createElement('label'); label.setAttribute('for', input.id);
const front = document.createElement('span'); front.className = 'memo-face memo-front';
const back = document.createElement('span'); back.className = 'memo-face memo-back';
const img = document.createElement('img');
img.src = imgUrl;
img.alt = '';
back.appendChild(img);
label.append(front, back);
card.append(input, label);
grid.appendChild(card);
});
opened = []; lock = false; found = 0;
foundEl.textContent = '0';
}
root.addEventListener('change', (e) => {
const input = e.target;
if (input.tagName !== 'INPUT') return;
if (input.nextElementSibling.dataset.locked) { input.checked = true; return; }
if (lock && input.checked) { input.checked = false; return; }
if (input.checked) {
opened.push(input);
if (opened.length === 2) {
lock = true;
const [a, b] = opened;
const imgA = a.nextElementSibling.querySelector('img').src;
const imgB = b.nextElementSibling.querySelector('img').src;
if (imgA === imgB) {
a.nextElementSibling.dataset.locked = '1';
b.nextElementSibling.dataset.locked = '1';
found++;
foundEl.textContent = found;
opened = [];
lock = false;
} else {
const toClose = opened.slice();
opened = [];
setTimeout(() => {
toClose.forEach(inp => inp.checked = false);
lock = false;
}, 800);
}
}
} else {
opened = opened.filter(x => x !== input);
}
});
root.querySelector('form').addEventListener('reset', () => setTimeout(buildDeck, 10));
buildDeck();
})();
</script>[/html]
[spoiler="изи катка"]*скриншот*[/spoiler] [spoiler="легкая мигрень"]*скриншот*[/spoiler] [spoiler="чёувасздесьпроисходит?!"]*скриншот*[/spoiler]
