spiel entwickeln – browser – game mit html – css- java-script und chat-gpt
Cyberspace 6
Spiele programmieren
Wie programmiert man eigentlich ein kleines Browser-Game? Welche Techniken brauche ich?
Ein kleines Browser Spiel programmieren – Nur wie eigentlich und wo mache ich den Code rein?
Ein kleines Spiel entwickeln ( mit Hilfe von Chat-GPT)
Bitte beachte, dass es nicht Ziel des Videos ist, ein lauffähiges und vollständiges Spiel zu erzeugen, sondern, du sollst wissen, wie man ein Spiel aufbaut, wo du den Code eintragen musst und wie du ein Spiel im Browser dann auch anschauen kannst.
Wie baue ich den Code eines kleinen Browser-Games auf?
Mit Chat – GPT ein kleines Spiel Coden. Wie mache ich das? Wie baue ich den Code auf? Was brauche ich? Wie bewege ich mich im Code? Was muss ich beim Code-Aufbau beachten?
Das kleine Spiel „hüpfende Pfannkuchen“ – Angriff der grünen Monster
Teil 1 - hüpfende Pfannkuchen 05.11.2023
Das kleine Spiel ist ein einfaches Browser-Spiel. Ziel ist es nicht, das perfekte Spiel zu coden, sondern dir zu zeigen, wie man ein Browser-Projekt an den Start bringt, welche Techniken du aufbauen musst und was du dazu brauchst, mit java-script ein Spiel zu bauen. Das Spiel wird, wenn Zeit ist, immer mal wieder weiterentwickelt. Das Spiel lässt sich über die Pfeiltasten auf deiner Tastatur steuern. Mit dem hüpfenden Pfannkuchen ( Pfeiltaste nach oben), kannst du bis in den Himmel springen und Sterne sammeln. Die Sterne sind die Pfannkuchen.
Das Problem: Kleine grüne Monster kommen angerast und du musst diesen ausweichen.
Das klingt zunächst einfach, aber beim Hochspringen musst du darauf achten, dass du den kleinen grünen gefräßigen Monster ausweichst und diese nicht berührst. . Das Spiel befindet sich momentan noch ganz am Anfang, aber es macht schon Spaß. Weitere Features und Funktionen werden natürlich noch eingebaut. Du kannst hier alle Entwicklungen verfolgen, des kleinen Spiels.
Alle Videos und Entwicklungen
Hier findest du immer die neueste Version und das zugehörige Video vom hüpfenden- Pfannkuchen- Spiel
Version 1.0 : 05.11.2023
Hüpfende Pfannkuchen Teil 1 Allgemeine Einführung Video ( 30 min)
Version 2.0 : 13.11.2023
Huepfende Pfannkuchen Teil 2 Download und Einstellung von Geschwindigkeit der grünen Monster Video
In dieser Version 3 zeige ich dir, wie du in dem Spiel coole grafische Hintergründe einbauen kannst und selbst erstellen kannst und in Sekundenschnelle aufrufen kannst. Video ( ca. 20 Min) Egal ob du in einer wilden Graffity-Landschaft, oder eine Katze als coolen Hintergrund wählst. Das Spiel macht auf jeden Fall mehr Spaß, wenn du eben auch eine Umgebung hast. Du kannst die Umgebung beliebig mit anderen Bildern im Code verändern.
Hüpfende Pfannkuchen- Version vom 14.11.2023 ( Mit Code-Möglichkeit – Einstellung verschiedener Hintergründe im Spiel)
Github Link ( free download / for free Version 3.0 – 14.11.2023
Hilfe, ich weiß nicht, wie man von Github etwas downloaden kann. Video
Version 4 - vom - 20.11.2023 - huepfende Pfannkuchen
Neue Spielfigur
Bisher hat das Spiel ja eher etwas langweilig ausgesehen. In Schritt 3 habe ich dir gezeigt, wie du in Sekundenschnelle verschiedene Spielhintergruende einbauen kannst. Nun haben wir aus dem vorher doch etwas langweiligen gelben Ball, der sich die Pfannkuchen geschnappt hat, ein lustiges Männchen programmiert, das nun auch springen und laufen kann. Die Bedingungen sind nach wie vor gleich geblieben. Man hat 3 Minuten Zeit, um möglichst viele Pfannkuchen zu sammeln. Die Pfannkuchen sind kleine Sterne, dazu musst du mit deiner Pfeiltaste auf deiner Tastatur, nach „oben“ drücken und das Männchen beginnt nach oben zu hüpfen. Die rechten und linken Pfeiltasten auf deiner Tastatur, bedeuten, links und rechts. Dies ist auch im Code so festgelegt.
Das kleine jump and run Spiel „huepfende Pfannkuchen“
Wieviel Programmierkenntnisse brauche ich?
Eigentlich gar keine. In den Videos wird dir gezeigt, wie du an das Github-Spiel kommst und wie du es aufbaust und was du dazu benötigst. Das Spiel wird in Visual-Studio Code aufgebaut und mit dem sogenannten Live-Server, kannst du dein Browser-Spiel anschauen. Im Video wird dir gezeigt, wie du alles im Code ändern kannst. Geschwindigkeit, Farben, Hintergründe. So lernst du etwa, für was ist welche Technik zuständig. Das HTML für die Struktur des Spiels. Das CSS ist für Style und Farben und Java-Script ist für die Bewegungen da und für das Schreiben der Funktionen.
Ein Spiel zu entwickeln macht natürlich Spaß, aber besser ist es, du lernst erst mal die Basics. Willst du einfach nur spielen und gar nicht groß Programmieren lernen, kannst du das Spiel natürlich auch gerne spielen und dich im Code bewegen.
Warum sind manche Zeilen grün?
Grün im Code sind sogenannte Kommentare. Der gesamte Code ist kommentiert. Hier wird dir kurz beschrieben, wie du das Spiel auch ändern kannst. Du kannst die Monster größer machen, ( grün), oder kleiner, oder die Geschwindigkeit im Code ändern etc. und bist dein eigener Spielleiter-.) Das ist sehr cool.
Du hast gar keine Lust auf ein Spiel? – Kein Problem, dann lerne wie man eine Webseite coden kann Die Katzen-Webseite
Spiele kannst du mit verschiedenen Programmiersprachen erstellen. In diesem Beispiel lernst du wie du ein Projekt in Visual-Studio-Code aufbaust und dir mithilfe des sogenannten live-Servers, das Spiel auch anschauen kannst. Der Vorteil ist, wenn du etwas Programmier-Kenntnisse hast, kannst du gezielt im Code, dein Spiel so schreiben, wie du möchtest. Das ist ziemlich cool und macht natürlich auch Spaß.
Andere Sprache- andere Entwicklungsumgebung
Möchtest du ein kleines Spiel in einer anderen Sprache bauen, so benötigst du natürlich oftmals auch eine andere Entwicklungsumgebung, oder einen anderen Quelltext- Editor. In unserem Falle haben wir Visual-Studio-Code genutzt, damit du weißt, wie du ein einfaches Browser-Spiel auch selber anschauen kannst im Live-Server. Der Live-Server ist eine sogenannte Extension in Visual-Studio-Code. Einfach gesagt, mit diesem Live-Server kannst du dir eben ansehen, wie dein Spiel aussieht, oder wenn du eine Webseite codest, kannst du dir die Webseite darin ansehen, wie diese später ungefähr aussieht. Klingt cool und einfach oder?
In der Spiele-Industrie gibt es verschiedene Wege-Ausbildungen.- Studiengänge. Hier einige, zur Recherche.
Gamedesigner Game and Animation Artist Game Artist Game developer 3-D-Artist Game programmer 3-D-Visual-Effect Artist Game Engineer Gestalter für Immersive Medien Medien-Design und Game Animation Medieninformatik und Development
Eigene Hintergründe im hüpfenden Pfannkuchen-Spiel erstellen. Nur wie?
Erstelle deine eigene Hintergründe im Code.
Du kannst eigene grafische Spielhintergründe erstellen. Durch das einfügen des Bildes in den Code wird dir dein Bild als gesamter Spielhintergrund eingeblendet. So kannst du eigene Hintergründe erstellen, entweder düster, oder bunt. Wie du es möchtest. Den eigenen Spielhintergrund kannst du dir ab Version 3.0 einfach einbauen und ein beliebiges Bild von dir nehmen.
Klingt cool, doch was brauche ich genau und ist Spiele programmieren so einfach wie Kuchen backen?
Antwort: Leider nein!
Fragen und Antworten- Spiel – Blöde Fragen gibt es nicht.
Spiele kannst du mit verschiedenen Techniken programmieren. Hier einige Beispiele und was du genau dazu brauchst, bzw. was du lernen musst.
Das Problem: Es gibt verschiedene Umgebungen, für bestimmte Programmier-Sprachen. Hier ein paar Beispiel, was du brauchst.
1. Kann ich mit java-Script ein Spiel programmieren?
Antwort: Ja, natürlich, das geht. Unser kleines Probespiel hüpfende Pfannkuchen ist nur mit HTML, CSS und java-Script gemacht. Ich würde dir sogar raten, erst mal klein anzufangen, die Basics zu lernen. Java-Script ist hier sicherlich sehr interessant. Der Klassiker ist sicherlich das Spiel „Snake-Game“. Du findest es auch auf youtube. Gib einfach in die Suche ein. „Snake-Game programmieren“, oder gib den Titel in Englisch ein.
Welchen Quelltext-Editor oder Entwicklungsumgebung brauche ich dafür, um den Code dort zu schreiben?
Antwort: Du kannst ein java-script-Spiel in Visual-Studio-Code coden. Es ist dann ein einfaches Browser-Spiel. Wie du den Code dort aufbaust, findest du in diesem Video. Was ist Visual-Studio-Code und wie kriege ich den Live-Server? Den Live-Server brauchst du, um dein Spiel anzuschauen. Visual-Studio-Code Übersicht
Am besten du schaust dir dazu folgende Video-Reihe an auf youtube, von Programmieren Starten Video
3. Kann ich mit Python ein Spiel programmieren geht das?
Antwort: Ja, das geht.
Schau dir dazu mal die Technik „Python und „Pygame“ an, oder Python und Ursina.
Was brauche ich, um mit Python zu arbeiten?
Am besten du lädtst dir „Pycharm“ runter. Das ist die IDE von Python.
Wenn du in Python einsteigen möchtest, dann findest du hier eine riesige Übersicht zum Thema Python und wie du cool einsteigen kannst. Link
4. Kann ich mit C++ ein Spiel programmieren?
Antwort: Klar, das geht auch, allerdings gilt C++ nicht gerade als einfachste Sprache. Bist du also totaler Anfänger, oder hast womöglich noch nie im Leben eine Zeile Code geschrieben, ist es vielleicht nicht unbedingt ratsam, gleich mit dieser Sprache anzufangen, sondern es langsam anzugehen.
Es gibt im Netz auch sogenannte Online-Compiler. Vorteil, du musst erst mal nichts installieren und kannst Code auch dort ausführen. Wenn du allerdings täglich codest und tief in die Programmierung einsteigst, ist es natürlich ratsam, deine eigene Umgebung auf deinem Laptop zu schalten. Online-Compiler C++
Es gibt auch sogenannte 3-D- Techniken und Umgebungen wie Unity – 3- D. Auch dort kannst du dich umschauen.
Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen
Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.
