Uploaded April 2022 | Updated September 2026, 1 week ago
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: youtu.be/c-1dBd1_G8A Animating player (this video)
Part 2: youtu.be/ug-gdfGb7I8 State management and parallax backgrounds
Part 3: youtu.be/lqNztI7BMf8 Enemy types
Part 4 : youtu.be/6ppfyWdoH3c Collisions & Particles
Part 5 : youtu.be/KICADKr_zeM Win & Lose Conditions, Timer, Clean up
Part 6: youtu.be/tWS_eURr2_w Bonus features
🎮 FULL SERIES:🎮 youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
❤ Related Links ❤
Art by bevouliin.com check out their website for more game art assets!
Download project sprite sheets:
🐕 Player: frankslaboratory.co.uk/downloads/97/player.png
Backgrounds:
Layer 1: frankslaboratory.co.uk/downloads/97/layer-1.png
Layer 2: frankslaboratory.co.uk/downloads/97/layer-2.png
Layer 3: frankslaboratory.co.uk/downloads/97/layer-3.png
Layer 4: frankslaboratory.co.uk/downloads/97/layer-4.png
Layer 5: frankslaboratory.co.uk/downloads/97/layer-5.png
⭐️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 twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN 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
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: youtu.be/c-1dBd1_G8A Animating player (this video)
Part 2: youtu.be/ug-gdfGb7I8 State management and parallax backgrounds
Part 3: youtu.be/lqNztI7BMf8 Enemy types
Part 4 : youtu.be/6ppfyWdoH3c Collisions & Particles
Part 5 : youtu.be/KICADKr_zeM Win & Lose Conditions, Timer, Clean up
Part 6: youtu.be/tWS_eURr2_w Bonus features
🎮 FULL SERIES:🎮 youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
❤ Related Links ❤
Art by bevouliin.com check out their website for more game art assets!
Download project sprite sheets:
🐕 Player: frankslaboratory.co.uk/downloads/97/player.png
Backgrounds:
Layer 1: frankslaboratory.co.uk/downloads/97/layer-1.png
Layer 2: frankslaboratory.co.uk/downloads/97/layer-2.png
Layer 3: frankslaboratory.co.uk/downloads/97/layer-3.png
Layer 4: frankslaboratory.co.uk/downloads/97/layer-4.png
Layer 5: frankslaboratory.co.uk/downloads/97/layer-5.png
⭐️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 twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN 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
