[FRAGE] JavaScript - Anfänge eines Browsergames / Anfänger schlägt zu!

WebofWinter · 01. März 2014

Hallo liebe Community.
Ich bin momentan dabei, JavaScript zu lernen.
Da ich HTML5 und CSS3 mittlerweile sehr gut behersche, gehe ich nun einen Schritt weiter.

Zusammen mit einem Freund haben wir uns jetzt Hobby-mäßig an ein Browsergame gemacht.

Ich übernehme "komplett" den Pat im Front-End und er macht das gesamte Back-End mit PHP.

Wie lernen Sie?
Also ich hab das Buch "Schrödinger lernt HTML5, CSS3 und JavaScript. Den HTML5-Teil konnte ich bereits auswendig bevor ich das Buich überhaupt erworben habe.
Jetzt bin ich seit...weiß nicht ca 30-40 Seiten im JavaScript-Bereich angekommen. Bei der Umsetzung hilft mir das Buch und Google.

Was ist dein Problem?
Kommen wir zum eigentlich Thema dieses "xD" Themas:
Wir basteln uns momentan ein Browsergame. Der HTML-Teil ist bereits fertig. Dabei wurde komplett auf optik verzichten und alles nur so hin und her geschoben, das später an den stellen Grafiken eingesetzt werden könne.
Nun habe ich mit dem JavaScript-Bereich begonnen.
Zum Anfang dachte ich mir, eine Funktion zu bauen, in der Abgefragt wird, z.B.: Vorhanden: 150 Holz(sagen wir: Holz1), für Upgrade Benötigt: 200(sagen wir: holz2) Holz.
Dort habe ich dann eine Abfrage eingebaut. Funktioniert wunderbar. Wenn holz1 >= holz2 kommt in eimen Span-Tag "ok", wenn holz1 < holz2 kommt "nein".
Diese Funktion rufe ich mit einem Button auf via onClick.

Dazu habe ich dann die Funktion gebastelt, das wenn holz1 >= holz2 "onclick" holz1 - holz2 gerechnet wird. So wie es normal üblich ist, wenn man etwas "bauen" oder "verbessern" will.

Nun zu meinem Problem: Das ganze wird wunderbar gerechnet. Ich habe 1600 Holz1 und brauche 150 Holz2 nach "onclick" habe ich 1450 Holz1.
aber wenn ich jetzt erneut auf den Button klicke, ist : 1450 Holz1, 150 Holz2(bzw. hatte ich auch schon holz2*1.5) aber als ausgabe kommt else. "nicht genug holz"...aber warum? Ich bin fest davon überzeugt das 1450>150 ist

.

Ich habe schon alles Versucht. Doch komm ich einfach auf keine Lösung für mein Problem. Vieleicht könnt ihr mir weiter helfen.

Hier der HTML-Code:
...
<li>Holz:1600</li>
...
<td>150 Holz</td>
...
<input type="button" id="button" value="Verbessern" onclick="HolzTyp();HolzDing();"/>
...

...
Achtet nicht auf die Namens-Vergabe der Variablen^^ bzw. ID

Hier das JavaScript:

HTML:

function HolzTyp(){
var holz1 = document.getElementById("holz1").innerHTML;
var holz2 = document.getElementById("holz2").innerHTML;
var ergebnis;
if (holz1 >= holz2){
    ergebnis = "ok";
    }
else{
    ergebnis = "Du hast leider nicht genug Holz!";
    }
document.getElementById("ausgabe").innerHTML = ergebnis;
}

function HolzDing(){
    var holz1 = document.getElementById("holz1").innerHTML;
    var holz2 = document.getElementById("holz2").innerHTML;
    var holz;
    if(holz1 >= holz2){
    holz = holz1 - holz2;
    }
    else{
        holz = holz1;
    }
    document.getElementById("holz1").innerHTML = holz;
}

...
Alles ausgelagert in eine externe Datei. Aber das macht ja nichts.

Ich freue mich schon auf eure Antworten und hoffe das ihr mir weiterhelfen könnt.

MfG

rico2009 · 01. März 2014

Hi,

So ganz verstehe deinen Ablauf im Code zwar nicht, aber ich vermute mal, dass nach dem ersten Durchlauf im span "Holz1" nicht mehr das drin steht was du vermutest. Hast du da mal nachgeschaut?

WebofWinter · 01. März 2014

Hallo,
also es klappt das beim "onclick" der wert holz1 von 1600 auf 1450 gesetzt wird. nur gehts jz nicht weiter.
Jetzt verstehe ich nicht was du meinst, das nicht mehr das drin steht was ich vermute?! wie meinst du das?

rico2009 · 01. März 2014

Beim ersten Durchlauf wird in HolzDing() der neue Wert in holz1 geschrieben (document.getElementById("holz1").innerHTML = holz; ). Steht dann dort eventuell ein fehlerhafter Wert drin, also hier "<li>Holz:1600</li>"?

j-l-n · 01. März 2014

Randbemerkung: ich täte ja das mit dem benötigten Holz serverseitig machen. Sonst kann ich nämlich ganz leicht beschummeln

rico2009 · 01. März 2014

Julian schrieb:
Randbemerkung: ich täte ja das mit dem benötigten Holz serverseitig machen. Sonst kann ich nämlich ganz leicht beschummeln

Klar, ich würde die einzelnen Werte auch nicht in einem span speichern. Aber er hat geschrieben, dass er Anfänger sei und ich vermute das dieses "Game" ehr als Übung dient. Für den Produktiveinsatz ist das vermutlich nicht geeignet...

WebofWinter · 03. März 2014

Hallo,
Danke für das Feedback.

Also bei <li>Holz:1600</li> steht "laut Browser" nach Funktionsaufruf: 1450 Holz drin. also hat er gerechnet. Nur das erneute rechnen geht nicht-.-

Und ja ich weiß das es Serverseitig besser wäre. Aber so kann ich mal JS lernen. Evtl wird hinterher in die via PHP der Wert eingetragen. Somit ist das mit dem Schummeln wieder vorbei

j-l-n · 03. März 2014

WebofWinter schrieb:
Also bei <li>Holz:1600</li> steht "laut Browser" nach Funktionsaufruf: 1450 Holz drin. also hat er gerechnet.

Hier ist es jetzt wichtig: steht "1450" drin oder "1450 Holz"? Denn dann kann es gar nicht funktionieren, weil "Holz" ja keine Zahl ist und damit die Variable Schrott.

WebofWinter · 03. März 2014

Natürlich so : 1450 Holz.
Der ich füge dem Inhalt des s ja kein neues Wor hinzu^^ ich änder ja nur den wert in dem

kkapsner · 04. März 2014

In dem steht trotzdem in String drin, da HTML nur diesen Datentyp kennt. Das wird in JS auch so übernommen und in deinen Variablen sind String gespeichert. Du vergleichst also nicht 1450 mit 150, sondern "1450" mit 150. Wenn einer der beiden "Vergleichspartnern" ein String ist, wird der andere automatisch zu einem String umgewandelt und dann wird als String verglichen... also lexikalisch: es werden also jeweils die ersten Zeichen mit einander verglichen und dann die zweiten usw. da "4" lexikalisch kleiner ist als "5" ist "1450" kleiner als "150".
Um das Problem zu umgehen musst du alles, was du aus dem HTML ausliest mit parseInt() (ACHTUNG: die Basis nicht vergessen) oder parseFloat() in eine Zahl umgewandelt werden:

Code:

var holz1 = parseInt(document.getElementById("holz1").innerHTML, 10) || 0;
var holz2 = parseInt(document.getElementById("holz2").innerHTML, 10) || 0;

WebofWinter · 04. März 2014

Juhu und genau das wars was ich gesucht habe =)
Herzlichen dank =) jz kann ich entlich weiter machen =)
Freue mich schon drauf, wieder ein Problem hier rein zu schreiben =)

MfG

kkapsner · 04. März 2014

Bitte - gern geschehen.

WebofWinter · 05. März 2014

Da kommt mir doch direkt die nächste frage in den Sinn.

Da Webentwickler angeblich faul sind (ich auch xD) gibt es bestimmt eine möglich keit...um das ganze hier in kurzschreibweise zu machen oder?
weil über ein onClick direkt 5 funktionen aufrufen kann nicht so toll sein. und das ist mal gerade die berechnung fürs holz und das jeweils einige attribute erhöht werden.

HTML:

function HolzTyp(){
    var holz1 = parseInt(document.getElementById("holz1").innerHTML);
    var holz2 = parseInt(document.getElementById("holz2").innerHTML);
var ergebnis;
if (holz1 >= holz2){
    ergebnis = "ok";
    }
else{
    ergebnis = "Du hast leider nicht genug Holz!";
    }
document.getElementById("ausgabe").innerHTML = ergebnis;
}

function HolzDing(){
    var holz1 = parseInt(document.getElementById("holz1").innerHTML);
    var holz2 = parseInt(document.getElementById("holz2").innerHTML);
    var holz;
    if(holz1 >= holz2){
    holz = holz1 - holz2;
    }
    else{
        holz = holz1;
    }
    document.getElementById("holz1").innerHTML = holz;
}
function HolzLevel(){
    var holz1 = parseInt(document.getElementById("holz1").innerHTML);
    var holz2 = parseInt(document.getElementById("holz2").innerHTML);
    var level = parseInt(document.getElementById("level").innerHTML);
    var level1;
    if(holz1 >= holz2){
        level1 = level +1;
    }
    else{
    level1 = level;
    }
    document.getElementById("level").innerHTML = level1;
}
function HolzPro(){
    var holz1 = parseInt(document.getElementById("holz1").innerHTML);
    var holz2 = parseInt(document.getElementById("holz2").innerHTML);
    var holzstd = parseInt(document.getElementById("holzstd").innerHTML);
    var holzstd1;
    if(holz1 >= holz2){
        holzstd1 = holzstd * 2;
    }
    else{
        holzstd1 = holzstd;
    }
    document.getElementById("holzstd").innerHTML = holzstd1;
}
function HolzNext(){
    var holz1 = parseInt(document.getElementById("holz1").innerHTML);
    var holz2 = parseInt(document.getElementById("holz2").innerHTML);
    var holz21;
    if(holz1 >= holz2){
        holz21 = holz2 * 3;
    }
    else{
        holz21 = holz2;
    }
    document.getElementById("holz2").innerHTML = holz21;
}

und nun das ganze in eine funktion wenns geht^^ hab schon experimentiert komm aber zu keiner lösung. oder einfach alles in eine funktion nur dann immer getrennt von einander schreiben?

mikdoe · 05. März 2014

Bitte füge um deinen Code herum die HTML Tags ein! Ich hatte dich beim ersten Post schon darauf hingewiesen.
Danke

WebofWinter · 05. März 2014

@mikdeo : hattest du zwar nicht, aber hab ich trotzdem gemacht =)
Sorry nochmal

j-l-n · 05. März 2014

WebofWinter schrieb:
@mikdeo : hattest du zwar nicht
Sorry nochmal

"Geändert von mikdoe (02-03-2014 um 08:57 Uhr) Grund: Code Tags eingefügt, bitte zukünftig selbst machen!"

mikdoe · 05. März 2014

WebofWinter schrieb:
@mikdeo : hattest du zwar nicht

Musst du gucken rischtisch unte.

Danke Julian.

WebofWinter · 05. März 2014

Da ist mir doch glatt...naja egal

habs net gesehn...sorry

nächste ma sofort =)

kkapsner · 05. März 2014

Du hast da einen klassischen Fall, dass deine Funktionen Parameter aufnehmen sollten (z.B. ressourceType die dann hier "holz" wäre und aus der du dir dann die IDs zusammenbaust).

Aber ich glaube, dass ihr mit der Lösung, dass die Werte im HTML gespeichert werden, nicht glücklich werden, wenn das System etwas größer wird.

[FRAGE] JavaScript - Anfänge eines Browsergames / Anfänger schlägt zu!

WebofWinter

New member

rico2009

Guest

WebofWinter

New member

rico2009

Guest

j-l-n

Guest

rico2009

Guest

WebofWinter

New member

j-l-n

Guest

WebofWinter

New member

kkapsner

Super Moderator

WebofWinter

New member

kkapsner

Super Moderator

WebofWinter

New member

mikdoe

Moderator

WebofWinter

New member

j-l-n

Guest

mikdoe

Moderator

WebofWinter

New member

kkapsner

Super Moderator