Parallax in JavaScript Games

What is the easiest way to create endlessly scrolling backgrounds with JavaScript? How to make different layers move at different speeds and create parallax effect? How to make our scroll speed dynamic so that we can easily change it? We will learn all of that and more. Let's build JavaScript game for beginners together! FULL SERIES PLAYLIST: (3 games and 6 small projects to learn 2D GAMEDEV)    • JavaScript Game Development Masterclass 2022   Parallax scrolling is when background images move past the camera slower than the foreground, creating an illusion of depth in a 2D space. In this step by step tutorial for beginners, I will show how to implement parallax into your JavaScript games, using HTML canvas element. Have fun! :) ⭐️TABLE OF CONTENT ⭐️ 00:00 Course Introduction and basic HTML/CSS setup 02:42 How to set up HTML5 canvas project with JavaScript 04:36 How to bring images into HTML5 canvas project 07:21 How to animate on canvas 11:00 Endlessly scrolling backgrounds technique 1 18:01 Background layers with JavaScript ES6 classes 30:49 User input with event listeners 35:01 Endlessly scrolling backgrounds technique 2 42:14 Optimisations By the end of this JavaScript game development tutorial for beginners, you will have deep understanding about endlessly scrolling backgrounds and how to add parallax effect to your games and websites. We won't use any libraries, just HTML5 canvas, a little bit of CSS3 and plain vanilla JavaScript. 🔥 Recommended UDEMY courses 🔥 ☕ Demystifying Parallax: Learn to Create Interactive Web Pages https://bit.ly/3uueECP ☕ Website Development Build single Page Website Parallax site https://bit.ly/3uueDyL ☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid https://bit.ly/3tu9ghD ☕ Level Up Your CSS Animation Skills https://bit.ly/3esJkP8 ☕ Learn Professional 2D Game Graphic Design in Photoshop https://bit.ly/2SpPdE8 ☕ The Ultimate 2D Game Character Design & Animation Course https://bit.ly/3eoZWqT ☕ Produce Professional Pixel Art for Your New Game https://bit.ly/3nUrTKm ❤ Related Links ❤ Art by https://bevouliin.com/ Project images: All layers zip: http://frankslaboratory.co.uk/downloa... Layer 1: http://frankslaboratory.co.uk/downloa... Layer 2: http://frankslaboratory.co.uk/downloa... Layer 3: http://frankslaboratory.co.uk/downloa... Layer 4: http://frankslaboratory.co.uk/downloa... Layer 5: http://frankslaboratory.co.uk/downloa... Backup links: Layer 1 https://ibb.co/qs87t6x Layer 2 https://ibb.co/0yYGJzF Layer 3 https://ibb.co/F3870v3 Layer 4 https://ibb.co/WFXS3sY Layer 5 https://ibb.co/BTpQvgJ (*** you can use these background images for learning purposes. For commercial projects you can purchase it directly from the artists. To see the full selection of available GAME DEVELOPMENT ART ASSETS, please visit https://bevouliin.com/ ***) 🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮 🐶 Project 1: Sprite animation    • Sprite Animation in JavaScript   🐶 Project 2: ** this video ** 🐶 Project 3: NPC movement    • How To Code Flying Creatures with JavaScript   🐶 Project 4: Rectangle collision    • Collision Detection Between Rectangles in ...   🐶 Project 5: Circle collision    • Collision Detection Between Circles in Jav...   🐶 Project 6: Triggered event based animations    • Audio Visual Effects in JavaScript Games   🐶 Project 7: Raven game    • JavaScript Shooter Game Tutorial   🐶 Project 8: Enemy types    • How To Code Creatures For JavaScript Games   🐶 Project 9: State Management    • State Management in Games   🐶 Project 10: Easy Side-Scroller Game    • JavaScript Side Scroller Game Tutorial   🎮 More GAME DEVELOPMENT with vanilla JavaScript and HTML canvas:    • Game Development with Vanilla JavaScript   If you are a BEGINNER you can still create beautiful animations, here is a selection of my beginner friendly projects, where I go slower and take time to explain things:    • Front End Web Development Projects for Beg...   If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:    • Creative Coding with Vanilla JavaScript an...   👍 You can message me on TWITTER   / code_laboratory   👍 Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support! #frankslaboratory