Функция для игры в пары
Как реализовать функцию которая выполняла бы следующие условия "Если обе открытые карточки содержат одинаковую цифру, они остаются открытыми до конца игры. Если же вторая карточка содержит отличную от первой цифру, обе они закрываются, как только игрок откроет следующую карточку. Таким образом на поле остаются открытыми только найденные пары или 1-2 карточки, открытые игроком."
<!DOCTYPE html>
<html lang="en">
<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="style.css"> -->
<title>Document</title>
<style type="text/css">
.wrapper-cards {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
}
.card {
width: 120px;
height: 200px;
margin-right: 35px;
margin-bottom: 35px;
border: 2px solid black;
text-align: center;
font-size: 128px;
cursor: pointer;
}
.card:hover {
box-shadow: 0 0 5px #2f2d2d;
}
</style>
</head>
<body>
<div class="wrapper">
<input class="input" value="4" type="number" min="4" max="10">
<button class="button">Начать игру</button>
</div>
<div class="wrapper-cards">
<!-- <div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div> -->
</div>
<script src="main.js"></script>
</body>
</html>
let input = document.querySelector('.input');
let button = document.querySelector('.button');
let wrapperCards = document.querySelector('.wrapper-cards');
// создаем масив
let arr = ["1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6", "7", "7", "8", "8", "9", "9", "10", "10", "11", "11", "12", "12", "13", "13", "14", "14", "15", "15", "16", "16"];
let result = 4
let newArr = new Array();
button.onclick = () => {
let value = +input.value;
// очищаем .wrapper-cards
if (document.querySelector(".card")) {
wrapperCards.innerHTML = ''
}
// проверяем введеное число
if (value % 2 == 0 && value <= 10 && value >= 4) {
result = value;
} else {
result = 4;
input.innerHTML = 4
alert('Введите четное число от 4 до 10')
}
// задаем ширину .wrapper-cards
wrapperCards.style.width = (160 * result / 2) + 'px';
// создаем новый масив
for (let i = 0; i < result; i++) {
newArr[i] = arr[i]
}
// перемешиваем масив
function shuffle(array) {
array.sort(() => Math.random() - 0.5);
}
shuffle(newArr);
// создаем div .card
function getListContent() {
let fragment = new DocumentFragment();
for (let i = 0; i < result; i++) {
card = document.createElement("div");
card.classList.add('card');
// card.append(newArr[i]);
card.setAttribute('data-number', newArr[i])
fragment.append(card);
}
return fragment;
}
wrapperCards.append(getListContent()); // (*)
console.log(result)
// находим .card
// let cardInDom = document.querySelector(".card");
let cardInDom = document.querySelectorAll(".card");
// вызываем функцию по клику на .card и показываем цифру
for (let i = 0; i < cardInDom.length; i++) {
cardInDom[i].onclick = () => {
let cardValue = cardInDom[i].getAttribute("data-number");
console.log(cardValue)
cardInDom[i].innerHTML = cardValue
};
};
};
|
Цитата:
|
игра открыть пару
Paulsw01,
<!DOCTYPE html>
<html lang="en">
<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="style.css"> -->
<title>Document</title>
<style type="text/css">
.wrapper-cards {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
}
.card {
width: 120px;
height: 200px;
margin-right: 35px;
margin-bottom: 35px;
border: 2px solid black;
text-align: center;
font-size: 128px;
cursor: pointer;
transition: 1s;
}
.card:hover {
box-shadow: 0 0 5px #2f2d2d;
}
.card.open {
background-color: #DCDCDC;
}
</style>
</head>
<body>
<div class="wrapper">
<input class="input" value="4" type="number" min="4" max="10" step="2">
<button class="button">Начать игру</button>
</div>
<div class="wrapper-cards">
<!-- <div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div> -->
</div>
<script>
let input = document.querySelector('.input');
let button = document.querySelector('.button');
let wrapperCards = document.querySelector('.wrapper-cards');
// создаем масив
let result = 4
let newArr = new Array();
button.onclick = () => {
let value = +input.value;
// очищаем .wrapper-cards
if (document.querySelector(".card")) {
wrapperCards.innerHTML = ''
}
// проверяем введеное число
if (value % 2 == 0 && value <= 10 && value >= 4) {
result = value;
} else {
result = 4;
input.value = 4
alert('Введите четное число от 4 до 10')
}
// задаем ширину .wrapper-cards
wrapperCards.style.width = (160 * result / 2) + 'px';
// создаем новый масив
for (let i = 0; i < result; i++) {
newArr[i] = Math.trunc(i/2) + 1
}
// перемешиваем масив
function shuffle(array) {
array.sort(() => Math.random() - 0.5);
}
shuffle(newArr);
// создаем div .card
function getListContent() {
let fragment = new DocumentFragment();
for (let i = 0; i < result; i++) {
card = document.createElement("div");
card.classList.add('card');
card.dataset.number = newArr[i];
fragment.append(card);
}
return fragment;
}
wrapperCards.append(getListContent()); // (*)
console.log(result)
// находим .card
// let cardInDom = document.querySelector(".card");
let cardInDom = document.querySelectorAll(".card");
// вызываем функцию по клику на .card и показываем цифру
let temp;
for (let card of cardInDom) {
card.onclick = () => {
if (card.classList.contains("open")) return;
let cardValue = card.dataset.number;
card.innerHTML = cardValue;
if (temp && temp != card) {
if (temp.dataset.number == cardValue) {
temp.classList.add("open");
card.classList.add("open");
temp = null;
} else {
temp.innerHTML = "";
temp = card;
}
} else temp = card;
};
};
};
</script>
</body>
</html>
|
Подскажите еще такой момент, как сделать, что бы при открытии всех карт игра останавливалась?
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 16:06. |