JavaScript Puzzle Spiel?

Ich hab da ein Problem mit meinem Kleinen Puzzle spiel,

Es hat alles funktioniert, jedoch hab ich eine Sache nicht bedacht unzwar das die Karten immer auf einer Stelle sind.
Wie könnte ich das Umsetzen ?

Also Immer nur 2er Paare als Elemente Kreieren die aber auch nicht immer nebeneinander sind

Hier wäre ein dummer Ansatz von mir, vielleicht könnte man darauf aufbauen.

let kiwis = ["🥝","🥝"];
let cocos = ["🥥","🥥"];
let strawberrys = ['🍓','🍓'];
let cherry = ["🍒","🍒"];

arr = [kiwis,cocos,strawberrys,cherry]

arr.forEach(element => {
    element.forEach(element => {
        let Puzzelteil = document.createElement("td")
        document.body.appendChild(Puzzelteil)
        Puzzelteil.innerHTML = element
    });
});

Den Rest / Überprüfen ob man gewonnen hat könnte ich dann selber machen wenn sie richtig durchgemischt sind.

Answer 1

[Babelfish]

Also so ganz verstehe ich nicht was du da machen willst. Schon gar nicht, was du da mit innerHTML veranstaltest.

Wenn es dir aber nur um ein Array mit zufällig sortierten Früchten geht, kannst du das so machen:

let fruits = ["🥝", "🥥", "🍓", "🍒"]


let elements = fruits
	.map(fruit => [fruit, fruit])
	.flat()
	.sort((a, b) => 0.5 - Math.random())

Daraus kannst du dir dann auch TDs basteln:

elements.forEach((fruit) => {
	let piece = document.createElement("td")
	piece.textContent = fruit
	
	// …
})

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Comments

[qwertzujn]

innerHTML 

Das benutze ich eigentlich meistens statt innerText aus Gewöhnung.

Ich lasse das in Zukunft sein wenn es nur um Text geht.

	.map(fruit => [fruit, fruit])
	.flat()
	.sort((a, b) => 0.5 - Math.random())

Danke es klappt alles wie es soll, das war auch mein Ziel, halt das array shuffeln damit ich den Rest weiter alleine machen kann

aber habe es auch nicht zu 100% verstanden.

Sieht schon Komplexer aus.

Also mit dem Map hast du dass Array mit den Frucht Emojis verdoppelt ?

und mit dem Sort hast du irgendwie die Reihenfolge zufällig bestimmt ?

Wenn die Zufällige Zahl unter 0 ist wird das array von hinten sortiert

und wenn es über 0 dann von vorne sortiertund das bei jedem element im array ?

Aber was macht dann flat ?

[Babelfish]

@qwertzujn

Mit map werden die Elemente verdoppelt. Da map nur ein Element zurückgeben kann, gebe ich dort ein Array mit zwei gleichen Werten zurück. Daraus wird dann ein Array mit Arrays, ähnlich wie du es vorher manuell gemacht hast:

[ ["🥝", "🥝"], ["🥥", "🥥"], … ]

Mit flat wird dieses Array dann wieder in ein einziges Array umgewandelt:

[ "🥝", "🥝", "🥥", "🥥", … ]

Am Ende wird mit sort die Reihenfolge zufällig sortiert, da Math.random() einen zufälligen Wert zwischen 0 und 1 erzeugt und 0.5 minus dieses Wert zufällig true oder false erzeugt.