JavaScript Side Scroller Game Tutorial

Описание: 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 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: 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