Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Помогите решить задачу! (https://javascript.ru/forum/events/83316-pomogite-reshit-zadachu.html)

TomWalbridge 16.11.2021 01:59
Помогите решить задачу!
 
Привет всем! есть приложение, игра в пары! приложение работает, только не могу додуматься, как после того, как оно отработает, запустить приложение заново, после нажатия кнопки(id="btn"). Помогите пжлст!
const cards = document.querySelectorAll('.memory-card');

function flipCard() {
    this.classList.add('flip');
}


let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

function flipCard() {
    if (lockBoard) return;
    if (this === firstCard) return;
    this.classList.add('flip');


    if (!hasFlippedCard) {
        hasFlippedCard = true;
        firstCard = this;
        return;
    }

    secondCard = this;


    checkForMatch();
}

function checkForMatch() {
    if (firstCard.dataset.icon === secondCard.dataset.icon) {
        disableCards();
        return;
    }

    unflipCards();
}

function disableCards() {
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
    resetBoard()
}

function unflipCards() {
    lockBoard = true;
    setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');
        resetBoard()
    }, 1500);
}

function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
}
(function shuffle() {
    cards.forEach(card => {
        let ramdomPos = Math.floor(Math.random() * 12);
        card.style.order = ramdomPos;
    });
})();


cards.forEach(card => card.addEventListener('click', flipCard))

рони 16.11.2021 06:46
TomWalbridge,
где остальной код?

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

TomWalbridge 16.11.2021 08:56 
<!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">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <button id="btn">Запустить заново!</button>
    <section class="memory-game">
        <div class="memory-card" data-icon='icon1'>
            <img class="front-face" src="img/1.png" alt="icon1">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon1'>
            <img class="front-face" src="img/1.png" alt="icon1">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon2'>
            <img class="front-face" src="img/2.png" alt="2">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon2'>
            <img class="front-face" src="img/2.png" alt="2">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon3'>
            <img class="front-face" src="img/3.png" alt="icon3">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon3'>
            <img class="front-face" src="img/3.png" alt="icon3">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon4'>
            <img class="front-face" src="img/4.png" alt="4">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon4'>
            <img class="front-face" src="img/4.png" alt="4">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon5'>
            <img class="front-face" src="img/5.png" alt="5">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon5'>
            <img class="front-face" src="img/5.png" alt="5">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon6'>
            <img class="front-face" src="img/6.png" alt="6">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>

        <div class="memory-card" data-icon='icon6'>
            <img class="front-face" src="img/6.png" alt="6">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon7'>
            <img class="front-face" src="img/7.png" alt="7">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon7'>
            <img class="front-face" src="img/7.png" alt="7">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon8'>
            <img class="front-face" src="img/8.png" alt="8">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon8'>
            <img class="front-face" src="img/8.png" alt="8">
            <img class="back-face" src="img/front.png" alt="Memory Card">
        </div>
    </section>
    <button id="btn-mix"></button>
    <script src="./js/main.js"></script>
</body>

</html>


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    background: gray;
}

.memory-game {
    width: 640px;
    height: 640px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    perspective: 1000px;
}

.memory-card {
    width: calc(25% - 10px);
    height: calc(33.333% - 10px);
    margin: 5px;
    position: relative;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .5s;
}

.front-face,
.back-face {
    width: 100%;
    height: 100%;
    padding: 20px;
    position: absolute;
    border-radius: 5px;
    background: #1C7CCC;
    backface-visibility: hidden;
}

.memory-card:active {
    transform: scale(0.97);
    transition: transform .2s;
}

.memory-card.flip {
    transform: rotateY(180deg);
}

.front-face {
    transform: rotateY(180deg);
}

рони 16.11.2021 11:59
игра открыть пару
 
TomWalbridge,
<!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">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            display: flex;
            background: gray;
        }
        .memory-game {
            width: 500px;
            height: 500px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            perspective: 1000px;
        }
        .memory-card {
            width: calc(25% - 10px);
            height: calc(33.333% - 10px);
            margin: 5px;
            position: relative;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
            transform: scale(1);
            transform-style: preserve-3d;
            transition: transform .5s;
        }
        .front-face,
        .back-face {
            width: 100%;
            height: 100%;
            padding: 20px;
            position: absolute;
            border-radius: 5px;
            background: #1C7CCC;
            backface-visibility: hidden;
        }
        .memory-card:active {
            transform: scale(0.97);
            transition: transform .2s;
        }
        .memory-card.flip {
            transform: rotateY(180deg);
        }
        .front-face {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <button id="btn">Запустить заново!</button>
    <section class="memory-game">
        <div class="memory-card" data-icon='icon1'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=1" alt="icon1">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon1'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=1" alt="icon1">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon2'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=2" alt="2">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon2'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=2" alt="2">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon3'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=3" alt="icon3">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon3'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=3" alt="icon3">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon4'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=4" alt="4">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon4'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=4" alt="4">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon5'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=5" alt="5">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon5'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=5" alt="5">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon6'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=6" alt="6">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon6'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=6" alt="6">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon7'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=7" alt="7">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon7'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=7" alt="7">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon8'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=8" alt="8">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
        <div class="memory-card" data-icon='icon8'>
            <img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=8" alt="8">
            <img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
        </div>
    </section>
    <button id="btn-mix"></button>
    <script>
        const cards = document.querySelectorAll('.memory-card');
        function flipCard() {
            this.classList.add('flip');
        }
        let hasFlippedCard = false;
        let lockBoard = false;
        let firstCard, secondCard;
        function flipCard() {
            if(this.classList.contains('flip')) return;
            if (lockBoard) return;
            if (this === firstCard) return;
            this.classList.add('flip');
            if (!hasFlippedCard) {
                hasFlippedCard = true;
                firstCard = this;
                return;
            }
            secondCard = this;
            checkForMatch();
        }
        function checkForMatch() {
            if (firstCard.dataset.icon === secondCard.dataset.icon) {
                disableCards();
                return;
            }
            unflipCards();
        }
        function disableCards() {
            resetBoard()
        }
        function unflipCards() {
            lockBoard = true;
            setTimeout(() => {
                firstCard.classList.remove('flip');
                secondCard.classList.remove('flip');
                resetBoard()
            }, 1500);
        }
        function resetBoard() {
            [hasFlippedCard, lockBoard] = [false, false];
            [firstCard, secondCard] = [null, null];
        }
        function shuffle() {
                hasFlippedCard = false;
                lockBoard = false;
            cards.forEach(card => {
                let ramdomPos = Math.floor(Math.random() * 12);
                card.classList.remove('flip');
                card.style.order = ramdomPos;
            });
        };
        shuffle()
        cards.forEach(card => card.addEventListener('click', flipCard))
        document.querySelector('#btn').addEventListener('click', shuffle)
    </script>
</body>
</html>

TomWalbridge 17.11.2021 10:52
Спасибо огромное!!!

tagari 31.10.2022 16:49
Добрый день!

Подскажите, а как добавить событие что при окончании игры кнопка становится активной?
<!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="stile.css">
  <title>Game</title>

</head>
<body>
  <div class="game-container">
    <div class="game">
      <div class="game-block" data-framework="1">
        <div class="card-open"><p>1</p></div>
        <div class="card-close"></div>
      </div>
      <div class="game-block" data-framework="1">
        <div class="card-open"><p>1</p></div>
        <div class="card-close"></div>
      </div>
      <div class="game-block" data-framework="2">
        <div class="card-close"></div>
        <div class="card-open"><p>2</p></div>
      </div>
      <div class="game-block" data-framework="2">
        <div class="card-close"></div>
        <div class="card-open"><p>2</p></div>
      </div>
      <div class="game-block" data-framework="3">
        <div class="card-close"></div>
        <div class="card-open"><p>3</p></div>
      </div>
      <div class="game-block" data-framework="3">
        <div class="card-close"></div>
        <div class="card-open"><p>3</p></div>
      </div>
      <div class="game-block" data-framework="4">
        <div class="card-close"></div>
        <div class="card-open"><p>4</p></div>
      </div>
      <div class="game-block" data-framework="4">
        <div class="card-close"></div>
        <div class="card-open"><p>4</p></div>
      </div>
      <div class="game-block" data-framework="5">
        <div class="card-close"></div>
        <div class="card-open"><p>5</p></div>
      </div>
      <div class="game-block" data-framework="5">
        <div class="card-close"></div>
        <div class="card-open"><p>5</p></div>
      </div>
      <div class="game-block" data-framework="6">
        <div class="card-close"></div>
        <div class="card-open"><p>6</p></div>
      </div>
      <div class="game-block" data-framework="6">
        <div class="card-close"></div>
        <div class="card-open"><p>6</p></div>
      </div>
      <div class="game-block" data-framework="7">
        <div class="card-close"></div>
        <div class="card-open"><p>7</p></div>
      </div>
      <div class="game-block" data-framework="7">
        <div class="card-close"></div>
        <div class="card-open"><p>7</p></div>
      </div>
      <div class="game-block" data-framework="8">
        <div class="card-close"></div>
        <div class="card-open"><p>8</p></div>
      </div>
      <div class="game-block" data-framework="8">
        <div class="card-close"></div>
        <div class="card-open"><p>8</p></div>
      </div>
    </div>
    <button class="btn btn-hiden">Сыграть еще раз</button>
  </div>
  <script src="main.js"></script>
</body>
</html>



const cards = document.querySelectorAll('.game-block');
let buttonReset = document.querySelector(".btn");
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
let cardsAray = [];

cardsAray = cards;


function flipCard() {
  if(this.classList.contains('flip')) return;
  if (lockBoard) return;
  if (this === firstCard) return;

  this.classList.add('flip');

  if (!hasFlippedCard) {
    hasFlippedCard = true;
    firstCard = this;
  return;
  }
  secondCard = this;


  checkForMatch();
  }


  function checkForMatch() {
   if (firstCard.dataset.framework === secondCard.dataset.framework) {
    disableCards();
    return;
 }
  unflipCards();
  }
 function disableCards() {
  resetBoard()
 }


  function unflipCards() {
    lockBoard = true;
     setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');
    resetBoard();
   }, 1500);
  buttonReset.document.classList.add("btn-activ");
 }

 function resetBoard() {
  [hasFlippedCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];

}

function shuffle() {
  cards.forEach(card => {
  let ramdomPos = Math.floor(Math.random() * 16);
  card.classList.remove('flip');
  card.style.order = ramdomPos;
  });
  }
  shuffle();

cards.forEach(card => card.addEventListener('click', flipCard));
document.querySelector('btn-activ').addEventListener('click', shuffle)

рони 31.10.2022 18:14
игра открыть пару
 
tagari,

<!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="stile.css">
    <title>Game</title>
    <style type="text/css">
        .game {
            display: flex;
        }

        .game-block {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            text-align: center;
        }

        .flip {
            background-color: #228B22;
        }

        .btn-hiden {
            display: none;
        }

        .game-block>.card-open {
            display: none;
            color: #FFFFFF;
        }

        .game-block.flip>.card-open {
            display: block;

        }
    </style>
</head>

<body>
    <div class="game-container">
        <div class="game">
            <div class="game-block" data-framework="1">
                <div class="card-open">
                    <p>1</p>
                </div>
                <div class="card-close"></div>
            </div>
            <div class="game-block" data-framework="1">
                <div class="card-open">
                    <p>1</p>
                </div>
                <div class="card-close"></div>
            </div>
            <div class="game-block" data-framework="2">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>2</p>
                </div>
            </div>
            <div class="game-block" data-framework="2">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>2</p>
                </div>
            </div>
            <div class="game-block" data-framework="3">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>3</p>
                </div>
            </div>
            <div class="game-block" data-framework="3">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>3</p>
                </div>
            </div>
            <div class="game-block" data-framework="4">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>4</p>
                </div>
            </div>
            <div class="game-block" data-framework="4">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>4</p>
                </div>
            </div>
            <div class="game-block" data-framework="5">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>5</p>
                </div>
            </div>
            <div class="game-block" data-framework="5">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>5</p>
                </div>
            </div>
            <div class="game-block" data-framework="6">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>6</p>
                </div>
            </div>
            <div class="game-block" data-framework="6">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>6</p>
                </div>
            </div>
            <div class="game-block" data-framework="7">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>7</p>
                </div>
            </div>
            <div class="game-block" data-framework="7">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>7</p>
                </div>
            </div>
            <div class="game-block" data-framework="8">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>8</p>
                </div>
            </div>
            <div class="game-block" data-framework="8">
                <div class="card-close"></div>
                <div class="card-open">
                    <p>8</p>
                </div>
            </div>
        </div>
        <button class="btn btn-hiden">Сыграть еще раз</button>
    </div>
    <script>
        const cards = document.querySelectorAll('.game-block');
        let len = cards.length;
        let buttonReset = document.querySelector(".btn");
        let hasFlippedCard = false;
        let lockBoard = false;
        let firstCard, secondCard;
        let cardsAray = [];

        cardsAray = cards;


        function flipCard() {
            if (this.classList.contains('flip')) return;
            if (lockBoard) return;
            if (this === firstCard) return;

            this.classList.add('flip');

            if (!hasFlippedCard) {
                hasFlippedCard = true;
                firstCard = this;
                return;
            }
            secondCard = this;


            checkForMatch();
        }


        function checkForMatch() {
            if (firstCard.dataset.framework === secondCard.dataset.framework) {
                let toggle = len !== document.querySelectorAll('.flip').length;
                buttonReset.classList.toggle("btn-hiden", toggle);
                disableCards();

                return;
            }
            unflipCards();
        }

        function disableCards() {
            resetBoard()
        }


        function unflipCards() {
            lockBoard = true;
            setTimeout(() => {
                firstCard.classList.remove('flip');
                secondCard.classList.remove('flip');
                resetBoard();
            }, 1500);
        }

        function resetBoard() {
            [hasFlippedCard, lockBoard] = [false, false];
            [firstCard, secondCard] = [null, null];

        }

        function shuffle() {
            cards.forEach(card => {
                let ramdomPos = Math.floor(Math.random() * 16);
                card.classList.remove('flip');
                card.style.order = ramdomPos;
            });
            buttonReset.classList.add("btn-hiden");

        }
        shuffle();

        cards.forEach(card => card.addEventListener('click', flipCard));
        document.querySelector('.btn-hiden').addEventListener('click', shuffle)
    </script>
</body>

</html>

tagari 31.10.2022 19:17
Спасибо!!!


Часовой пояс GMT +3, время: 20:40.