как добавить кнопку показать все карты в код javascript ниже?

Question

у меня есть этот код, написанный на языке javascript, HTML и CSS для игры на память, и я пытаюсь добавить кнопку «Показать все» в мой код здесь (чтобы при нажатии на нее все карты отображались в течение секунд и затем снова щелкнул) но это не работает со мной, я разместил код ниже, поэтому, пожалуйста, если вы можете помочь, я был бы благодарен. заранее спасибо: D

class MixOrMatch {
    constructor(totalTime, cards) {
        this.cardsArray = cards;
        this.totalTime = totalTime;
        this.timeRemaining = totalTime;
        this.timer = document.getElementById('timer')
        this.ticker = document.getElementById('flips');

    }

    startGame() {
        this.totalClicks = 0;
        this.timeRemaining = this.totalTime;
        this.cardToCheck = null;
        this.matchedCards = [];
        this.busy = true;
        this.timeRemaining = 0;
        setTimeout(() => {

            this.shuffleCards(this.cardsArray);
            this.countdown = this.startCountdown();
            this.busy = false;
        }, 500)
        this.hideCards();
        this.timer.innerText = this.timeRemaining;
        this.ticker.innerText = this.totalClicks;
    }
    startCountdown() {


        let minute = 0;
        let second = 0;
        return setInterval(() => {
            timer.innerHTML = minute + "mins : " + second + "secs";
            ;
            second++;
            if (second == 60) {
                minute++;
                second = 0;
            }
            if (minute == 60) {
                hour++;
                minute = 0;
            }
        }, 1000);


        this.timeRemaining++;
        this.timer.innerText = this.timeRemaining;


    }

    finish() {
        clearInterval(this.countdown);

        document.getElementById('victory-text').classList.add('visible');
    }
    hideCards() {
        this.cardsArray.forEach(card => {
            card.classList.remove('visible');
            card.classList.remove('matched');
        });
    }
    flipCard(card) {
        if (this.canFlipCard(card)) {




            card.classList.add('visible');

            card.classList.add('visible');




            if (this.cardToCheck) {
                this.checkForCardMatch(card);
            } else {
                this.cardToCheck = card;
            }
        }
    }
    checkForCardMatch(card) {
        if (this.getCardType(card) === this.getCardType(this.cardToCheck))
            this.cardMatch(card, this.cardToCheck);
        else
            this.cardMismatch(card, this.cardToCheck);

        this.cardToCheck = null;
    }
    cardMatch(card1, card2) {
        this.matchedCards.push(card1);
        this.matchedCards.push(card2);
        card1.classList.add('matched');
        card2.classList.add('matched');

        if (this.matchedCards.length === this.cardsArray.length)
            this.finish();
    }
    cardMismatch(card1, card2) {
        this.busy = true;
        setTimeout(() => {
            card1.classList.remove('visible');
            card2.classList.remove('visible');
            this.busy = false;
        }, 1000);
    }
    shuffleCards(cardsArray) {
        for (let i = cardsArray.length - 1; i > 0; i--) {
            let randIndex = Math.floor(Math.random() * (i + 1));
            cardsArray[randIndex].style.order = i;
            cardsArray[i].style.order = randIndex;
        }
    }
    getCardType(card) {
        return card.getElementsByClassName('card-value')[0].src;
    }
    canFlipCard(card) {
        return !this.busy && !this.matchedCards.includes(card) && card !== this.cardToCheck;
    }
}

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready);
} else {
    ready();
}

function ready() {
    let overlays = Array.from(document.getElementsByClassName('overlay-text'));
    let cards = Array.from(document.getElementsByClassName('card'));
    let game = new MixOrMatch(100, cards);

    overlays.forEach(overlay => {
        overlay.addEventListener('click', () => {
            overlay.classList.remove('visible');
            game.startGame();
        });
    });

    cards.forEach(card => {
        card.addEventListener('click', () => {
            game.flipCard(card);
        });
    });
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="script.js" async></script>
  <link href="styles.css" rel="stylesheet">

  <title>Memory Game</title>
</head>

<body>
  <h1 class="page-title">MEMORY GAME</h1>
  <button class="show-all" onclick= shuffleCards()> 
  </button>
  <button class="overlay-text visible">
    Click to Start
  </button>
  <div id="victory-text" class="overlay-text">
    GOOD GAME!
    <button class="overlay-text-small">Click to Restart</button>
  </div>

  <div class="game-container">
    <div class="game-info-container">
      <!-- <div class="game-info">
        Time : <span id="time-remaining">0</span>
      </div> -->

      <div id="timer">
      </div>
      <!-- <div class="game-info">
        Flips <span id="flips">0</span>
      </div> -->
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Bat.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Bat.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Bones.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Bones.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Cauldron.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Cauldron.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">


        <img class="card-value" src="Images/Eye.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Eye.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Skull.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Skull.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Pumpkin.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Pumpkin.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Ghost.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Ghost.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Dracula.png">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">

        <img class="spider" src="Images/Spider.png">
      </div>
      <div class="card-front card-face">

        <img class="card-value" src="Images/Dracula.png">
      </div>
    </div>
  </div>


</body>

</html>

Answer 1

Глядя на консоль, вы видите следующую ошибку:

index. html: 13 Uncaught ReferenceError: shuffleCards не определена

Это означает, что ваша кнопка не имеет доступа к функции shuffleCards, один из способов решения этой проблемы заключается в том, чтобы вы ready() получили элемент и подключили его к game следующим образом:

let showAll = document.querySelector(".show-all");
showAll.addEventListener("click", () => {
  game.cardsArray.forEach((card) => card.classList.add("visible"));
});

<button class="show-all">Show All</button>

Пожалуйста, проверьте фрагмент ниже:

class MixOrMatch {
  constructor(totalTime, cards) {
    this.cardsArray = cards;
    this.totalTime = totalTime;
    this.timeRemaining = totalTime;
    this.timer = document.getElementById("timer");
    this.ticker = document.getElementById("flips");
  }

  startGame() {
    this.totalClicks = 0;
    this.timeRemaining = this.totalTime;
    this.cardToCheck = null;
    this.matchedCards = [];
    this.busy = true;
    this.timeRemaining = 0;
    setTimeout(() => {
      this.shuffleCards(this.cardsArray);
      this.countdown = this.startCountdown();
      this.busy = false;
    }, 500);
    this.hideCards();
    this.timer.innerText = this.timeRemaining;
    this.ticker.innerText = this.totalClicks;
  }
  startCountdown() {
    let minute = 0;
    let second = 0;
    return setInterval(() => {
      timer.innerHTML = minute + "mins : " + second + "secs";
      second++;
      if (second == 60) {
        minute++;
        second = 0;
      }
      if (minute == 60) {
        hour++;
        minute = 0;
      }
    }, 1000);

    this.timeRemaining++;
    this.timer.innerText = this.timeRemaining;
  }

  victory() {
    clearInterval(this.countdown);

    document.getElementById("victory-text").classList.add("visible");
  }
  hideCards() {
    this.cardsArray.forEach((card) => {
      card.classList.remove("visible");
      card.classList.remove("matched");
    });
  }
  flipCard(card) {
    if (this.canFlipCard(card)) {
      card.classList.add("visible");

      card.classList.add("visible");

      if (this.cardToCheck) {
        this.checkForCardMatch(card);
      } else {
        this.cardToCheck = card;
      }
    }
  }
  checkForCardMatch(card) {
    if (this.getCardType(card) === this.getCardType(this.cardToCheck))
      this.cardMatch(card, this.cardToCheck);
    else this.cardMismatch(card, this.cardToCheck);

    this.cardToCheck = null;
  }
  cardMatch(card1, card2) {
    this.matchedCards.push(card1);
    this.matchedCards.push(card2);
    card1.classList.add("matched");
    card2.classList.add("matched");

    if (this.matchedCards.length === this.cardsArray.length)
      this.victory();
  }
  cardMismatch(card1, card2) {
    this.busy = true;
    setTimeout(() => {
      card1.classList.remove("visible");
      card2.classList.remove("visible");
      this.busy = false;
    }, 1000);
  }
  shuffleCards(cardsArray) {
    for (let i = cardsArray.length - 1; i > 0; i--) {
      let randIndex = Math.floor(Math.random() * (i + 1));
      cardsArray[randIndex].style.order = i;
      cardsArray[i].style.order = randIndex;
    }
  }
  getCardType(card) {
    return card.getElementsByClassName("card-value")[0].src;
  }
  canFlipCard(card) {
    return (!this.busy &&
      !this.matchedCards.includes(card) &&
      card !== this.cardToCheck
    );
  }
}

if (document.readyState == "loading") {
  document.addEventListener("DOMContentLoaded", ready);
} else {
  ready();
}

function ready() {
  let overlays = Array.from(
    document.getElementsByClassName("overlay-text")
  );
  let cards = Array.from(document.getElementsByClassName("card"));
  let game = new MixOrMatch(100, cards);

  overlays.forEach((overlay) => {
    overlay.addEventListener("click", () => {
      overlay.classList.remove("visible");
      game.startGame();
    });
  });

  cards.forEach((card) => {
    card.addEventListener("click", () => {
      game.flipCard(card);
    });
  });

  let showAll = document.querySelector(".show-all");
  showAll.addEventListener("click", () => {
    game.cardsArray.forEach((card) => card.classList.add("visible"));
  });

  let hideAll = document.querySelector(".hide-all");
  hideAll.addEventListener("click", () => {
    game.cardsArray.forEach((card) => card.classList.remove("visible"));
  });
}

@font-face {
  font-family: "Creepy";
}

@font-face {
  font-family: "Lunacy";
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  font-family: Lunacy;
}

body {
  margin: 0;
  background: radial-gradient(rgb(212, 137, 200), rgb(238, 10, 181));
}

.page-title {
  color: rgba(8, 1, 3, 0.432);
  font-family: cursive;
  font-weight: normal;
  text-align: center;
  font-size: 6em;
}

.game-info-container {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
}

.game-info {
  color: rgb(255, 137, 249);
  font-size: 4em;
}

.game-container {
  margin: 50px auto;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 10px;
  justify-content: center;
  perspective: 500px;
}

.card {
  position: relative;
  height: 175px;
  width: 125px;
}

.card-face {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
  transition: transform 500ms ease-in-out;
  backface-visibility: hidden;
}

.card.visible .card-back {
  transform: rotateY(-180deg);
}

.card.visible .card-front {
  transform: rotateY(0);
}

.card.matched .card-front .card-value {
  animation: dance 1s linear infinite 500ms;
}

.card-back {
  background-color: black;
  border-color: rgba(119, 112, 115, 0.034);
  transform: rotateY(0);
}

.cob-web {
  position: absolute;
  transition: width 100ms ease-in-out, height 100ms ease-in-out;
  width: 47px;
  height: 47px;
}

.card-value {
  position: relative;
  transition: transform 100ms ease-in-out;
  transform: scale(0.9);
}

.card-front:hover .card-value {
  transform: scale(1);
}

.card-front {
  background-color: rgb(250, 158, 212);
  border-color: #333;
  transform: rotateY(180deg);
}

.overlay-text {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: none;
  position: fixed;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: rgb(7, 5, 5);
  font-family: cursive;
  transition: background-color 500ms, font-size 500ms;
  font-size: xx-large;
  margin-right: 528px;
  padding-right: -56px;
  margin-left: 379px;
}

.overlay-text-small {
  font-size: 0.3em;
  font-size: xx-large;
  margin-right: 3px;
}

.overlay-text.visible {
  display: flex;
  animation: overlay-grow 500ms forwards;
  height: fit-content;
  margin-top: 200px;
  margin-left: 600px;
}

.game-info-container {
  flex-direction: column;
  align-items: center;
}

#timer {
  display: flex;
  margin: 0 1rem;
  font-size: x-large;
}

.show-all {
  display: flex;
}

<h1 class="page-title">MEMORY GAME</h1>
<button class="show-all">Show All</button>
<button class="hide-all">Hide All</button>
<button class="overlay-text visible">
      Click to Start
    </button>
<div id="victory-text" class="overlay-text">
  GOOD GAME!
  <button class="overlay-text-small">Click to Restart</button>
</div>

<div class="game-container">
  <div class="game-info-container">
    <!-- <div class="game-info">
        Time : <span id="time-remaining">0</span>
      </div> -->

    <div id="timer"></div>
    <!-- <div class="game-info">
        Flips <span id="flips">0</span>
      </div> -->
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
  <div class="card">
    <div class="card-back card-face">
      <img class="spider" src="http://placehold.it/600x300&text=Slide+1" />
    </div>
    <div class="card-front card-face">
      <img class="card-value" src="http://placeimg.com/625/225/any" />
    </div>
  </div>
</div>