Jump and Run Spiel mit JavaScript programmieren - Teil 1

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: https://youtube.com/playlist?list=PL1LHMFscti8uBdhvhRqIMBeX_4D-blFo6 📝 Demo & Quellcode ● Demo: https://jump-and-run-template.netlify.app/ ● Code: https://github.com/ScriptRaccoon/jump-and-run-template ⏱ 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_canvas.asp ● requestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame ● Super Mario in JavaScript von Meth Meth Method: https://www.youtube.com/playlist?list=PLS8HfBXv9ZWWe8zXrViYbIM2Hhylx8DZx ● Timer-Klasse von Meth Meth Method (Pong Game): https://www.youtube.com/watch?v=JZbSTMNVkjc ● Timer-Klasse von Meth Meth Method (Mario Game): https://www.youtube.com/watch?v=HlloFDayGgk 📺 Empfehlenswerte YouTube-Kanäle ● Kevin Powell: https://www.youtube.com/user/KepowOb ● Traversy Media: https://www.youtube.com/user/TechGuyWeb/ ● Meth Meth Method: https://www.youtube.com/channel/UC8A0M0eDttdB11MHxX58vXQ ● freeCodeCamp: https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ 💻 Verwendete Tools (Entwicklung) ● Visual Studio Code: https://code.visualstudio.com/ ● Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer ● Netlify: https://www.netlify.com/ 🎤 Verwendete Software (Aufnahme) ● OBS: https://obsproject.com/de ● Davinci Resolve 16: https://www.blackmagicdesign.com/de/products/davinciresolve/