Seadjus,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<style type="text/css">
.container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
max-width: 1000px;
}
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 50px 0 0 0;
}
.wrapper-cards {
display: flex;
flex-wrap: wrap;
width: 50%;
justify-content: center;
padding: 0 0 15px 0;
font-size: 64px;
}
.timer-window {
margin: 0;
text-align: center;
padding: 50px 0 15px 0;
font-size: 32px;
}
.card {
width: 17%;
height: 119px;
margin-right: 27px;
margin-bottom: 15px;
border: 2px solid black;
text-align: center;
font-size: 106px;
font-weight: 600;
cursor: pointer;
background-image: url("./avatar.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.enter-sum {
margin: 0;
margin-bottom: 10px;
}
.enter-number {
margin-bottom: 10px;
}
.open {
background-image: none;
background-color: blue;
transform: scale(0.9);
}
.open:after {
content: attr(data-number);
}
.card:hover {
box-shadow: 0 0 5px #2f2d2d;
}
.card:focus {
background-image: none;
}
.play {
display: none;
}
.go-play {
display: none;
}
.remuve-play {
display: block;
}
input.enter-number:invalid {
background-color: ivory;
border: none;
outline: 2px solid red;
border-radius: 5px;
}
</style>
<title>Document</title>
<script>
window.addEventListener('load', () => {
let wrapper = document.querySelector('.wrapper');
let input = document.querySelector('.enter-number');
let button = document.querySelector('.btn-play');
let wrapperCards = document.querySelector('.wrapper-cards');
let goPlay = document.querySelector('.go-play');
let rocket = document.getElementById('rocket');
const createCards = length => {
return Array.from({
length
}, (v, i) => Math.trunc(i / 2) + 1)
.sort(_ => Math.random() - 0.5)
.map(i => {
let card = document.createElement("div");
card.classList.add('card');
card.dataset.number = i;
return card;
})
};
let timer;
const countdown = (num) => {
clearTimeout(timer);
rocket.innerHTML = 'Осталось:\n' + num + '\nсекунд'
if (!num) win(true);
else timer = setTimeout(countdown, 900, --num);
}
button.addEventListener('click', () => {
if (!input.validity.valid) return;
let newArr = createCards(input.value);
wrapperCards.innerHTML = '';
wrapperCards.append(...newArr);
wrapper.classList.add("play");
countdown(60);
})
let success;
wrapperCards.addEventListener('click', ({
target
}) => {
target = target.closest('.card');
if (!target || target.closest('.open')) return;
target.classList.add('open')
if (success && success !== target) {
let num = success.dataset.number;
let cardValue = target.dataset.number;
if (num == cardValue) success = null;
else {
success.classList.remove('open');
success = target;
}
} else success = target;
win()
})
const win = (err) => {
let end = wrapperCards.querySelectorAll(".card").length == wrapperCards.querySelectorAll(".open").length;
if (err || end) {
wrapperCards.innerHTML = err ? 'ВРЕМЯ ВЫШЛО, ТЫ ПРОИГРАЛ :(' : '<p>Победа!</p>'
goPlay.classList.add("remuve-play");
clearTimeout(timer);
}
}
goPlay.addEventListener('click', () => {
goPlay.classList.remove('remuve-play');
wrapper.classList.remove("play");
wrapperCards.innerHTML = '';
rocket.innerHTML = '';
success = null;
})
})
</script>
</head>
<body>
<div class="container">
<h1>Игра в пары</h1>
<div class="wrapper" id="wrapper">
<p class="enter-sum">Выбери колличество карт</p>
<input class="enter-number" value="16" type="number" min="16" max="64" step="2">
<button class="btn-play" id="button">Начать игру</button>
<p>Время на выполнение: 60 секунд!</p>
</div>
<p class="timer-window" id="rocket"></p>
<div class="wrapper-cards"></div>
<button class="go-play"> Еще разок?</button>
</div>
</body>
</html>
, пока нет особых продвижений в изучении.
по условиям задания необходимо реализовать игру в пары с таймером, выбором количества карт .
