Lange Texte in Variablen speichern sinnvoll?

[TecMec]

Hallo Zusammen,

ich programmiere momentan ein einfaches Spiel mit Html, Java und CSS.
Der Benutzer soll ein paar Antworten als Buttons bekommen und für die Lösunge bekommt er immer Hinweistexte eingeblendet.
Funktioniert auch alles grundsätzlich schon.

Nur sind die Hinweistexte gut und gerne mal 250 Zeichen lang.
Insgesamt sind es ca. 20 solcher einzelnen Hinweistexte.

Jetzt wird das Java-Script halt mit diesen Variablen / Constanten für die Texte recht lang.
Kann man die auch auslagern in eine separate Datei oder lößt man das auf einem ganz anderen weg?

Bin für jede Hilfe dankbar.

[Sempervivum]

Hallo TecMec,
da kann man bestimmt etwas machen aber man müsste deinen Code sehen.

[TecMec]

Guck mal.
Es geht um die arrayHinweis 0-4.

Code:

var hw = 0;
var tierbutton;
var versuche = 3;
var Lebr = 0;

const arrayHinweis =[];
arrayHinweis[0] = "Ich hab nix an, Isch bin langsam, Isch schleime gerne, vieviel bröbrö";
arrayHinweis[1] = "Blibli, Bröbö, BruBru, Brabra";
arrayHinweis[2] = "3 Hinweise, zu Viech, Nummer, ZDrei";
arrayHinweis[3] = "4 Hinweise, zu Viech, Nummer, vier";
arrayHinweis[4] = "5 Hinweise, zu Viech, Nummer, fünf";

const arrayLoesung =["viech1", "viech2", "viech3", "viech4", "viech5"];


function Start(){
    versuche = 3;
    hw = 0;
    document.getElementById("viech1").disabled = false;
    document.getElementById("viech2").disabled = false;
    document.getElementById("viech3").disabled = false;
    document.getElementById("viech4").disabled = false;
    document.getElementById("btHinweis0").style.visibility = "hidden";
    document.getElementById("btHinweis1").style.visibility = "hidden";
    document.getElementById("btHinweis2").style.visibility = "hidden";
    document.getElementById("btHinweis3").style.visibility = "hidden";
    document.getElementById("clbtHinweis").style.visibility = "hidden";
    document.getElementById("idnLebensraum").style.visibility = "hidden";

    Hinweis();
}


function nLebensraum(){
    Lebr++;
    document.getElementById("idnLebensraum").style.visibility = "hidden";
    Start();
}


function Hinweis(){
    //console.log (arrayHinweis);
    document.getElementById("clbtStart").style.visibility = "hidden";
    document.getElementById("clbtHinweis").style.visibility = "visible";

    var aktuellerHinweis = arrayHinweis[Lebr];
    const arrayHinweisAufbereitet = aktuellerHinweis.split(",");
    document.getElementById("btHinweis"+hw).style.visibility = "visible";
    document.getElementById("btHinweis"+hw).innerHTML = (arrayHinweisAufbereitet[hw]);
    if (hw<4) {
        hw++;
    }
    else {
        document.getElementById("btHinweis0").style.visibility = "hidden";
        document.getElementById("btHinweis1").style.visibility = "hidden";
        document.getElementById("btHinweis2").style.visibility = "hidden";
        document.getElementById("btHinweis3").style.visibility = "hidden";
    }
}

function antwort(tierbutton){
    //console.log(versuche);
    if(tierbutton.id==arrayLoesung[Lebr]){
        document.getElementById("idStatustext").innerHTML = "Stimmt! Weier zum nächsten Lebensraum?";
        document.getElementById("idnLebensraum").style.visibility = "visible";
        document.getElementById("clbtHinweis").style.display = "none";
        const LebrLoesung = "Loesung" + [Lebr] + ".jpg";
        const image = document.getElementById("idBild1");
        image.src = LebrLoesung;
    }

    else if(versuche>1){
        versuche = versuche-1;
        document.getElementById("idStatustext").innerHTML = "Das war leider falsch, noch "+ versuche +" Versuche";
         }
         else{
            document.getElementById("idStatustext").innerHTML = "Leider zum dritten Mal falsch! Weiter zum nächsten Lebensraum? Oder Spiel neu Starten?";
            document.getElementById("clbtHinweis").style.visibility = "hidden";
            document.getElementById("clbtStart").style.visibility = "visible";
            document.getElementById("idnLebensraum").style.visibility = "visible";
            document.getElementById("viech1").disabled = true;
            document.getElementById("viech2").disabled = true;
            document.getElementById("viech3").disabled = true;
            document.getElementById("viech4").disabled = true;


         }
}

[Sempervivum]

Guten Abend!
Dass Du die Hinweistexte in einem Array untergebracht hast ist doch schon Mal sehr gut. Selbstverständlich kannst Du das in einer Datei auslagern, wie von dir angedacht.

oder lößt man das auf einem ganz anderen weg?

Ja, man kann es auch anders lösen. Erster Vorschlag von mir: Das was zusammen gehört, auch zusammen anordnen:                

Code:

const data = [
    {tier: "viech1", hinweis: "Ich hab nix an, Isch bin langsam, Isch schleime gerne, vieviel bröbrö "},
    {tier: "viech2", hinweis: "Blibli, Bröbö, BruBru, Brabra"},
    {tier: "viech3", hinweis: "3 Hinweise, zu Viech, Nummer, ZDrei"},
    {tier: "viech4", hinweis: "4 Hinweise, zu Viech, Nummer, vier"},
    {tier: "viech5", hinweis: "5 Hinweise, zu Viech, Nummer, fünf"}
];

Dann kannst Du so auf die Elemente zugreifen:

Code:

let idx = 2;
const dasTier = data[idx].tier;
const derHinweis = data[idx].hinweis;

Der nächste Schritt wäre dann das, was sonst reflexhaft als erste Empfehlung kommt: Die Daten in einer Datenbank auf dem Server ablegen.

Was noch auffällt: Einige Codezeilen wiederholen sich, nur mit anderem Index. Das kannst Du sicher vereinfachen, indem Du Schleifen verwendest. Bei fünf Tieren vielleicht noch nicht so dringend aber am Anfang hast Du geschrieben, dass es um die 20 Elemente oder Tiere sind, da würde sich das schon lohnen.

[TecMec]

Ach. Das ist ja interessant. Werd ich dann so machen. DANKE!

Also es bleibt bei 5 Viecher, von denen zu jedem 4 Hinweise hinterlegt werden müssen (also insgesamt 20 Hinweise)
Pro Hinweis ca. 50 bis 250 Zeichen.
Datenbank ist vielleicht etwas übertrieben, also lass ich die Constanten im Script.
Oder?

[Sempervivum]

Da stimme ich zu, eine Datenbank für diesen Zweck wäre ein wenig überdimensioniert.

Also 4 Hinweise Pro Viech, wenn ich das richtig verstehe, müsstest Du dann ein Array verwenden:

Code:

const data = [
    {tier: "viech1",
     hinweise: [
        "Ich hab nix an, Isch bin langsam, Isch schleime gerne, vieviel bröbrö ",
        "Noch ein Hinweis",
        "Hinweis3",
        "Hinweis4"
    ]},
// usw.