JavaScript Tutorial für Anfänger: Lerne JavaScript in 90 Minuten (deutsch)
HTML-код
- Опубликовано: 31 май 2024
- Kostenloses Beratungsgespräch: weiterbildung.developerakadem...
In diesem JavaScript Tutorial lernst du die Grundlagen der Programmiersprache JavaScript in 90 Minuten kennen. Wir werden eine Todo-Liste und ein kleines Spiel entwickeln.
Wenn du JS lernen willst ist das hier der perfekte Start. Du wirst nach dem Video noch kein professioneller Programmierer sein, aber du wirst nach diesem deutschen JavaScript Tutorial deine ersten Programme schreiben können.
Fertiges Spiel spielen? junusergin.github.io/raketen-...
Quellcode: github.com/JunusErgin/raketen...
00:00 | Was du lernen wirst
02:38 | Installation
06:15 | To-do-Liste
37:22 | Dein erstes Spiel
01:29:28 | Ausblick
Tiktok: / 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 weiterbildung.developerakadem...
![Roddy Ricch - Survivors Remorse [Official Music Video]](http://i.ytimg.com/vi/J5IeFzr2GgE/mqdefault.jpg)
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
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 !
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
Ihr seid die besten.
Ich habe mich beworben, um eine Ausbildung bei euch zu machen.
Und ich habe am meisten durch eure Videos gelernt.
Ein ganz ganz starkes Lob an euch!!!
Perfekt erklärt, gar nicht langweilig wenn man auch nicht alles mitbekommt, also suuuuper! Motiviert noch mehr zu lernen und lernen 👍
Der bester auf RUclips 👍🏼 informativ, konstruiert, verständlich ❤️
steht für unordered list und nicht für unsorted list, ergibt ja auch Sinn, wenn der Gegenpart ordered list heißt.
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
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!
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.
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!
Bester Mann, hast mein Leben verändert.
Bitte öfters davon ❤️
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.
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.
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+
Ein sehr interessantes Video, herzlichen Dank dafür! Das hat meinen Horizont an einer Stelle erweitert.
Vielen Dank!
Ich will Jetzt mit programmieren anfangen und dieses Tutorial ist das beste bis jetzt!
Du hast wirklich sehr gut erklärt.
danke!
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🥲
Geiles Tutorial💪💪 War lange auf der Suche danach. Lasse dir einen Like und Abo da👍💯💪🍀. Mach weiter so
Hey Junus, Vielen lieben Dank. Folge Dir seit einiger Zeit und komme langsam voran. LG
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 ;-)
27:11 - großartig bisher. Gut erklärt und sehr sympatisch.
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
Ich hab heute was gelernt und es ist nicht schwer Mathe zu verstehen wenn man sie direkt wie hier anwendet voll gut danke.
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.
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
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!
Super praxisgerecht. Ohne Ballast-Infos.
Dafür gibts ein hochverdientes Abo.
DANKE + RESPEKT !
Vielen Dank!
Boah. Endlich.. Endlich jemand, der die Schritte von A-Z erklärt.. einfach Klasse:D
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????
Unglaublich gut gemacht. Das Video und das Mitmachen haben sehr viel Spaß gemacht. Vielen Dank!
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 ?
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.
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.
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 🙈
Danke! Wirklich ein großartiges Beispiel. Ich habe viel gelernt!
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..
Mega junus ich feier dein content danke
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 ;)
bin gerade mal bei 30 min und hab schon so viele coole dinge gelernt. danke für das video :)
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
Wirklich super erklärt, auch für absolute Laien.
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 -.-
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.
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
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 RUclips schade das es so wenig Aufrufe hat.
Hey bin 14 Jahre un habe schon eigene 8-bit Prozessoren gebaut und lerne gerade Programmieren aber glaube bevor ich Python lerne lerne ich HTML,CSS und jv in muss sagen deine Videos haben mir schon so viel geholfen da ist unfassbar
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 ;).
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!
Bruder, es war mit Abstand das beste Tutorial aller Zeiten!
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.
Wenn man diesen Kanal mit anderen Programmierkanälen vergleicht, merkt man den Unterschied
enorm!!!
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 :)
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?
danke das du das fürs uns machst und dich hinsetzt dafür mach weiter so!
Sehr cooles Video hat mir sehr geholfen!Danke!👍👍
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 :).
DANKE! Sehr hilfreich!
Du erinnerst mich an meine Mathelehrerin.
Sie erklärt das Thema genau so gut wie du
danke für eure tollen Videos. TOP!!!
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
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
Sehr geil! Danke dafür. 🙂
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.
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
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.
Du hast Recht
Danke, ist mir auch gerade aufgefallen. Also letztendlich die Abfragen spiegeln.
Danke nach dem Kommentar habe ich gesucht !
Wow…Feier deine Tutorials mega! Wollte fragen ob du mal Tutorials zum Coden von Discord Bots machen kannst.
LG :)
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);
}
Bitte mach weitere solcher Videos, freier dich
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 ;-)
Genial, vielen Dank dafür!
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?
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 👍
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
Einfach klasse!
Hat mir sehr geholfen dankeschön😘
wenn ich den button drücke reloaded sich meine seite was soll ich machen? hilfe bitte
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
Echt toller Content! Gleich Abonniert ;)
sehr hilfreich und verständlich 👍👍
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
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
Echt sehr hilfreich bist der Beste YUNUS
Die Beispiele sind genial...
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.
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
Danke vielmals für deine Hilfe👍
bei mir ändert sich auf der seite einfach nichts, ich geb alles zwischen body und body ein aber beim aktualisieren bleint trotzdem alles weiß
wow keine dislikes
Klasse Video. Ich hatte aber die ganze Zeit Sorge das ich noch Probleme kriegen würde weil ich Collision richtig geschrieben habe😂
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
Danke. Tolles Video. :)
Wow... du bist Perfekt!
Mega bitte mehr davon
Du bist der bester! Komisch, dass du nur 15K followers hast
Oh danke
danke diggi, sehr nices video
Top Videos 🔝 weiter so 💪
danke für dieses tutorial habe nur ne stunde gebraucht um zu kapieren das ich vergessen habe zu speicher
Danke @Reliefpfeiler, hat mir sehr geholfen.
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.