如果游戏结束，如何添加一个Java脚本警报？

有人能帮我在我的卡片记忆游戏中匹配所有卡片的时候添加一个“赢”的提示吗？

我是编程新手。我只是对功能没有完全的理解。

我一点击一张卡就会弹出一个提示，但不是在它们都匹配之后。

const cards = document.querySelectorAll('.memory-card');

    /*Create two variables using let: hasFlippedCard and lockBoard. Both should be false*/

    let hasFlippedCard = false;
    let lockBoard = false;

    let firstCard, secondCard;

    function flipCard() {
        if (lockBoard) return;
        if (this === firstCard) return;

        this.classList.add('flip');

        if (!hasFlippedCard) {
            // first click
            hasFlippedCard = true;
            firstCard = this;

            return;
        }

        // second click
        secondCard = this;

        checkForMatch();
    }

    function checkForMatch() {
        let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

        isMatch ? disableCards() : unflipCards();

    }

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

        resetBoard();
    }

    function unflipCards() {
        lockBoard = true;

        setTimeout(() => {

            /*Replace the # symbols with the appropriate class*/
            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 => {

            /*Replace # with the appropriate numeric value for your game*/
            let randomPos = Math.floor(Math.random() * 12);
            card.style.order = randomPos;
        });

    })();

    /*Replace # with the appropriate event listener*/
    cards.forEach(card => card.addEventListener('click', flipCard));

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">

      <title>Pokemon Match Game</title>

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

    body {
      height: 100vh;
      display: flex;
      background: #14A8DE;
    }

    .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;
      transform: scale(1);
      transform-style: preserve-3d;
      transition: transform .5s;
      box-shadow: 1px 1px 1px rgba(0,0,0,.3);
      background-color: #c0c0c0;
      border-radius: 15px;
    }

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

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

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

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

    </style>
    </head>
    <a class="HOME" href="index.html">HOME</a>
    <style>
    .clickMe {
        -moz-appearance: button;
        -ms-appearance: button;
        -o-appearance: button;
        -webkit-appearance: button;
        appearance: button;
        text-decoration: none;
        color: #FFC68A;
        padding: 0.2em 0.4em;
    }
    </style>
    <body>

    <!-- water type -->
      <section class="memory-game">
        <div class="memory-card" data-framework="water">
          <img class="front-face" src="images/water.svg" alt="water type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
       <div class="memory-card" data-framework="water">
          <img class="front-face" src="images/water.svg" alt="water type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
    <!-- dark type -->
         <div class="memory-card" data-framework="dark">
          <img class="front-face" src="images/dark.svg" alt="dark type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
        <div class="memory-card" data-framework="dark">
          <img class="front-face" src="images/dark.svg" alt="dark type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
    <!-- poison type -->
        <div class="memory-card" data-framework="poison">
          <img class="front-face" src="images/poison.svg" alt="poison type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
       <div class="memory-card" data-framework="poison">
          <img class="front-face" src="images/poison.svg" alt="poison type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
    <!-- grass type --> 
         <div class="memory-card" data-framework="grass">
          <img class="front-face" src="images/grass.svg" alt="grass type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
       <div class="memory-card" data-framework="grass">
          <img class="front-face" src="images/grass.svg" alt="grass type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
    <!-- fire type -->
         <div class="memory-card" data-framework="fire">
          <img class="front-face" src="images/fire.svg" alt="fire type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
       <div class="memory-card" data-framework="fire">
          <img class="front-face" src="images/fire.svg" alt="fire type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
    <!-- electric -->
          <div class="memory-card" data-framework="electric">
          <img class="front-face" src="images/electric.svg" alt="electric type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
         <div class="memory-card" data-framework="electric">
          <img class="front-face" src="images/electric.svg" alt="electric type" />
          <img class="back-face" src="images/cardback.svg" alt="Pokeball" />
        </div>
      </section>

      <script src="JS/scripts.js"></script>
    </body>
    </html>

没有要检查的代码：

卡片总数。
已找到所有卡片。

我自己制作了一套卡片，只有4张，作为一个例子就足够了。我的代码添加了一个用于卡片总数的新变量、一个unflipAll函数和一个警报。

我已经添加了要解释的注解，以及一些控制台输出以显示正在发生的事情。

在我的例子中，卡1和卡2是相同的，所以卡3和卡4是相同的。

const cards = document.querySelectorAll('.memory-card');

// the alert requires the total number of cards
var totalNumberOfCards = cards.length
console.log(totalNumberOfCards);

let lockBoard = false;
var firstCard, secondCard;

// had to refactor it for my example as I did not understand yours
function flipCard() {
    if (firstCard == undefined) {
      this.classList.add('flip');
      firstCard = this;
      return
    }    
    if (secondCard == undefined) {
      this.classList.add('flip');
      secondCard = this;
    }
    checkForMatch();
}

function checkForMatch() {
    let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

    isMatch ? disableCards(firstCard, secondCard) : unflipCards(firstCard, secondCard);

    // reset match(es)
    firstCard = undefined;
    secondCard = undefined;
}

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

    // remove found cards from total    
    totalNumberOfCards -= 2
    console.log(totalNumberOfCards + ' cards left on the board');

    if (totalNumberOfCards === 0) {
      unflipAllCards();
      // restart and shuffle here
      // reset totalNumberOfCards being 0 back to total
    }
}

function unflipCards(firstCard, secondCard) {

    console.log('resetting unmatched cards');
    setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');
    }, 1500);
}

// new function to flip all cards
function unflipAllCards(firstCard, secondCard) {
    console.log('no cards left - resetting all cards');
    setTimeout(() => {
      cards.forEach(card => card.classList.remove('flip'));
          resetBoard();
          alert('no cards left - game over');
      }, 1500); 
}

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

// removed the unused shuffle function for the example
cards.forEach(card => card.addEventListener('click', flipCard));

.memory-card {
  width: 50px; 
  height: 50px;
  background: violet;
  margin: 5px;
}

.flip {
  background: yellow;
}

<div class="memory-card" data-framework="111"></div>
<div class="memory-card" data-framework="111"></div>
<div class="memory-card" data-framework="222"></div>
<div class="memory-card" data-framework="222"></div>

如果游戏结束，如何添加一个Java脚本警报？

1条答案

相关问题

热门标签

最新问答