Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2021, 21:52
Новичок на форуме
Отправить личное сообщение для Paulsw01 Посмотреть профиль Найти все сообщения от Paulsw01
 
Регистрация: 02.07.2021
Сообщений: 7

Функция для игры в пары
Как реализовать функцию которая выполняла бы следующие условия "Если обе открытые карточки содержат одинаковую цифру, они остаются открытыми до конца игры. Если же вторая карточка содержит отличную от первой цифру, обе они закрываются, как только игрок откроет следующую карточку. Таким образом на поле остаются открытыми только найденные пары или 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
        };
    };
};
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2021, 23:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Paulsw01
input.innerHTML = 4
???
Ответить с цитированием
  #3 (permalink)  
Старый 09.09.2021, 23:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

игра открыть пару
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>
Ответить с цитированием
  #4 (permalink)  
Старый 10.09.2021, 23:44
Новичок на форуме
Отправить личное сообщение для Paulsw01 Посмотреть профиль Найти все сообщения от Paulsw01
 
Регистрация: 02.07.2021
Сообщений: 7

Подскажите еще такой момент, как сделать, что бы при открытии всех карт игра останавливалась?
Ответить с цитированием
  #5 (permalink)  
Старый 11.09.2021, 00:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Paulsw01
игра останавливалась?
это как?
Сообщение от Paulsw01
при открытии всех карт
if(document.querySelectorAll(".card.open").length === result) ...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильно вызвать массив biryukovm Элементы интерфейса 3 19.03.2018 13:31
Frontend для браузерной игры. Доступно для Junior, оплата – доля с продаж. murky_waters Работа 0 13.07.2016 15:27
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
Своя Функция для модуля Доставки (pickpoint.ru) jekjuk Общие вопросы Javascript 0 19.05.2011 16:32
Универсальная функция для формы Nightmare Общие вопросы Javascript 5 16.04.2010 18:42