在简单的 Memory 游戏中存储首次单击的元素

Question

我正在制作一个简单的颜色 memory 游戏，最初有 6 个黑盒子，点击它们会改变颜色，从预定义的数组中取出 colors，该数组在游戏开始时被洗牌。

但是我在比较部分卡了好几个小时 - handleCardClick function。当两个盒子的colors相同colors时它有效，但是当colors不同时，只有第二个点击的盒子变回黑色，但第一个保持彩色。

我似乎找不到存储第一个单击框的方法。 也许我的方法本质上是错误的。 这是我的代码：

    let colors = ['red', 'green', 'blue', 'red', 'green', 'blue']
    const startButton = document.querySelector('.js-start-btn')
    const cards = document.querySelectorAll('.js-card')
    
    const shuffleArray = () => {
        var i = 0
          , j = 0
          , temp = null
      
        for (i = array.length - 1; i > 0; i -= 1) {
          j = Math.floor(Math.random() * (i + 1))
          temp = array[i]
          array[i] = array[j]
          array[j] = temp
        }
    }
    
    
    let emptyArr = []
    
    const handleCardClik = () => {
        // Variable to store first click card
        let firstCard
        for (let i = 0; i < cards.length; i++) {
            cards[i]?.addEventListener('click', () => {
                cards[i].style.backgroundColor = colors[i]
                firstCard = cards[i]
                //push colors into an empty array and start comparing them when there are two colors
                emptyArr.push(colors[i])
    
                if (emptyArr.length === 2) {
                // if colors are same apply them to the cards, clear the array and the storing variable    
                    if (emptyArr[0] === emptyArr[1]) {
                        firstCard = emptyArr[0]
                        cards[i].style.backgroundColor = emptyArr[1]
                        firstCard = ''
                        emptyArr = []
    
                // if colors differ keep them for 1 second, then change back to black       
                    } else if (emptyArr[0] !== emptyArr[1]) {
                        firstCard = emptyArr[0]
                        cards[i].style.backgroundColor = emptyArr[1]
                        emptyArr = []
                        setTimeout(() => {
                        firstCard = 'black'
                        cards[i].style.backgroundColor = 'black'                    
                          }, 1000)     
                        firstCard = ''
                     
                    }
                }
            })
                  
        }
    }
    
    const initializeGame = () => {
        shuffleArray(colors)
    
        for (let i = 0; i < cards.length; i++) {
            cards[i].style.backgroundColor = 'black'
        }
    
        handleCardClik()
    }
    
    startButton?.addEventListener('click', () => {
        initializeGame()   
    })
<!-- -->
    <body><section class="section-top sec-position">
        <div class="top-wrapper">
            <button class="start-btn js-start-btn">START</button>
        </div>
    </section>
    <section class="section section-main sec-position">
        <div class="main-wrapper">
            <div class="top-row">
                <div class="card js-card"></div>
                <div class="card js-card"></div>
                <div class="card js-card"></div>
            </div>
            <div class="bot-row">
                <div class="card js-card"></div>
                <div class="card js-card"></div>
                <div class="card js-card"></div>
            </div>
        </div>
    </section>
    <section class="section-bot sec-position">
        <span class="win-message">WINNER LOSER</span>
    </section>
        <script src="/scripts.js"></script>
    </body>
<!-- -->
    .sec-position {
      max-width: 1200px;
      margin: 0 auto 0 auto;
    }
    
    .main-wrapper {
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding-top: 50px;
      padding-bottom: 50px;
    
    }
    
    .card {
      width: 200px;
      height: 200px;
      gap: 30px;
      background-color: black;
    }
    
    .top-row {
      display: flex;
      gap: 30px;
    }
    
    .bot-row {
      display: flex;
      gap: 30px;
    
    }

Answer 1

我对 handleCardClik function 进行了一些更改，它应该可以正常工作，因为您的代码不起作用的主要原因是设置超时 function 因为您在运行前重置了 firstcard 变量，并且它在 1 秒延迟后运行，新值导致错误我只是将值缓存在一个名为 cachedFirstCard 的变量中。 希望这有帮助

const handleCardClik = () => {
  // Variable to store first click card
  let firstCard
  for (let i = 0; i < cards.length; i++) {
    cards[i]?.addEventListener('click', () => {
      cards[i].style.backgroundColor = colors[i]
      //push colors into an empty array and start comparing them when there are two colors
      emptyArr.push(colors[i])

      if (emptyArr.length === 2) {
        // if colors are same apply them to the cards, clear the array and the storing variable    
        if (emptyArr[0] === emptyArr[1]) {
          cards[i].style.backgroundColor = emptyArr[1]
          firstCard = ''
          emptyArr = []

          // if colors differ keep them for 1 second, then change back to black       
        } else if (emptyArr[0] !== emptyArr[1]) {
          cards[i].style.backgroundColor = emptyArr[1]
          emptyArr = []
          let cachedFirstCard = firstCard
          setTimeout(() => {
            cachedFirstCard.style.backgroundColor = 'black'
            cards[i].style.backgroundColor = 'black'
            firstCard = ''
          }, 1000)


        }
      }
      firstCard = cards[i]
    })

  }
}