wäre vielleicht für andere noch die kurze info zu geben gewesen, das emmet installiert sein sollte wenn man das mit dem Autovervollständigen will. Ich kannte zwar in erster Linie nur Intellisence über VS, aber das lief nicht unter VSC zumindest nicht bei mir. Habs jetzt aber mit emmet hinbekommen.
Das ist das erste mal dass ich einem Tutorial oder einem Lehrer folgen kann. Wow... ich hoffe du bringst mehr Videos zu java Script raus , das ist wirklich der Hammer! Großes Kompliment 🙏🏼👌🏼
Ziemlich interessant. Hab mir mal trotz gute Kenntnisse in JS das Video mal angeschaut. Anschließend lese ich in Kommentaren oft sowas wie "sehr gutes Javascript-Tutorial" und stelle fest "Hm, irgendwie ist das kein richtiges JS-Tutorial.". Denn insgesamt zeigt dieses Video nur, wie man möglicherweise eine Anwendung schreibt, ohne dabei großartig Grundlagen des Javascripts zu benennen. Natürlich lernt man auf diesem Weg am schnellsten. Denn ich habe selbst z.B. PHP fast ausschließlich nur über Videos gelernt "Wie schreibt man ein CMS via PHP?". Dabei habe ich alle wichtigen Details zur der Programmiersprache erfasst und konnte es auch für mich nutzen.
Hey. Ich arbeite gerade an einem Projekt für die Ausbildung. Dieses Video hat gerade gefühlt meine Welt verändert. Ich danke dir so sehr. Super easy erklärt und veranschaulicht. Besser hätte es wirklich kaum noch einer erklären können. Bitte mache gerne mehr davon.
@@Programmierenlernen Kann mir jemand erklären warum trotz der Veränderung des Codes in vs code die Seite trotz neuladen immer gleich bleibt? Also so Ding wie Überschrift usw. Werden einfach nicht hinzugefügt.
Ich kann mir keine Art und Weise vorstellen, wie man einem Beginner ein derart komplexes System noch effektiver nahebringen könnte. Und das in 90 Minuten. Du bewegst dich wirklich in der Königsklasse, mein Lieber.
Ich habe Junus und die Developer Akademie bereits kennengelernt. Und ich kann es einfach wärmstens weiterempfehlen.Niemand kann Code und Programmieren im praktischen Sinne so gut erklären wie Junus ! Einfach Hammer dieser Typ. LG Raphael aus Kärnten
Du bist der Beste Yunus. Dein Kopf funktioniert wie die Programmiersprachen an sich, ich glaube deshalb können die Leute dir so gut folgen. Kleinschrittig ist die beste Lehrmethode.
Aber im VSCode immer schön STRG S betätigen sonst funktioniert gar nichts. Ich hab mir schon mehrmals den Kopf zerbrochen warum etwas nicht funktioniert und hab dann nach ner viertel Stunde bemerkt, das ich nicht gespeichert hab. :)
Guten Tag! Also mein Interesse am Programmieren ist schon sehr lange da und ich dachte mir nun das ich mit diesen Tutorials starte. Es war ein verdammt guter Einblick und ich werde auf jeden fall dran bleiben und mich durch die ganze Serie kämpfen. Jedoch bin ich am ersten Code schon verzweifelt, an der To do Liste. Der Kommentar Von Programmieren lernen angepinnt Programmieren lernen vor 6 Monaten Nachtrag zu 27:40 Statt bitte Hat mir das gerade gerettet. Es hat mich eine halbe Stunde gekostet da ich selbst in meinem Code einen Fehler gesucht habe. Klasse Videos! Weiter so!
@@dreamdancer8212hey, hast du evtl. das damals schon lösen können. Hab genau das selbe Problem. Hab auch den Nachtrag angepasst. Gestern ging noch alles und jetzt einen Tag später, als ich es mir erneut angeschaut habe, blitzt es nur kurz auf und verschwindet. Ich weis auch nicht wie genau ich danach googeln soll 🙈
Moin, ich bin egtl. Java Dev aber habe lust am Webdesign bekommen. Ich hab mir das Tutorial komplett reingezogen und muss ehrlich sagen nach dem hab ich geschmunzelt und fands mega cool. Ich hab dann noch nen bisschen eigenes ausprobiert. Vielen Dank für dieses Tolle Tutorial!!! Ihr macht sehr gute Erklärvideos! Weiter So!
Sehr lehrreiches Video, ich kenne mich schon etwas mit JS aus, da ich in die HTL gehe und dieses Video hat mir sehr viel weitergeholfen, JS besser zu verstehen.👍 Bitte mach weiter solche Tutorials.
Hi Junus. Ich bin 13 Jahre alt und freue mich mega das so ein sympathischer und guter Kanal wie deiner existiert. Ich hoffe ich werde wenn ich erwachsen bin einen Job als Softwareentwickler in New York bekomme. Danke das du mir mein Ziel erleichterst. Lg.
@@user-yu1ktJa krass, so früh weißt du schon was du machen möchtest und kümmerst dich schon jetzt um die skills, kannst gerne wenn du das siehst schreiben wie der Plan bisher läuft, das ist echt spannend! LG Levin
Seit meinen Basic-Programmen damals auf dem C64 mein erster Versuch, mich dem Thema coden erneut zu nähern. Es hat super Spaß gemacht und erstaunlich gut funktioniert. Vielen Dank ;))
Super Video. Ich habe mit Visual Basic mal angefangen und wollte mich an eine richtige Programmiersprache wagen, dafür ist dein Tutorital super geeignet. Sehr Einsteigerfreundlich mit Anleitung für die Software an sich + Erklärungen zum "warum" (z.B. warum wird das neue File "index.html" genannt?). Gerne mehr in von JAVA Script.
Finde das Video wie alle anderen wirklich toll und einfach erklärt. Das Coden macht mir sehr viel Spaß, so dass ich mir eine berufliche Weiterentwicklung vorstellen kann.
Hinweis: Wegen eines Updates von VSCode, geht der "!"-Zeichen-Shortcut nicht mehr so leicht zu bedienen. Ich habe ich für euch extra nochmal ein Video aufgenommen in dem ich erkläre, wie es auf jeden Fall klappt: www.loom.com/share/3787bc8f92af4e0d9e23c5afdc91ef85
Mein Gott... ich hab als blutiger Anfänger 4 Stunden damit verbracht über Google herauszufinden wie man diesen Tooltip aktiviert, weil es bei mir nicht wie in deinem Video war. Und erst jetzt hab ich diesen Kommentar gefunden -.-
Vielen Dank für das sehr lehrreiche Video! Ich habe nun bisher nur 2 mal die Todoliste "nachgemacht" und werde es auch öfter tun, um grundsätzlich mal in den Flow zu kommen und das Verständnis mit der Logik dahinter zu verbinden. Die Erklärungen sind sehr verständlich und nachzuvollziehen. Der Nachtrag zu 27:40 war auch für mich erst beim 2.mal ersichtlich, aber wichtig. Nun funktioniert es einwandfrei. Bisher habe ich selbständig im Code nur, unter "function" das "checked" geändert, dass wenn man eine Todo eingibt, diese nicht direkt abgehakt ist. Dafür habe ich einfach statt "checked" - "notchecked" eingegeben und es funktioniert. Also man lernt in sehr kleinen Schritten. Meinen Abo hast du und bitte weiter so!
Junus du bist einfach der beste du erklärst das so gut das man es gleich versteht obwohl man nicht coden kann und es das erste mal macht ist es so einfach du machst die besten tutorials 🔝 darum ein like von meiner seite
Hallo Junus wirklich ein tolles Tutorial was du hier veröffentlich hast. Man kann alles gut verstehen und du erklärst es auch so einfach das ein 0815 User es verstehen kann. Tolles Tutorial weiter so und viel Erfolg in dein Unternehmen
Ich komme irgendwie nicht weiter. Ich habe bisher auch keine Ahnung vom programmieren und dachte mir ich fange mal mit diesem Video an. Jetzt stecke ich seit über einer Stunde bei 17:24 fest. Ich habe bis zu dem Punkt im Video alles exakt gleich gemacht. Ich habe sogar alles nochmal von vorne gemacht um sicher zu gehen. Dennoch egal wie oft ich abspeichere und die Seite neu lade, die Textbox bewegt sich nicht nach rechts. Wenn ich den ersten Wert (0px) ändere kann ich es nach oben/unten verschieben. Jedoch nicht den zweiten Wert (100px). Von links nach rechts geht also nicht. Und ich verstehe nicht wieso.. Das Tutorial ist auch schon über ein Jahr alt, hängt das damit zusammen? Muss man jetzt irgendwas anderes eingeben? Würde mich echt freuen wenn mir da jemand helfen kann.
Ein richtig gutes Tutorial! Nur fehlt mir in dem Video (auch wenn es nur ein kleines Tutorial ist) dass man Stylesheets NICHT im HTML Code Standardmäßig reinschreiben sollte, sondern immer in eine separate CSS Datei. Ansonsten verliert man bei komplexen Projekten schnell mal den Überblick und du musst andauernd in den HTML Code, auch wenn du nur etwas am "Style" ändern willst. Lg
@@Programmierenlernen Da es für Anfänger ist, denke ich auch, das man das besser weg lassen kann - denke da wird sicher noch was kommen, was HTML und CSS genauer beleuchtet - obwohl ich jetzt HTML und CSS eigentlich als sehr einfach empfinde zu lernen - Javascript und PHP finde ich da weit schwerer rein zu kommen - natürlich mit "Anleitung" wie hier ist das alles kein Problem - das aber dann auch bspw in MySQL Datenbanken einzupflegen für bspw Bewertungen / Gästebücher - das wäre für mich da schon weit interessanter, was Webseiten betrifft :).
Hab mich jetzt nach langer zeit mal dazu entschieden programmieren zu lernen und muss sagen das du einem das extrem einfach machst!! man kommt immer mit und ich für meinen teil habe schon einige kleine befehle selbst eingefügt die du erst ein paar sekunden später im video gezeigt hast :D also absolut top was du machst und ich werde mir auch deine andere TuTs anschauen!
1:23:53 müsste da nicht in der if bedingung stehen: rocket.x + rocket.width > ufo.x && rocket.y + rocket.height > ufo.y && rocket.x < ufo.x + ufo.width && rocket.y < ufo.y + ufo.height Weil so wie es im Video ist, ist die Kollision immer nur wenn man das Ufo oben Links trifft ansonsten fliegt das Ufo einfach durch die Rakete durch.
Gaanz großes Lob genau sowas habe ich gebraucht, keine großen Phylosophien über die Sprachen und deren Methoden usw. sondern direkt auf den Punkt gebracht mit schönen Beispielen. Könntest Du auch mal ein Tutorial machen wie man mit Hilfe von JavaScript Webseiten nach belieben für sich ändern kann in dem man das WebDevelobment von Chrome benutzt? Also aus der Iqueri Sachen heraus lesen, bestimmte Werte die auf der Seite dynamisch sind in Variablen ausgeben usw usw.? Das wäre mega. Es gibt doch auch Tempermonkey u. Greasemonkey damit könntest Du doch auch ein Tutorial machen oder?
Mich hat es gestört, dass immer das Häckchen schon gesetzt war, wenn man etwas eingegeben hat. Man will es ja erst abhaken, wenn es gemacht worden ist in der To-Do Liste. Hab durch den Code geguckt und bei "checked" am Ende des Codes in "unchecked" umgeschrieben. Scheint funktioniert zu haben. Dachte nicht, dass ich das lösen kann. :D
Vielen dank super erklärt! Ich finde es übertrieben, spannend zu sehen, wie genau die Zahnrädchen funktionieren und welches was genau macht. Mein Interesse und Neugier am Programmieren ist mit dem Video nur gestiegen. Wirklich nicer Einblick 😛😀
Hat echt Spaß gemacht, mit zu machen. Steh noch ganz am Anfang bei JS. Hab zwar mal nen HWK Abschluss gemacht, wo HTML, CSS und PHP vorkam, jedoch fehlte da natürlich der extreme Tiefgang, weil Web-Entwicklung ein Thema von vielen war... Muss die Tage doch mal schauen, ob ich mich auf deiner Website nicht doch mal anmelde, würde mir sicher nicht schaden. Hätte vor in Richtung Web Development zu gehen.
Kann mir jemand weiterhelfen ? Ich habe bis 31:46 alles genau nachgemacht. Allerdings speichert meine Liste nichts ab was ich oben ins Text Feld eingebe. Habe den Code jetzt schon unzählige Male verglichen und kann den Fehler nicht finden
zuerst vielen Dank fürs super erklärte Video. Gern hätte ich gewusst, woher du diese Zahlen für key-up,down and space. Ich würde mich auf andere Zahlen für solche keys freuen. : )
Hallo,hab eine Frage. Ich habe die codes vom Video genau nachgeschrieben aber bekomme keine reaktion. sowohl auf javascprit in sandbox oder jetzt hier auf VSC funktionieren die codes nicht. Ich bin mir aber sehr sicher , dass ich sie 1:1 nachgeschrieben habe . Hat jemand eine Idee woran das liegen könnte? Danke schonmal
Hey, habe auch gerade das selbe Problem gehabt aber dann herausgefunden, dass du nur F5 auf dem projeckt glicken muss. ( Die Nachricht kommt ein bisschen spät haha)
beim einstellen in der minute 16:41 den style zu verändern so das der text verschoben wird klappt bei mir nicht mach ich irgendwas falsch ich habe alles haargenau geschrieben .page-content { padding: 0px 100px; } funktioniert nicht
Hilfe Junus, bei der Stelle 1:02:29 wird bei mir nichts aktualisiert, weder der Hintergrund noch die Figur. Bei dem Schritt davor hat alles geklappt. Ich bekomme die Fehlermeldung: Uncaught DOMException: CanvasRenderingContext2D.drawImage: Passed-in image is "broken" game.html:83 Ich bedanke mich für die tollen Videos und wünsche dir alles Gute!
Hey super Video! Ich bin auch ein Quer- bzw. Neueinsteiger. Mit welchem Hotkey formatierst du das bei Minute 9:17 ? Sorry bin sehr unerfahren ^^' Hab ewig gesucht und es nicht gefunden =/
spacegame.html:74 Uncaught TypeError: gtx.draw is not a function at draw (spacegame.html:74) at startGame (spacegame.html:70) at onload (spacegame.html:91) steht bei mir kann es iwi nicht Fixen?😥
Ich hab echt kein Plan von coden und der Materie, schaue mir aber trotzdem gerne solche Videos an. Aber trotzdem Erinnert mich das Copy and Paste an Script Kiddy. Euch persönlich will ich mit keinster Weise angreifen! Ihr hab Ahnung und das Verständnis mit coden absolut. Ich hab wie gesagt keinerlei Ahnung von dem ganzen. 🙂
Das Video zum Spiel ist viel zu schnell und bisschen chaotisch für ein Anfänger, aber es macht unglaublich viel Spaß das zu programmieren und sofort die Effekte zu sehen. Bei mir musste ich alle endungen .png von Bildernamen löschen, weil sonst zeigt mir das die sind nicht gefunden, aber wenn habe ich die endungen .png gelöscht funktioniert alles wie es soll. Beim Todo Liste musste ich dasselbe mit Bildname machen.
Folgendes Problem: Bei funktion draw(){}, wurde gezeigt wie man die Bilder hinzufügen kann. Wir haben die ctx Zeilen übernommen (85-90 bei 1:02:10), jedoch werden die Bilder nicht geladen/ angezeigt. Wir haben wirklich keine Ahnung an was das liegen könnte. Hatte jemand ein ähnliches Problem oder kann uns jemand weiterhelfen? Falls jemand sich bereit erklärt uns zu helfen, hier der Code:
SpaceWar
canvas { background-color: rgba(0, 0, 0, 0.788);
}
let KEY_SPACE = false; let KEY_UP = false; let KEY_DOWN = false; let canvas; let ctx; let backgroundImage = new Image(); let rocket = { x: 100, y: 200, width: 200, height: 80, src: 'img/rocket.png' } let ufo = { x: 500, y: 200, width: 100, height: 40, src: 'img/ufo.png' } document.onkeydown - function(e) { console.log(e.keyCode); if (e.keyCode == 32){ KEY_SPACE = true; } if (e.keyCode == 38){ KEY_UP = true; } if (e.keyCode == 40){ KEY_DOWN = true; } } document.onkeyup - function(e) { if (e.keyCode == 32){ KEY_SPACE = false; } if (e.keyCode == 38){ KEY_UP = false; } if (e.keyCode == 40){ KEY_DOWN = false; } } function startGame(){ canvas = document.getElementById("canvas"); ctx = canvas.getContext('2d'); loadImage(); draw(); } function loadImages(){ backgroundImage.src = 'img/background.jpg' rocket.img = new Image(); rocket.img.src = rocket.src; ufo.img = new Image(); ufo.img.src = ufo.src; } function draw(){ ctx.drawImage(backgroundImage, 0, 0); ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height,); requestAnimationFrame(draw); }
weis nicht, ob das was zur Sache tut, aber du hast onkeyup und onkeydown geschrieben und ich habe onekeyup und onekeydown Denkst du, dass das egal ist, weil das eine eigendefinierte Funktion?
in der function StartGame hast du loadImage() und die function heißt aber loadImages. das "s" fehlt. Dadurch hat die function StartGame keine definierte function gefunden welche sie ausführen kann und so wird dann nichts angezeigt.
Danke für dieses Tutorial. Ich bin absoluter Anfänger. Ich denke es wird moch einige Zeit vergehen bis ich den Code begreife, weil,......... function meinGehirn() { code Raumschiffschlacht nachbauen = true; code Raumschiffschlacht ausführen = true; code Raumschiffkschlacht verstehen = false; }
@@velixo3338 ich glaub ich hab das selbe Problem wenn ich den code in web Browser einfügen habe ich nur ein weißes Bild, kein Text/Überschrift Trotz Überschrift ...
Hallo Junus, super Tutorial mit zügigem Tempo... Problem gibts aber bei der Todoliste: von da an wo die Liste in die Funktion kopiert / verschoben wird, gehts schief. Man sieht dass die Funktion bei betätigen des Buttons richtig ausgeführt wird, die angezeigte Liste aber nach einem Bruchteil von Sekunden wieder verschwindet. Hast du vieleicht davon auch den Code auf Github? Würde ev helfen die Ursache zu suchen. Ist Grad mein erster Gehversuch mit HTML CSS JS
Hallo Toby, danke für deinen Kommentar. In Minute 27:40 schreibe ich: versuche stattdessen mal zu schreiben. Das verhindert, dass die Seite neu geladen wird. LG Junus
@@Programmierenlernen Besten Dank, jetzt funktioniert das bei mir auch - hatte mich jetzt auch gewundert, das es sofort verschwand - nette Community - wo anscheinend andere das Problem auch hatten und hier sogar eine Lösung gebracht wird. Besten Dank :)
Sehr cooles Tutorial, sehr sehr cool erklärt! Vielen Dank! Eine Anmerkung: Wenn das Ufo die selbe y-Koordinate haben sollte wie die Rakete dann kollidieren sie nicht ;).
Das erste mal dass du erwähnst zu speichern ist bei 17:30 Ich hab ganz schön lange gebraucht um zu checken wieso es bei mir nicht funktioniert. Weil ich nie gespeichert habe :D
Perfect erklert, nur eine kleine Vorschlag, Bitte wenn möglich ist, nicht allen Coden in eine Feil, Html Css Js getrent, damit besser man kann verstehen.
Erst mal die ToDo Liste gebaut - gleich mal weiter machen mit dem Raketen Game :D - einfach Klasse - kann man schon viel mitnehmen. Snake hatte ich auch schon gecodet.
Also bis zum Ende des Tutorials hab ich es soweit geschafft - habe dann versucht den Schuss hinzubekommen - aber leider gescheitert - lag aber garnicht so falsch - obwohl ich es irgendwie bei fast richtiger Lösung doch zu kompliziert machen wollte. Aber bei mir bleibt leider der Schuss hinten in der Rakete stecken, hab jetzt sicher 20 mal den Code noch mal durch geguckt, aber den Fehler finde ich leider nicht ... wollte eigentlich wie bei Snake auch ein Game Over mit Neu Laden probieren, wenn man am Bildschirmrand hinaus fliegt - irgendwie habe ich da auch den falsches Gedankengang... Muss ich mir noch mal angucken...
Rocket Shot
canvas { background-color: black; }
let KEY_SPACE = false; // 32 let KEY_UP = false; // 38 let KEY_DOWN = false; // 40 let KEY_LEFT = false; // 37 let KEY_RIGHT = false; // 39 let canvas; let ctx; let backgroundImage = new Image(); let rocket = { x: 50, y: 200, width: 100, height: 60, src: 'img/rocket.png' }; let ufos = []; let shots = []; document.onkeydown = function(e) { if (e.keyCode == 32) { // Leertaste gedrückt KEY_SPACE = true; } if (e.keyCode == 37) { // Nach Links gedrückt KEY_LEFT = true; } if (e.keyCode == 38) { // Nach oben gedrückt KEY_UP = true; } if (e.keyCode == 39) { // Nach Rechts gedrückt KEY_RIGHT = true; } if (e.keyCode == 40) { // Nach unten gedrückt KEY_DOWN = true; } } document.onkeyup = function(e) { if (e.keyCode == 32) { // Leertaste losgelassen KEY_SPACE = false; } if (e.keyCode == 37) { // Nach Links losgelassen KEY_LEFT = false; } if (e.keyCode == 38) { // Nach oben losgelassen KEY_UP = false; } if (e.keyCode == 39) { // Nach Rechts losgelassen KEY_RIGHT = false; } if (e.keyCode == 40) { // Nach unten losgelassen KEY_DOWN = false; } } function startGame() { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); loadImages(); setInterval(update, 1000 / 25); setInterval(createUfos, 5000); setInterval(checkForCollision, 1000 / 25); setInterval(checkForShoot, 1000 / 10); draw(); // calculate } //function gameOver() { // if (rocket.x < 0 || // rocket.x > cols -1 || // rocket.y < 0 || // rocket.y > rows -1 // ) { // rocket = [ { // x: 50, // y: 200, // src: 'img/rocket.png' // }] // } //}
Vielen Dank für das Tutorial, es war sehr lehrreich und die Todo liste hat für mich gut geklappt 😀 Aber bei dem spiel ist bei mir immer ein Fehler dass "startGame()" nicht definiert ist (mehrmals), obwohl die Funktion eindeutig da stand... Ich habe den Windows Editor verwendet. Leider bin ich dabe nicht weitergekommen 😢 aber das Tutorial ist sehr gut! Und eine Frage, das ist nicht böse gemeint sondern konstruktiv, könntest du vielleicht einige Befehle die du schreibst etwas mehr erklären? Auch wenn nicht trotzdem danke für das Tutorial :)
ich habe das Problem, dass wenn ich mein Projekt in Chrome öffne immer nur eine weiße Seite angezeigt bekomme. Hat jemand vielleicht eine Idee was das Problem sein könnte?
Hallo, ich komme eigentlich aus dem Design-Bereich und möchte nun Programmieren mit JS lernen. Ich habe eine Frage zur Einbindung des Hintergrundes. Hätte ich das auch als CSS-Anweisung (background) im definieren können? Oder ist es zwigend notwendig, es als JS-Element / Variable zu definieren, wegen der draw()? Ich bin total begeistert von deinem Tutorial. Es ist auch für einen Programmier-Dummie wie mich nachvollziehbar.
Nachtrag zu 27:40
Statt
bitte
schreiben, damit die Seite nicht neu geladen wird.
Da ist uns beim Cutten ein Fehler passiert 😘
Vielen Dank für den Nachtrag, bin dort nicht weitergekommen.
Ansonsten super Beitrag.
OMG, Danke, dass du das noch geschrieben hast. Bin am Verzweifeln gewesen.
wäre vielleicht für andere noch die kurze info zu geben gewesen, das emmet installiert sein sollte wenn man das mit dem Autovervollständigen will. Ich kannte zwar in erster Linie nur Intellisence über VS, aber das lief nicht unter VSC zumindest nicht bei mir. Habs jetzt aber mit emmet hinbekommen.
oder in der funktion e.preventDefault(); und e als parameter
Kannst du mir helfen
Das ist das erste mal dass ich einem Tutorial oder einem Lehrer folgen kann. Wow... ich hoffe du bringst mehr Videos zu java Script raus , das ist wirklich der Hammer! Großes Kompliment 🙏🏼👌🏼
Von wo kannst du die ganze programmiersprachen weißt du alles auswendig
Ziemlich interessant. Hab mir mal trotz gute Kenntnisse in JS das Video mal angeschaut. Anschließend lese ich in Kommentaren oft sowas wie "sehr gutes Javascript-Tutorial" und stelle fest "Hm, irgendwie ist das kein richtiges JS-Tutorial.". Denn insgesamt zeigt dieses Video nur, wie man möglicherweise eine Anwendung schreibt, ohne dabei großartig Grundlagen des Javascripts zu benennen.
Natürlich lernt man auf diesem Weg am schnellsten. Denn ich habe selbst z.B. PHP fast ausschließlich nur über Videos gelernt "Wie schreibt man ein CMS via PHP?". Dabei habe ich alle wichtigen Details zur der Programmiersprache erfasst und konnte es auch für mich nutzen.
Hey. Ich arbeite gerade an einem Projekt für die Ausbildung. Dieses Video hat gerade gefühlt meine Welt verändert. Ich danke dir so sehr. Super easy erklärt und veranschaulicht. Besser hätte es wirklich kaum noch einer erklären können. Bitte mache gerne mehr davon.
Freut mich. Ich empfehle dir das Taschenrechner App-Tutorial auf diesem Kanal.
@@Programmierenlernen Danke. Ich werde es mir ansehen.
@@Programmierenlernen Kann mir jemand erklären warum trotz der Veränderung des Codes in vs code die Seite trotz neuladen immer gleich bleibt? Also so Ding wie Überschrift usw. Werden einfach nicht hinzugefügt.
@@NIB01 vielleicht hast du vergessen in vs code zu speichern? Also mit strg s
Aber kommt wahrscheinlich zu spät🥲
steht für unordered list und nicht für unsorted list, ergibt ja auch Sinn, wenn der Gegenpart ordered list heißt.
Ich kann mir keine Art und Weise vorstellen, wie man einem Beginner ein derart komplexes System noch effektiver nahebringen könnte. Und das in 90 Minuten. Du bewegst dich wirklich in der Königsklasse, mein Lieber.
Ich habe Junus und die Developer Akademie bereits kennengelernt. Und ich kann es einfach wärmstens weiterempfehlen.Niemand kann Code und Programmieren im praktischen Sinne so gut erklären wie Junus ! Einfach Hammer dieser Typ. LG Raphael aus Kärnten
Du bist der Beste Yunus. Dein Kopf funktioniert wie die Programmiersprachen an sich, ich glaube deshalb können die Leute dir so gut folgen. Kleinschrittig ist die beste Lehrmethode.
Aber im VSCode immer schön STRG S betätigen sonst funktioniert gar nichts. Ich hab mir schon mehrmals den Kopf zerbrochen warum etwas nicht funktioniert und hab dann nach ner viertel Stunde bemerkt, das ich nicht gespeichert hab. :)
Haha das hatte ich auch schon ein paar mal 😂
Danke, hab mich schon gewundert wieso nichts funktioniert xD
Ehrenmann nach genau 4 Stunden und 3 nachtlose Nächte hat dieses Kommentar nochmal den Hinweisen gegeben das ich behindert bin ich.
Auto Speicher addon
Eine Stunde lang bin ich verzweifelt 😅 vielen Dank !
Guten Tag!
Also mein Interesse am Programmieren ist schon sehr lange da und ich dachte mir nun das ich mit diesen Tutorials starte. Es war ein verdammt guter Einblick und ich werde auf jeden fall dran bleiben und mich durch die ganze Serie kämpfen.
Jedoch bin ich am ersten Code schon verzweifelt, an der To do Liste.
Der Kommentar
Von Programmieren lernen angepinnt
Programmieren lernen
vor 6 Monaten
Nachtrag zu 27:40
Statt
bitte
Hat mir das gerade gerettet. Es hat mich eine halbe Stunde gekostet da ich selbst in meinem Code einen Fehler gesucht habe.
Klasse Videos! Weiter so!
siehe meinen ersten Kommentar, der angepinnt ist. Aber so hast du zumindest schon debuggen gelernt ;-)
Ich habe das gleiche Problem. Nur wenn ich "" eingebe werden die eingefügten ListItems sichtbar. Bei einem einfachen "
@@dreamdancer8212hey, hast du evtl. das damals schon lösen können. Hab genau das selbe Problem. Hab auch den Nachtrag angepasst. Gestern ging noch alles und jetzt einen Tag später, als ich es mir erneut angeschaut habe, blitzt es nur kurz auf und verschwindet. Ich weis auch nicht wie genau ich danach googeln soll 🙈
Der bester auf UA-cam 👍🏼 informativ, konstruiert, verständlich ❤️
Moin, ich bin egtl. Java Dev aber habe lust am Webdesign bekommen. Ich hab mir das Tutorial komplett reingezogen und muss ehrlich sagen nach dem hab ich geschmunzelt und fands mega cool. Ich hab dann noch nen bisschen eigenes ausprobiert.
Vielen Dank für dieses Tolle Tutorial!!! Ihr macht sehr gute Erklärvideos! Weiter So!
Für mich als fortgeschrittener HTML-Coder war das super erklärt und ich war in weniger als einer Stunde durch. Vielen Dank.
Hä wie geht das, das Video dauert doch 90 Minuten...
@@matthiasgames2850 hä, indem man unnötig stellen einfach überspringt
Beste to-do-Liste ever! Die Sachen sind sofort nach dem Aufnehmen in die Liste abgehakt. So habe ich es mir immer gewünscht ;)
kannst den standard auch ändern
einfach in der Zeile
bei cecked, unchecked schreiben, dann sind die Kästchen nicht mehr abgehackt. Hat mich auch gestört ;)
Boah. Endlich.. Endlich jemand, der die Schritte von A-Z erklärt.. einfach Klasse:D
Sehr lehrreiches Video, ich kenne mich schon etwas mit JS aus, da ich in die HTL gehe und dieses Video hat mir sehr viel weitergeholfen, JS besser zu verstehen.👍 Bitte mach weiter solche Tutorials.
Hi Junus. Ich bin 13 Jahre alt und freue mich mega das so ein sympathischer und guter Kanal wie deiner existiert.
Ich hoffe ich werde wenn ich erwachsen bin einen Job als Softwareentwickler in New York bekomme.
Danke das du mir mein Ziel erleichterst.
Lg.
Wenn du jetzt schon an deine Traum arbeitest, wird er sich wahrscheinlich erfüllen wenn du bis dahin nicht aufgibst. Weiter so!
@@Programmierenlernen Ich werde nicht aufgeben. Danke dir!
@@user-yu1ktJa krass, so früh weißt du schon was du machen möchtest und kümmerst dich schon jetzt um die skills, kannst gerne wenn du das siehst schreiben wie der Plan bisher läuft, das ist echt spannend! LG Levin
Wenn man diesen Kanal mit anderen Programmierkanälen vergleicht, merkt man den Unterschied
enorm!!!
Bester Mann, hast mein Leben verändert.
Bitte öfters davon ❤️
Ich hab heute was gelernt und es ist nicht schwer Mathe zu verstehen wenn man sie direkt wie hier anwendet voll gut danke.
Seit meinen Basic-Programmen damals auf dem C64 mein erster Versuch, mich dem Thema coden erneut zu nähern.
Es hat super Spaß gemacht und erstaunlich gut funktioniert. Vielen Dank ;))
wattzz buzzin boomer????
Sehr verständlich und umfassend. Das ist wie das Pinguin beim Schlittschuh fahren lernen. Man stützt sich dran und lernt Fuß zu fassen. Vielen Dank.
Super Video. Ich habe mit Visual Basic mal angefangen und wollte mich an eine richtige Programmiersprache wagen, dafür ist dein Tutorital super geeignet. Sehr Einsteigerfreundlich mit Anleitung für die Software an sich + Erklärungen zum "warum" (z.B. warum wird das neue File "index.html" genannt?). Gerne mehr in von JAVA Script.
kommt bald
27:11 - großartig bisher. Gut erklärt und sehr sympatisch.
Perfekt erklärt, gar nicht langweilig wenn man auch nicht alles mitbekommt, also suuuuper! Motiviert noch mehr zu lernen und lernen 👍
Vielen Dank , dass du viel Mühe in denen videos gibst.
Bitte noch mehr Video über javascript veröffentlichen.
nächste Woche kommt wieder was ;-)
Bruder, es war mit Abstand das beste Tutorial aller Zeiten!
Finde das Video wie alle anderen wirklich toll und einfach erklärt. Das Coden macht mir sehr viel Spaß, so dass ich mir eine berufliche Weiterentwicklung vorstellen kann.
Hinweis: Wegen eines Updates von VSCode, geht der "!"-Zeichen-Shortcut nicht mehr so leicht zu bedienen. Ich habe ich für euch extra nochmal ein Video aufgenommen in dem ich erkläre, wie es auf jeden Fall klappt: www.loom.com/share/3787bc8f92af4e0d9e23c5afdc91ef85
doch geht noch super
Mein Gott... ich hab als blutiger Anfänger 4 Stunden damit verbracht über Google herauszufinden wie man diesen Tooltip aktiviert, weil es bei mir nicht wie in deinem Video war.
Und erst jetzt hab ich diesen Kommentar gefunden -.-
Vielen Dank für das sehr lehrreiche Video! Ich habe nun bisher nur 2 mal die Todoliste "nachgemacht" und werde es auch öfter tun, um grundsätzlich mal in den Flow zu kommen und das Verständnis mit der Logik dahinter zu verbinden. Die Erklärungen sind sehr verständlich und nachzuvollziehen. Der Nachtrag zu 27:40 war auch für mich erst beim 2.mal ersichtlich, aber wichtig. Nun funktioniert es einwandfrei. Bisher habe ich selbständig im Code nur, unter "function" das "checked" geändert, dass wenn man eine Todo eingibt, diese nicht direkt abgehakt ist. Dafür habe ich einfach statt "checked" - "notchecked" eingegeben und es funktioniert. Also man lernt in sehr kleinen Schritten. Meinen Abo hast du und bitte weiter so!
Sehr gut erklärtes Video, selbst für Anfänger gut verständlich. Und es bietet ein nettes Grundverständniss dafür wie man programiert. 1+
Junus du bist einfach der beste du erklärst das so gut das man es gleich versteht obwohl man nicht coden kann und es das erste mal macht ist es so einfach du machst die besten tutorials 🔝 darum ein like von meiner seite
Mega junus ich feier dein content danke
Hey Junus, Vielen lieben Dank. Folge Dir seit einiger Zeit und komme langsam voran. LG
Hallo Junus wirklich ein tolles Tutorial was du hier veröffentlich hast. Man kann alles gut verstehen und du erklärst es auch so einfach das ein 0815 User es verstehen kann.
Tolles Tutorial weiter so und viel Erfolg in dein Unternehmen
danke! Dein Kommentar ist mega nett und freut mich sehr, das zu lesen!
Ein sehr interessantes Video, herzlichen Dank dafür! Das hat meinen Horizont an einer Stelle erweitert.
Geiles Tutorial💪💪 War lange auf der Suche danach. Lasse dir einen Like und Abo da👍💯💪🍀. Mach weiter so
Super praxisgerecht. Ohne Ballast-Infos.
Dafür gibts ein hochverdientes Abo.
DANKE + RESPEKT !
Vielen Dank!
Ich komme irgendwie nicht weiter. Ich habe bisher auch keine Ahnung vom programmieren und dachte mir ich fange mal mit diesem Video an.
Jetzt stecke ich seit über einer Stunde bei 17:24 fest. Ich habe bis zu dem Punkt im Video alles exakt gleich gemacht. Ich habe sogar alles nochmal von vorne gemacht um sicher zu gehen. Dennoch egal wie oft ich abspeichere und die Seite neu lade, die Textbox bewegt sich nicht nach rechts. Wenn ich den ersten Wert (0px) ändere kann ich es nach oben/unten verschieben. Jedoch nicht den zweiten Wert (100px). Von links nach rechts geht also nicht. Und ich verstehe nicht wieso..
Das Tutorial ist auch schon über ein Jahr alt, hängt das damit zusammen? Muss man jetzt irgendwas anderes eingeben?
Würde mich echt freuen wenn mir da jemand helfen kann.
Vielen Dank das ist jetzt das erste mal das ich alles mit machen konnte leicht erklärt und es war leicht es zu verstehen und mit zu machen ;D
Unglaublich gut gemacht. Das Video und das Mitmachen haben sehr viel Spaß gemacht. Vielen Dank!
Vielen Dank!
Ich will Jetzt mit programmieren anfangen und dieses Tutorial ist das beste bis jetzt!
Du hast wirklich sehr gut erklärt.
danke!
Wirklich super erklärt, auch für absolute Laien.
danke für dieses tutorial habe nur ne stunde gebraucht um zu kapieren das ich vergessen habe zu speicher
Ein richtig gutes Tutorial! Nur fehlt mir in dem Video (auch wenn es nur ein kleines Tutorial ist) dass man Stylesheets NICHT im HTML Code Standardmäßig reinschreiben sollte, sondern immer in eine separate CSS Datei. Ansonsten verliert man bei komplexen Projekten schnell mal den Überblick und du musst andauernd in den HTML Code, auch wenn du nur etwas am "Style" ändern willst. Lg
true. Habe ich der Einfachheit halber weggelassen, aber hätte man noch reinbringen können.
@@Programmierenlernen
Da es für Anfänger ist, denke ich auch, das man das besser weg lassen kann - denke da wird sicher noch was kommen, was HTML und CSS genauer beleuchtet - obwohl ich jetzt HTML und CSS eigentlich als sehr einfach empfinde zu lernen - Javascript und PHP finde ich da weit schwerer rein zu kommen - natürlich mit "Anleitung" wie hier ist das alles kein Problem - das aber dann auch bspw in MySQL Datenbanken einzupflegen für bspw Bewertungen / Gästebücher - das wäre für mich da schon weit interessanter, was Webseiten betrifft :).
Hab mich jetzt nach langer zeit mal dazu entschieden programmieren zu lernen und muss sagen das du einem das extrem einfach machst!! man kommt immer mit und ich für meinen teil habe schon einige kleine befehle selbst eingefügt die du erst ein paar sekunden später im video gezeigt hast :D also absolut top was du machst und ich werde mir auch deine andere TuTs anschauen!
auch wegen open ai ?
1:23:53 müsste da nicht in der if bedingung stehen:
rocket.x + rocket.width > ufo.x &&
rocket.y + rocket.height > ufo.y &&
rocket.x < ufo.x + ufo.width &&
rocket.y < ufo.y + ufo.height
Weil so wie es im Video ist, ist die Kollision immer nur wenn man das Ufo oben Links trifft ansonsten fliegt das Ufo einfach durch die Rakete durch.
Danke, ist mir auch gerade aufgefallen. Also letztendlich die Abfragen spiegeln.
Danke nach dem Kommentar habe ich gesucht !
Ich bin leider erst jetzt auf deine Videos gestoßen. Du erklärst das echt gut. Deshalb habe ich gleich ein Abo und ein 👍 dagelassen.
geil auf sowas warte ich schon lange. grüße von deiner TT community ^^
Ja so ein gut erklärtes Video ist wirklich das einzige auf ganz gut UA-cam schade das es so wenig Aufrufe hat.
Geil. Danke dir. Erste mal gemacht und direkt das "Checked" in ein "Unchecked" geändert. Jetzt kann ich auch meine werte "Abhacken" HEHE. Danke
Gaanz großes Lob genau sowas habe ich gebraucht, keine großen Phylosophien über die Sprachen und deren Methoden usw. sondern direkt auf den Punkt gebracht mit schönen Beispielen. Könntest Du auch mal ein Tutorial machen wie man mit Hilfe von JavaScript Webseiten nach belieben für sich ändern kann in dem man das WebDevelobment von Chrome benutzt? Also aus der Iqueri Sachen heraus lesen, bestimmte Werte die auf der Seite dynamisch sind in Variablen ausgeben usw usw.? Das wäre mega.
Es gibt doch auch Tempermonkey u. Greasemonkey damit könntest Du doch auch ein Tutorial machen oder?
Mich hat es gestört, dass immer das Häckchen schon gesetzt war, wenn man etwas eingegeben hat. Man will es ja erst abhaken, wenn es gemacht worden ist in der To-Do Liste.
Hab durch den Code geguckt und bei
"checked" am Ende des Codes in "unchecked" umgeschrieben. Scheint funktioniert zu haben. Dachte nicht, dass ich das lösen kann. :D
Vielen dank super erklärt! Ich finde es übertrieben, spannend zu sehen, wie genau die Zahnrädchen funktionieren und welches was genau macht. Mein Interesse und Neugier am Programmieren ist mit dem Video nur gestiegen. Wirklich nicer Einblick 😛😀
Das freut mich sehr!
Hat echt Spaß gemacht, mit zu machen. Steh noch ganz am Anfang bei JS. Hab zwar mal nen HWK Abschluss gemacht, wo HTML, CSS und PHP vorkam, jedoch fehlte da natürlich der extreme Tiefgang, weil Web-Entwicklung ein Thema von vielen war...
Muss die Tage doch mal schauen, ob ich mich auf deiner Website nicht doch mal anmelde, würde mir sicher nicht schaden. Hätte vor in Richtung Web Development zu gehen.
Kann mir jemand weiterhelfen ? Ich habe bis 31:46 alles genau nachgemacht. Allerdings speichert meine Liste nichts ab was ich oben ins Text Feld eingebe.
Habe den Code jetzt schon unzählige Male verglichen und kann den Fehler nicht finden
zuerst vielen Dank fürs super erklärte Video. Gern hätte ich gewusst, woher du diese Zahlen für key-up,down and space. Ich würde mich auf andere Zahlen für solche keys freuen. : )
Hallo,hab eine Frage. Ich habe die codes vom Video genau nachgeschrieben aber bekomme keine reaktion. sowohl auf javascprit in sandbox oder jetzt hier auf VSC funktionieren die codes nicht. Ich bin mir aber sehr sicher , dass ich sie 1:1 nachgeschrieben habe . Hat jemand eine Idee woran das liegen könnte?
Danke schonmal
Ist bei mir auch so, gebe die codes 1:1 ein aber dir Seite bleibt weiß
@@Alexo.04 im visual studio Speichern und dann Aktualisieren :)
ich finde deine videos der hammer ich werde mit diesem video anfangen wo du dass erklärst damit ich coden lerne ,du erklärst dass soo gut ,hr lehrer..
hab den code von 8:02 1zu1 in meinem programm stehen aber im browser tut sich nichts.
Hey, habe auch gerade das selbe Problem gehabt aber dann herausgefunden, dass du nur F5 auf dem projeckt glicken muss. ( Die Nachricht kommt ein bisschen spät haha)
Du bist der bester! Komisch, dass du nur 15K followers hast
Oh danke
DANKE! Sehr hilfreich!
suche seit 12 std nach so einem video danke
beim einstellen in der minute 16:41 den style zu verändern so das der text verschoben wird
klappt bei mir nicht mach ich irgendwas falsch ich habe alles haargenau geschrieben
.page-content {
padding: 0px 100px; } funktioniert nicht
Same
Klappt bei mir auch net
Das vor muss weg
@@danielm.3622 boa Danke, habe gerade ewig den Fehler gesucht
bin gerade mal bei 30 min und hab schon so viele coole dinge gelernt. danke für das video :)
bei mir ändert sich auf der seite einfach nichts, ich geb alles zwischen body und body ein aber beim aktualisieren bleint trotzdem alles weiß
Speichern
bruder ich küss dein herz habibi. du bist meine rettung aus dem ghetto.
Hilfe Junus, bei der Stelle 1:02:29 wird bei mir nichts aktualisiert, weder der Hintergrund noch die Figur. Bei dem Schritt davor hat alles geklappt.
Ich bekomme die Fehlermeldung:
Uncaught DOMException: CanvasRenderingContext2D.drawImage: Passed-in image is "broken" game.html:83
Ich bedanke mich für die tollen Videos und wünsche dir alles Gute!
Bei uns auch, nur wir bekommen keine Fehlermeldung. Die Bilder werden anscheinend nicht geladen/angezeigt. Hast du inzwischen eine Lösung gefunden?
@@-vekzom7729 bei mir ist das auch so
Bei mir auch. Background wird geladen und der Rest nicht. Aber auch ohne Fehlermeldung
❤Vielen Lieben Dank! 🙏
Hey super Video!
Ich bin auch ein Quer- bzw. Neueinsteiger. Mit welchem Hotkey formatierst du das bei Minute 9:17 ?
Sorry bin sehr unerfahren ^^' Hab ewig gesucht und es nicht gefunden =/
Hab auch etwas gesucht. Ich denke es ist Shift + alt + F.
Gefunden im Reiter Help/Hilfe und dann Show All Commands -> Format Document.
@@Walkuerus vielen Dank für die Hilfe 👍
Du erinnerst mich an meine Mathelehrerin.
Sie erklärt das Thema genau so gut wie du
Bitte mach weitere solcher Videos, freier dich
danke das du das fürs uns machst und dich hinsetzt dafür mach weiter so!
spacegame.html:74 Uncaught TypeError: gtx.draw is not a function
at draw (spacegame.html:74)
at startGame (spacegame.html:70)
at onload (spacegame.html:91)
steht bei mir kann es iwi nicht Fixen?😥
ctx nicht gtx ;-)
Ich hab echt kein Plan von coden und der Materie, schaue mir aber trotzdem gerne solche Videos an. Aber trotzdem Erinnert mich das Copy and Paste an Script Kiddy. Euch persönlich will ich mit keinster Weise angreifen! Ihr hab Ahnung und das Verständnis mit coden absolut. Ich hab wie gesagt keinerlei Ahnung von dem ganzen. 🙂
was meinst du genau?
Wieso kommt bei mir kein Text? Habe beim Code alles gleich aber die Seite bleibt weiß. 😓
Ist bei mir auch so
@@LDB1921 Speichern und dann Aktualisieren
Speichern und dann Aktualisieren
@@puryamenzel5922 danke das hat geklappt
@@LDB1921 Sehr gerne. Das freut mich.
Das Video zum Spiel ist viel zu schnell und bisschen chaotisch für ein Anfänger, aber es macht unglaublich viel Spaß das zu programmieren und sofort die Effekte zu sehen. Bei mir musste ich alle endungen .png von Bildernamen löschen, weil sonst zeigt mir das die sind nicht gefunden, aber wenn habe ich die endungen .png gelöscht funktioniert alles wie es soll. Beim Todo Liste musste ich dasselbe mit Bildname machen.
Folgendes Problem: Bei funktion draw(){}, wurde gezeigt wie man die Bilder hinzufügen kann. Wir haben die ctx Zeilen übernommen (85-90 bei 1:02:10), jedoch werden die Bilder nicht geladen/ angezeigt. Wir haben wirklich keine Ahnung an was das liegen könnte. Hatte jemand ein ähnliches Problem oder kann uns jemand weiterhelfen?
Falls jemand sich bereit erklärt uns zu helfen, hier der Code:
SpaceWar
canvas {
background-color: rgba(0, 0, 0, 0.788);
}
let KEY_SPACE = false;
let KEY_UP = false;
let KEY_DOWN = false;
let canvas;
let ctx;
let backgroundImage = new Image();
let rocket = {
x: 100,
y: 200,
width: 200,
height: 80,
src: 'img/rocket.png'
}
let ufo = {
x: 500,
y: 200,
width: 100,
height: 40,
src: 'img/ufo.png'
}
document.onkeydown - function(e) {
console.log(e.keyCode);
if (e.keyCode == 32){
KEY_SPACE = true;
}
if (e.keyCode == 38){
KEY_UP = true;
}
if (e.keyCode == 40){
KEY_DOWN = true;
}
}
document.onkeyup - function(e) {
if (e.keyCode == 32){
KEY_SPACE = false;
}
if (e.keyCode == 38){
KEY_UP = false;
}
if (e.keyCode == 40){
KEY_DOWN = false;
}
}
function startGame(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
loadImage();
draw();
}
function loadImages(){
backgroundImage.src = 'img/background.jpg'
rocket.img = new Image();
rocket.img.src = rocket.src;
ufo.img = new Image();
ufo.img.src = ufo.src;
}
function draw(){
ctx.drawImage(backgroundImage, 0, 0);
ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height,);
requestAnimationFrame(draw);
}
bei mir ist das gleiche problem
weis nicht, ob das was zur Sache tut, aber du hast onkeyup und onkeydown geschrieben und ich habe onekeyup und onekeydown
Denkst du, dass das egal ist, weil das eine eigendefinierte Funktion?
in der function StartGame hast du loadImage() und die function heißt aber loadImages. das "s" fehlt. Dadurch hat die function StartGame keine definierte function gefunden welche sie ausführen kann und so wird dann nichts angezeigt.
@@IdiKing Bei mir auch..ich find den Fehler einfach nicht. Hier auch einmal meins:
Raumschiffschlacht
canvas {
background-color: rgba(0, 0, 0, 0.8);
}
let KEY_SPACE = false //32
let KEY_UP = false //38
let KEY_DOWN = false //40
let canvas;
let ctx;
let backgroundImage = new Image();
let rocket = {
x: 100,
y: 200,
width: 200,
height: 80,
scr: 'img/286673_rocket_icon.png'
};
let Ufo = {
x: 500,
y: 200,
width : 100,
height : 40,
scr : 'img/UFo.png'
};
document.onkeydown = function(e) {
console.log(e.keyCode);
if (e.keyCode == 32) { // Leertaste gedrückt
KEY_SPACE = true;
}
if (e.keyCode == 38) { // Leertaste nach oben gedrückt
KEY_UP = true;
}
if (e.keyCode == 40) { // Leertaste nach unten gedrückt
KEY_DOWN = true;
}
}
document.onkeyup = function(e) {
if (e.keyCode == 32) { // Leertaste losgelassen
KEY_SPACE = false;
}
if (e.keyCode == 38) { // Leertaste nach oben losgelassen
KEY_UP = false;
}
if (e.keyCode == 40) { // Leertaste nach unten losgelassen
KEY_DOWN = false;
}
function startGame (){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
loadImages();
draw();
// calculate
}
function loadImages(){
backgroundImage.src = 'img/Hintergrund.png';
rocket.img = new Image();
rocket.image.src = rocket.src;
ufo.img = new Image();
ufo.img.src = ufo.src;
}
function draw () {
ctx.drawImage(backgroundImage, 0, 0);
ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height);
requestAnimationFrame(draw);
}
}
@@askyourself4873 img Ordner in VS erstellt? War bei mir das Problem
Wow... du bist Perfekt!
Danke für dieses Tutorial. Ich bin absoluter Anfänger.
Ich denke es wird moch einige Zeit vergehen bis ich
den Code begreife, weil,.........
function meinGehirn() {
code Raumschiffschlacht nachbauen = true;
code Raumschiffschlacht ausführen = true;
code Raumschiffkschlacht verstehen = false;
}
der ist gut
Danke! Wirklich ein großartiges Beispiel. Ich habe viel gelernt!
wenn ich den button drücke reloaded sich meine seite was soll ich machen? hilfe bitte
Danke für das Tutorial!
Liebe Grüße und viel Programmierspaß,
TatthiMau
Sehr gerne 👍
pov: nach den ersten 8 min kommst du schon nicht mehr weiter
(ich brauche HILFE!!!)
Wo drückt der Schuh?
@@velixo3338 ich glaub ich hab das selbe Problem wenn ich den code in web Browser einfügen habe ich nur ein weißes Bild, kein Text/Überschrift
Trotz Überschrift
...
@@mirjamstoewe2431 same
@@mirjamstoewe2431 Hast du gespeichert? STRG + S
echt sehr gut didaktisch gemacht, danke!
Hallo Junus, super Tutorial mit zügigem Tempo... Problem gibts aber bei der Todoliste: von da an wo die Liste in die Funktion kopiert / verschoben wird, gehts schief. Man sieht dass die Funktion bei betätigen des Buttons richtig ausgeführt wird, die angezeigte Liste aber nach einem Bruchteil von Sekunden wieder verschwindet. Hast du vieleicht davon auch den Code auf Github? Würde ev helfen die Ursache zu suchen. Ist Grad mein erster Gehversuch mit HTML CSS JS
Ich habe genau das gleiche Problem, obwohl ich alles 1zu1 nachgemacht habe.
Hat vielleicht jemand eine Lösung?
Hallo Toby, danke für deinen Kommentar.
In Minute 27:40 schreibe ich:
versuche stattdessen mal
zu schreiben. Das verhindert, dass die Seite neu geladen wird.
LG Junus
@@Programmierenlernen Jetzt klappts! 1000 Dank für deine Mühe
@@Programmierenlernen
Besten Dank, jetzt funktioniert das bei mir auch - hatte mich jetzt auch gewundert, das es sofort verschwand - nette Community - wo anscheinend andere das Problem auch hatten und hier sogar eine Lösung gebracht wird. Besten Dank :)
Dankeschön, ich hatte genau das selbe Problem
Sehr cooles Tutorial, sehr sehr cool erklärt! Vielen Dank! Eine Anmerkung: Wenn das Ufo die selbe y-Koordinate haben sollte wie die Rakete dann kollidieren sie nicht ;).
wow keine dislikes
Das erste mal dass du erwähnst zu speichern ist bei 17:30
Ich hab ganz schön lange gebraucht um zu checken wieso es bei mir nicht funktioniert. Weil ich nie gespeichert habe :D
Perfect erklert, nur eine kleine Vorschlag, Bitte wenn möglich ist, nicht allen Coden in eine Feil, Html Css Js getrent, damit besser man kann verstehen.
Danke vielmals für deine Hilfe👍
Klasse Video. Ich hatte aber die ganze Zeit Sorge das ich noch Probleme kriegen würde weil ich Collision richtig geschrieben habe😂
Erst mal die ToDo Liste gebaut - gleich mal weiter machen mit dem Raketen Game :D - einfach Klasse - kann man schon viel mitnehmen. Snake hatte ich auch schon gecodet.
Also bis zum Ende des Tutorials hab ich es soweit geschafft - habe dann versucht den Schuss hinzubekommen - aber leider gescheitert - lag aber garnicht so falsch - obwohl ich es irgendwie bei fast richtiger Lösung doch zu kompliziert machen wollte. Aber bei mir bleibt leider der Schuss hinten in der Rakete stecken, hab jetzt sicher 20 mal den Code noch mal durch geguckt, aber den Fehler finde ich leider nicht ... wollte eigentlich wie bei Snake auch ein Game Over mit Neu Laden probieren, wenn man am Bildschirmrand hinaus fliegt - irgendwie habe ich da auch den falsches Gedankengang... Muss ich mir noch mal angucken...
Rocket Shot
canvas {
background-color: black;
}
let KEY_SPACE = false; // 32
let KEY_UP = false; // 38
let KEY_DOWN = false; // 40
let KEY_LEFT = false; // 37
let KEY_RIGHT = false; // 39
let canvas;
let ctx;
let backgroundImage = new Image();
let rocket = {
x: 50,
y: 200,
width: 100,
height: 60,
src: 'img/rocket.png'
};
let ufos = [];
let shots = [];
document.onkeydown = function(e) {
if (e.keyCode == 32) { // Leertaste gedrückt
KEY_SPACE = true;
}
if (e.keyCode == 37) { // Nach Links gedrückt
KEY_LEFT = true;
}
if (e.keyCode == 38) { // Nach oben gedrückt
KEY_UP = true;
}
if (e.keyCode == 39) { // Nach Rechts gedrückt
KEY_RIGHT = true;
}
if (e.keyCode == 40) { // Nach unten gedrückt
KEY_DOWN = true;
}
}
document.onkeyup = function(e) {
if (e.keyCode == 32) { // Leertaste losgelassen
KEY_SPACE = false;
}
if (e.keyCode == 37) { // Nach Links losgelassen
KEY_LEFT = false;
}
if (e.keyCode == 38) { // Nach oben losgelassen
KEY_UP = false;
}
if (e.keyCode == 39) { // Nach Rechts losgelassen
KEY_RIGHT = false;
}
if (e.keyCode == 40) { // Nach unten losgelassen
KEY_DOWN = false;
}
}
function startGame() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
loadImages();
setInterval(update, 1000 / 25);
setInterval(createUfos, 5000);
setInterval(checkForCollision, 1000 / 25);
setInterval(checkForShoot, 1000 / 10);
draw();
// calculate
}
//function gameOver() {
// if (rocket.x < 0 ||
// rocket.x > cols -1 ||
// rocket.y < 0 ||
// rocket.y > rows -1
// ) {
// rocket = [ {
// x: 50,
// y: 200,
// src: 'img/rocket.png'
// }]
// }
//}
function checkForCollision() {
ufos.forEach(function(ufo){
if(rocket.x + rocket.width > ufo.x &&
rocket.y + rocket.height > ufo.y &&
rocket.x < ufo.x &&
rocket.y < ufo.y + ufo.height
) {
rocket.img.src = 'img/boom.png';
console.log('Collision!!!');
ufos = ufos.filter(u => u != ufo);
}
shots.forEach(function(shot){
if(shot.x + shot.width > ufo.x &&
shot.y + shot.height > ufo.y &&
shot.x < ufo.x &&
shot.y < ufo.y + ufo.height
) {
ufo.hit = true;
ufo.img.src = 'img/boom.png';
console.log('Collision Shot!!!');
setTimeout(() => {
ufos = ufos.filter(u => u != ufo);
}, 2000);
}
});
});
}
function createUfos() {
let ufo = {
x: 800,
y: Math.random() *500,
width: 100,
height: 40,
src: 'img/ufo.png',
img: new Image()
};
ufo.img.src = ufo.src;
ufos.push(ufo);
}
function checkForShoot() {
if (KEY_SPACE) {
let shot = {
x: rocket.x +110,
y: rocket.y +22,
width: 20,
height: 4,
src: 'img/shoot.png',
img: new Image()
};
shot.img.src = shot.src;
shots.push(shot);
}
}
function update() {
// gameOver();
if (KEY_UP) {
rocket.y -= 4;
}
if (KEY_DOWN) {
rocket.y += 4;
}
if (KEY_LEFT) {
rocket.x -= 4;
}
if (KEY_RIGHT) {
rocket.x += 4;
}
ufos.forEach(function(ufo) {
if (!ufo.hit) {
ufo.x -=5;
}
});
shots.forEach(function(shot) {
shot.x +=15;
});
}
function loadImages() {
backgroundImage.src ='img/background.png';
rocket.img = new Image();
rocket.img.src = rocket.src;
}
function draw() {
ctx.drawImage(backgroundImage, 0, 0);
ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height);
ufos.forEach(function(ufo) {
ctx.drawImage(ufo.img, ufo.x, ufo.y, ufo.width, ufo.height);
});
shots.forEach(function(shot) {
ctx.drawImage(shot.img, rocket.x, rocket.y, shot.width, shot.height);
});
requestAnimationFrame(draw);
}
Vielen Dank für das Tutorial, es war sehr lehrreich und die Todo liste hat für mich gut geklappt 😀
Aber bei dem spiel ist bei mir immer ein Fehler dass "startGame()" nicht definiert ist (mehrmals), obwohl die Funktion eindeutig da stand... Ich habe den Windows Editor verwendet. Leider bin ich dabe nicht weitergekommen 😢 aber das Tutorial ist sehr gut!
Und eine Frage, das ist nicht böse gemeint sondern konstruktiv, könntest du vielleicht einige Befehle die du schreibst etwas mehr erklären? Auch wenn nicht trotzdem danke für das Tutorial :)
Echt sehr hilfreich bist der Beste YUNUS
Einfach klasse!
Ich fange an interessiert an diesem Dings zu sein.
danke für eure tollen Videos. TOP!!!
ich habe das Problem, dass wenn ich mein Projekt in Chrome öffne immer nur eine weiße Seite angezeigt bekomme. Hat jemand vielleicht eine Idee was das Problem sein könnte?
Hallo,
ich komme eigentlich aus dem Design-Bereich und möchte nun Programmieren mit JS lernen. Ich habe eine Frage zur Einbindung des Hintergrundes.
Hätte ich das auch als CSS-Anweisung (background) im definieren können? Oder ist es zwigend notwendig, es als JS-Element / Variable zu definieren, wegen der draw()?
Ich bin total begeistert von deinem Tutorial. Es ist auch für einen Programmier-Dummie wie mich nachvollziehbar.
Sehr cooles Video hat mir sehr geholfen!Danke!👍👍