Uploaded October 2022 | Updated September 2026, 1 week ago
4-directional keyboard controlled characters, animated 2D game worlds with randomised environmental elements, controlling FPS and draw order in a 2D game and wrapping all of that in object oriented code structure. In this series we discover mythical creatures of magical forest and I'm giving away a ton of high resolution game art assets, as usual. What do you think about this vector art style?
HTML canvas was developed as a replacement of Flash, it's a perfect environment to make games and animation projects. Today we will learn how to use HTML5, CSS3 and plain vanilla JavaScript to make the most of it's powerful capabilities. No frameworks and no libraries as usual. Have fun!
🐟Check out my EXTENDED game development class with BONUS lessons and more free sprite sheets: 4 new enemies, sound design, animated shield, animated projectiles and more udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2
🎨 Download Project Art assets 🎨
** All art assets for this class were made by me or by artists I hired, there is NO copyright, you can download and use these freely for any project you want! Click LIKE on the video if you want more free game art soon!
BASIC art asset pack (to follow along with this episode): frankslaboratory.co.uk/downloads/107/owlbear.zip
BONUS high resolution exports in PNG format (12MB): frankslaboratory.co.uk/downloads/107/bonus.zip
SOURCE files (.ai/.psd format) (21MB): frankslaboratory.co.uk/downloads/107/source.zip.
PNG exports are uncompressed, you can use a site like Tiny png to reduce the file size if needed.
If anything is missing or you want source files in a different format let me know in the comments.
Feel free to modify the shapes, colour shift to get different variations etc. Have fun!
Individual base art assets:
Background: frankslaboratory.co.uk/downloads/107/background.png
Background 2: frankslaboratory.co.uk/downloads/107/background2.png
Overlay: frankslaboratory.co.uk/downloads/107/overlay.png
Leaves left: frankslaboratory.co.uk/downloads/107/leaves_left.png
Leaves right: frankslaboratory.co.uk/downloads/107/leaves_right.png
Owlbear sprite sheet: frankslaboratory.co.uk/downloads/107/owlbear.png
Bush: frankslaboratory.co.uk/downloads/107/bush.png
Grass: frankslaboratory.co.uk/downloads/107/grass.png
Plant: frankslaboratory.co.uk/downloads/107/plant.png
☕ For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:
youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
⭐️Tutorial Contents ⭐️
00:00 Intro
00:43 Lesson 1: Project setup
02:19 Lesson 2: Enhancing game worlds with CSS
09:17 Lesson 3: JavaScript and HTML canvas setup
15:06 Lesson 4: Keyboard controls
22:34 Lesson 5: Player character
33:55 Lesson 6: Animating 4 directional sprite sheets
45:54 Lesson 7: How to control FPS
54:56 Lesson 8: Randomly positioned game objects
01:03:15 Lesson 9: Layering and draw order in 2D games
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
4-directional keyboard controlled characters, animated 2D game worlds with randomised environmental elements, controlling FPS and draw order in a 2D game and wrapping all of that in object oriented code structure. In this series we discover mythical creatures of magical forest and I'm giving away a ton of high resolution game art assets, as usual. What do you think about this vector art style?
HTML canvas was developed as a replacement of Flash, it's a perfect environment to make games and animation projects. Today we will learn how to use HTML5, CSS3 and plain vanilla JavaScript to make the most of it's powerful capabilities. No frameworks and no libraries as usual. Have fun!
🐟Check out my EXTENDED game development class with BONUS lessons and more free sprite sheets: 4 new enemies, sound design, animated shield, animated projectiles and more udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2
🎨 Download Project Art assets 🎨
** All art assets for this class were made by me or by artists I hired, there is NO copyright, you can download and use these freely for any project you want! Click LIKE on the video if you want more free game art soon!
BASIC art asset pack (to follow along with this episode): frankslaboratory.co.uk/downloads/107/owlbear.zip
BONUS high resolution exports in PNG format (12MB): frankslaboratory.co.uk/downloads/107/bonus.zip
SOURCE files (.ai/.psd format) (21MB): frankslaboratory.co.uk/downloads/107/source.zip.
PNG exports are uncompressed, you can use a site like Tiny png to reduce the file size if needed.
If anything is missing or you want source files in a different format let me know in the comments.
Feel free to modify the shapes, colour shift to get different variations etc. Have fun!
Individual base art assets:
Background: frankslaboratory.co.uk/downloads/107/background.png
Background 2: frankslaboratory.co.uk/downloads/107/background2.png
Overlay: frankslaboratory.co.uk/downloads/107/overlay.png
Leaves left: frankslaboratory.co.uk/downloads/107/leaves_left.png
Leaves right: frankslaboratory.co.uk/downloads/107/leaves_right.png
Owlbear sprite sheet: frankslaboratory.co.uk/downloads/107/owlbear.png
Bush: frankslaboratory.co.uk/downloads/107/bush.png
Grass: frankslaboratory.co.uk/downloads/107/grass.png
Plant: frankslaboratory.co.uk/downloads/107/plant.png
☕ For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:
youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
⭐️Tutorial Contents ⭐️
00:00 Intro
00:43 Lesson 1: Project setup
02:19 Lesson 2: Enhancing game worlds with CSS
09:17 Lesson 3: JavaScript and HTML canvas setup
15:06 Lesson 4: Keyboard controls
22:34 Lesson 5: Player character
33:55 Lesson 6: Animating 4 directional sprite sheets
45:54 Lesson 7: How to control FPS
54:56 Lesson 8: Randomly positioned game objects
01:03:15 Lesson 9: Layering and draw order in 2D games
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
