Tutorial - Browsergames Teil 2

Hallo ihr Lieben,

heute kommen wir zu Teil 2 der Browsergame-Reihe. Nach dem wir in Teil 1 uns mit dem Basisgerüst beschäftigt haben, werden wir uns heute mit einfachen Variablen und Events beschäftigen. Damit es etwas einfacher wird, habe ich mir NW.js heruntergeladen, um so einfach die Seite / das Spiel zu testen und es später auch als Windows-APP anbieten zu können.

Wer wissen möchte, wie man solche Browsergames entsprechend mit NW.js umwandelt und wo man diese dann verkaufen kann, dazu kann ich dann gerne auch mal ein Tutorial machen. Geplant wäre das aber erst später in der Tutorial-Reihe.

Kommen wir jetzt aber mal zu dem wissenswerten Teil, wie man Buttons basteln kann, wie man Variablen nutzt und ein wenig dazu, was es für Variablen in JS gibt.

Wenn wir uns an unserem Grundgerüst orientieren, dann müssen wir dort noch ein wenig JS einbauen. Dazu kann man z.B. im body-Bereich einen Bereich als JavaScript abgrenzen, in dem man den script-Tag verwendet. Dieser hat wie der html-, head-, title- oder body-Tag ebenfalls ein Anfang und Ende.

<script>

</script>

Früher hat man noch angegeben was für ein Typ von Script in dem Bereich liegt, heute sieht man das eher selten. Wenn man es angeben möchte sollte man das Attribute 'type' mit dem Wert 'text/javascript' setzten.

<script type="text/javascript">

</script>

Jetzt haben wir quasi unsere Grundlage, dass wir JavaScript in die Seite integrieren können. Jetzt müssen wir natürlich auch noch wissen was JavaScript ist bzw. macht. Dazu könnte ich jetzt hier vermutlich eine ganze Weile ganz viel erzählen. Aber um es kurz zu fassen, dass so ziemlich jeder es verstehen kann.

Mit JavaScript haben wir die Möglichkeit, die Website/Games die wir bauen zu manipulieren und auch Berechnungen anzustellen. Wir können über gewisse Platzhalter (Variablen) Interaktivität in die Seite / das Spiel integrieren.

Wenn wir einen einfachen Platzhalter nehmen und dem zu Beginn, den Wert 0 geben, können wir z.B. sagen, dass er bei jedem Klick auf einen Knopf um Eins erhöht wird. Einfache Platzhalter / Variablen in JavaScript sollten zu Beginn des jeweiligen Scopes (Achtung! Das wird noch genauer erklärt) mit dem Wort 'var' definiert werden.
Zu Beginn aus dem Grund, damit die Variable für den weiteren Verlauf bekannt ist.
Bei Funktionen (dazu kommen wir später) ist das nicht so wichtig, wo sie innerhalb einen Scopes definiert sind. Variablen sind da aber genauer zu beachten.

Ich werde später noch genauer darauf eingehen, was ein Scope genau ist, für jetzt sollte erstmal gesagt sein, dass es sich quasi um eine Abgrenzung / einen Bereich handelt. Jeder Bereich für sich, kann eigene Variablen beinhalten, auch wenn diese schon außerhalb oder in einem anderen Scope definiert wurden, aber sich auch welche teilen. Daher ist das Ganz etwas umfangreicher zu erklären, da muss ich am Besten auch noch ein paar Erklärungsgrafiken zu bauen.

Ich zeige euch jetzt erstmal, wie wir diesen Platzhalter jetzt in den Haupt-Scope ('window') der Seite integrieren und dann kommen wir zum Knopf.

<script type="text/javascript">
    var klickzaehler = 0;
</script>

Nun haben wir einen Platzhalter genannt 'klickzaehler' der mit dem Wert 0 vordefiniert wurde.
Diesen Platzhalter können wir jetzt überall im JavaScript bereich ansprechen, da er aktuell im Hauptbereich liegt.

HINWEIS: Ich verwende bewusst sehr oft unterschiedliche Namen für gleiche Dinge, damit ihr euch von vorne herein an eine gewisse Dynamic und Flexibilität gewöhnt. In der Programmierung sind viel Variablen sehr wechselhaft und von Sprache zu Sprache gibt es Unterschiede. Unterm Strich liegen allen Sprachen bzw. der Programmierung an sich die gleichen Regeln zu Grunde. Daher finde ich persönlich es wichtig, euch lieber die Programmierung als die einzelnen Sprachen zu erklären. Wer versteht zu programmieren, der kann auch die einzelnen Programmiersprachen und deren Eigenheiten sehr schnell erlernen.

Um jetzt weiter zu kommen, brauchen wir aber noch eine Ausgabe des Zählstandes und den Knopf.

Den Code schreiben wir eben falls innerhalb des body-Bereiches aber außerhalb des script-Bereiches.

Zur Ausgabe des Zählstandes, nehmen wir einen einfachen div-Bereich und den Knopf erzeugen wir über den button-Tag.
Div-Bereich grenzen in der Regel eine Bereich einer Website ab, der über die komplette Breite geht, und der button-Tag erzeugt eben einen schon vorgestylten Standard-Knopf.

Die Tags belegen wir dann noch mit einem Id-Attribute, damit wir sie aus JavaScript heraus ansprechen können, bzw. mit einem onclick-Attribute, damit wir auf ein Event (Ereignis) reagieren können.

Danach könnte das Ganze dann wie folgt aussehen.

<div id="anzeige"></div>
<button id="btn" onclick="zaehle()">Drück mich</button>
<script type="text/javascript">
    var klickzaehler = 0;
</script>

Jetzt würde aber in der Tat noch nichts passieren, ausser vielleicht einer Fehlermeldung, da wir zwar das Event abfangen, aber es nicht weitergeleitet werden kann, da wir noch keine Funktion (Aufgabe) dafür definiert haben.

Aktuell würde die Website versuchen, die Funktion "zaehle" bei einem Klick auf den Button suchen, aber nicht finden. Daher sollten wir jetzt erst einmal hingehen und die Funktion definieren.

Eine Funktion ist wie ein Arbeitsauftrag, den man mit Werten füttern kann und am Ende auch eine Wert zurück geben kann, neben den anderen Dingen die wir definieren. Eine Funktion kann in JavaScript auf verschiedene Arten definiert werden.

function AUFGABENNAME() {}

Würde genauso gut gehen wie z.B.

var AUFGABENNAME = function () {}

Wir werden erst einmal die erste Variante nehmen und beschäftigen uns später mit den anderen.
Da wir keine Werte übergeben müssen, können wir die () leer lassen. Sonst könnte man hier entsprechende Parameter (Werte) angeben, die übergeben werden können oder eben nicht.

Hinweis: Bei JavaScript ist man an dieser Stelle sehr flexibel im Gegensatz zu anderen Sprachen, kann aber auch nicht so gut Parameter vordefinieren wir bei anderen Sprachen. Das ist aber etwas sehr spezifisches, wo wir später genauer drauf eingehen sollten. Jetzt würde es erstmal dne Rahmen sprengen.

Wir erweitern unseren bisherigen Code also auf folgendes:

<div id="anzeige"></div>
<button id="btn" onclick="zaehle()">Drück mich</button>
<script type="text/javascript">
    var klickzaehler = 0;
    function zaehle() {

    }
</script>

Jetzt würde kein Fehler mehr ausgegeben werden, aber es würde auch rein gar nichts passieren.
Das sollten wir dann jetzt erledigen, in dem wir den Zählstand erhöhen und in unserem div ausgeben.

Zum Hochzählen um den Wert 1 gibt es verschiedene Möglichkeiten, wir werden es jetzt aber erstmal ganz klassisch wie in der Mathematik machen und die Variable als solche neu setzen, in dem wir die alte Variable + 1 als Wert angeben.

<div id="anzeige"></div>
<button id="btn" onclick="zaehle()">Drück mich</button>
<script type="text/javascript">
    var klickzaehler = 0;
    function zaehle() {
        klickzaehler = klickzaehler + 1;
        document.getElementById('anzeige').innerHTML = klickzaehler;
    }
</script>

Wie ihr seht, gibt es jetzt 2 neue Zeilen. Einmal das eben besprochene Hochzählen und dann eine weiter für die Ausgabe.
Hier gehen wir einfach hin und holen und von unserem HTML-Document, das Element mit der ID 'anzeige', dass wir eben ja schon definiert hatten und packen in den innenbereich ('innerHTML'; quasi zwischen den Tags) den Wert von klickzaehler. (Wie bei x in der Mathematik)

Was wir jetzt noch machen könnten, damit von Anfang an, auch die Zahl angezeigt wird, wäre die zuletzt eingefügte Zeile zum Anzeigen noch mal zu kopieren und außerhalb der Funktion aufzuschreiben. Das würde bewirken, dass diese Zeile direkt einmal ausgeführt wird, da der Hauptscope schon geladen würde, während der Funktionsscope, erst beim Aufruf der Funktion ausgeführt wird. Sprich dann, wenn man auf den Button klickt.

Am Ende hätten wir dann folgendes:

<div id="anzeige"></div>
<button id="btn" onclick="zaehle()">Drück mich</button>
<script type="text/javascript">
    var klickzaehler = 0;
    function zaehle() {
        klickzaehler = klickzaehler + 1;
        document.getElementById('anzeige').innerHTML = klickzaehler;
    }
    document.getElementById('anzeige').innerHTML = klickzaehler;
</script>

Wenn alles geklappt hat, sollte die Seite ungefähr so aussehen und bei einem Klick, auf den Button sollte die Zahl hochgehen.

Falls nicht, bitte mit dem Code bei mir melden.

Wir haben dann heute schon mal folgendes Angesprochen:
Variablen, Scopes, Funktionen, Events ...

oder anders ... Platzhalter, Bereiche, Aufgaben und Ereignisse die passieren

Wie hat es euch bisher gefallen, was war gut, was war nicht so gut?

===================================================
Unsere selbst produzierten Malbücher:
MPIOs Malbuch
Tierische Weihnachten

Hilf mit weitere tolle Bücher zu schaffen:
Patreon

===================================================
Wenn dir gefällt was du hier auf Steemit von mir siehst oder liest, schau doch ruhig auch mal bei den anderen Netzwerken rein. Ich bin für jede Unterstützung dankbar.

Egal ob es ein Upvote oder ein Follow ist, jede kleine Geste hilft!

Twitter
Facebook
Twitch
Instagram
RedBubble-Shop

Vielen lieben Dank, dass du mein Posting, bis zum Ende durchgelesen hast!