28.12.2022, 13:37
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.
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()
