JavaScript Side Scroller Game Tutorial

YOUR LINK HERE:

http://youtube.com/watch?v=7JtLHJbm0kA

Let's learn how to build a side-scroller game from start to finish with animated sprites, endlessly scrolling backgrounds and a simple scoring system. We will use just plain vanilla JavaScript, HTML CSS, no frameworks and no libraries. Have fun! For more standalone game development tutorials, check the full series below. • PART 2: Turn it into a 📱 MOBILE 📱 game • Make a Mobile Game with JavaScript • ❤ Related Links ❤ • Art by https://bevouliin.com/ check out their website for more game art assets! • Download project sprite sheets: • 🐕 Player: http://frankslaboratory.co.uk/downloa... • 🌳 Background: http://frankslaboratory.co.uk/downloa... • 🦇 Enemy: http://frankslaboratory.co.uk/downloa... • Backup links: • Background https://ibb.co/jrpX7BY • Enemy https://ibb.co/FxFC9mF • Player https://ibb.co/z51dQS0 • 🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮 • 🐶 Project 1: Sprite animation • Sprite Animation in JavaScript • 🐶 Project 2: Parallax backgrounds • Parallax in JavaScript Games • 🐶 Project 3: NPC movement • How To Code Flying Creatures with Jav... • 🐶 Project 4: Rectangle collision • Collision Detection Between Rectangle... • 🐶 Project 5: Circle collision • Collision Detection Between Circles i... • 🐶 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 ... • 🐶 Project 9: State Management • State Management in Games • 🐶 Project 10: this video • 🔥 I really like these courses on Udemy 🔥 • ☕ The Web Developer Bootcamp (Colt Steele, 2022 update) https://bit.ly/2ZZJM0d • ☕ JavaScript Basics for Beginners https://bit.ly/32Tn5wq • ☕ Object-oriented Programming in JavaScript https://bit.ly/3f4Otu0 • ☕ The Complete JavaScript Course 2022: From Zero to Expert! https://bit.ly/3fXGwaZ • ☕ JavaScript - The Complete Guide 2022 (Beginner + Advanced) https://bit.ly/37Hlxqq • ☕ JavaScript: The Advanced Concepts (2022) https://bit.ly/2Uk6Wyk • ☕ JavaScript: Understanding the Weird Parts https://bit.ly/2WVe0zn • ☕ Modern HTML CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch • ☕ 20 Web Projects With Vanilla JavaScript https://bit.ly/3anlCQR • GAMEDEV and GAME ART: • ☕ How to Program Games: Tile Classics in JS for HTML5 Canvas https://bit.ly/2ZUfKuG • ☕ 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 • My FREE courses on UDEMY: • ☕ HTML Canvas Crash Course https://bit.ly/3y8yAgz • ☕ Sprite Animation Deep Dive https://bit.ly/2Q9BG2K • ⭐️Tutorial Contents ⭐️ • 00:00 What we will learn today • 01:23 HTML and CSS setup • 02:21 JavaScript setup • 03:30 Project structure • 04:47 How to handle multiple keyboard inputs • 10:33 Drawing player • 13:23 drawImage method explained • 15:18 Player movement • 17:26 Jumping • 21:25 Scrolling backgrounds • 24:47 Enemy class • 26:50 Triggering periodic events • 32:39 Sprite animation with custom FPS • 37:57 Removing objects with filter method • 39:10 How to display score • 40:31 Collision detection in a 2D game • 43:55 Handle game over • 44:52 Cleaning up • Let's be friends • 👍 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) Dub Hub - Jimmy Fontanez Media Right Productions • 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

#############################

New on site