JavaScript 2D Game Tutorial

Опубликовано: 06 Октябрь 2024
на канале: Franks laboratory

39,296

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 https://www.udemy.com/course/learn-ga...

🎨 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): https://www.frankslaboratory.co.uk/do...
BONUS high resolution exports in PNG format (12MB): https://www.frankslaboratory.co.uk/do...
SOURCE files (.ai/.psd format) (21MB): https://www.frankslaboratory.co.uk/do....
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: https://www.frankslaboratory.co.uk/do...
Background 2: https://www.frankslaboratory.co.uk/do...
Overlay: https://www.frankslaboratory.co.uk/do...
Leaves left: https://www.frankslaboratory.co.uk/do...
Leaves right: https://www.frankslaboratory.co.uk/do...
Owlbear sprite sheet: https://www.frankslaboratory.co.uk/do...
Bush: https://www.frankslaboratory.co.uk/do...
Grass: https://www.frankslaboratory.co.uk/do...
Plant: https://www.frankslaboratory.co.uk/do...

☕ For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:
• JavaScript Game Development Mastercla...

⭐️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 / 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