Jump and Run Spiel mit JavaScript programmieren - Teil 1

Опубликовано: 28 Март 2026
на канале: Script Raccoon

15,248

300

In diesem #Tutorial entwickeln wir mit #JavaScript eine Vorlage für ein #JumpandRun Spiel. Ziel von Teil 1 ist es, eine bewegliche Box (mit Geschwindigkeit, Beschleunigung und Reibung) darzustellen. 🏃

Hinweis (weil dazu viele Fragen kommen): Zum Öffnen der HTML braucht ihr, wie im Tutorial erklärt, die Visual Studio Code Erweiterung "Live Server", weil ich hier JavaScript-Module verwende. Das Öffnen der HTML aus dem Dateisystem heraus funktioniert nicht.

🎬 Playlist zur Reihe:    • Jump and Run Spiel Tutorial

📝 Demo & Quellcode
● Demo: https://jump-and-run-template.netlify...
● Code: https://github.com/ScriptRaccoon/jump...

⏱ Zeitmarken
● Vorstellung: 00:00
● HTML und CSS: 01:23
● Beginn vom JavaScript: 04:08
● Rechteck-Klasse: 05:30
● Kollision von Rechtecken: 11:00
● Box-Klasse: 15:38
● Manuelle Animation: 21:07
● Timer-Klasse: 23:17
● Levelgrenzen: 31:37
● Zusammenfassung: 35:18
● Reibung: 35:51

📙 Quellen
● HTML Canvas: https://www.w3schools.com/html/html5_...
● requestAnimationFrame: https://developer.mozilla.org/en-US/d...
● Super Mario in JavaScript von Meth Meth Method:    • Super Mario Bros in JavaScript
● Timer-Klasse von Meth Meth Method (Pong Game):    • Writing a Proper Game Timing Mechanism in ...
● Timer-Klasse von Meth Meth Method (Mario Game):    • Code Super Mario in JS (Ep 3) - Timing Acc...

📺 Empfehlenswerte YouTube-Kanäle
● Kevin Powell:    / kepowob
● Traversy Media:    / techguyweb
● Meth Meth Method:    / @meth-method
● freeCodeCamp:    / @freecodecamp

💻 Verwendete Tools (Entwicklung)
● Visual Studio Code: https://code.visualstudio.com/
● Live Server: https://marketplace.visualstudio.com/...
● Netlify: https://www.netlify.com/

🎤 Verwendete Software (Aufnahme)
● OBS: https://obsproject.com/de
● Davinci Resolve 16: https://www.blackmagicdesign.com/de/p...