Hilfe für einen Noob

[mipu72]

Hallo, liebe Leute!

Ich hab von Javascript eigentlich gar keine Ahnung. Heute habe ich mir auf Basis eines Memoryspiels von Github und der Hilfe von ChatGPT ein Memoryspiel basteln lassen, das mit meinen eigenen Bildern funktioniert. Das Spiel funktioniert auch soweit. Ein Problem würde ich aber gerne noch lösen und ChatGPT kann mit hier leider nicht weiterhelfen   Das Problem ist, dass wenn zwei Karten umgedreht werden, die nicht zusammen passen, dann sollen die Karten nach einer Sekunde wieder umgedreht werden - das passiert leider nicht.

Vielleicht ist ja jemandem von euch sehr langweilig und er schaut mal über meinen Code. Ich würde mich auf jeden Fall sehr freuen.

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()

[admin]

Hast du mal ein Link zu den ganzen Github´, würde3 das mal gerne komplett selber testen, weil so kann ich nur raten

[rzscout]

Hi mipu72,
ich verstehe deine Ambitionen ein Memory-Spiel mithilfe von Javascript zu erstellen. Ich würde dir aber empfehlen dir Grundkenntnisse der Programmierung in Javascript aufzubauen bevor du ein  komplexes Projekt umsetzt. Es führen auch viele Wege nach Rom. Ich hätte den Ansatz ganz anders umgesetzt bei der Erstellung so eines Spieles.

Zum Thema ChatGPT und Javascript: ChatGPT lernt sehr viel und kann helfen den Alltag im Coden zu verbessern, aber es ist nicht fehlerfrei und die Umsetzung ist auch nicht immer die Beste. Ich habe ausführlich ChatGPT mit der Ausgabe von Javascript getestet und erstaunt und ernüchternd zugleich was diese KI kann. Es ist ein tolles Spielzeug aber bei komplexen Aufgabenstellungen sind mir sowohl Syntaxfehler, Denkfehler, als auch Performanceprobleme aufgefallen. Zwar kamen bei kleinen und mittleren erstaunliche Ergebnisse heraus die mir so nicht eingefallen sind, aber auch ChatGPT hat seine Grenzen.

Wie oben geschreiben empfehle ich dir die Grundlagen von JavaScript zu lernen und eigene Lösungen zu entwickeln. Wenn dann da Probleme auftreten, bist du hier im Forum sehr gut Aufgehoben mit deinen Fragen. Vielleicht schaffe ich es ein Beispiel-Memory-Spiel diese Woche zu posten.

Viele Grüße

rzscout