Spiel programmieren mit JavaScript ohne Vorkenntnisse
HTML-код
- Опубликовано: 25 июл 2024
- Kostenloses Beratungsgespräch: developerakademie.com/?...
In diesem Video lernst du, wie du ein Spiel mit JavaScript programmierst. Auch als Anfänger kannst du das Ganze ohne Vorkenntnisse nachprogrammieren!
Inhaltsverzeichnis:
00:00 | Warum ist JavaScript so beliebt?
00:38 | Einleitung Tutorial
00:58 | Projektstart
02:09 | VS Code Installation
03:13 | Dein erstes Spiel
___ Links ___
Spieldateien: drive.google.com/drive/u/1/fo...
VS Code herunterladen: code.visualstudio.com
___ Library ___
cdn.jsdelivr.net/npm/pixi.js@...
Instagram: / junus.ergin (Junus Ergin)
Tiktok: / herr_programmierer (Herr Programmierer)
Podcast: open.spotify.com/show/3sOOzOg...
____ Über diesen Kanal ___
Die Developer Akademie bildet dich zum Programmierer weiter. Auch wenn du noch NIE eine Zeile Code geschrieben hast, ist es möglich in 3 - 9 Monaten einen bezahlten Job zu finden. Dafür musst du nicht nur programmieren lernen, sondern einen guten Lebenslauf mit vielen verschiedenen Projekten vorweisen. In unserem Programm hast du ständigen Kontakt zu unseren Coaches, Hausaufgaben, Abgabefristen und Projekte aus der Praxis.
Am Ende erstellen wir mit dir deinen Lebenslauf und unterstützen dich bei deiner Bewerbung.
Informiere dich auf weiterbildung.developerakadem...
ich bin echt froh das es solche Softwareentwickler gibt wie dich, du gibst dein wissen an uns weiterund dafür bin ich dir sehr dankbar
Also ich muss sagen, es hat sehr viel Spaß gemacht sich einmal ein wenig auszuprobieren Daumen hoch dafür!!
Hey, das hat Spaß gemacht! Vielen Dank! 🙂
Was ein gutes Erklärung Video krass!!
@Programmieren lernen ist der beste Kanal um Programmieren zu lernen(Es liegt halt im Namen!)
Du spielst Brawl Stars
@@Hallo12435 Ja,und?
@@darkfire128 hab ich nur gesehen :D
Danke dir dank deinen videos kann ich jetzt ein bisschen programmieren
bei mir kommt am anfang die schwarze box nicht
War mein erster Erfolg beim Programmieren weiter so
Kannst du mal ein Video mach über HTML und CSS wo du alle „Befehle“ erklärst und zeigst was die machen und so 🙏
Ich arbeite viel mit RPG Maker. Die Engine exportiert Spiele auch als html/js Projekt das man einfach hochladen kann
cooles Video, Danke!!!
Woww echt woww👌🏼
Danke sehr Yunus!
Ich bin froh, das du diese Video gemacht hast!
super erklärt!
Mich würde ein Video freuen über Design Pattern. Ich glaube das ist ein Wissen, dass total underreated ist. Manche Betriebe setzen so ein Wissen voraus. Außerdem findet man auf deutsch nicht viel dazu auf YT :)
Ein mega hilfreiches Video. Könntest du eventuell auch erklären wie ich das Spiel weiterentwickle und meine Freunde auch das Spiel spielen können?
Richtig gutes Tutorial! Könntest du vielleicht mal zeigen wie man einen Multiplayer mit Java Script macht?
Hallo!
Ich hab mal ein bisschen deine Videos durchstöbert und mir ist da so was aufgefallen.
Du hast eine unglaubliche Vielzahl an Tutorials was wirklich gut ist, aber ich vermisse etwas.
Unzwar WIE man ein Projekt von A-Z durchplant. Sowas passt wahrscheinlich nicht in ein komplettes Video, aber das ist echt mangelware auf RUclips und genau der Knackpunkt der mich in meinen Projekten immer bricht.
Ich weiß einfach nicht welche Klassen wohingehören, welche Klassen ich brauche etc.
Ich hab immer eine grobe Idee aber bei der Umsetzung merk ich dann, dass das so nicht funktioniert wie ich es geplant hatte und dann versuch ich es erneut.
Es ist frustrierend wenn man etwas größere Projekte habe. Bin nicht sicher ob ich zu perfektionistisch bin, obs mitunter ein meinem adhs liegt oder was anderes.
Aber eine grundlegende Hilfestellung.. ein Rezept an das ich mich richten kann, von einem Vollprofi wie dir, würde mir unheimlich weiterhelfen :)
Viele Grüße
Timo
ich kann deinen Puinkt verstehen und das Wissen, das du willst, wird dir wohl kein RUclips-Video geben.
Wenn du dich beruflich in die Softwareentwicklung verändern willst, solltest du wirklich das in der Beschreibung verlinkte kostenlose Beratungsgespräch durchführen, um remote an der Developer Akademie teilzunehmen. Ich selbst bin seit einem Monat da und bereue es seither keine Sekunde!
Zunächst werden die Basics vermittelt und das ziemlich praxisnah. Nach kurzer Zeit steht auch schon die erste Gruppenarbeit an, wo du lernst, solche Projekte wirklich durchzuplanen.
Als Unterstützung stehen dir täglich wirklich tolle Mentoren zur Seite, die sehr gutes Feedback zu deinen Fragen oder Arbeiten geben.
Du kannst es dir einfach mal anhören.
Liebe Grüße
David
(kein Mitarbeiter der Developer Akademie, echt jetzt)
@@DosKolossos Vielen Dank für deine Antwort! Ja ich bin ausgebildeter FIAE und habe in meiner Ausbildung mit u.A. mit Spring gearbeitet und schon ein paar Projekte hinter mir.
Leider litt ich nach meiner Ausbildung an einem Burnout (Ende 2022) und hab mich noch immer nicht ganz davon erholt. Dazu kommt noch eine starke Einschränkung durch ADHS.
Ich bekam bereits eine Schulung vom Arbeitsamt bezahlt nämlich das OCA (Oracle Certified Associate) aber durch meine aktuelle gesundheitliche Situation bin ich finanziell nicht dazu in der Lage diesen Kurs anzustreben so gern ich das auch machen würde.
Um aber nicht still zu stehen, mach ich privat Projekte so gut ich kann und bilde mich via RUclips und Referenzen weiter.
Entschuldige die "Text-Wall". Irgendwie dachte ich es hilft meine Lage zu verstehen bevor ich mit einem simplen:"Das kann ich mir grad nicht leisten" um die Ecke komme.
Hey, ich grätsche mal rein. Wenn du dein ADHS in den Griff bekommen möchtest, ich weiß es klingt blöd aber es wirkt, wie bei Bruce Banner wenn er nicht zum Hulk werden wollte😆Sorry aber passt. Fang an zu meditieren. Nicht so ,,OHMMMMMM!", sondern irgendwo gemütlich hinsetzten und auf die Atmung konzentrieren. Versuchen an nichts anderes zu denken, so lang wie möglich. Es wird dauern aber von Mal zu Mal, lernst du deine Gedanken zu kontrollieren. Es hilft auch gegen den Stress im Körper, der bei einem Burnout ja durchaus vorhanden war/ist. @@Der_Yoloist Ich fand meditieren auch immer ziemlich bescheuert aber man muss halt nicht barfuß im Schneidersitz sitzen und ,,Ohmmmm!" summen, es geht eher um die Kontrolle. Perlentaucher schaffen es damit auch sich zu konzentrieren, also kein Humbug.
Sorry für den Roman, helfe gern. Viel Erfolg, es gibt auch YT Videos dazu.
@@TechworldNoob-cb3fb Vielen Dank! Genau das dachte ich mir nämlich immer. ich kam mir immer mega bescheuert dabei vor, aber habs überall gelesen, dass es helfen soll. Vllt ist es einfach das was fehlt.
Keine Sorge, war kein Roman :) vielen Dank ich guck mich schonmal nach videos um
Viel Erfolg! Und nie aufgeben! 💪@@Der_Yoloist
Du machst echt gute Videos, NUR du klickst zu viel im Code herum, was dazu führt, dass man manchmal nicht versteht was du da machst und ob es jetzt gerade wichtig ist. Und du solltest vielleicht erst sagen: ,,Klammer auf!" und dann () Tippen. Ich weiß, ihr großen RUclipsr bekommt solche Kommentare gar nicht mehr mit aber ich versuche es trotzdem mal.
Mega geil, bin jetzt schon bei "stopGame bei collision" Ist mein erstes Game, danach Snake oder Minecraft. Macht echt Spaß, Danke dafür!
LG HEUERs Pit Stop 🚗💨💥
bzw.
Techworld Noob🕹💡🌎🧬
Danke
Ich habe noch eine "arrey-liste" für die bullets hinzugefügt damit die bei Kollision auch "verschwinden". Aber echt nices vid :)
Folgende coole Erweiterungen würde ich mir zur Aufgabe machen:
Counter
Sound
Hintergrund flackern bei Kollision
React Native für Touch auf dem Smartphone.
Lieber Junus, was würdest du zu den Ideen sagen?
Hallo, erstmal vielen Dank für deine tollen Ideen und Praxisbeispielen. Hätte jetzt ein Anliegen da ich noch ziemlich unerfahren in programmieren bin, bei mir funktioniert das mit dem Ufo nicht so wie bei dir obwohl ich den gleichen code hergenommen habe. Woran liegt der Fehler außer bei mir :)?
Hey du. Habe 0 erfahrung und bin jetzt mit bei video dran.(habe alles vorbereitet und werde es sicherlich noch beenden) Für meine idee werde ich c++ benötigen, was laut internet ziemlich schwer ist. Nun meine frage: soll ich zuerst mehr java lernen oder direkt mit deinem c++ tutorial starten? Übrigens ist dieses video super erklärt. Danke dafür schonmals
Ich habe ein denk Blockade ich will mal eine Anmeldung mit vue.js node.js (express) und einer Maria DB machen mit Benutzername und Passwort machen kann man da mal ein einfaches Tutorial machen?
Collision will nicht passieren
Hab versucht das script der gameloop anzupassen leider alles erfolglos
Bei Minuten 7:29 , bleib mein Bildschirm weiß, es ändert sich nachdem STRG S nicht. Welcher Fehler habe ich da gemacht?
vielleicht auf Aktualisieren auf der Website
also im Webbrowser meine ich
Hat alles super funktioniert Spiel läuft super. Ich habe jetzt nur das Problem wenn ich das Spiel über den Ordner öffnen will öffnet sich zwar der Browser aber nur mit dem schwarzen Hintergrund ohne das Spiel an sich... Weiß jemand woran das liegen könnte?
kann mir wer helfen, bitte
1 wo ist auf der windows qwertz das einfache anführungszeichen??? mit alt und 0130 das funktioniert nicht.
hab herrausgefunden das es erstmal mir doppelten anführungszeichen funktioniert. wie mache ich das einfache.
Danke für dein Tutorial. Bei passiert allerdings nichts bei einer Kollision. Auch wenn Bullet mit Ufo kollidieren soll fliegt die Kugel hindurch. An was könnte das liegen?
schau in deinem gameloops code rein wenn du andere namen verwendet hast musst du es dort auch ändern . Ich habe z.b. geschrieben statt rocket rakete und habe es dort geändert war nur ein wort in ganzem kode jetzt funktioniert es ^^
dann fehlen der "waitForCollision" Funktion die Objekte. Möglicherweise hast du diese nicht als array angegeben. Wie bei Minute 28:20 im Video
@@monikaglusacova2317 Danke. Genau da war der Fehler ;-)
Gerne 😊🙂@@blackred1981
Bei mir will einfach die Collision nicht funktionieren.. habs genauso abgeschrieben bis auf die Bilder die hab ich geändert.. und den namen natürlich, aber dennoch fliegen die einfach durch.. einfach am verzweifeln.
ich habe tatsächlich das selbe Problem. Habe eigene Grafiken als PNG genommen und dadurch andere namen, die Collision und das "stopGame" funktioniert auch bei mir nicht.
hat das was mit der Bibliothek und den Namen zu tun, da wir nicht dieselben benutzen wie im Tutorial?
lg
ok, habs rausgefunden.
hab in der Bibliothek (gameloop.js) unter der funktion "isColliding" bei "typeof rocket !==" den namen von rocket auf meinen geändet und voila, es funktioniert! 🎉
@@brakr10385 mal die Entwickleroptionen im Browser öffnen, vielleicht besteht ein JavaScript Fehler. Wenn ihr eurer Rakete einen anderen Variablennamen gebt, müsst ihr in der gameloop.js in Zeile 97 "rocket" durch euren Variablennamen ändern (z.B. in meinen Fall von rocket in godHand ändern: let children = typeof godHand !== 'undefined' ? app.stage.children : []; )
@@brakr10385 Ich hatte das gleiche Problem und nach ein paar Stunden rumprobieren habe ich endlich den Fehler gefunden in der Gameloop.js Datei steht in Zeile 97 folgendes: " let children = typeof rocket !== 'undefined' ? app.stage.children." Wenn du dein Objekt anders benannt hast weil du eigene Bilder verwendet hast musst du hier "rocket" entsprechend durch den Namen ersetzen, welchen du deinem Objekt gegeben hast. Dann funktioniert es mit der Collision. Ich hoffe das hilft. Liebe Grüße
Bei mir bleibt das wo bei ihm dann die Rakete und so aufploppt im Internet alles weiß und es kommt Nix dazu woran liegt das?
wie kann ich den schwarzen hintergrund entfernen?
bei mir bleib alles weiß könntest du mir weiter helfen?
Wo sind denn deine ganzen Links???
für windows 7 nicht geeignet ?
Ich werde das Video sicher noch anschauen.
Aber als ich den Titel gesehen habe, musste ich grinsen - noch vor 2 Videos hast du gesagt, dass Javascript zu langsam für Spiele sei. 😂
Damit meinte er AAA Spiele. Du kannst grundsätzlich alles mit jeder Programmiersprache schreiben. Es ist dann nur unterschiedlich kompliziert und unterschiedlich schnell. Du würdest nie das neue GTA mit JavaScript schreiben, weil das viel zu langsam und umständlich wäre.
Vom Prinzip kann man vereinfacht sagen "Einfache Programmiersprache" -> "langsam". "Schwere Programmiersprache" -> "schnell"
@@Volker-Dirr schon klar - ich bin selbst Entwickler (C#) und verstehe die Aussage schon richtig.
Es war nur gerade eine gewisse "Situationskomik".
@@MarkusH87 Ah. ok. Ja, insofern kann ich das nachvollziehen.
ich kann irgendwie den Scrip nicht runterladen da kommt eine Fehlermeldung die ganze zeit
Die erste Werbung die ich auf dieses Video sehe ist eine Werbung für die 😂😂😂😂
Ist Java skript nicht lediglich eine Skriptingsprache?
Das ist "lediglich" eine Skriptsprache. Das ist richtig. Warum ist das für dich ein Problem?
@@Volker-Dirr nein kein Problem, aber hier wird immer von Programmier-Sprache gesprochen.
@@DHoe-cn6bg Eine Skriptsprache ist eine Programmiersprache. Warum soll das deiner Meinung nach keine Programmiersprache sein?
mit welcher taste speichert mann
STRG + S
Ich habe es jetzt zwei mal ausprobiert und es genau so getippt wie er es im Video gesagt hat. Aber bei mir klappt das mit dem live anzeigen im Browser nicht. Es bleibt weiß, egal was ich mache
habe leider dasselbe Problem :)
Ihr müsst mit strg + s den Code speichern dann geht es
17:07 brauchte nur 30 sek und habe noch nie davor so etwas gemacht
Sorry. habs schon :)
also entweder bin ich zu dämlich oder ich weis nicht , hab alles genauso nachgemacht hab noch vor und zurück hinzugefügt und das dann natürlich dir bullet auf mit im Bild ist also sprich wenn der jet wie in meinem fall ist auf der y Achse mitten im Bild ist das die bullet dann nicht vom Boden weg startet sondern auf von der spitze des jet , alles läuft super nur die Kollision funkt nicht und auch die bullets treffen die Ufos nicht als würde das ganze auf der z Achse nicht auf der selben ebene sein , kann mir da jemand vll sagen warum das so ist , danke .,...
Bei mir verschwindet die Rocket nach dem ersten Treffer, ist dann aber auch unverwundbar, bloß man sieht nicht von wo gerade geschossen wird.. finde den Fehler auch nicht! ^^ Hilfe suchst hier auch vergebens denke ich, bei fast 200K Abos. Viel Erfolg, ich habe einmal alles von vorn angefangen als es nur weiß blieb, dann ging es. EIN Schreibfehler und nichts funktioniert.
schau in deinem gameloops code rein wenn du andere namen verwendet hast musst du es dort auch ändern . Ich habe z.b. geschrieben statt rocket rakete und habe es dort geändert war nur ein wort in ganzem kode jetzt funktioniert es ^^
das heisst also man kann dieses Spiel oflline (ohne Internet) garnicht spielen?😂
Doch kann man.
@@saikokamiyt im javascriptist eine Internetseite verlinkt wie soll das gehen was laberst du 😄
JavaScript und leicht zu benutzen? Ehhh 😂😂😂😂
Ich hab so ein geiles Spiel erstellt mit JavaScript ,HTML und CSS nur jetzt hab ich ein Problem. Ich weiß nicht, wie ich eine Webseite erstellen kann, dass ich mein Spiel darüber veröffentlichen kann, dass die Leute das spielen. Glaub mir das ist nicht leicht. Ich hab drei Jahre an diesem Spiel gearbeitet und vor einer Woche fertig gewonnen endlich.
Mach dir etwas Webspace über zB 1&1 Ionos, is wirklich sehr einfach
Wenn du schon so weit bist, dann wird das das kleinere Problem sein. Vom Prinzip musst du die Dateien nur in ein Verzeichnis kopieren, auf das die anderen Leute zugreifen können. Das war es schon.
Das macht man i.d.R. mit Hilfe eines "Hoster" (Das ist der Anbieter) oder "Webservers" (Das ist der Rechner). Entweder sucht man sich im Internet einen kostenlosen Hoster/Webserver, oder man nimmt ein paar Euro in die Hand und bezahlt, oder man gibt seinen eigenen PC/NAS/USB-Platte am Router als Webserver frei. Hat alles seine Vor- und Nachteile.
@@Volker-Dirr ja das stimmt aber ich könnte auch rein theoretisch da ich das Spiel auf Handy gemacht habe und auf mein Laptop machen will, muss ich erst mal schauen wie ich den Datei von mein Handy auf mein Laptop bringen kann also übertragen, dass ich von meinem Laptop aus weiterarbeiten kann. Ich kann momentan nicht weitermachen, da mein Laptop momentan komplett, Ko ist nicht mehr angeht keine Ahnung, was los ist
@@Volker-Dirr nehmt euch kein Beispiel an mich. Ich bin auch noch nie ein Spiel alleine entwickelt und denkt ich kann das nächste Fortnite entwickeln oder noch besser rein theoretisch die Codes und so sehen richtig gut aus und das hab ich auch mit dem Hilfe von KI gemacht.