JavaScript Tutorial | SNAKE Programmieren in 60 Minuten

Back end — 21/10/2022 · 30 Comments



Kostenloses Beratungsgespräch: https://weiterbildung.developerakademie.com/y

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?

Spiel spielen: https://junusergin.github.io/snake-tutorial/index.html
Code auf GitHub: https://github.com/JunusErgin/snake-tutorial
Instagram: https://www.instagram.com/junus.ergin/ (Junus Ergin)
Tiktok: https://www.tiktok.com/@herr_programmierer (Herr Programmierer)

_____ Ü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.
Informiere dich auf https://weiterbildung.developerakademie.com/y

30 Comments

  1. Erst mal vielen Dank für das Video! Leider wird meine Snake nach einsammeln des Foods nicht größer und der neue Teil von meiner Snake bleibt liegen. Ich finde keine Fehler (habe in deinen Code geschaut) und weiß nicht mehr weiter

  4. 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.

  5. wirkcl8ich cool1!1111!!!111111111111!!!!!!!!!!!1 🥶🥶🥶🥶🥶🥶🥶🥶🥶🥶👌👌👌👌👌👌👌👌

  7. Hi Junus ich hab da mal eine Frage und zwar verschwindet bei mir alles in Chrome sobald ich in meine add-Funktion cellWidth und cellHeight eintrage. Ist ungefähr bei 39:28 im Video, hab schon geschaut ob ich irgendetwas anders geschrieben hab beim definieren der Variablen aber da sieht auch alles gut aus. Würde mich über Hilfe sehr freuen 🙂

  11. 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??

  16. Ich überlege, wie ich bei placefood() verhindere, dass das "food" in der Schlange platziert wird. Es wäre toll wenn jemand etwas mehr weiß und mir ein paar tipps geben kann. Vielen Dank 🙂

  19. Das ist bei mir jetzt schon das dritte mal bei euren Videos passiert, ich mache es genauso wie im Video beschrieben, habe die Programme die am Anfang gesagt wurden, aber bei mir verschwindet ab dem Kapitel Arrays und JSON bei der index.html Wiedergabe bei Chrome einfach komplett alles. Das gleiche hatte ich auch bei einem anderen Video von euch mit der To Do Liste erstellen..
    Was mache ich falsch?? Ich hoffe das dass hier noch gelesen und kommentiert wird, weil langsam verzweifle ich…
    Muss noch dazu sagen, habe Windows 11, könnte das ein Problem sein?
    Er sagt mir Cannot redeclare block-scoped variable '(Missing)'. Javascript..
    Nochmal, ich habe es genauso geschrieben wie im Video und habe es jetzt schon bestimmt 10 mal kontrolliert

  21. Traurigerweise sitze ich jetzt schon seit Tagen an diesem "60 Minuten" Programm. Ich lerne aber ständig was neues durch die Fehler die entstehen und konnte bisher alles selbst fixen. Jetzt hänge ich jedoch komplett fest. Ich habe alles wie beschrieben gemacht aber sobald meine Schlange food frisst wird sie nicht länger sondern das gegessene Food wird zu einen Schlangen viereck aber bleibt einfach an der eingesammelten Stelle anstatt an meiner snake. Ich habe den Code von github angeschaut und alles genau so geschrieben wie du. Verstehe es einfach nicht…

  22. Ist es auch möglich in der gameLoop Funktion einfach die draw Funktion aufzurufen oder wird das Bild dann übereinander gelegt?

  23. 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.

  24. Hab es auch soweit hinbekommen 🙂 nur der letzte Schritt geht bei mir nicht

    let firstPart = snake[0];

    let otherParts = snake.slice(1);

    let duplicatePart = otherParts.find(part => part.x == firstPart.x && part.y == firstPart.y);

    findet jemand ein Fehler? Ich habe die Zeile schon 10 mal neu geschrieben aber Sie hat bei mir keine Funktion oder Auswirkungen. Ich habe auch das duplicatePart bei IF mit hinzugefügt.

  25. Das alles kennt man irgendwann auswendig ? Kann ich mir wirklich noch nicht vorstellen 🙂 aber am Tutorial liegt es nicht die sind alle sehr gut.

  27. Hallo. Hat es eigentlich einen Vorteil wenn man Spiele mit Unity und Javascript programmiert oder ist es gleich aufwendig wie das hier?

  30. Ich finde es richtig toll wie du es immer Erklärst! Könntest du noch einen zweiten teil machen in dem du erklärst wie man die einzusammelnden Punkte in unterschiedliche Farben macht?

Leave a Reply

© 2023 53GB