Ein Browser-Game entwickeln, nur wie eigentlich?
Schritt für Schritt Anleitung
Wie baue ich ein kleines Browser-Game auf?
Ein Browser-Game (auch Browser-Spiel genannt) ist ein Computerspiel, das direkt in einem Webbrowser gespielt wird, ohne dass zusätzliche Software oder Spiele-Clients heruntergeladen werden müssen. Es basiert in der Regel auf Webtechnologien wie HTMl, CSS, java-script.
Merkmale von Browser-Games:Plattformunabhängigkeit
Da sie in einem Webbrowser laufen, können Browser-Games auf verschiedenen Geräten wie PCs, Tablets oder Smartphones gespielt werden, sofern ein kompatibler Browser vorhanden ist.
Das Coole: Kein Download nötig
Im Gegensatz zu traditionellen Videospielen müssen keine großen Dateien heruntergeladen oder installiert werden. Die Spiele laufen direkt über den Browser.
Einfacher Einstieg:
Diese Spiele sind oft leicht zugänglich, mit einfachen Spielmechaniken, und eignen sich für kurze Spielsessions. Das coole, lernst du die Techniken, kannst du eigene kleine Spiele für dich bauen und entwickeln und es macht natürlich sehr viel Spaß. Schulhof-Programmierung hilft dir zu einem coolen Einstieg und zeigt dir genau, auf was du achten musst und welche Dinge du lernen musst, um hier einzusteigen.
Wo schreibst du den Code rein?
Nutze Visual-Studio-Code, das ist ein kostenloser Quelltext-Editor
Welche Techniken kannst du nutzen?
Wenn du noch nie im Leben eine Zeile Code geschrieben hast, geschweige denn, ein kleines Spiel entwickelt hast, dann kannst du ein kleines BrowserSpiel entwickeln. Du benötigst hier, HTML, CSS, Java-Script.
Ich kapier nicht, wozu man diese Techniken benötigt?
Ein Browsergame legst du in wenigen Schritten an.
Schritt 1 : Lege einen Ordner an auf deinem Laptop. Klicke mit rechter Maustaste auf deinen Bildschirm , ein Kontextmenü öffnet sich dort wählst du „neuer Ordner“ und gibst dem Ordner einen Namen, z. B. game. Dann gehst du in Visual-Studio-Code, öffnest es und gehst auf File, links oben, dann auf „open folder“ markierst den Ordner , wählst den Ordner aus mit dem Namen „game“ und klickst auf „Ordner auswählen“.
Bildausschnitt – Visual-Studio-Code
Du benötigst 3 Techniken: HTML, CSS und Java-Script.
Punkt 1 Wozu benötige ich HTML genau in dem Browser-Spiel?
Klicke auf die 3 Punkte links oben und lege eine index.html an.
Bitte beachte zunächst, dass HTML keine Programmiersprache ist, sondern eine sogenannte Markup-Sprache. Das heißt, eine sogenannte Auszeichnungssprache. HTML ist in dem Spiel wichtig für die Struktur deines Spiels.
So sieht eine einfache HTML-Struktur aus – Ein Grundgerüst
Trick: Hier verrate ich dir noch einen kleinen Trick, damit du das ganze nicht abschreiben musst. In Visual-Studio-Code kannst du in Sekundenschnelle so etwas erzeugen indem du einfach ein Ausrufezeichen eingibst in Zeile 1 und dann die Enter-Taste drückst auf deiner Tastatur und schon siehst du das Gerüst dazu von Zeile 1 – Zeile 11
Punkt 2 Wozu benötige ich CSS genau?
Klicke auf die 3 Punkte links oben und lege eine style.css an.
CSS ist die Abkürzung für Cascading-Stylesheet. Was zum Teufel bedeutet das genau? -:) CSS ist eine Stylesheet-Sprache.
Mit CSS bestimmst du das Layout deines Spiels. Du willst ja dass deine Spielfigur cool aussieht, das heißt du bestimmst, den Hintergrund deines Spiels damit und du kannst bestimmen, wie genau soll deine Spielfigur aussehen. Alles was mit Farben, Layout etc, zu tun hat in deinem Spiel, dazu benötigst du CSS-Code.
Punkt 3 Wozu benötige ich java-script genau?
Klicke auf die 3 Punkte links oben und lege eine script.js an.
Einfach gesagt, wenn sich irgend etwas bewegen soll in deinem Spiel, dann benötigst du java-script. Java-Script ist eine extrem wichtige Script-Sprache. Du kannst damit Bewegungen programmieren, Geschwindigkeiten anpassen, Dinge steuern etc.
So sollte deine Struktur angelegt sein.
Punkt 4 b
Java-Script kannst du verschieden ausführen in Visual-Studio-Code, ich zeige dir 2 Methoden.
Möglichkeit Nr. 1 – eher nicht so empfehlenswert.
Das Problem an dieser Möglichkeit, du kannst java-Script im Zwischenraum, zwischen dem geöffneten und dem geschlossenen Script-Tag ausführen, aber das Problem ist, dass wenn du extrem viel Code hast, was ja meist der Fall ist in Spielen, dass es dann schnell unübersichtlich ist.
Der besserer Weg ist, man lagert das java-Script aus.
Punkt 4 c – Oh je, klingt alles kompliziert. Gibt es ein Video dazu ?
Hilfe, ich kapier nix…
Komplett-Anleitung ist fertig.
Check das 10 Minuten-Video und du startest cool durch.
Video ( Video Komplett-Anleitung Struktur und Aufbau eines Browser-Games in Visual-Studio-Code ( 10 min)
Punkt 5 Wo kannst du HTML, CSS und Java-Script ausführen?
Downloade dir Visual-Studio-Code mit dem Live-Server. Den Live-Server benötigst du, damit du immer alles cool ansehen kannst. Der ist nicht drauf, wenn du Visual-Studio Code herunterlädtst.
Wie funktioniert Visual-Studio-Code? Alles über VS-Code mehr
Wo kann ich HTML, CSS, Java-Script am besten kostenlos lernen?
Hier gibt es mehrere kostenlose Möglichkeiten:
Nutze w3school
oder schau dir folgende Videos aus dem Netz an.
HTML lernen Video
CSS lernen Video
java-script Video
Technische Anmerkung:
Wenn du mit CSS Schwierigkeiten hast, kannst du dir auch den CSS-Generator anschauen. Ein Video dazu findest du hier Css-Generator