Hilfe für einen Noob - Druckversion

Code:
const selectors = {

    boardContainer: document.querySelector('.board-container'),

    board: document.querySelector('.board'),

    moves: document.querySelector('.moves'),

    timer: document.querySelector('.timer'),

    start: document.querySelector('button'),

    win: document.querySelector('.win')

}



const state = {

    gameStarted: false,

    flippedCards: -1,

    totalFlips: 0,

    totalTime: 0,

    loop: null

}



const shuffle = array => {

    const clonedArray = [...array]



    for (let index = clonedArray.length - 1; index > 0; index--) {

        const randomIndex = Math.floor(Math.random() * (index + 1))

        const original = clonedArray[index]



        clonedArray[index] = clonedArray[randomIndex]

        clonedArray[randomIndex] = original

    }



    return clonedArray

}



const pickRandom = (array, items) => {

    const clonedArray = [...array]

    const randomPicks = []



    for (let index = 0; index < items; index++) {

        const randomIndex = Math.floor(Math.random() * clonedArray.length)



        randomPicks.push(clonedArray[randomIndex])

        clonedArray.splice(randomIndex, 1)

    }



    return randomPicks

}



const generateGame = () => {

    const dimensions = selectors.board.getAttribute('data-dimension')



    if (dimensions % 2 !== 0) {

        throw new Error("The dimension of the board must be an even number.")

    }



    const images = ['assets/images/memo_01.jpg', 'assets/images/memo_02.jpg', 'assets/images/memo_03.jpg', 'assets/images/memo_04.jpg', 'assets/images/memo_05.jpg', 'assets/images/memo_06.jpg', 'assets/images/memo_07.jpg', 'assets/images/memo_08.jpg', 'assets/images/memo_09.jpg', 'assets/images/memo_10.jpg', 'assets/images/memo_11.jpg', 'assets/images/memo_12.jpg', 'assets/images/memo_13.jpg', 'assets/images/memo_14.jpg', 'assets/images/memo_15.jpg', 'assets/images/memo_16.jpg']

    const emojis = ['🥔', '🍒', '🥑', '🌽', '🥕', '🍇', '🍉', '🍌', '🥭', '🍍']

    const picks = pickRandom(images, (dimensions * dimensions) / 2)

    const items = shuffle([...picks, ...picks])

    const cards = `

    <div class="board" style="grid-template-columns: repeat(${dimensions}, auto)"> ${items.map(item => `

      <div class="card">

      <div class="card-front"></div>

      <div class="card-back">

      <img src="${item}" alt="memory game image">

      </div>

      </div>

      `).join('')}



      </div>

    `



    const parser = new DOMParser().parseFromString(cards, 'text/html')



    selectors.board.replaceWith(parser.querySelector('.board'))

}



const startGame = () => {

    state.gameStarted = true

    selectors.start.classList.add('disabled')



    state.loop = setInterval(() => {

        state.totalTime++



        selectors.moves.innerText = `${state.totalFlips} Spielzüge`

        selectors.timer.innerText = `Zeit: ${state.totalTime} Sekunden`

    }, 1000)

}



const flipBackCards = () => {

  const flippedCards = document.querySelectorAll('.flipped:not(.matched)')

  if (flippedCards[0].querySelector('img').src === flippedCards[1].querySelector('img').src) {

    flippedCards[0].classList.add('matched')

    flippedCards[1].classList.add('matched')

  } else {

    flippedCards[0].classList.remove('flipped')

    flippedCards[1].classList.remove('flipped')

  }

  state.flippedCards = 0

}



const flipCard = card => {

  if (card.classList.contains('flipped')) {

    return;

  }



    state.flippedCards++

    if (state.flippedCards === 2) {

  state.flippedCards = 0;

  flipBackCards();

}



    state.totalFlips++



    if (!state.gameStarted) {

        startGame()

    }



    if (state.flippedCards <= 2) {

        card.classList.add('flipped')

    }



    if (state.flippedCards === 2) {

    const flippedCards = document.querySelectorAll('.flipped:not(.matched)');

    const img1 = flippedCards[0].querySelector('img').src;

    const img2 = flippedCards[1].querySelector('img').src;



      if (img1 === img2) {

        flippedCards[0].classList.add('matched');

        flippedCards[1].classList.add('matched');

      }



      setTimeout(() => {

        flipBackCards();

        state.flippedCards = 0; // Hier setzen Sie den Zähler zurück auf 0

      }, 1000);

    }



    // If there are no more cards that we can flip, we won the game

    if (!document.querySelectorAll('.card:not(.flipped)').length) {

        setTimeout(() => {

            selectors.boardContainer.classList.add('flipped')

            selectors.win.innerHTML = `

                <span class="win-text">

                    Du hast gewonnen!<br />

                    Mit <span class="highlight">${state.totalFlips}</span> Spielzügen<br />

                    in <span class="highlight">${state.totalTime}</span> Sekunden

                </span>

            `



            clearInterval(state.loop)

        }, 1000)

    }

}



const attachEventListeners = () => {

    document.addEventListener('click', event => {

        const eventTarget = event.target

        const eventParent = eventTarget.parentElement



        if (eventTarget.className.includes('card') && !eventParent.className.includes('flipped')) {

            flipCard(eventParent)

        } else if (eventTarget.nodeName === 'BUTTON' && !eventTarget.className.includes('disabled')) {

            startGame()

        }

    })

}



generateGame()

attachEventListeners()