JavaScript Game Tutorial with HTML Canvas

Make your own 2D adventures with HTML, CSS & plain vanilla JavaScript, no frameworks and no libraries! Anything can be built with code and every time you code along with a project like this, you get one step closer to mastering front-end web development and when you get there the only limit is your imagination. Let me show you how I approach building this fast paced side scroller game and let's help our super dog character to find it's way out of the dark forest. I will build everything from scratch and explain every line of code as we go along. Have fun ! :D

Part 1:    • JavaScript Game Tutorial with HTML Canvas   Animating player (this video)
Part 2:    • JavaScript Game Tutorial - Advanced Techni...   State management and parallax backgrounds
Part 3:    • JavaScript Game Tutorial - Many Different ...   Enemy types
Part 4 :    • JavaScript Game Tutorial - Particles & Int...   Collisions & Particles
Part 5 :    • JavaScript Game Tutorial - Final Polish   Win & Lose Conditions, Timer, Clean up
Part 6:    • JavaScript Game Tutorial - Bonus Features   Bonus features

🎮 FULL SERIES:🎮    • JavaScript Game Development Masterclass 2022  

❤ 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...
Backgrounds:
Layer 1: https://www.frankslaboratory.co.uk/do...
Layer 2: https://www.frankslaboratory.co.uk/do...
Layer 3: https://www.frankslaboratory.co.uk/do...
Layer 4: https://www.frankslaboratory.co.uk/do...
Layer 5: https://www.frankslaboratory.co.uk/do...

⭐️Tutorial Contents ⭐️
00:00 Course overview & final project previews
00:53 How to set up a local server
02:10 HTML & CSS setup
03:54 How to set up HTML5 canvas with JavaScript
05:28 Game and Player class
08:49 How to export and import native JavaScript modules
11:09 Animation loop
12:47 Sprite sheets and drawImage canvas method
14:39 Animating movement on HTML canvas
15:38 Capture multiple key presses
20:28 Make player react to inputs
23:05 Simple way to handle jumping in a 2D game

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

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