Skip to content

Commit

Permalink
'upd'
Browse files Browse the repository at this point in the history
  • Loading branch information
@redparsley
redparsley committed Aug 17, 2024
1 parent 912b172 commit 439e989
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 95 deletions.
175 changes: 100 additions & 75 deletions couples/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Этап 1. Создайте функцию, генерирующую массив парных чисел. Пример массива, который должна возвратить функция: [1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8].count - количество пар.
function createNumbersArray(count) {
let cardsArray = [];
for (let card = 1; cardsArray.length < count * 2; card++) {
for (let card = 1; cardsArray.length < count; card++) {
cardsArray.push(card);
cardsArray.push(card);
}
Expand All @@ -16,85 +16,107 @@ function shuffle(arr) {
}
return arr;
}
let count; // количество пар
let count; // количество карт
let cardsVert // количество столбцов
let cardsHor // кол-во строк

// функция отображает начальный экран с настройкой игры
function setGameSettings() {
const form = document.createElement("form");
const input = document.createElement("input");
const inputVertical = document.createElement("input");
const inputHorisontal = document.createElement("input");
const btn = document.createElement("button");
const heading = document.createElement('h1')
const heading = document.createElement("h1");
const text = document.createElement("p");
const helpMessage = document.createElement('p')

heading.textContent = 'Игра в пары'
heading.textContent = "Игра в пары";
text.classList.add("settings__text");
btn.classList.add("settings__btn");
input.classList.add("settings__input");
helpMessage.classList.add('helper')
inputVertical.classList.add("settings__input");
inputHorisontal.classList.add("settings__input");

form.append(heading)
form.append(text);
form.append(input);
form.append(btn);
form.append(heading, text, helpMessage, inputVertical, inputHorisontal, btn);

input.placeholder = "2";
input.min = "1";
input.max = "8";
input.type = "number";
inputVertical.placeholder = "Количество столбцов";
inputVertical.min = "2";
inputVertical.max = "5";
inputVertical.type = "number";

inputHorisontal.placeholder = "Количество строк";
inputHorisontal.min = "2";
inputHorisontal.max = "4";
inputHorisontal.type = "number";

helpMessage.textContent = `Вы можете ввести четные значения от 2 до 10 включительно. Значение по умолчанию - 4х4`
btn.textContent = "Нажмите для начала игры";

text.textContent =
"Чтобы начать игру, укажите необходимое количество пар и нажмите на кнопку";
"Чтобы начать игру, укажите необходимое количество карт по вертикали и горизонтали и нажмите на кнопку";
document.body.append(form);

form.addEventListener("submit", (e) => { // событие отправки формы
form.addEventListener("submit", (e) => {
// событие отправки формы
e.preventDefault();

if (!input.value) {
count = 2;
} else {
count = +input.value;
if (!inputHorisontal.value && !inputVertical.value) {

inputHorisontal.value = inputVertical.value = 4;

count = inputHorisontal.value * inputVertical.value;
} else if (inputHorisontal.value % 2 !== 0 || inputVertical.value % 2 !== 0){
alert('Вы ввели некорректное значение. Игра будет запущена в режиме по умолчанию - поле 4х4')
inputHorisontal.value = inputVertical.value = 4;

count = inputHorisontal.value * inputVertical.value;
}

else {
cardsVert = +inputVertical.value
cardsHor = +inputHorisontal.value

count = cardsVert * cardsHor;
}

document.body.append(prepare);
form.textContent = ''
form.textContent = "";

countDownFunc()
setInterval(() => {
countDownFunc()
countDownFunc();
let countDownBeforeStart = setInterval(() => {
countDownFunc();
}, 1000);

if (countDown < 0) {
prepare.textContent = "";
clearInterval(countDownBeforeStart)
}

setTimeout(() => {
startGame(count);
startGame(count, cardsVert, cardsHor);

document.body.removeChild(form)
document.body.removeChild(prepare)
document.body.removeChild(form);
document.body.removeChild(prepare);
}, 3000);

});
}
setGameSettings();

// обратный отсчет
let prepare = document.createElement("span");
prepare.classList.add('prepare')
countDown = 3;
prepare.textContent = `Приготовьтесь! До начала игры: ${countDown}`;
// обратный отсчет
let prepare = document.createElement("span");
prepare.classList.add("prepare");
countDown = 3;
prepare.textContent = `Приготовьтесь! До начала игры: ${countDown}`;

// функция обратного отсчета перед игрой
function countDownFunc() {
prepare.textContent = `Приготовьтесь! До начала игры: ${countDown--}`;
if (countDown < 0) {
prepare.textContent = "";
countDown = null;
}
}

// создаем timer
const timer = document.createElement("span");
let time = 60;
timer.textContent = `До конца игры осталось: ${time}`;
// функция обратного отсчета: 1 мин
// функция обратного отсчета длит. 1 мин
function setTimer() {
timer.textContent = `До конца игры осталось: ${time--}`;
if (time < 5) {
Expand All @@ -105,7 +127,7 @@ function setTimer() {
let visibleCards = []; // массив открытых рубашкой вверх карт

// ф-ция сравнивает две последние перевернутые карты
function handleCard(card) {
function checkOpenedCard(card) {
if (card.classList.contains("opened")) {
return;
}
Expand All @@ -119,7 +141,7 @@ function handleCard(card) {
if (visibleCards.length % 2 !== 0) {
return;
}

const [firstCard, secondCard] = visibleCards.slice(-2); // последние два элемента массива присваиваются в константы соответственно

if (secondCard.textContent !== firstCard.textContent) {
Expand All @@ -129,18 +151,19 @@ function handleCard(card) {
secondCard.classList.remove("opened");
}, 1000);
}

}

// Запуск игры
function startGame(count) {
function startGame(count, Vertical, Horisontal) {
const container = document.createElement("div");
const cardsList = document.createElement("ul");
const win = document.createElement('p')

const win = document.createElement("p");

const restartBtn = document.createElement("button");
restartBtn.classList.add('hidden')

container.classList.add("container");
cardsList.classList.add("cards__list");


let shuffledArr = shuffle(createNumbersArray(count));

Expand All @@ -153,48 +176,50 @@ function startGame(count) {
const cardType = shuffledArr[i];
card.textContent = `${cardType}`;
card.classList.add(`card_${cardType}`);

cardsList.append(card);

cardsList.style.gridTemplateColumns = `repeat(${Vertical}, 1fr)`
cardsList.style.gridTemplateRows = `repeat(${Horisontal}, 1fr)`

card.addEventListener("click", () => {
handleCard(card);
checkOpenedCard(card);
// проверка на то, перевернуты ли все карты
if (document.querySelectorAll(".opened").length === count) {
clearInterval(timeLeft);
setInterval(() => {
cardsList.remove();
timer.remove();

if (document.querySelectorAll('.opened').length === count * 2) {
restartBtn.classList.remove('hidden')
restartBtn.classList.add("settings__btn");
restartBtn.classList.add("restart__btn");

setInterval(() => {
container.removeChild(cardsList)
container.removeChild(timer)

let restartBtn = document.createElement('button')
restartBtn.classList.add('settings__btn')
restartBtn.classList.add('restart__btn')

win.classList.add('win__message')

restartBtn.textContent = 'Сыграть еще раз'
win.textContent = 'Ты справился! Сыграем еще разок?'

restartBtn.addEventListener('click', () => {
location.reload();
})

container.append(restartBtn)
}, 500)
win.classList.add("win__message");

restartBtn.textContent = "Сыграть еще раз";
win.textContent = "Ты справился! Сыграем еще разок?";

restartBtn.addEventListener("click", () => {
location.reload();
});

clearTimeout(timeout); // после выигрыша обратный отсчет остановится
}, 500);
}
});
}

// запуск таймера
// запуск таймера
setTimer();
setInterval(() => {
let timeLeft = setInterval(() => {
setTimer();
}, 1000);

setTimeout(() => {
// страница перезагрузится ровно через 60 сек
let timeout = setTimeout(() => {
location.reload();
}, 60000);

container.append(timer);
container.append(cardsList);
container.append(win)
container.append(timer, cardsList, win, restartBtn);
document.body.append(container);
}
}
Loading

0 comments on commit 439e989

Please sign in to comment.