Hab das Video sehr aufmerksam durchgeguckt und fand es echt super. Bin gerade an einer Fachoberschule mit dem Schwerpunkt Wirtschaftsinformatik. Bei uns ist der Unterricht nicht annähernd so cool und Detailliert. Viele Dank für das Tutorial!
Wieder mal ein super Tutorial. Habe neben deinen Videos nun die ersten 1-2 kleinen Apps selbst geschrieben und mache schöne Fortschritte. Hoffentlich kann ich das bald mal beruflich nutzen. Super Content machst du da!
Herzlichen Glückwunsch zu den 30.000 Abonennten!Finde es toll mal ein Spiel Nur mit JavaScript programmiert zu sehen.Lerne gerade CSS und finde es Interessant, eine andere Art zu Designen mit Canvas/JavaScript zu sehen.
Es ist nun das 2. Snake das ich nachprogrammiert habe. Das erste mal war es ganz am Anfang meiner Programmierkarriere von jmd anderem. Nun verstehe ich die Funktionen und alles viel besser. Großes Dankeschön erstmal.
*Echt super video versuche mich auch als Programmierer seit kurzem. Deine videos werden mir gut weiterhelfen das merke ich jetzt schon . Dir viel Erfolg bei allem was du machst 💯🤝💯*
Kleiner Tipp zur Bewegung der Schlange: Es ist nicht notwendig alle Glieder der Schlange zu verschieben, es ist ausreichend das letzte vor das erste zu setzen (je nach Richtung rechts, links, oben oder unten) - das hat den Vorteil, dass die Schlage nicht "flackert" :)
@@xlantv5566 Hi, einen Code kann ich Dir leider nicht liefern, aber ich versuch es zu erklären :) Angenommen Du hast eine Schlange mit 4 Gliedern in der vertikalen (von Links nach Rechts #1, #2, #3, #4), aktuell soll sie sich nach links auf dem Bildschirm bewegen. Anstatt alle Glieder (also 1, 2, 3, 4) jeweils einzeln nach links zu bewegen, ist es ausreichend das letzte Glied #4 vor Glied #1 zu setzen. Da sie sich nach links bewegt: Y #4 = Y #1 und und X #4 = X #1 - 1. Die Reihenfolge der Glieder ist dann #4, #1, #2, #3. Und so geht das immer weiter. Nach der ersten Bewegung wäre das letzte Glied #3 -> die neue Reihenfolge nach der Bewegung also #3, #4, #1, #2 Soll sie sich z.B. nach oben bewegen, muss Glied #4 über Glied #1 gesetzt werden (Also X #4 = X #1, Y #4 = Y #1 - 1), in der ersten Bewegung demnach: #4 #1, #2, #3 Nach der zweiten Bewegung: #3 #4 #1#2 usw. Ich hoffe das hilft :)
@@xlantv5566 Wenn man eine klasse erstellt die jedes neue Viereck darstellt und eine Klasse die nur den Kopf darstellt muss man nur den Kopf wandern lassen und die letzte Position des Kopfes festhalten und die neu erstellten Vierecke auf die festgehaltene Position wandern lassen. Quasi rennen die Vierecke dem Kopf dann hinterher. Habe das Game mit C# und dem Framework Win Forms programmiert, gar nicht so einfach finde ich.
Sowas erinnert mich immer an mein erstes Snake programmieren, etwa 20 Jahre her, damals in der Ausbildung im Wohnheim abends, mit dem damals schon 20 Jahre alten Turbo Pascal. Es hat zwar 2 Tage grübeln und probieren gebraucht, aber dann konnte die Schlange wenden und am Rand war game over. War noch ohne Apfel, ohne Wachsen und ohne Selbstkollision, aber ich war stolz wie blöde dass nicht nur das Spiel in Textzeichen war, sondern auch der Quelltext auf eine Bildschirmseite passte, und davon hatten wir abzüglich Menüs weniger als 20. Und das selbst hingekriegt mit RTFM, ohne Internet.
Weiter so! Bitte mehr solche Videos mit ausführlichen Kommentaren und Erklärungen, da ich mich persönlich mit der Logik noch sehr schwer tuhe Ach ja, und den Code bitte veröffentlichen wenn es geht
Ich fange gerade erst an zu Coden und es macht süchtig. Besonders wenn man nur nachmachen muss was du vormachst. Ich denke aber der Spaß vergeht mir SPÄTESTENS wenn ich etwas selber planen muss oder entwickeln, habe keine Ahnung von allem 😀 LG Techworld Noob 🕹⚖💡🌎
ich schreibe diesen kommentar für deine zukünftigen videos: ich empfehle dir für javascript und style extra fenster machst und mit und diese in html bindest. Nur so als tipp
Na, hat ja gut geklappt - mit dem Tutorial - das ganze müsste ich dann nochmal austesten ob ich es ohne Tutorial hinbekomme, das der durch die Wand läuft :) - also nicht schlecht - schönes Format - hab mal Abonniert. Man weiß ja nie wo es einem hin verschlägt, wenn Lokführer aufgrund von gesundheitlichen Gründen nicht mehr möglich ist. Spaß haben mir ja auch schon Excel Tabellen gemacht zu basteln - oder "einfache" Webseiten mit HTML und CSS - in PHP bin ich nie so leicht rein gekommen - da hatte ich schon ein wenig Hilfe von außen. Also mich interessiert das Thema auf jeden Fall. Was einem auffällt - das man manchmal echt nicht mit bekommt, wo man Schreibfehler begeht und guckt immer mal wieder drüber weg. Das man dann irgendwie nicht mehr so leicht durchblickt. Wenn man sich aber nochmal alles genau anguckt, und auch vergleicht - bzw mit den englischen Wörtern nochmal überdenkt, kann man die Fehler aber durchaus erkennen. Auf jeden Fall besten Dank für die Einblicke in Javascript. Bisher hatte ich das noch nicht so auf dem Schirm gehabt.
beim 3. versuch läuft jetzt endlich alles :) ich bin auch von selbst drauf gekommen, wie ich unterbinden kann, das die Schlange die Richtung in sich selbst hinein ändern kann ^^ jetzt möchte ich noch variablen Speed einstellbar machen, und Punkte vergeben (je nach dem Speed, umso schneller desto mehr Punkte gibts pro Futter) ^^ bin gespannt ob ich das so hinbekomme :)
Bin gerade noch dabei es fertig zu erstellen, die Random funktion beim Futter funktioniert noch nicht so ganz bei mir. Das gelbe Quadrat verschwindet dann immer komplett. Aber Heute Abend auf ein neues.
Deine Videos sind echt geil erklärt. Ich wünschte, ich wäre jünger und mein altes Basic würde mir nicht immer mit IF>THEN dazwischen funken und mich erinnern. 😉 Vermisse dann immer das THEN kommen muss.
habe nen problem das weill nicht mit chrome machen die ganze zeile um compatible zu sein fehlt habe ich dan selber 1zu1 genau gleich geschrieben jezt ist das meta fon der nächsten zeile rot und es funksioniert immer noch nicht fieleich habe ich was beim download falsch gemacht oder so ich weiß nicht wo dran es liegen könte
hat echt spaß gemacht das Nach zu Programmieren, gerade das mit der ForEach schleife kannte ich nicht, hab ich immer mit for(i) gelöst eigener Zusatz und Fixes: Wand durch laufen wie im Video erwähnt, in sich selbst laufen in der Key-Down funktion mit != entgegenderrichtung gefixt noch WASD hinzugefügt die KEYs dafür online nachgeschaut, (W => 68, A => 87, S => 83, D => 65) dann sollte das Futter natürlich auch nicht in einen spawnen ein scoreboard an der seite, welche mir die länge, und die spielfeldgröße anzeigt dem kopf ne farbe gegeben und beim essen nicht den kopf dupliziert sondern das letze element
@@eliasblankenburg1497 das hab ich in der draw() funktion geändert. erst die zeichenfarbe geändert dann die 0 position mit der funltion add(snake[0].x, snake[0].y) gemalt, die gestliche schlange in eine variable gespeichert mit slice(1) dann wieder farbe auf weiß gestellt und variable.foreach und done. sorry bin schlecht im erklären, vorallem wenn ich nach monaten in den code wieder rein gucken muss xD HIER die umgeschriebene funktion: function draw() { ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height);
//Hier wird die schlange gemalt. ctx.fillStyle = "lime" add(snake[0].x, snake[0].y)
Hey ich hätte mal eine Frage.. und zwar könntest du mal ein Tutorial machen wie man Doodle Jump selber machen kann ? Würde mich darüber sehr freuen. :)
Super Video, hat alles super geklappt! Schön wäre, wenn Du mal zeigen könntest, wie man Javascript anstatt mit PHP eine Datenbank (z.B. MySQL) anspricht! 👃
Hallo, bei mir ist das Problem das ich nur das schwarze spielfeld machen kann und danach klapt nichts mehr. Ich kann nicht die Schlange nicht "einprogrammieren" und auch nicht die Schwarze Farbe des Speilfeldes wechseln. Könnest du mir erklären worin das Problem liegt
Check deine Groß- und Kleinschreibung, ob diese wie im Video mit ein stimmt. (ich war gerade bis zu 2 Stunden dran um nur zu sehen, dass ich draw(); mit einem großen D geschrieben habe, danach ging es.) Hier kannst du dein Code mit meinem Prüfen der geht.
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); draw(); function draw() { ctx.fillStyle = 'black'; ctx.fillRect(10, 20, 20, 20); } function gameloop() { }
Danke für die tolle Erklärung. Mich würde es noch interessieren, wie man das zum Beispiel mit einem User/Highscore verbindet, der in einem Backend (auf JS oder Python Basis) gespeichert wird. Danke
Danke für das Video. Zu 1:06:00 - 1:14:20 habe ich eine Frage. Würde es nicht reichen dem letzten Teil die Koordinaten von snake[0] zu geben? Dann müssten nicht alle Teile aufrutschen…
Hi zusammen, vorab danke für das tolle Video :) kann mir einer sagen wie das Programm automatisch eine Formation durch speicher auslöst und wo man dies einstellen muss :) danke
Ich weiß ich bin spät dran aber habe es erst jetzt gesehen. Du hast den gleichen Fehler wie ich gemacht. document.addEventListener('keyDown', keyDown); das erste keyDown müsste keydown heißen. Echt krass was groß und kleinschreibung ausmachen kann :D Außerdem weiß ich nicht ob es an RUclips liegt oder dein Code so ist, aber es fehlen sehr viele Leertasten. Ich weiß nicht ob es einen unterschied macht aber wäre auf jeden Fall um einiges "ordentlicher" mit den Leertasten
Hallo Leute. Eure Tutorials sind sehr interessant und auch gut erklärt. Leider komme ich ab den Part Keylistener nicht mehr weiter. Werden die Keycodes vorgegeben oder definiert man die selber? Ich habe alles so geschrieben wie im Tutorial erklärt und der Code sieht genauso aus, nur reagiert die Schlange im Spiel nicht auf die Pfeiltasteneingabe und läuft stur weiter nach links.
@@Programmierenlernen vielen Dank für eure Antwort. Ich hab es mir nochmal genau angeschaut und denn Fehler gefunden. Schon erstaunlich was ein (e.keycode) und ein (e.keyCode) für einen Unterschied ausmachen. Und wenn VSCode das nicht als Fehler sieht und man es selber nicht weiß kann man lange danach suchen. Nochmals vielen Dank für die Hilfe.
kannst du mal zu dem RPG wovon du mal gesprochen hast ein Tutorial machen oder zu dem Pokedex den du gemeinsam mit Kevin gemacht hast ? Wäre echt cool. Finde du erklärst das ganze echt cool :)
Ich kann irgendwie nicht die Farbe von der Schlange anpassen. Egal welche Variabel ich dem ctx.fillstyle gebe, es wird immer nur als Schwarz angezeigt. Kennt jemand das Problem und kann helfen?
hallo bei min 22:00 kann ich bei ctx.fillRect = `white ` ; nicht so ein weißen block erstellen die Farben wollen sich generell bei mir nicht ändern kann mir vlt wer helfen bin ziemlich neu hier
@@vl0ppyd1sk Habe meinen Fehler gefunden. Habe bei ctx.fillStyle, das S klein geschrieben anstatt groß. Nachdem hat alles reibungslos funktioniert. Aber trotzdem, Danke. 😁
hey, ich bin gerade dabei es nach zu programmieren. Mir ist aber irgendwo ein Fehler passiert, den ich nicht finde. und zwar hätte ich jetzt eigentlich die Schlange und ihr Essen, das wird aber auf dem schwarzen Feld nicht angezeigt. Ich sehe nur das schwarze Feld, nix anderes. Ich brauche bitte Hilfe.
Super Video hat mir sehr viel Spaß gemacht! Mein einziges Problem ist dass meine Schlange nicht länger wird und nach dem ersten Einsammeln vom Futter ist es vorbei hat jemand eine Idee was ich falsch gemacht/vergessen hab
Danke für dieses Tutorial :) Darf ich fragen wie man in Spielen objekte rotieren lassen kann z.b. bei jump and run games um auf objekte nach timing zu springen ich habe gelesen das es irgendwie mit canvas geht allerdings habe ich noch nicht verstanden wie genau das funktioniert würdest du dazu mal ein tutorial erstellen wäre super lieb von dir :)
Hi ich habe leider ein kleines Problem am Anfang. Wenn ich ! eingebe um den Standartaufbau einer html zu erstellen habe ich leider keinen Befehl dabei der mir sagt das er für den Internet Explorer kompatibel ist. Kann mir da jemand helfen? Danke im Vorraus
Bei minute 15 und 48 sec.. es ging eig alles bis auf die Farbe von dem Viereck, egal welche Farbe ich hingeschrieben hab es ist immer schwarz geblieben
Check deine Groß- und Kleinschreibung, ob diese wie im Video mit ein stimmt. (ich war gerade bis zu 2 Stunden dran) Hier kannst du dein Code mit meinem Prüfen der geht.
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); draw(); function draw() { ctx.fillStyle = 'black'; ctx.fillRect(10, 20, 20, 20); } function gameloop() { }
Eine kurze Frage: Müsste es nicht bei der Erzeugung der Uniformverteilung auf dem Raster Math.floor(Math.random() * (cols+1)) sein, da wir ansonsten mit Wahrscheinlichkeit 1 nicht die Raster auf der letzten x Koordinate erreichen. Das wir bei dem oben angegebenen Code aus dem Raster rausfallen wird außerdem fast sicher nicht passieren, da Math.random() ja die Realisation einer stetig Gleichverteilten ZV ist. Oder habe ich einen Denkfehler?
kann man das was wir in diesen tutorial hier gelernt haben auch den js bereich irgendwie separieren also aufteilen das man den teil in eine extra datei packt ? sodass man im editor das schön übersichtlicher hat sodass man eine html datei und eine js datei hat irgendwie funktioniert link rel nicht muss ich die irgendwie anders einbinden ?
Habe mal eine Frage habe alles installiert und bei Junus sieht man gleich am Anfang 3 meta Daten. Bei mir sind allerdings nur zwei meta Daten. Schreibe ich die fehlende in das Programm wir mir eine der Meta Daten rot angezeigt. Hoffe mir kann jemand helfen
Hallo, bei mir wird der JS Block im Browser nicht angezeigt. Es gibt auch keine Fehlermeldung. Muss ich etwas extra importieren, damit JS ausgeführt wird?
Hey Junus ich hab mal eine Frage dazu, weshalb es genügt zu coden " if (foodCollected) " und nicht " if (foodCollected = true). Das blicke ich nicht so ganz, muss man nicht festlegen bei welchem Wert der code in der if-Abfrage ausgeführt werden soll? Wenn ich es mit = true versuche dann wächst die Schlange unaufhörlich, obwohl die Variable den Wert doch erst annehmen dürfte, sobald die Schlange das Futter gefressen hat.
@@nurbineich942 Hi, genau mittlerweile hab ich auch verstanden :) Ich habe ja sogar mit dem einzelnen "=" Zeichen die Variable immer auf true gesetzt, es hätte wenn "===" sein müssen
ich komme bis zu dem Punkt " Schleifen und Variablen verknüpfen" mit dann verschwindet mein Food block habe dann nur noch einen Schwarzen canvas und ich versteh nicht ganz warum
Habe mal eine frage ist es schlimm wenn ich die Browser über Microsoft Edge öffne? Habe schon mehrere Tutorials von dir gemacht und auch genau kopiert aber mein Browser ist egal was ich mache immer nur weiß.
cool, ist alles nachvollziehbar. Was mir neu war, dass die Kopie also part.x gleichzeitig das Original snake[i] ändert, aber das scheint in javascript so zu sein (Zuweisung by reference)
Ich hab JS in eine externe Datei ausgelagert, im HTML Dokument den link für JS im Head Bereich Hinzugefügt und ich komm einfach nicht drauf wie ich draw in HTML aufrufe.
bei mir sind die klammern pink bei dem befehl fillRect wenn ich die seite mehrfach aktualisiere passiert nichts,obwohl ich alles genauso wie du hatte Kann mir jmd Helfen??
Super geiles Video, finde ich perfekt für Anfänger. WObei selbst das hier erstmal bisschen überfordernd ist. Allerdings habe ich das Problem, dass die Schlange nach dem Essen stehen bleibt und sich nicht weiter bewegt. Hat wer eine Idee?
kleines problem: ich bin jetzt bei 51:43 und in der letzten zeile bei sagt das programm es braucht da nach eine }. Mache ich die dahin, passiert nichts. Kann mir jemand weiterhelfen?
Bei mir funktioniert alles, allerdings kann ich die Schlange mit den Pfeiltasten einfach nicht bewegen. Ich habe schon stundenlang nach Fehlern gesucht sber keine gefunden. Weiß jemand was das Problem sein könnte?
Finde es super, dass sich jmd dafür Zeit nimmt, anderen Etwas über programmieren zu Zeigen/beizubringen ! Danke!
Hab das Video sehr aufmerksam durchgeguckt und fand es echt super. Bin gerade an einer Fachoberschule mit dem Schwerpunkt Wirtschaftsinformatik. Bei uns ist der Unterricht nicht annähernd so cool und Detailliert. Viele Dank für das Tutorial!
Hab das Video zwar noch nicht zu Ende gesehen aber es ist bisher alles sehr ausführlich und anfängerfreundlich erklärt.
Wieder mal ein super Tutorial. Habe neben deinen Videos nun die ersten 1-2 kleinen Apps selbst geschrieben und mache schöne Fortschritte. Hoffentlich kann ich das bald mal beruflich nutzen. Super Content machst du da!
Noch ein super tolles und leicht verständliches JavaScript Tutorial das richtig Spaß gemacht hat. Vielen Dank dafür!
Herzlichen Glückwunsch zu den 30.000 Abonennten!Finde es toll mal ein Spiel Nur mit JavaScript programmiert zu sehen.Lerne gerade CSS und finde es Interessant, eine andere Art zu Designen mit Canvas/JavaScript zu sehen.
innerhalb von 3 monaten auf 55.400 Abonnenten, das ist krass
Es ist nun das 2. Snake das ich nachprogrammiert habe. Das erste mal war es ganz am Anfang meiner Programmierkarriere von jmd anderem. Nun verstehe ich die Funktionen und alles viel besser. Großes Dankeschön erstmal.
*Echt super video versuche mich auch als Programmierer seit kurzem. Deine videos werden mir gut weiterhelfen das merke ich jetzt schon . Dir viel Erfolg bei allem was du machst 💯🤝💯*
hi. bitte mach mehr solche tutorials. die sind perfekt zum üben. bitte
Ich bin elf und finde Programieren echt spannend und cool du hast mir echt viel mit dem Video geholfen
Kleiner Tipp zur Bewegung der Schlange: Es ist nicht notwendig alle Glieder der Schlange zu verschieben, es ist ausreichend das letzte vor das erste zu setzen (je nach Richtung rechts, links, oben oder unten) - das hat den Vorteil, dass die Schlage nicht "flackert" :)
Könntest du das genauer erklären einmal bitte als Code rein senden wäre nice
@@xlantv5566 Hi, einen Code kann ich Dir leider nicht liefern, aber ich versuch es zu erklären :)
Angenommen Du hast eine Schlange mit 4 Gliedern in der vertikalen (von Links nach Rechts #1, #2, #3, #4), aktuell soll sie sich nach links auf dem Bildschirm bewegen.
Anstatt alle Glieder (also 1, 2, 3, 4) jeweils einzeln nach links zu bewegen, ist es ausreichend das letzte Glied #4 vor Glied #1 zu setzen. Da sie sich nach links bewegt: Y #4 = Y #1 und und X #4 = X #1 - 1.
Die Reihenfolge der Glieder ist dann #4, #1, #2, #3. Und so geht das immer weiter. Nach der ersten Bewegung wäre das letzte Glied #3 -> die neue Reihenfolge nach der Bewegung also #3, #4, #1, #2
Soll sie sich z.B. nach oben bewegen, muss Glied #4 über Glied #1 gesetzt werden (Also X #4 = X #1, Y #4 = Y #1 - 1), in der ersten Bewegung demnach:
#4
#1, #2, #3
Nach der zweiten Bewegung:
#3
#4
#1#2
usw.
Ich hoffe das hilft :)
@@Acprjct Danke für die Ausführliche Erklärung
@@xlantv5566 Wenn man eine klasse erstellt die jedes neue Viereck darstellt und eine Klasse die nur den Kopf darstellt muss man nur den Kopf wandern lassen und die letzte Position des Kopfes festhalten und die neu erstellten Vierecke auf die festgehaltene Position wandern lassen. Quasi rennen die Vierecke dem Kopf dann hinterher. Habe das Game mit C# und dem Framework Win Forms programmiert, gar nicht so einfach finde ich.
@@karsaorlong4510 wie erstellt man klassen und id's im script bereich (z.B. id für das essen/schlange um in style das dann zu bearbeiten)?
Sowas erinnert mich immer an mein erstes Snake programmieren, etwa 20 Jahre her, damals in der Ausbildung im Wohnheim abends, mit dem damals schon 20 Jahre alten Turbo Pascal.
Es hat zwar 2 Tage grübeln und probieren gebraucht, aber dann konnte die Schlange wenden und am Rand war game over. War noch ohne Apfel, ohne Wachsen und ohne Selbstkollision, aber ich war stolz wie blöde dass nicht nur das Spiel in Textzeichen war, sondern auch der Quelltext auf eine Bildschirmseite passte, und davon hatten wir abzüglich Menüs weniger als 20. Und das selbst hingekriegt mit RTFM, ohne Internet.
Ich finde das Tutorial einfach genial! Alles funktioniert wie erwartet. Ich habe sehr viel gelernt! Danke!
Hat super geklappt. Danke für das Tutorial. Ich versuch jetzt mal "meine Version" mit Grafiken zu erstellen. bleib gesund und Abo ist da! 🍀
Danke das du wieder was über JS gemacht hast
Gerne 😊
Weiter so! Bitte mehr solche Videos mit ausführlichen Kommentaren und Erklärungen, da ich mich persönlich mit der Logik noch sehr schwer tuhe
Ach ja, und den Code bitte veröffentlichen wenn es geht
Ich fange gerade erst an zu Coden und es macht süchtig. Besonders wenn man nur nachmachen muss was du vormachst. Ich denke aber der Spaß vergeht mir SPÄTESTENS wenn ich etwas selber planen muss oder entwickeln, habe keine Ahnung von allem 😀
LG Techworld Noob 🕹⚖💡🌎
Ich liebe deine Videos, neues Hobby, danke ❤️
ich schreibe diesen kommentar für deine zukünftigen videos: ich empfehle dir für javascript und style extra fenster machst und mit und diese in html bindest. Nur so als tipp
Oha darauf habe ich gewartet wie nice
Danke für dieses Video es hat mir meha viel beigebracht mach bitte weiter so
Na, hat ja gut geklappt - mit dem Tutorial - das ganze müsste ich dann nochmal austesten ob ich es ohne Tutorial hinbekomme, das der durch die Wand läuft :) - also nicht schlecht - schönes Format - hab mal Abonniert. Man weiß ja nie wo es einem hin verschlägt, wenn Lokführer aufgrund von gesundheitlichen Gründen nicht mehr möglich ist. Spaß haben mir ja auch schon Excel Tabellen gemacht zu basteln - oder "einfache" Webseiten mit HTML und CSS - in PHP bin ich nie so leicht rein gekommen - da hatte ich schon ein wenig Hilfe von außen. Also mich interessiert das Thema auf jeden Fall.
Was einem auffällt - das man manchmal echt nicht mit bekommt, wo man Schreibfehler begeht und guckt immer mal wieder drüber weg. Das man dann irgendwie nicht mehr so leicht durchblickt. Wenn man sich aber nochmal alles genau anguckt, und auch vergleicht - bzw mit den englischen Wörtern nochmal überdenkt, kann man die Fehler aber durchaus erkennen.
Auf jeden Fall besten Dank für die Einblicke in Javascript. Bisher hatte ich das noch nicht so auf dem Schirm gehabt.
Sehr gutes Video, hoffentlich bald mehr davon!
Vielen Dank fuer dieses tolle Video. Du machst eine super gute Arbeit. Respekt!!
Direkt ausprobiert! super tutorial mit guter Erklärung, vielen Dank!!
Sehr gut erklärt
Ich glaub bald ist Pong an der Reihe
beim 3. versuch läuft jetzt endlich alles :) ich bin auch von selbst drauf gekommen, wie ich unterbinden kann, das die Schlange die Richtung in sich selbst hinein ändern kann ^^ jetzt möchte ich noch variablen Speed einstellbar machen, und Punkte vergeben (je nach dem Speed, umso schneller desto mehr Punkte gibts pro Futter) ^^ bin gespannt ob ich das so hinbekomme :)
Bin gerade noch dabei es fertig zu erstellen, die Random funktion beim Futter funktioniert noch nicht so ganz bei mir. Das gelbe Quadrat verschwindet dann immer komplett. Aber Heute Abend auf ein neues.
Random Futter funktioniert jetzt, morgen wieder ein Stück weiter (Y).
Super Video und sehr leicht verständlich erklärt - TOP. Kannst du das bitte auch mal mit Python machen?
Deine Videos sind echt geil erklärt.
Ich wünschte, ich wäre jünger und mein altes Basic würde mir nicht immer mit IF>THEN dazwischen funken und mich erinnern. 😉
Vermisse dann immer das THEN kommen muss.
Jg nah zzzhn
hallo, erst mal vielen Dank für die tollen Videos die du bereit stellst. Würde das ganze auch rekursiv funktionieren?
Super gutes Video vielen dank!
Woran erkenne ich was wo hin muss und wann ich eine Neue Funktion erstellen muss? Danke übrigens für das Video Feier dein Content sehr
Mega gutes Video. Die Erklärung sind top. Hab aber aufgrund von blöden Fehlern (von mir verursacht) bisschen länger gebraucht
Selbstverständlich erklärt. Sehr gut
Bin gerade am Anfang soll ich bei totorials KI mitbenuzten?
Hallo,
kann mir bitte jemand sagen wie die Erweiterung heißt die Junus verwendet zur automatischen Formatierung?
MfG
hat mir echt geholfen danke
Hallo. Hat es eigentlich einen Vorteil wenn man Spiele mit Unity und Javascript programmiert oder ist es gleich aufwendig wie das hier?
Hey, super toller code. Wie kann ich die geschwindigkeit der schlange erhöhen, wenn sie ein neues level erreicht? ist ne dringende frage
habe nen problem das weill nicht mit chrome machen die ganze zeile um compatible zu sein fehlt habe ich dan selber 1zu1 genau gleich geschrieben jezt ist das meta fon der nächsten zeile rot und es funksioniert immer noch nicht fieleich habe ich was beim download falsch gemacht oder so ich weiß nicht wo dran es liegen könte
Vielen dank für deine Mühe,
Kannst du uns bitte ein Video machen,
wie man einen Online-Shop aufbaut , verschlüsselt und veröffentlicht?
.
danke für das tolle Video !!
hat echt spaß gemacht das Nach zu Programmieren,
gerade das mit der ForEach schleife kannte ich nicht, hab ich immer mit for(i) gelöst
eigener Zusatz und Fixes:
Wand durch laufen wie im Video erwähnt,
in sich selbst laufen in der Key-Down funktion mit != entgegenderrichtung gefixt
noch WASD hinzugefügt die KEYs dafür online nachgeschaut, (W => 68, A => 87, S => 83, D => 65)
dann sollte das Futter natürlich auch nicht in einen spawnen
ein scoreboard an der seite, welche mir die länge, und die spielfeldgröße anzeigt
dem kopf ne farbe gegeben
und beim essen nicht den kopf dupliziert sondern das letze element
Wie hast du das gemacht, dass der Kopf eine andere Farbe hat?
@@eliasblankenburg1497 das hab ich in der draw() funktion geändert. erst die zeichenfarbe geändert dann die 0 position mit der funltion add(snake[0].x, snake[0].y) gemalt, die gestliche schlange in eine variable gespeichert mit slice(1) dann wieder farbe auf weiß gestellt und variable.foreach und done.
sorry bin schlecht im erklären, vorallem wenn ich nach monaten in den code wieder rein gucken muss xD
HIER die umgeschriebene funktion:
function draw() {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//Hier wird die schlange gemalt.
ctx.fillStyle = "lime"
add(snake[0].x, snake[0].y)
restlicheschlange = snake.slice(1)
ctx.fillStyle = 'white';
restlicheschlange.forEach(part => add(part.x, part.y));
ctx.fillStyle = 'yellow';
add(food.x, food.y); // Food
requestAnimationFrame(draw);
}
Wie hast du es hinbekommen, dass das Futter nicht in der Schlange spawnt?
Hey ich hätte mal eine Frage.. und zwar könntest du mal ein Tutorial machen wie man Doodle Jump selber machen kann ? Würde mich darüber sehr freuen. :)
Super Video, hat alles super geklappt! Schön wäre, wenn Du mal zeigen könntest, wie man Javascript anstatt mit PHP eine Datenbank (z.B. MySQL) anspricht! 👃
Hallo, bei mir ist das Problem das ich nur das schwarze spielfeld machen kann und danach klapt nichts mehr. Ich kann nicht die Schlange nicht "einprogrammieren" und auch nicht die Schwarze Farbe des Speilfeldes wechseln. Könnest du mir erklären worin das Problem liegt
Ist es auch möglich in der gameLoop Funktion einfach die draw Funktion aufzurufen oder wird das Bild dann übereinander gelegt?
bei ctx.fillRect(10, 20, 20, 20); sind die klammern Rosarot und so einen Schwarzen block sehe ich auch nicht. Danke für jede Hilfe im voraus
Bei mir auch. Hast du das Problem bereits gelöst?
Check deine Groß- und Kleinschreibung, ob diese wie im Video mit ein stimmt. (ich war gerade bis zu 2 Stunden dran um nur zu sehen, dass ich draw(); mit einem großen D geschrieben habe, danach ging es.)
Hier kannst du dein Code mit meinem Prüfen der geht.
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
draw();
function draw() {
ctx.fillStyle = 'black';
ctx.fillRect(10, 20, 20, 20);
}
function gameloop() {
}
36:54 warum speichert sein CodeEditor das so einfach und meiner nicht????
😢😢
Bitte Antwort ich möchte das auch haben.
Bei mir werden einzelne Anführungszeichen bei speichern automatisch in Doppelte umgewandelt! Wie kann ich das ändern?
Danke für die tolle Erklärung.
Mich würde es noch interessieren, wie man das zum Beispiel mit einem User/Highscore verbindet, der in einem Backend (auf JS oder Python Basis) gespeichert wird.
Danke
Danke für das Video.
Zu 1:06:00 - 1:14:20 habe ich eine Frage. Würde es nicht reichen dem letzten Teil die Koordinaten von snake[0] zu geben? Dann müssten nicht alle Teile aufrutschen…
würdest du (ihr) empfehlen, spiele auf websiten in einem canvas zu machen, oder anderweitig?
Hi zusammen, vorab danke für das tolle Video :) kann mir einer sagen wie das Programm automatisch eine Formation durch speicher auslöst und wo man dies einstellen muss :) danke
bei mir ändert sich nicht die RIchtung der Schlange wenn ich auf die Tastur drücke
ist 1:1 zu dem was du geschrieben hast
Snake
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let rows = 20;
let cols = 20;
let snake= [ {
x: 19,
y:3
}];
let food = {
x:4,
y:5
};
let cellWidth = canvas.width/ cols;
let cellHeight = canvas.height/ rows;
let direction = 'LEFT';
setInterval(gameloop,1000);
document.addEventListener('keyDown', keyDown);
draw();
function draw() {
ctx.fillStyle='black';
ctx.fillRect(0, 0, canvas.width,canvas.height);
ctx.fillStyle= 'white';
snake.forEach(part => add(part.x, part.y));
ctx.fillStyle= 'red';
add(food.x,food.y);
requestAnimationFrame(draw);
}
function add(x,y) {
ctx.fillRect(x *cellWidth , y* cellHeight, cellWidth-1,cellHeight-1);
}
function gameloop(){
if (direction == 'LEFT'){
snake[0].x--;
}
if (direction == 'RIGHT'){
snake[0].x++;
}
if (direction == 'UP'){
snake[0].y--;
}
if (direction =='DOWN'){
snake[0].y++;
}
}
function keyDown(e){
if (e.keyDown == 37){
direction = 'LEFT';
}
if (e.keyDown == 38){
direction = 'UP';
}
if (e.keyDown == 39){
direction = 'RIGHT';
}
if (e.keyDown == 40){
direction = 'DOWN';
}
}
Ich weiß ich bin spät dran aber habe es erst jetzt gesehen. Du hast den gleichen Fehler wie ich gemacht.
document.addEventListener('keyDown', keyDown);
das erste keyDown müsste keydown heißen. Echt krass was groß und kleinschreibung ausmachen kann :D
Außerdem weiß ich nicht ob es an RUclips liegt oder dein Code so ist, aber es fehlen sehr viele Leertasten. Ich weiß nicht ob es einen unterschied macht aber wäre auf jeden Fall um einiges "ordentlicher" mit den Leertasten
welche extensions hast du installiert
Hallo Leute. Eure Tutorials sind sehr interessant und auch gut erklärt. Leider komme ich ab den Part Keylistener nicht mehr weiter. Werden die Keycodes vorgegeben oder definiert man die selber?
Ich habe alles so geschrieben wie im Tutorial erklärt und der Code sieht genauso aus, nur reagiert die Schlange im Spiel nicht auf die Pfeiltasteneingabe und läuft stur weiter nach links.
schau einfach mal im verlinkten Code nach, ob du was anders gemacht hast. Vergleiche den Code mit deinem eigenen
@@Programmierenlernen vielen Dank für eure Antwort. Ich hab es mir nochmal genau angeschaut und denn Fehler gefunden. Schon erstaunlich was ein (e.keycode) und ein (e.keyCode) für einen Unterschied ausmachen. Und wenn VSCode das nicht als Fehler sieht und man es selber nicht weiß kann man lange danach suchen. Nochmals vielen Dank für die Hilfe.
kannst du mal zu dem RPG wovon du mal gesprochen hast ein Tutorial machen oder zu dem Pokedex den du gemeinsam mit Kevin gemacht hast ? Wäre echt cool. Finde du erklärst das ganze echt cool :)
da stand zwar 60 minuten ich habe mit kleinen pausen 6 stunden gebraucht aber hat spaß gemacht
Ich kann irgendwie nicht die Farbe von der Schlange anpassen. Egal welche Variabel ich dem ctx.fillstyle gebe, es wird immer nur als Schwarz angezeigt. Kennt jemand das Problem und kann helfen?
Ich habe die JSON in meine Datenbank persistiert. Jetzt kann man snake speichern :D
hallo bei min 22:00 kann ich bei ctx.fillRect = `white ` ;
nicht so ein weißen block erstellen die Farben wollen sich generell bei mir nicht ändern kann mir vlt wer helfen bin ziemlich neu hier
bei mir leider auch nicht. hast du eine Lösung gefunden?
Bei mir funktionieren die Farben auch nicht. Es bleibt einfach nur ein schwarzer Block auf der Webseite. Gibt es schon Lösungen?
Ich weiß nicht, ob es was hilft, aber ich hatte dann einfach noch einmal komplett von vorne angefangen und plötzlich funktionierte es.
@@vl0ppyd1sk Habe meinen Fehler gefunden.
Habe bei ctx.fillStyle, das S klein geschrieben anstatt groß.
Nachdem hat alles reibungslos funktioniert.
Aber trotzdem, Danke. 😁
@@norbertg.2021 Ah vielleicht war es bei mir ja auch nur ein Tippfehler, den ich beim zweiten Versuch nicht gemacht habe 😄
hey, ich bin gerade dabei es nach zu programmieren. Mir ist aber irgendwo ein Fehler passiert, den ich nicht finde. und zwar hätte ich jetzt eigentlich die Schlange und ihr Essen, das wird aber auf dem schwarzen Feld nicht angezeigt. Ich sehe nur das schwarze Feld, nix anderes. Ich brauche bitte Hilfe.
Du kannst gut erklären
Sorry aber irgendwie bist du süß und sympathisch und ich mag deine Videos
Super Video hat mir sehr viel Spaß gemacht! Mein einziges Problem ist dass meine Schlange nicht länger wird und nach dem ersten Einsammeln vom Futter ist es vorbei hat jemand eine Idee was ich falsch gemacht/vergessen hab
Danke für dieses Tutorial :) Darf ich fragen wie man in Spielen objekte rotieren lassen kann z.b. bei jump and run games um auf objekte nach timing zu springen ich habe gelesen das es irgendwie mit canvas geht allerdings habe ich noch nicht verstanden wie genau das funktioniert würdest du dazu mal ein tutorial erstellen wäre super lieb von dir :)
Hi ich habe leider ein kleines Problem am Anfang. Wenn ich ! eingebe um den Standartaufbau einer html zu erstellen habe ich leider keinen Befehl dabei der mir sagt das er für den Internet Explorer kompatibel ist. Kann mir da jemand helfen?
Danke im Vorraus
Teilweise wirklich heftig nachzucoden
Der Hammer 🤩
Bei minute 15 und 48 sec.. es ging eig alles bis auf die Farbe von dem Viereck, egal welche Farbe ich hingeschrieben hab es ist immer schwarz geblieben
Hey hat sich dein Problem gelöst irgendwie weil habe das gleiche
Check deine Groß- und Kleinschreibung, ob diese wie im Video mit ein stimmt. (ich war gerade bis zu 2 Stunden dran)
Hier kannst du dein Code mit meinem Prüfen der geht.
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
draw();
function draw() {
ctx.fillStyle = 'black';
ctx.fillRect(10, 20, 20, 20);
}
function gameloop() {
}
Eine kurze Frage: Müsste es nicht bei der Erzeugung der Uniformverteilung auf dem Raster Math.floor(Math.random() * (cols+1)) sein, da wir ansonsten mit Wahrscheinlichkeit 1 nicht die Raster auf der letzten x Koordinate erreichen. Das wir bei dem oben angegebenen Code aus dem Raster rausfallen wird außerdem fast sicher nicht passieren, da Math.random() ja die Realisation einer stetig Gleichverteilten ZV ist. Oder habe ich einen Denkfehler?
kann man das was wir in diesen tutorial hier gelernt haben auch den js bereich irgendwie separieren also aufteilen das man den teil in eine extra datei packt ? sodass man im editor das schön übersichtlicher hat sodass man eine html datei und eine js datei hat irgendwie funktioniert link rel nicht muss ich die irgendwie anders einbinden ?
ja, geht. Probiere es mal aus
@@doradedorian6984 Danke
Nettes Tutorial, allerdings stoß ich mich am keyCode-Teil. Ich würd' da die key-Property auswerten, weil plattformneutral.
Habe mal eine Frage habe alles installiert und bei Junus sieht man gleich am Anfang 3 meta Daten.
Bei mir sind allerdings nur zwei meta Daten.
Schreibe ich die fehlende in das Programm wir mir eine der Meta Daten rot angezeigt.
Hoffe mir kann jemand helfen
Hallo, bei mir wird der JS Block im Browser nicht angezeigt. Es gibt auch keine Fehlermeldung. Muss ich etwas extra importieren, damit JS ausgeführt wird?
Welcher Block der Gelbe bzw das Futter?
hätte es gerne weitergemacht, bei mir funktioniert aber ctx.fillStyle nicht( egal ob groß oder klein) und das gleiche mit ctx.fillRect.
hey, ich habe das selbe problem. Weiß jemand woran das liegt?
Hey Junus ich hab mal eine Frage dazu, weshalb es genügt zu coden " if (foodCollected) " und nicht " if (foodCollected = true). Das blicke ich nicht so ganz, muss man nicht festlegen bei welchem Wert der code in der if-Abfrage ausgeführt werden soll? Wenn ich es mit = true versuche dann wächst die Schlange unaufhörlich, obwohl die Variable den Wert doch erst annehmen dürfte, sobald die Schlange das Futter gefressen hat.
Eine if-Anweisung funktioniert immer so: wenn die Bedingung in der Klammer wahr ist - dann wird der Code ausgeführt.
@@nurbineich942 Hi, genau mittlerweile hab ich auch verstanden :) Ich habe ja sogar mit dem einzelnen "=" Zeichen die Variable immer auf true gesetzt, es hätte wenn "===" sein müssen
Hallo. Ich fange grade an zu programmieren und kann schon HTML CSS und Js und fange jetzt mit Csharp an ist das schlau?
LG jonas
wenn du richtig gut in JS bist, ja
@@Programmierenlernen Danke
ich komme bis zu dem Punkt " Schleifen und Variablen verknüpfen" mit dann verschwindet mein Food block
habe dann nur noch einen Schwarzen canvas und ich versteh nicht ganz warum
Hi bei mir funkzuniert das mit den ausrufe zeichen nicht wieso nicht ?
same
Habt ihr denn vorher eine index.html Datei erstellt?
Wäre cool wenn du das auch für Python machen würdest oder generell mehr spiele Tutorials machen würdest
Habe mal eine frage ist es schlimm wenn ich die Browser über Microsoft Edge öffne? Habe schon mehrere Tutorials von dir gemacht und auch genau kopiert aber mein Browser ist egal was ich mache immer nur weiß.
Nein, es sollte eigentlich kein problem sein.
cool, ist alles nachvollziehbar. Was mir neu war, dass die Kopie also part.x gleichzeitig das Original snake[i] ändert, aber das scheint in javascript so zu sein (Zuweisung by reference)
Dieses fillstyle funktioniert nicht bei mir es ändert nicht die Farbe und somit taucht da auch kein schwarzes Rechteck auf ?
Ich hab JS in eine externe Datei ausgelagert, im HTML Dokument den link für JS im Head Bereich Hinzugefügt und ich komm einfach nicht drauf wie ich draw in HTML aufrufe.
Warum ändert sich die farbe bei mir nicht oder es erscheinen keine weißen Quadrate?
Hallo ich bin 13 und finde euren Kannal sehr cool.Könntet ihr vielleicht zeigen wie man levels in einen Spiel macht.
wenn die schlange bei mir hinter dem schwarzem raster ist verschwindet sie einfach, was kann ich tun?
Bei 36:57 speicherst du und sagst dein Editor verändert das fur bessere Übersicht.
Passiert bei mir einfach nicht ... Warum?
Top tutorial :)
Ich haba alle codes sauber abgeschrieben aber die pfeiltasten funktionieren trotzdem nicht was kann ich tun?
bei mir sind die klammern pink bei dem befehl fillRect wenn ich die seite mehrfach aktualisiere passiert nichts,obwohl ich alles genauso wie du hatte
Kann mir jmd Helfen??
Ich danke Ihnen Viel mals
Super geiles Video, finde ich perfekt für Anfänger. WObei selbst das hier erstmal bisschen überfordernd ist. Allerdings habe ich das Problem, dass die Schlange nach dem Essen stehen bleibt und sich nicht weiter bewegt. Hat wer eine Idee?
2h arbeit, gebe jetzt auf komme nicht weiter
kleines problem: ich bin jetzt bei 51:43 und in der letzten zeile bei sagt das programm es braucht da nach eine }. Mache ich die dahin, passiert nichts. Kann mir jemand weiterhelfen?
Wie heißt die Erweiterung in VSC das sich alles so schön einrückt wie bei dir ?
Prettier - Code Format
In deiner settings-datei dann einfach "editor.formatOnSave": true hinzufügen.
bei mir geht alles nur in schwarz, bräuchte schnell hilfe... bei ca. 23:00 ! ich kann keine farben machen
Same Großes S bei Style
Bei mir funktioniert alles, allerdings kann ich die Schlange mit den Pfeiltasten einfach nicht bewegen. Ich habe schon stundenlang nach Fehlern gesucht sber keine gefunden. Weiß jemand was das Problem sein könnte?