JavaScript Side Scroller Game Tutorial

Published: 21 January 2022
on channel: Franks laboratory

181,367

3.1k

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

On this page of the site you can watch the video online JavaScript Side Scroller Game Tutorial with a duration of 47 minute 16 second in good quality, which was uploaded by the user Franks laboratory 21 January 2022, share the link with friends and acquaintances, this video has already been watched 181,367 times on youtube and it was liked by 3.1 thousand viewers. Enjoy your viewing!

13,912

323