Wo liegt der Fehler, dass JavaScript neu hinzugefügte Bilder nicht berücksichtigt?
Hallo,
ich lerne gerade JavaScript.
Um es zu üben, habe ich ein kleines Memoryspiel programmiert. Dabei sollen aus mehreren Bilder per Zufall zehn Bildpaare ausgewählt und auf der Seite angezeigt werden. Als ich heute weiter Bilder eingefügt habe, fiel mir auf, dass die neu hinzugefügten Bilder nicht vom Zufallsgenerator berücksichtigt werden. Leider finde ich den Fehler nicht.
Hier ist mein Code:
const bilder = [
'Memory/hund1.png',
'Memory/katze1.png',
'Memory/blume1.png',
'Memory/blitz1.png',
'Memory/hexe.png',
'Memory/ufo.png',
'Memory/frau.png',
'Memory/geist.png',
'Memory/papagei.png',
'Memory/schmetterling.png',
'Memory/taschenuhr.png',
'Memory/kompass.png',
'Memory/hasen.png',
'Memory/springbrunnen.png',
'Memory/ballon.png',
'Memory/daenerys.png',
'Memory/dino.png',
'Memory/erde.png',
'Memory/frosch.png',
'Memory/laub.png',
'Memory/orange.png',
'Memory/paar.png',
'Memory/schloss.png',
'Memory/teddy.png',
'Memory/tiger.png',
'Memory/tropen.png',
'Memory/wasserfall.png',
'Memory/biene.png',
'Memory/mädchen.png',
'Memory/villa.png',
'Memory/insel.png',
'Memory/insel2.png',
'Memory/wettersymbol.png',
'Memory/altesauto.png',
'Memory/ente.png',
'Memory/kolibri.png',
'Memory/tinkerbell.png',
'Memory/fraukatze.png',
'Memory/vögellaub.png',
'Memory/sphinx.png',
'Memory/skulptur.png',
'Memory/schach.png',
'Memory/raben.png',
'Memory/hochhaus.png',
'Memory/zitronen.png',
'Memory/lstand.png',
'Memory/limonade.png',
'Memory/trinken.png',
'Memory/hexe2.png',
'Memory/leuchtturm.png',
'Memory/leuchtturm2.png',
'Memory/dänemark.png',
'Memory/dänemark2.png',
'Memory/schienen.png',
'Memory/kuba.png',
'Memory/havanna.png',
'Memory/tinkerbell.png',
'Memory/fraukatze.png',
'Memory/vögellaub.png',
'Memory/sphinx.png',
'Memory/skulptur.png',
'Memory/schach.png',
'Memory/raben.png',
'Memory/hochhaus.png',
'Memory/zitronen.png',
'Memory/lstand.png',
'Memory/limonade.png',
'Memory/trinken.png',
'Memory/hexe2.png',
'Memory/leuchtturm.png',
'Memory/leuchtturm2.png',
'Memory/dänemark.png',
'Memory/dänemark2.png',
'Memory/schienen.png',
'Memory/kuba.png',
'Memory/havanna.png'
];
let karten = [];
let aufgedeckteKarten = 0;
let ersteKarte = null;
let zweiteKarte = null;
let übereinstimmendeKarten = 0;
let spielfeldGesperrt = false;
function kartenMischen() {
const ausgewählteBilder = bilder.slice(0);
karten = ausgewählteBilder.sort(() => Math.random() - 0.5);
karten = karten.slice(0, 10).concat(karten.slice(0, 10));
}
function karteUmdrehen(karte) {
if (spielfeldGesperrt) return;
if (karte === ersteKarte) return;
karte.style.backgroundImage = `url(${karte.dataset.bild})`;
if (!ersteKarte) {
ersteKarte = karte;
}
else {
zweiteKarte = karte;
übereinstimmungPrüfen();
}
}
function übereinstimmungPrüfen() {
spielfeldGesperrt = true;
if (ersteKarte.dataset.bild === zweiteKarte.dataset.bild) {
übereinstimmendeKarten += 2;
if (übereinstimmendeKarten === karten.length) {
alert('Herzlichen Glückwunsch! Du hast gewonnen!');
}
kartenDeaktivieren();
}
else {
setTimeout(() => {
ersteKarte.style.backgroundImage = 'none';
zweiteKarte.style.backgroundImage = 'none';
kartenZurücksetzen();
}, 1000);
}
}
function kartenDeaktivieren() {
ersteKarte.removeEventListener('click', () => karteUmdrehen(ersteKarte));
zweiteKarte.removeEventListener('click', () => karteUmdrehen(zweiteKarte));
kartenZurücksetzen();
}
function kartenZurücksetzen() {
[ersteKarte, zweiteKarte] = [null, null];
spielfeldGesperrt = false;
}
const spielfeld = document.getElementById('spielfeld');
kartenMischen();
for (let i = 0; i < karten.length; i++) {
const karte = document.createElement('div');
karte.classList.add('karte');
karte.dataset.bild = karten[i];
karte.style.backgroundImage = 'none';
karte.addEventListener('click', () => karteUmdrehen(karte));
spielfeld.appendChild(karte);
}
Es wäre schön wenn mir jemand sagt, wo mein Fehler liegt.
Danke
