JavaScript Tutorial | SNAKE Programmieren in 60 Minuten

In diesem JavaScript Tutorial lernst du das Spiel "Snake" zu programmieren. Hierbei werden dir grundlegende Konzepte aus der Programmierung einfach und verständlich erklärt. Dieses Video ist somit auch für komplette Anfänger geeignet.

00:00 | Einleitung
00:37 | Installation
01:32 | Grundaufbau (Theorie)
03:01 | Projekt anlegen
06:31 | Canvas
07:34 | Canvas - Rechteck malen
10:50 | Canvas - Zugriff per JavaScript
16:11 | Spielfeld
23:25 | Funktionen
29:00 | Variablen
34:23 | Arrays und JSON
37:50 | Schleifen - Variablen verknüpfen
43:31 | Gameloop
47:12 | Keylistener
53:39 | Futter platzieren
58:18 | Profi-Tipp
58:41 | Futter einsammeln
01:05:54 | Schlange updaten
01:16:11 | Spiel beenden
01:22:15 | Testen + Ausblick
01:24:10 | Wie geht es weiter?

Partnerunternehmen bieten wir direkten und nachhaltigen Zugang zu unseren hochqualifizierten Absolventen.

_____ Ü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 - 6 Monaten einen gut bezahlten Job zu finden. Dafür musst du NICHT nur programmieren mit Online-Tutorials 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 für deinen Lebenslauf.
Am Ende erstellen wir mit dir einen perfekten Lebenslauf und unterstützen dich bei deiner Bewerbung.

[Bridgeforluck]

Finde es super, dass sich jmd dafür Zeit nimmt, anderen Etwas über programmieren zu Zeigen/beizubringen ! Danke!

[daniilchiltj]

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!

[duaniel_the_guitardude]

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!

[backstein]

Hab das Video zwar noch nicht zu Ende gesehen aber es ist bisher alles sehr ausführlich und anfängerfreundlich erklärt.

[iotapunks]

Noch ein super tolles und leicht verständliches JavaScript Tutorial das richtig Spaß gemacht hat. Vielen Dank dafür!

[JuliusGre]

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.

[upzdloz]

Ich bin elf und finde Programieren echt spannend und cool du hast mir echt viel mit dem Video geholfen

[kallyptrav]

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.

[projektschlumpf]

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" :)

[IdiKing]

hi. bitte mach mehr solche tutorials. die sind perfekt zum üben. bitte

[robinschanbacher]

Ich finde das Tutorial einfach genial! Alles funktioniert wie erwartet. Ich habe sehr viel gelernt! Danke!

[SamkrusoD]

Hat super geklappt. Danke für das Tutorial. Ich versuch jetzt mal "meine Version" mit Grafiken zu erstellen. bleib gesund und Abo ist da! 🍀

[FunIsGoingOn]

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.

[richardesponja]

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

[ApolloScripts]

Danke das du wieder was über JS gemacht hast <3

[TechworldNoob-cbfb]

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 🕹⚖💡🌎

[myoyster]

Vielen Dank fuer dieses tolle Video. Du machst eine super gute Arbeit. Respekt!!

[IdiKing]

ich schreibe diesen kommentar für deine zukünftigen videos: ich empfehle dir für javascript und style extra fenster machst und mit <link> und <script> diese in html bindest. Nur so als tipp

[tetelp]

Sehr gutes Video, hoffentlich bald mehr davon!

[MiaConnect]

Direkt ausprobiert! super tutorial mit guter Erklärung, vielen Dank!!